Skip to content

Commit 5d5be87

Browse files
web-padawanweb-padawan
authored
feat: add navbar-top and navbar-bottom stylable shadow parts (#10313)
1 parent 5ef5cee commit 5d5be87

File tree

5 files changed

+35
-31
lines changed

5 files changed

+35
-31
lines changed

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

Lines changed: 3 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -55,7 +55,7 @@ export const appLayoutStyles = css`
5555
}
5656
}
5757
58-
[part='navbar'] {
58+
[part~='navbar'] {
5959
position: fixed;
6060
display: flex;
6161
align-items: center;
@@ -78,15 +78,15 @@ export const appLayoutStyles = css`
7878
background: var(--vaadin-app-layout-navbar-background, var(--vaadin-background-container));
7979
}
8080
81-
:host([primary-section='drawer'][drawer-opened]:not([overlay])) [part='navbar'] {
81+
:host([primary-section='drawer'][drawer-opened]:not([overlay])) [part~='navbar'] {
8282
inset-inline-start: var(--vaadin-app-layout-drawer-offset-left, 0);
8383
}
8484
8585
:host([primary-section='drawer']) [part='drawer'] {
8686
top: 0;
8787
}
8888
89-
[part='navbar'][bottom] {
89+
[part~='navbar-bottom'] {
9090
top: auto;
9191
bottom: 0;
9292
padding-top: var(--vaadin-app-layout-navbar-padding-top, var(--vaadin-padding-s));

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

Lines changed: 9 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -69,13 +69,15 @@ export type AppLayoutEventMap = AppLayoutCustomEventMap & HTMLElementEventMap;
6969
*
7070
* ### Styling
7171
*
72-
* The following Shadow DOM parts of the `<vaadin-app-layout>` are available for styling:
73-
*
74-
* Part name | Description
75-
* --------------|---------------------------------------------------------|
76-
* `backdrop` | Backdrop covering the layout when drawer is open as an overlay
77-
* `navbar` | Container for the navigation bar
78-
* `drawer` | Container for the drawer area
72+
* The following shadow DOM parts are available for styling:
73+
*
74+
* Part name | Description
75+
* -----------------|---------------------------------------------------------|
76+
* `backdrop` | Backdrop covering the layout when drawer is open as an overlay
77+
* `navbar` | Container for the navigation bar
78+
* `navbar-top` | Container for the top navigation bar
79+
* `navbar-bottom` | Container for the bottom navigation bar
80+
* `drawer` | Container for the drawer area
7981
*
8082
* The following state attributes are available for styling:
8183
*

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

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -49,13 +49,15 @@ import { AppLayoutMixin } from './vaadin-app-layout-mixin.js';
4949
*
5050
* ### Styling
5151
*
52-
* The following Shadow DOM parts of the `<vaadin-app-layout>` are available for styling:
52+
* The following shadow DOM parts are available for styling:
5353
*
54-
* Part name | Description
55-
* --------------|---------------------------------------------------------|
56-
* `backdrop` | Backdrop covering the layout when drawer is open as an overlay
57-
* `navbar` | Container for the navigation bar
58-
* `drawer` | Container for the drawer area
54+
* Part name | Description
55+
* -----------------|---------------------------------------------------------|
56+
* `backdrop` | Backdrop covering the layout when drawer is open as an overlay
57+
* `navbar` | Container for the navigation bar
58+
* `navbar-top` | Container for the top navigation bar
59+
* `navbar-bottom` | Container for the bottom navigation bar
60+
* `drawer` | Container for the drawer area
5961
*
6062
* See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
6163
*
@@ -127,7 +129,7 @@ class AppLayout extends AppLayoutMixin(ElementMixin(ThemableMixin(PolylitMixin(L
127129
/** @protected */
128130
render() {
129131
return html`
130-
<div part="navbar" id="navbarTop">
132+
<div part="navbar navbar-top" id="navbarTop">
131133
<slot name="navbar" @slotchange="${this.__onNavbarSlotChange}"></slot>
132134
</div>
133135
<div part="backdrop" @click="${this._onBackdropClick}" @touchend="${this._onBackdropTouchend}"></div>
@@ -137,7 +139,7 @@ class AppLayout extends AppLayoutMixin(ElementMixin(ThemableMixin(PolylitMixin(L
137139
<div content>
138140
<slot></slot>
139141
</div>
140-
<div part="navbar" id="navbarBottom" bottom hidden>
142+
<div part="navbar navbar-bottom" id="navbarBottom" bottom hidden>
141143
<slot name="navbar-bottom"></slot>
142144
</div>
143145
<div hidden>

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

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ snapshots["vaadin-app-layout host with navbar"] =
4343
snapshots["vaadin-app-layout shadow desktop layout default"] =
4444
`<div
4545
id="navbarTop"
46-
part="navbar"
46+
part="navbar navbar-top"
4747
>
4848
<slot name="navbar">
4949
</slot>
@@ -68,7 +68,7 @@ snapshots["vaadin-app-layout shadow desktop layout default"] =
6868
bottom=""
6969
hidden=""
7070
id="navbarBottom"
71-
part="navbar"
71+
part="navbar navbar-bottom"
7272
>
7373
<slot name="navbar-bottom">
7474
</slot>
@@ -86,7 +86,7 @@ snapshots["vaadin-app-layout shadow desktop layout default"] =
8686
snapshots["vaadin-app-layout shadow desktop layout drawer closed"] =
8787
`<div
8888
id="navbarTop"
89-
part="navbar"
89+
part="navbar navbar-top"
9090
>
9191
<slot name="navbar">
9292
</slot>
@@ -111,7 +111,7 @@ snapshots["vaadin-app-layout shadow desktop layout drawer closed"] =
111111
bottom=""
112112
hidden=""
113113
id="navbarBottom"
114-
part="navbar"
114+
part="navbar navbar-bottom"
115115
>
116116
<slot name="navbar-bottom">
117117
</slot>
@@ -129,7 +129,7 @@ snapshots["vaadin-app-layout shadow desktop layout drawer closed"] =
129129
snapshots["vaadin-app-layout shadow mobile layout default"] =
130130
`<div
131131
id="navbarTop"
132-
part="navbar"
132+
part="navbar navbar-top"
133133
>
134134
<slot name="navbar">
135135
</slot>
@@ -157,7 +157,7 @@ snapshots["vaadin-app-layout shadow mobile layout default"] =
157157
bottom=""
158158
hidden=""
159159
id="navbarBottom"
160-
part="navbar"
160+
part="navbar navbar-bottom"
161161
>
162162
<slot name="navbar-bottom">
163163
</slot>
@@ -175,7 +175,7 @@ snapshots["vaadin-app-layout shadow mobile layout default"] =
175175
snapshots["vaadin-app-layout shadow mobile layout drawer opened"] =
176176
`<div
177177
id="navbarTop"
178-
part="navbar"
178+
part="navbar navbar-top"
179179
>
180180
<slot name="navbar">
181181
</slot>
@@ -203,7 +203,7 @@ snapshots["vaadin-app-layout shadow mobile layout drawer opened"] =
203203
bottom=""
204204
hidden=""
205205
id="navbarBottom"
206-
part="navbar"
206+
part="navbar navbar-bottom"
207207
>
208208
<slot name="navbar-bottom">
209209
</slot>

‎packages/vaadin-lumo-styles/src/components/app-layout.css‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,7 @@
5050
}
5151
}
5252

53-
[part='navbar'] {
53+
[part~='navbar'] {
5454
position: fixed;
5555
display: flex;
5656
align-items: center;
@@ -65,15 +65,15 @@
6565
border-bottom: 1px solid var(--lumo-contrast-10pct);
6666
}
6767

68-
:host([primary-section='drawer'][drawer-opened]:not([overlay])) [part='navbar'] {
68+
:host([primary-section='drawer'][drawer-opened]:not([overlay])) [part~='navbar'] {
6969
inset-inline-start: var(--vaadin-app-layout-drawer-offset-left, 0);
7070
}
7171

7272
:host([primary-section='drawer']) [part='drawer'] {
7373
top: 0;
7474
}
7575

76-
[part='navbar'][bottom] {
76+
[part~='navbar-bottom'] {
7777
top: auto;
7878
bottom: 0;
7979
padding-bottom: var(--safe-area-inset-bottom);
@@ -169,13 +169,13 @@
169169
overscroll-behavior: contain;
170170
}
171171

172-
[part='navbar'],
172+
[part~='navbar'],
173173
[part='drawer'] {
174174
background-color: var(--lumo-base-color);
175175
background-clip: padding-box;
176176
}
177177

178-
:host([primary-section='navbar']) [part='navbar'] {
178+
:host([primary-section='navbar']) [part~='navbar'] {
179179
border: none;
180180
background-image: linear-gradient(var(--lumo-contrast-5pct), var(--lumo-contrast-5pct));
181181
}

0 commit comments

Comments
 (0)