Skip to content

docs: replace Lit renderers with slots in dialog examples #5826

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
web-padawan merged 1 commit into from
Jul 21, 2026
Merged

docs: replace Lit renderers with slots in dialog examples #5826

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
26 changes: 10 additions & 16 deletions frontend/demo/component/dialog/dialog-basic.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import '@vaadin/form-layout';
import '@vaadin/text-field';
import { css, html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { dialogFooterRenderer, dialogRenderer } from '@vaadin/dialog/lit.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('dialog-basic')
Expand Down Expand Up @@ -42,9 +41,16 @@ export class Example extends LitElement {
@closed="${() => {
this.dialogOpened = false;
}}"
${dialogRenderer(this.renderDialog, [])}
${dialogFooterRenderer(this.renderFooter, [])}
></vaadin-dialog>
>
<vaadin-form-layout auto-responsive column-width="18rem" expand-fields>
<vaadin-text-field label="First name"></vaadin-text-field>
<vaadin-text-field label="Last name"></vaadin-text-field>
</vaadin-form-layout>
<div slot="footer">
<vaadin-button @click="${this.close}">Cancel</vaadin-button>
<vaadin-button theme="primary" @click="${this.close}">Add</vaadin-button>
</div>
</vaadin-dialog>

<vaadin-button
@click="${() => {
Expand All @@ -57,18 +63,6 @@ export class Example extends LitElement {
`;
}

private renderDialog = () => html`
<vaadin-form-layout auto-responsive column-width="18rem" expand-fields>
<vaadin-text-field label="First name"></vaadin-text-field>
<vaadin-text-field label="Last name"></vaadin-text-field>
</vaadin-form-layout>
`;

private renderFooter = () => html`
<vaadin-button @click="${this.close}">Cancel</vaadin-button>
<vaadin-button theme="primary" @click="${this.close}">Add</vaadin-button>
`;

private close() {
this.dialogOpened = false;
}
Expand Down
24 changes: 9 additions & 15 deletions frontend/demo/component/dialog/dialog-closing.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import '@vaadin/button';
import '@vaadin/dialog';
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { dialogFooterRenderer, dialogRenderer } from '@vaadin/dialog/lit.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('dialog-closing')
Expand All @@ -26,20 +25,15 @@ export class Example extends LitElement {
@closed="${() => {
this.dialogOpened = false;
}}"
${dialogRenderer(
() => html`
<p style="max-width: 300px">
System maintenance will begin at 3 PM. It is schedule to conclude at 5PM. We apologise
for any inconvenience.
</p>
`,
[]
)}
${dialogFooterRenderer(
() => html`<vaadin-button @click="${this.close}">Close</vaadin-button>`,
[]
)}
></vaadin-dialog>
>
<p style="max-width: 300px">
System maintenance will begin at 3 PM. It is schedule to conclude at 5PM. We apologise for
any inconvenience.
</p>
<div slot="footer">
<vaadin-button @click="${this.close}">Close</vaadin-button>
</div>
</vaadin-dialog>
<!-- end::snippet[] -->

<vaadin-button @click="${this.open}">Show dialog</vaadin-button>
Expand Down
47 changes: 18 additions & 29 deletions frontend/demo/component/dialog/dialog-draggable.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ import '@vaadin/text-area';
import '@vaadin/text-field';
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { dialogFooterRenderer, dialogHeaderRenderer, dialogRenderer } from '@vaadin/dialog/lit.js';
import { applyTheme } from 'Frontend/demo/theme';

@customElement('dialog-draggable')
Expand All @@ -31,34 +30,24 @@ export class Example extends LitElement {
@closed="${() => {
this.dialogOpened = false;
}}"
${dialogHeaderRenderer(
() => html`
<h2
class="draggable"
style="flex: 1; cursor: move; margin: 0; font-size: 1.5em; font-weight: bold; padding: var(--vaadin-gap-m) 0;"
>
Add note
</h2>
`,
[]
)}
${dialogRenderer(
() => html`
<vaadin-form-layout auto-responsive column-width="18rem" expand-fields>
<vaadin-text-field label="Title"></vaadin-text-field>
<vaadin-text-area label="Description"></vaadin-text-area>
</vaadin-form-layout>
`,
[]
)}
${dialogFooterRenderer(
() => html`
<vaadin-button @click="${this.close}">Cancel</vaadin-button>
<vaadin-button theme="primary" @click="${this.close}">Add note</vaadin-button>
`,
[]
)}
></vaadin-dialog>
>
<div slot="header-content">
<h2
class="draggable"
style="flex: 1; cursor: move; margin: 0; font-size: 1.5em; font-weight: bold; padding: var(--vaadin-gap-m) 0;"
>
Add note
</h2>
</div>
<vaadin-form-layout auto-responsive column-width="18rem" expand-fields>
<vaadin-text-field label="Title"></vaadin-text-field>
<vaadin-text-area label="Description"></vaadin-text-area>
</vaadin-form-layout>
<div slot="footer">
<vaadin-button @click="${this.close}">Cancel</vaadin-button>
<vaadin-button theme="primary" @click="${this.close}">Add note</vaadin-button>
</div>
</vaadin-dialog>
<!-- end::snippet[] -->
<vaadin-button @click="${this.open}">Show dialog</vaadin-button>
`;
Expand Down
21 changes: 9 additions & 12 deletions frontend/demo/component/dialog/dialog-footer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import '@vaadin/button';
import '@vaadin/dialog';
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { dialogFooterRenderer, dialogRenderer } from '@vaadin/dialog/lit.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import { applyTheme } from 'Frontend/demo/theme';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
Expand Down Expand Up @@ -36,17 +35,15 @@ export class Example extends LitElement {
@closed="${() => {
this.dialogOpened = false;
}}"
${dialogRenderer(() => html`Are you sure you want to delete this user permanently?`, [])}
${dialogFooterRenderer(
() => html`
<vaadin-button theme="primary error" @click="${this.close}" style="margin-right: auto;">
Delete
</vaadin-button>
<vaadin-button theme="tertiary" @click="${this.close}">Cancel</vaadin-button>
`,
[]
)}
></vaadin-dialog>
>
<div>Are you sure you want to delete this user permanently?</div>
<div slot="footer">
<vaadin-button theme="primary error" @click="${this.close}" style="margin-right: auto;">
Delete
</vaadin-button>
<vaadin-button theme="tertiary" @click="${this.close}">Cancel</vaadin-button>
</div>
</vaadin-dialog>
<!-- end::snippet[] -->
<vaadin-button @click="${this.open}">Show dialog</vaadin-button>
`;
Expand Down
57 changes: 25 additions & 32 deletions frontend/demo/component/dialog/dialog-header.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,6 @@ import '@vaadin/vaadin-lumo-styles/vaadin-iconset';
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { ifDefined } from 'lit/directives/if-defined.js';
import { dialogHeaderRenderer, dialogRenderer } from '@vaadin/dialog/lit.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import { applyTheme } from 'Frontend/demo/theme';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
Expand Down Expand Up @@ -42,42 +41,36 @@ export class Example extends LitElement {
@closed="${() => {
this.dialogOpened = false;
}}"
${dialogHeaderRenderer(
() => html`
<vaadin-button theme="tertiary" @click="${this.close}">
<vaadin-icon icon="lumo:cross"></vaadin-icon>
</vaadin-button>
`,
[]
)}
${dialogRenderer(this.renderDialog, this.user)}
></vaadin-dialog>
>
<div slot="header-content">
<vaadin-button theme="tertiary" @click="${this.close}">
<vaadin-icon icon="lumo:cross"></vaadin-icon>
</vaadin-button>
</div>
<vaadin-form-layout auto-responsive column-width="18rem" expand-fields>
<vaadin-text-field
label="Name"
value="${`${this.user?.firstName} ${this.user?.lastName}`}"
readonly
style="padding-top: 0;"
></vaadin-text-field>
<vaadin-email-field
label="Email"
value="${ifDefined(this.user?.email)}"
readonly
></vaadin-email-field>
<vaadin-text-field
label="Address"
value="${this.addressDescription()}"
readonly
></vaadin-text-field>
</vaadin-form-layout>
</vaadin-dialog>
<!-- end::snippet[] -->
<vaadin-button @click="${this.open}">Show dialog</vaadin-button>
`;
}

private renderDialog = () => html`
<vaadin-form-layout auto-responsive column-width="18rem" expand-fields>
<vaadin-text-field
label="Name"
value="${`${this.user?.firstName} ${this.user?.lastName}`}"
readonly
style="padding-top: 0;"
></vaadin-text-field>
<vaadin-email-field
label="Email"
value="${ifDefined(this.user?.email)}"
readonly
></vaadin-email-field>
<vaadin-text-field
label="Address"
value="${this.addressDescription()}"
readonly
></vaadin-text-field>
</vaadin-form-layout>
`;

addressDescription() {
if (!this.user) {
return '';
Expand Down
41 changes: 15 additions & 26 deletions frontend/demo/component/dialog/dialog-no-padding.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import '@vaadin/grid';
import '@vaadin/grid/vaadin-grid-selection-column.js';
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { dialogFooterRenderer, dialogRenderer } from '@vaadin/dialog/lit.js';
import { columnBodyRenderer } from '@vaadin/grid/lit.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import { applyTheme } from 'Frontend/demo/theme';
Expand Down Expand Up @@ -40,31 +39,21 @@ export class Example extends LitElement {
@closed="${() => {
this.dialogOpened = false;
}}"
${dialogRenderer(
() => html`
<vaadin-grid
.items="${this.people}"
style="width: 500px; max-width: 100%; border-radius: 0;"
>
<vaadin-grid-selection-column></vaadin-grid-selection-column>
<vaadin-grid-column
header="Name"
${columnBodyRenderer<Person>(
(item) => html`${item.firstName} ${item.lastName}`,
[]
)}
></vaadin-grid-column>
</vaadin-grid>
`,
this.people
)}
${dialogFooterRenderer(
() => html`
<vaadin-button theme="primary" @click="${this.close}">Filter</vaadin-button>
`,
[]
)}
></vaadin-dialog>
>
<vaadin-grid
.items="${this.people}"
style="width: 500px; max-width: 100%; border-radius: 0;"
>
<vaadin-grid-selection-column></vaadin-grid-selection-column>
<vaadin-grid-column
header="Name"
${columnBodyRenderer<Person>((item) => html`${item.firstName} ${item.lastName}`, [])}
></vaadin-grid-column>
</vaadin-grid>
<div slot="footer">
<vaadin-button theme="primary" @click="${this.close}">Filter</vaadin-button>
</div>
</vaadin-dialog>
<!-- end::snippet[] -->
<vaadin-button @click="${this.open}">Show dialog</vaadin-button>
`;
Expand Down
33 changes: 14 additions & 19 deletions frontend/demo/component/dialog/dialog-resizable.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ import '@vaadin/grid';
import '@vaadin/vertical-layout';
import { html, LitElement } from 'lit';
import { customElement, state } from 'lit/decorators.js';
import { dialogRenderer } from '@vaadin/dialog/lit.js';
import { getPeople } from 'Frontend/demo/domain/DataService';
import { applyTheme } from 'Frontend/demo/theme';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';
Expand Down Expand Up @@ -48,24 +47,20 @@ export class Example extends LitElement {
@closed="${() => {
this.dialogOpened = false;
}}"
${dialogRenderer(
() => html`
<vaadin-vertical-layout
theme="spacing"
style="max-width: 100%; min-width: 300px; height: 100%; align-items: stretch;"
>
<vaadin-grid .items="${this.people}">
<vaadin-grid-column path="firstName" title="First name"></vaadin-grid-column>
<vaadin-grid-column path="lastName" title="Last name"></vaadin-grid-column>
<vaadin-grid-column path="email" title="Email"></vaadin-grid-column>
<vaadin-grid-column path="profession" title="Profession"></vaadin-grid-column>
<vaadin-grid-column path="membership" title="Membership"></vaadin-grid-column>
</vaadin-grid>
</vaadin-vertical-layout>
`,
this.people
)}
></vaadin-dialog>
>
<vaadin-vertical-layout
theme="spacing"
style="max-width: 100%; min-width: 300px; height: 100%; align-items: stretch;"
>
<vaadin-grid .items="${this.people}">
<vaadin-grid-column path="firstName" title="First name"></vaadin-grid-column>
<vaadin-grid-column path="lastName" title="Last name"></vaadin-grid-column>
<vaadin-grid-column path="email" title="Email"></vaadin-grid-column>
<vaadin-grid-column path="profession" title="Profession"></vaadin-grid-column>
<vaadin-grid-column path="membership" title="Membership"></vaadin-grid-column>
</vaadin-grid>
</vaadin-vertical-layout>
</vaadin-dialog>
<!-- end::snippet[] -->
<vaadin-button @click="${this.open}">Show dialog</vaadin-button>
`;
Expand Down
Loading