Skip to content

Commit 397e219

Browse files
vursenvursen
authored
feat: add has-drawer and has-navbar attributes (#10311)
1 parent 92e7a04 commit 397e219

File tree

7 files changed

+130
-50
lines changed

7 files changed

+130
-50
lines changed

‎dev/aura/aura-view.css‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@
3737
}
3838
}
3939

40-
:is(vaadin-app-layout[drawer-opened], vaadin-app-layout:has([slot='navbar'] vaadin-drawer-toggle))
40+
vaadin-app-layout:is([drawer-opened], :has(> [slot='navbar'] vaadin-drawer-toggle))
4141
:is(.aura-view > header, .aura-view-header)
4242
vaadin-drawer-toggle:not([theme~='permanent']),
4343
vaadin-master-detail-layout:not([drawer], [stack]) [slot='detail'].aura-view > header mdl-back-button,

‎packages/app-layout/src/vaadin-app-layout-mixin.js‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -208,6 +208,18 @@ export const AppLayoutMixin = (superclass) =>
208208
window.removeEventListener('keydown', this.__onDrawerKeyDown);
209209
}
210210

211+
/** @private */
212+
__onNavbarSlotChange() {
213+
this._updateTouchOptimizedMode();
214+
this.toggleAttribute('has-navbar', !!this.querySelector('[slot="navbar"]'));
215+
}
216+
217+
/** @private */
218+
__onDrawerSlotChange() {
219+
this._updateDrawerSize();
220+
this.toggleAttribute('has-drawer', !!this.querySelector('[slot="drawer"]'));
221+
}
222+
211223
/**
212224
* A callback for the `primarySection` property observer.
213225
*

‎packages/app-layout/src/vaadin-app-layout.d.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -77,6 +77,13 @@ export type AppLayoutEventMap = AppLayoutCustomEventMap & HTMLElementEventMap;
7777
* `navbar` | Container for the navigation bar
7878
* `drawer` | Container for the drawer area
7979
*
80+
* The following state attributes are available for styling:
81+
*
82+
* Attribute | Description
83+
* ---------------|-------------
84+
* `has-drawer` | Set when the element has light DOM content in the drawer slot.
85+
* `has-navbar` | Set when the element has light DOM content in the navbar slot.
86+
*
8087
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
8188
*
8289
* ### Component's slots

‎packages/app-layout/src/vaadin-app-layout.js‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -59,6 +59,13 @@ import { AppLayoutMixin } from './vaadin-app-layout-mixin.js';
5959
*
6060
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
6161
*
62+
* The following state attributes are available for styling:
63+
*
64+
* Attribute | Description
65+
* ---------------|-------------
66+
* `has-drawer` | Set when the element has light DOM content in the drawer slot.
67+
* `has-navbar` | Set when the element has light DOM content in the navbar slot.
68+
*
6269
* ### Component's slots
6370
*
6471
* The following slots are available to be set
@@ -121,11 +128,11 @@ class AppLayout extends AppLayoutMixin(ElementMixin(ThemableMixin(PolylitMixin(L
121128
render() {
122129
return html`
123130
<div part="navbar" id="navbarTop">
124-
<slot name="navbar" @slotchange="${this._updateTouchOptimizedMode}"></slot>
131+
<slot name="navbar" @slotchange="${this.__onNavbarSlotChange}"></slot>
125132
</div>
126133
<div part="backdrop" @click="${this._onBackdropClick}" @touchend="${this._onBackdropTouchend}"></div>
127134
<div part="drawer" id="drawer">
128-
<slot name="drawer" id="drawerSlot" @slotchange="${this._updateDrawerSize}"></slot>
135+
<slot name="drawer" id="drawerSlot" @slotchange="${this.__onDrawerSlotChange}"></slot>
129136
</div>
130137
<div content>
131138
<slot></slot>
@@ -134,7 +141,7 @@ class AppLayout extends AppLayoutMixin(ElementMixin(ThemableMixin(PolylitMixin(L
134141
<slot name="navbar-bottom"></slot>
135142
</div>
136143
<div hidden>
137-
<slot id="touchSlot" name="navbar touch-optimized" @slotchange="${this._updateTouchOptimizedMode}"></slot>
144+
<slot id="touchSlot" name="navbar touch-optimized" @slotchange="${this.__onNavbarSlotChange}"></slot>
138145
</div>
139146
`;
140147
}

‎packages/app-layout/test/dom/__snapshots__/app-layout.test.snap.js‎

Lines changed: 47 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,46 @@
11
/* @web/test-runner snapshot v1 */
22
export const snapshots = {};
33

4-
snapshots["vaadin-app-layout desktop layout shadow default"] =
4+
snapshots["vaadin-app-layout host default"] =
5+
`<vaadin-app-layout
6+
no-anim=""
7+
overlay=""
8+
primary-section="navbar"
9+
style="--_vaadin-app-layout-navbar-offset-size: 0px; --_vaadin-app-layout-navbar-offset-size-bottom: 0px; --_vaadin-app-layout-drawer-offset-size: 0px; --_vaadin-app-layout-drawer-width: 0;"
10+
>
11+
</vaadin-app-layout>
12+
`;
13+
/* end snapshot vaadin-app-layout host default */
14+
15+
snapshots["vaadin-app-layout host with drawer"] =
16+
`<vaadin-app-layout
17+
has-drawer=""
18+
overlay=""
19+
primary-section="navbar"
20+
style="--_vaadin-app-layout-navbar-offset-size: 0px; --_vaadin-app-layout-navbar-offset-size-bottom: 0px; --_vaadin-app-layout-drawer-offset-size: 320px;"
21+
>
22+
<div slot="drawer">
23+
Drawer Content
24+
</div>
25+
</vaadin-app-layout>
26+
`;
27+
/* end snapshot vaadin-app-layout host with drawer */
28+
29+
snapshots["vaadin-app-layout host with navbar"] =
30+
`<vaadin-app-layout
31+
has-navbar=""
32+
overlay=""
33+
primary-section="navbar"
34+
style="--_vaadin-app-layout-navbar-offset-size: 34px; --_vaadin-app-layout-navbar-offset-size-bottom: 0px; --_vaadin-app-layout-drawer-offset-size: 0px; --_vaadin-app-layout-drawer-width: 0;"
35+
>
36+
<div slot="navbar">
37+
Navbar Content
38+
</div>
39+
</vaadin-app-layout>
40+
`;
41+
/* end snapshot vaadin-app-layout host with navbar */
42+
43+
snapshots["vaadin-app-layout shadow desktop layout default"] =
544
`<div
645
id="navbarTop"
746
part="navbar"
@@ -42,9 +81,9 @@ snapshots["vaadin-app-layout desktop layout shadow default"] =
4281
</slot>
4382
</div>
4483
`;
45-
/* end snapshot vaadin-app-layout desktop layout shadow default */
84+
/* end snapshot vaadin-app-layout shadow desktop layout default */
4685

47-
snapshots["vaadin-app-layout desktop layout shadow drawer closed"] =
86+
snapshots["vaadin-app-layout shadow desktop layout drawer closed"] =
4887
`<div
4988
id="navbarTop"
5089
part="navbar"
@@ -85,9 +124,9 @@ snapshots["vaadin-app-layout desktop layout shadow drawer closed"] =
85124
</slot>
86125
</div>
87126
`;
88-
/* end snapshot vaadin-app-layout desktop layout shadow drawer closed */
127+
/* end snapshot vaadin-app-layout shadow desktop layout drawer closed */
89128

90-
snapshots["vaadin-app-layout mobile layout shadow default"] =
129+
snapshots["vaadin-app-layout shadow mobile layout default"] =
91130
`<div
92131
id="navbarTop"
93132
part="navbar"
@@ -131,9 +170,9 @@ snapshots["vaadin-app-layout mobile layout shadow default"] =
131170
</slot>
132171
</div>
133172
`;
134-
/* end snapshot vaadin-app-layout mobile layout shadow default */
173+
/* end snapshot vaadin-app-layout shadow mobile layout default */
135174

136-
snapshots["vaadin-app-layout mobile layout shadow drawer opened"] =
175+
snapshots["vaadin-app-layout shadow mobile layout drawer opened"] =
137176
`<div
138177
id="navbarTop"
139178
part="navbar"
@@ -177,5 +216,5 @@ snapshots["vaadin-app-layout mobile layout shadow drawer opened"] =
177216
</slot>
178217
</div>
179218
`;
180-
/* end snapshot vaadin-app-layout mobile layout shadow drawer opened */
219+
/* end snapshot vaadin-app-layout shadow mobile layout drawer opened */
181220

‎packages/app-layout/test/dom/app-layout.test.js‎

Lines changed: 47 additions & 29 deletions
Original file line numberDiff line numberDiff line change
@@ -7,31 +7,55 @@ import '../../vaadin-drawer-toggle.js';
77
describe('vaadin-app-layout', () => {
88
let layout;
99

10-
async function fixtureLayout() {
11-
layout = fixtureSync(`
12-
<vaadin-app-layout>
13-
<vaadin-drawer-toggle id="toggle" slot="navbar">
14-
Drawer Toggle
15-
</vaadin-drawer-toggle>
16-
<section slot="drawer">
17-
Drawer Content
18-
</section>
19-
<main>Page Content</main>
20-
</vaadin-app-layout>
21-
`);
22-
await nextRender();
23-
}
10+
describe('host', () => {
11+
beforeEach(() => {
12+
layout = fixtureSync('<vaadin-app-layout></vaadin-app-layout>');
13+
});
14+
15+
it('default', async () => {
16+
await expect(layout).dom.to.equalSnapshot();
17+
});
2418

25-
describe('desktop layout', () => {
26-
before(async () => {
27-
await setViewport({ width: 1000, height: 1000 });
19+
it('with drawer', async () => {
20+
const drawer = document.createElement('div');
21+
drawer.setAttribute('slot', 'drawer');
22+
drawer.textContent = 'Drawer Content';
23+
layout.appendChild(drawer);
24+
await nextRender();
25+
await expect(layout).dom.to.equalSnapshot();
2826
});
2927

28+
it('with navbar', async () => {
29+
const navbar = document.createElement('div');
30+
navbar.setAttribute('slot', 'navbar');
31+
navbar.textContent = 'Navbar Content';
32+
layout.appendChild(navbar);
33+
await nextRender();
34+
await expect(layout).dom.to.equalSnapshot();
35+
});
36+
});
37+
38+
describe('shadow', () => {
3039
beforeEach(async () => {
31-
await fixtureLayout();
40+
layout = fixtureSync(`
41+
<vaadin-app-layout>
42+
<vaadin-drawer-toggle id="toggle" slot="navbar">
43+
Drawer Toggle
44+
</vaadin-drawer-toggle>
45+
<section slot="drawer">
46+
Drawer Content
47+
</section>
48+
<main>Page Content</main>
49+
</vaadin-app-layout>
50+
`);
51+
await nextRender();
3252
});
3353

34-
describe('shadow', () => {
54+
describe('desktop layout', () => {
55+
before(async () => {
56+
await setViewport({ width: 1000, height: 1000 });
57+
});
58+
3559
it('default', async () => {
3660
await expect(layout).shadowDom.to.equalSnapshot();
3761
});
@@ -41,18 +65,12 @@ describe('vaadin-app-layout', () => {
4165
await expect(layout).shadowDom.to.equalSnapshot();
4266
});
4367
});
44-
});
45-
46-
describe('mobile layout', () => {
47-
before(async () => {
48-
await setViewport({ width: 500, height: 500 });
49-
});
5068

51-
beforeEach(async () => {
52-
await fixtureLayout();
53-
});
69+
describe('mobile layout', () => {
70+
before(async () => {
71+
await setViewport({ width: 500, height: 500 });
72+
});
5473

55-
describe('shadow', () => {
5674
it('default', async () => {
5775
await expect(layout).shadowDom.to.equalSnapshot();
5876
});

‎packages/aura/src/components/app-layout.css‎

Lines changed: 6 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -95,32 +95,29 @@ vaadin-app-layout > vaadin-master-detail-layout:nth-child(1 of :not([slot])):nth
9595
}
9696
}
9797

98-
vaadin-app-layout:has([slot='navbar']):has([slot='drawer']) {
98+
vaadin-app-layout[has-navbar][has-drawer] {
9999
padding-top: var(--_vaadin-app-layout-navbar-offset-size);
100100

101101
&::part(drawer) {
102102
padding-top: 0;
103103
}
104104
}
105105

106-
vaadin-app-layout:has([slot='drawer']):not([overlay]):not([drawer-opened])
106+
vaadin-app-layout[has-drawer]:not([overlay]):not([drawer-opened])
107107
> :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
108108
border-inline-start-width: min(var(--aura-app-layout-inset), var(--_aura-mdl-border));
109109
}
110110

111-
vaadin-app-layout:has([slot='navbar']):has([slot='drawer'])[drawer-opened]:not([overlay])
111+
vaadin-app-layout[has-navbar][has-drawer][drawer-opened]:not([overlay])
112112
> :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
113113
border-start-start-radius: var(--aura-app-layout-radius);
114114
}
115115

116-
vaadin-app-layout:has([slot='navbar']):has([slot='drawer'])
117-
> :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
116+
vaadin-app-layout[has-navbar][has-drawer] > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
118117
border-top-width: var(--_aura-mdl-border);
119118
}
120119

121-
vaadin-app-layout:has([slot='navbar'])
122-
> :is(:not([slot]), [slot='drawer'])
123-
vaadin-drawer-toggle:not([theme~='permanent']),
124-
vaadin-app-layout:not(:has([slot='navbar'])) > [slot='drawer'] vaadin-drawer-toggle:not([theme~='permanent']) {
120+
vaadin-app-layout[has-navbar] > :is(:not([slot]), [slot='drawer']) vaadin-drawer-toggle:not([theme~='permanent']),
121+
vaadin-app-layout:not([has-navbar]) > [slot='drawer'] vaadin-drawer-toggle:not([theme~='permanent']) {
125122
display: none;
126123
}

0 commit comments

Comments
 (0)