Skip to content

refactor: update App Layout examples to Aura theme #4847

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

Closed
web-padawan wants to merge 2 commits into from
Closed

refactor: update App Layout examples to Aura theme #4847

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
771631a
refactor: update App Layout examples to Aura theme
web-padawan Nov 27, 2025
81f72ab
refactor: use --vaadin-padding-s for scroller padding
web-padawan Nov 27, 2025
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
11 changes: 2 additions & 9 deletions frontend/demo/component/app-layout/app-layout-basic.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,13 @@ import '@vaadin/icon';
import '@vaadin/icons';
import '@vaadin/scroller';
import '@vaadin/side-nav';
import { css, html, LitElement } from 'lit';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { patchSideNavNavigation } from 'Frontend/demo/component/side-nav/side-nav-helper'; // hidden-source-line
import { applyTheme } from 'Frontend/demo/theme';

@customElement('app-layout-basic')
export class Example extends LitElement {
static override styles = css`
h1 {
font-size: 1.125rem;
margin: 0;
}
`;

protected override createRenderRoot() {
const root = super.createRenderRoot();
applyTheme(root);
Expand All @@ -35,7 +28,7 @@ export class Example extends LitElement {
<vaadin-app-layout>
<vaadin-drawer-toggle slot="navbar"></vaadin-drawer-toggle>
<h1 slot="navbar">MyApp</h1>
<vaadin-scroller slot="drawer" style="padding: 0.5rem">
<vaadin-scroller slot="drawer" style="padding: var(--vaadin-padding-s)">
<vaadin-side-nav>
<vaadin-side-nav-item path="/dashboard">
<vaadin-icon icon="vaadin:dashboard" slot="prefix"></vaadin-icon>
Expand Down
3 changes: 1 addition & 2 deletions frontend/demo/component/app-layout/app-layout-bottom-navbar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,8 +13,7 @@ import { patchAppLayoutNavigation } from './app-layout-helper'; // hidden-source
export class Example extends LitElement {
static override styles = css`
h1 {
font-size: 1.125rem;
margin: var(--lumo-space-m) var(--lumo-space-l);
margin: var(--vaadin-gap-m);
}

/* hidden-source-line: the bottom navbar is forced on in the example */
Expand Down
11 changes: 2 additions & 9 deletions frontend/demo/component/app-layout/app-layout-drawer.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,13 @@ import '@vaadin/icon';
import '@vaadin/icons';
import '@vaadin/scroller';
import '@vaadin/side-nav';
import { css, html, LitElement } from 'lit';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { patchSideNavNavigation } from 'Frontend/demo/component/side-nav/side-nav-helper'; // hidden-source-line
import { applyTheme } from 'Frontend/demo/theme';

@customElement('app-layout-drawer')
export class Example extends LitElement {
static override styles = css`
h1 {
font-size: 1.125rem;
margin: 0;
}
`;

protected override createRenderRoot() {
const root = super.createRenderRoot();
applyTheme(root);
Expand All @@ -35,7 +28,7 @@ export class Example extends LitElement {
<vaadin-app-layout primary-section="drawer">
<vaadin-drawer-toggle slot="navbar"></vaadin-drawer-toggle>
<h1 slot="navbar">Dashboard</h1>
<vaadin-scroller slot="drawer" style="padding: 0.5rem">
<vaadin-scroller slot="drawer" style="padding: var(--vaadin-padding-s)">
<vaadin-side-nav>
<vaadin-side-nav-item path="/dashboard">
<vaadin-icon icon="vaadin:dashboard" slot="prefix"></vaadin-icon>
Expand Down
3 changes: 1 addition & 2 deletions frontend/demo/component/app-layout/app-layout-height-auto.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,7 @@ import { applyTheme } from 'Frontend/demo/theme';
export class Example extends LitElement {
static override styles = css`
h1 {
font-size: 1.125rem;
margin: var(--lumo-space-m);
margin: var(--vaadin-gap-m);
}
`;

Expand Down
3 changes: 1 addition & 2 deletions frontend/demo/component/app-layout/app-layout-height-full.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,8 +15,7 @@ export class Example extends LitElement {
}

h1 {
font-size: 1.125rem;
margin: var(--lumo-space-m);
margin: var(--vaadin-gap-m);
}
`;

Expand Down
11 changes: 2 additions & 9 deletions frontend/demo/component/app-layout/app-layout-navbar-placement-side.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,13 @@ import '@vaadin/icon';
import '@vaadin/icons';
import '@vaadin/scroller';
import '@vaadin/side-nav';
import { css, html, LitElement } from 'lit';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { patchSideNavNavigation } from 'Frontend/demo/component/side-nav/side-nav-helper'; // hidden-source-line
import { applyTheme } from 'Frontend/demo/theme';

@customElement('app-layout-navbar-placement-side')
export class Example extends LitElement {
static override styles = css`
h1 {
font-size: 1.125rem;
margin: 0;
}
`;

protected override createRenderRoot() {
const root = super.createRenderRoot();
applyTheme(root);
Expand All @@ -35,7 +28,7 @@ export class Example extends LitElement {
<vaadin-app-layout primary-section="drawer">
<vaadin-drawer-toggle slot="navbar"></vaadin-drawer-toggle>
<h1 slot="navbar">Dashboard</h1>
<vaadin-scroller slot="drawer" style="padding: 0.5rem">
<vaadin-scroller slot="drawer" style="padding: var(--vaadin-padding-s)">
<vaadin-side-nav>
<vaadin-side-nav-item path="/dashboard">
<vaadin-icon icon="vaadin:dashboard" slot="prefix"></vaadin-icon>
Expand Down
11 changes: 2 additions & 9 deletions frontend/demo/component/app-layout/app-layout-navbar-placement.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,13 @@ import '@vaadin/icon';
import '@vaadin/icons';
import '@vaadin/scroller';
import '@vaadin/side-nav';
import { css, html, LitElement } from 'lit';
import { html, LitElement } from 'lit';
import { customElement } from 'lit/decorators.js';
import { patchSideNavNavigation } from 'Frontend/demo/component/side-nav/side-nav-helper'; // hidden-source-line
import { applyTheme } from 'Frontend/demo/theme';

@customElement('app-layout-navbar-placement')
export class Example extends LitElement {
static override styles = css`
h1 {
font-size: 1.125rem;
margin: 0;
}
`;

protected override createRenderRoot() {
const root = super.createRenderRoot();
applyTheme(root);
Expand All @@ -35,7 +28,7 @@ export class Example extends LitElement {
<vaadin-app-layout>
<vaadin-drawer-toggle slot="navbar"></vaadin-drawer-toggle>
<h1 slot="navbar">MyApp</h1>
<vaadin-scroller slot="drawer" style="padding: 0.5rem">
<vaadin-scroller slot="drawer" style="padding: var(--vaadin-padding-s)">
<vaadin-side-nav>
<vaadin-side-nav-item path="/dashboard">
<vaadin-icon icon="vaadin:dashboard" slot="prefix"></vaadin-icon>
Expand Down
4 changes: 1 addition & 3 deletions frontend/demo/component/app-layout/app-layout-navbar.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,9 +13,7 @@ import { patchAppLayoutNavigation } from './app-layout-helper'; // hidden-source
export class Example extends LitElement {
static override styles = css`
h1 {
font-size: 1.125rem;
left: var(--lumo-space-l);
margin: 0;
left: var(--vaadin-gap-l);
position: absolute;
}

Expand Down
11 changes: 2 additions & 9 deletions frontend/demo/component/app-layout/app-layout-secondary-navigation.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,14 +17,7 @@ import { patchAppLayoutNavigation } from './app-layout-helper'; // hidden-source
export class Example extends LitElement {
static override styles = css`
h1 {
font-size: 1.125rem;
line-height: 2.75rem;
margin: 0 var(--lumo-space-m);
}

h2 {
font-size: 1.125rem;
margin: 0;
margin: 0 var(--vaadin-gap-m);
}
`;

Expand All @@ -44,7 +37,7 @@ export class Example extends LitElement {
<!-- tag::snippet[] -->
<vaadin-app-layout primary-section="drawer">
<h1 slot="drawer">MyApp</h1>
<vaadin-scroller slot="drawer" style="padding: 0.5rem">
<vaadin-scroller slot="drawer" style="padding: var(--vaadin-padding-s)">
<vaadin-side-nav>
<vaadin-side-nav-item path="/dashboard">
<vaadin-icon icon="vaadin:dashboard" slot="prefix"></vaadin-icon>
Expand Down
11 changes: 2 additions & 9 deletions frontend/demo/component/app-layout/react/app-layout-basic.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,6 @@ import {
} from '@vaadin/react-components';
import { patchSideNavNavigation } from '../../side-nav/react/side-nav-helper';

const h1Style = {
fontSize: '1.125rem',
margin: 0,
};

function Example() {
const sideNavRef = useRef<SideNavElement>(null);

Expand All @@ -31,10 +26,8 @@ function Example() {
// tag::snippet[]
<AppLayout>
<DrawerToggle slot="navbar" />
<h1 slot="navbar" style={h1Style}>
MyApp
</h1>
<Scroller slot="drawer" style={{ padding: '0.5rem' }}>
<h1 slot="navbar">MyApp</h1>
<Scroller slot="drawer" style={{ padding: 'var(--vaadin-padding-s)' }}>
<SideNav ref={sideNavRef}>
<SideNavItem path="/dashboard">
<Icon icon="vaadin:dashboard" slot="prefix" />
Expand Down
3 changes: 1 addition & 2 deletions frontend/demo/component/app-layout/react/app-layout-bottom-navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,8 +11,7 @@ import {
import { patchAppLayoutNavigation } from '../app-layout-helper';

const h1Style = {
fontSize: '1.125rem',
margin: 'var(--lumo-space-m) var(--lumo-space-l)',
margin: 'var(--vaadin-gap-m)',
};

const linkStyle = {
Expand Down
10 changes: 2 additions & 8 deletions frontend/demo/component/app-layout/react/app-layout-drawer.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,10 +12,6 @@ import {
} from '@vaadin/react-components';
import { patchSideNavNavigation } from '../../side-nav/react/side-nav-helper';

const h1Style = {
fontSize: '1.125rem',
};

function Example() {
const sideNavRef = useRef<SideNavElement>(null);

Expand All @@ -31,11 +27,9 @@ function Example() {
<AppLayout primarySection="drawer">
<DrawerToggle slot="navbar" />

<h1 slot="navbar" style={h1Style}>
Dashboard
</h1>
<h1 slot="navbar">Dashboard</h1>

<Scroller slot="drawer" style={{ padding: '0.5rem' }}>
<Scroller slot="drawer" style={{ padding: 'var(--vaadin-padding-s)' }}>
<SideNav ref={sideNavRef}>
<SideNavItem path="/dashboard">
<Icon icon="vaadin:dashboard" slot="prefix" />
Expand Down
3 changes: 1 addition & 2 deletions frontend/demo/component/app-layout/react/app-layout-height-auto.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,7 @@ import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';

const h1Style = {
fontSize: '1.125rem',
margin: 'var(--lumo-space-m)',
margin: 'var(--vaadin-gap-m)',
};

function Example() {
Expand Down
3 changes: 1 addition & 2 deletions frontend/demo/component/app-layout/react/app-layout-height-full.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,8 +8,7 @@ import { getPeople } from 'Frontend/demo/domain/DataService';
import type Person from 'Frontend/generated/com/vaadin/demo/domain/Person';

const h1Style = {
fontSize: '1.125rem',
margin: 'var(--lumo-space-m)',
margin: 'var(--vaadin-gap-m)',
};

function Example() {
Expand Down
11 changes: 2 additions & 9 deletions frontend/demo/component/app-layout/react/app-layout-navbar-placement-side.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,6 @@ import {
} from '@vaadin/react-components';
import { patchSideNavNavigation } from '../../side-nav/react/side-nav-helper';

const h1Style = {
fontSize: '1.125rem',
margin: 0,
};

function Example() {
const sideNavRef = useRef<SideNavElement>(null);

Expand All @@ -32,11 +27,9 @@ function Example() {
<AppLayout primarySection="drawer">
<DrawerToggle slot="navbar" />

<h1 slot="navbar" style={h1Style}>
Dashboard
</h1>
<h1 slot="navbar">Dashboard</h1>

<Scroller slot="drawer" style={{ padding: '0.5rem' }}>
<Scroller slot="drawer" style={{ padding: 'var(--vaadin-padding-s)' }}>
<SideNav ref={sideNavRef}>
<SideNavItem path="/dashboard">
<Icon icon="vaadin:dashboard" slot="prefix" />
Expand Down
11 changes: 2 additions & 9 deletions frontend/demo/component/app-layout/react/app-layout-navbar-placement.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,11 +12,6 @@ import {
} from '@vaadin/react-components';
import { patchSideNavNavigation } from '../../side-nav/react/side-nav-helper';

const h1Style = {
fontSize: '1.125rem',
margin: 0,
};

function Example() {
const sideNavRef = useRef<SideNavElement>(null);

Expand All @@ -31,11 +26,9 @@ function Example() {
// tag::snippet[]
<AppLayout>
<DrawerToggle slot="navbar" />
<h1 slot="navbar" style={h1Style}>
MyApp
</h1>
<h1 slot="navbar">MyApp</h1>

<Scroller slot="drawer" style={{ padding: '0.5rem' }}>
<Scroller slot="drawer" style={{ padding: 'var(--vaadin-padding-s)' }}>
<SideNav ref={sideNavRef}>
<SideNavItem path="/dashboard">
<Icon icon="vaadin:dashboard" slot="prefix" />
Expand Down
4 changes: 1 addition & 3 deletions frontend/demo/component/app-layout/react/app-layout-navbar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,7 @@ import {
import { patchAppLayoutNavigation } from '../app-layout-helper';

const h1Style: React.CSSProperties = {
fontSize: '1.125rem',
left: 'var(--lumo-space-l)',
margin: 0,
left: 'var(--vaadin-gap-l)',
position: 'absolute',
};

Expand Down
13 changes: 3 additions & 10 deletions frontend/demo/component/app-layout/react/app-layout-secondary-navigation.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,14 +16,7 @@ import { patchSideNavNavigation } from '../../side-nav/react/side-nav-helper';
import { patchAppLayoutNavigation } from '../app-layout-helper';

const h1Style = {
fontSize: '1.125rem',
lineHeight: '2.75rem',
margin: '0 var(--lumo-space-m)',
};

const h2Style = {
fontSize: '1.125rem',
margin: 0,
margin: '0 var(--vaadin-gap-m)',
};

const linkStyle = {
Expand Down Expand Up @@ -58,7 +51,7 @@ function Example() {
<h1 style={h1Style} slot="drawer">
MyApp
</h1>
<Scroller slot="drawer" style={{ padding: '0.5rem' }}>
<Scroller slot="drawer" style={{ padding: 'var(--vaadin-padding-s)' }}>
<SideNav ref={sideNavRef}>
<SideNavItem>
<Icon icon="vaadin:dashboard" slot="prefix" />
Expand Down Expand Up @@ -97,7 +90,7 @@ function Example() {
<div slot="navbar">
<div style={{ display: 'flex', alignItems: 'center' }}>
<DrawerToggle />
<h2 style={h2Style}>Orders</h2>
<h2>Orders</h2>
</div>

<HorizontalLayout
Expand Down
3 changes: 1 addition & 2 deletions src/main/java/com/vaadin/demo/component/applayout/AppLayoutBasic.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,13 +18,12 @@ public AppLayoutBasic() {
DrawerToggle toggle = new DrawerToggle();

H1 title = new H1("MyApp");
title.getStyle().set("font-size", "1.125rem").set("margin", "0");

SideNav nav = getSideNav();
nav.getElement().executeJs("window.patchSideNavNavigation(this);"); // hidden-source-line

Scroller scroller = new Scroller(nav);
scroller.getStyle().set("padding", "0.5rem");
scroller.getStyle().set("padding", "var(--vaadin-padding-s)");

addToDrawer(scroller);
addToNavbar(toggle, title);
Expand Down
3 changes: 1 addition & 2 deletions src/main/java/com/vaadin/demo/component/applayout/AppLayoutBottomNavbar.java
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,8 +20,7 @@ public AppLayoutBottomNavbar() {
getElement().getStyle().set("--vaadin-app-layout-touch-optimized", // hidden-source-line
"true"); // hidden-source-line
H1 title = new H1("MyApp");
title.getStyle().set("font-size", "1.125rem").set("margin",
"var(--lumo-space-m) var(--lumo-space-l)");
title.getStyle().set("margin", "var(--vaadin-gap-m)");

HorizontalLayout nav = getNavigation();
nav.getElement().executeJs("window.patchAppLayoutNavigation(this);"); // hidden-source-line
Expand Down
Loading
Loading