refactor: apply content styles on part instead of slotted element (#11458)

## Description

Updates Aura App Layout theme to apply content styles on the content
part instead of slotted content elements:
- Introduce a content part, update style rules to use it
- Update Aura theme to style the content part instead of the slotted
element
- Modify the content offset mechanism so that the offset of the content
from drawer / navbar is applied via padding on the host element
- The previous approach used a padding on the content part, resulting in
the content part stretching below the drawer, which does not give the
correct visual result when applying a background / border on the content
- Using a margin on the content part works as an alternative, however
that makes customizing the margin of the content part more complex for
users, as they would need to write CSS rules that account for the drawer
offset

Fixes #11431

## Type of change

- Refactor

---------

Co-authored-by: Jouni Koivuviita <jouni@vaadin.com>

Author: sissbruecker

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

@@ -17,16 +17,17 @@ export const appLayoutStyles = css`
     --vaadin-app-layout-touch-optimized: false;
     --vaadin-app-layout-navbar-offset-top: var(--_vaadin-app-layout-navbar-offset-size);
     --vaadin-app-layout-navbar-offset-bottom: var(--_vaadin-app-layout-navbar-offset-size-bottom);
+    --vaadin-app-layout-drawer-offset-left: 0px;
     padding-top: max(var(--vaadin-app-layout-navbar-offset-top), var(--safe-area-inset-top));
     padding-bottom: max(var(--vaadin-app-layout-navbar-offset-bottom), var(--safe-area-inset-bottom));
   }
 
-  :host(:dir(ltr)) [content] {
+  :host(:dir(ltr)) {
     padding-left: max(var(--vaadin-app-layout-drawer-offset-left), var(--safe-area-inset-left));
     padding-right: var(--safe-area-inset-right);
   }
 
-  :host(:dir(rtl)) [content] {
+  :host(:dir(rtl)) {
     padding-left: var(--safe-area-inset-left);
     padding-right: max(var(--vaadin-app-layout-drawer-offset-left), var(--safe-area-inset-right));
   }
@@ -50,11 +51,11 @@ export const appLayoutStyles = css`
     --vaadin-app-layout-drawer-offset-left: 0px;
   }
 
-  :host(:not([no-scroll])) [content] {
+  :host(:not([no-scroll])) [part~='content'] {
     overflow: auto;
   }
 
-  [content] {
+  [part~='content'] {
     height: 100%;
     transition: inherit;
   }
@@ -137,21 +138,10 @@ export const appLayoutStyles = css`
     padding-right: var(--safe-area-inset-right);
   }
 
-  :host([has-navbar]:not([overlay])) [part='drawer'],
-  :host([has-navbar]) [content] {
+  :host([has-navbar]:not([overlay])) [part='drawer'] {
     --safe-area-inset-top: 0px;
   }
 
-  :host([has-drawer]:not([overlay])[drawer-opened]) [content] {
-    &:dir(ltr) {
-      --safe-area-inset-left: 0px;
-    }
-
-    &:dir(rtl) {
-      --safe-area-inset-right: 0px;
-    }
-  }
-
   :host([drawer-opened]) [part='drawer'] {
     /* The drawer should be accessible by the tabbing navigation when it is opened. */
     visibility: visible;
@@ -209,6 +199,7 @@ export const appLayoutStyles = css`
   }
 
   /* If a vaadin-scroller is used in the drawer, allow it to take all remaining space and contain scrolling */
+
   [part='drawer'] ::slotted(vaadin-scroller) {
     flex: 1;
     overscroll-behavior: contain;

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

@@ -78,6 +78,7 @@ export type AppLayoutEventMap = AppLayoutCustomEventMap & HTMLElementEventMap;
  * `navbar-top`     | Container for the top navigation bar
  * `navbar-bottom`  | Container for the bottom navigation bar
  * `drawer`         | Container for the drawer area
+ * `content`        | Container for the content area
  *
  * The following state attributes are available for styling:
  *
@@ -140,8 +141,8 @@ export type AppLayoutEventMap = AppLayoutCustomEventMap & HTMLElementEventMap;
  *
  * To use the "content scrolling", in case of the content of the page relies on a pre-defined height (for instance,
  * it has a `height:100%`), then the developer can set `height: 100%` to both `html` and `body`.
- * That will make the `[content]` element of app layout scrollable.
- * On this case, the toolbars on mobile device won't collapse.
+ * That makes the content part of App Layout scrollable.
+ * In that case, the toolbars on mobile device won't collapse.
  *
  * @fires {CustomEvent} drawer-opened-changed - Fired when the `drawerOpened` property changes.
  * @fires {CustomEvent} overlay-changed - Fired when the `overlay` property changes.

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

@@ -57,6 +57,7 @@ import { AppLayoutMixin } from './vaadin-app-layout-mixin.js';
  * `navbar-top`     | Container for the top navigation bar
  * `navbar-bottom`  | Container for the bottom navigation bar
  * `drawer`         | Container for the drawer area
+ * `content`        | Container for the content area
  *
  * The following state attributes are available for styling:
  *
@@ -119,8 +120,8 @@ import { AppLayoutMixin } from './vaadin-app-layout-mixin.js';
  *
  * To use the "content scrolling", in case of the content of the page relies on a pre-defined height (for instance,
  * it has a `height:100%`), then the developer can set `height: 100%` to both `html` and `body`.
- * That will make the `[content]` element of app layout scrollable.
- * On this case, the toolbars on mobile device won't collapse.
+ * That makes the content part of App Layout scrollable.
+ * In that case, the toolbars on mobile device won't collapse.
  *
  * @fires {CustomEvent} drawer-opened-changed - Fired when the `drawerOpened` property changes.
  * @fires {CustomEvent} overlay-changed - Fired when the `overlay` property changes.
@@ -151,7 +152,7 @@ class AppLayout extends AppLayoutMixin(ElementMixin(ThemableMixin(PolylitMixin(L
       <div part="drawer" id="drawer">
         <slot name="drawer" id="drawerSlot" @slotchange="${this.__onDrawerSlotChange}"></slot>
       </div>
-      <div content>
+      <div part="content">
         <slot></slot>
       </div>
       <div part="navbar navbar-bottom" id="navbarBottom" hidden>

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

@@ -311,14 +311,13 @@ describe('vaadin-app-layout', () => {
         drawerContent.style.width = '200px';
         await nextResize(layout);
         await nextRender();
-        const content = layout.shadowRoot.querySelector('[content]');
-        const initialOffset = parseInt(getComputedStyle(content).getPropertyValue('padding-left'));
+        const initialOffset = parseInt(getComputedStyle(layout).getPropertyValue('padding-left'));
         expect(initialOffset).to.equal(200);
         // Decrease drawer content size and measure decrease
         drawerContent.style.width = '100px';
         await nextResize(layout);
         await nextRender();
-        const updatedOffset = parseInt(getComputedStyle(content).getPropertyValue('padding-left'));
+        const updatedOffset = parseInt(getComputedStyle(layout).getPropertyValue('padding-left'));
         expect(updatedOffset).to.equal(100);
       });
     });

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

@@ -60,7 +60,7 @@ snapshots["vaadin-app-layout shadow desktop layout default"] =
   >
   </slot>
 </div>
-<div content="">
+<div part="content">
   <slot>
   </slot>
 </div>
@@ -102,7 +102,7 @@ snapshots["vaadin-app-layout shadow desktop layout drawer closed"] =
   >
   </slot>
 </div>
-<div content="">
+<div part="content">
   <slot>
   </slot>
 </div>
@@ -147,7 +147,7 @@ snapshots["vaadin-app-layout shadow mobile layout default"] =
   >
   </slot>
 </div>
-<div content="">
+<div part="content">
   <slot>
   </slot>
 </div>
@@ -192,7 +192,7 @@ snapshots["vaadin-app-layout shadow mobile layout drawer opened"] =
   >
   </slot>
 </div>
-<div content="">
+<div part="content">
   <slot>
   </slot>
 </div>

packages/aura/src/color.css

@@ -56,7 +56,7 @@
 
 :where(:root),
 :where(:host),
-vaadin-app-layout > :not([slot]),
+vaadin-app-layout::part(content),
 vaadin-avatar,
 vaadin-badge,
 vaadin-button,

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

@@ -57,13 +57,13 @@ vaadin-app-layout > vaadin-scroller[slot='drawer'] {
   scrollbar-width: thin;
 }
 
-vaadin-app-layout > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
+vaadin-app-layout::part(content) {
   color-scheme: var(--aura-content-color-scheme);
   color: var(--vaadin-text-color);
   background: linear-gradient(var(--aura-surface-color), var(--aura-surface-color)), var(--aura-app-background);
   background-clip: padding-box;
   background-origin: border-box;
-  min-height: 100%;
+  min-height: 1lh;
   box-sizing: border-box;
   border-radius: var(--_app-layout-radius);
   border: var(--aura-app-layout-border-width) solid var(--vaadin-border-color-secondary);
@@ -108,17 +108,15 @@ vaadin-app-layout > vaadin-master-detail-layout:nth-child(1 of :not([slot])):nth
   }
 }
 
-vaadin-app-layout[has-drawer][drawer-opened]:not([overlay])
-  > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
+vaadin-app-layout[has-drawer][drawer-opened]:not([overlay])::part(content) {
   border-inline-start-width: var(--aura-app-layout-border-width);
 }
 
-vaadin-app-layout[has-navbar][has-drawer][drawer-opened]:not([overlay])
-  > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
+vaadin-app-layout[has-navbar][has-drawer][drawer-opened]:not([overlay])::part(content) {
   border-start-start-radius: var(--aura-app-layout-radius);
 }
 
-vaadin-app-layout[has-navbar] > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
+vaadin-app-layout[has-navbar]::part(content) {
   border-top-width: var(--aura-app-layout-border-width);
 }
 

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

@@ -36,11 +36,11 @@
     --vaadin-app-layout-navbar-offset-left: 0;
   }
 
-  :host(:not([no-scroll])) [content] {
+  :host(:not([no-scroll])) [part~='content'] {
     overflow: auto;
   }
 
-  [content] {
+  [part~='content'] {
     height: 100%;
   }