feat: add has-drawer and has-navbar attributes

dev/aura/aura-view.css

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

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

@@ -208,6 +208,18 @@ export const AppLayoutMixin = (superclass) =>
       window.removeEventListener('keydown', this.__onDrawerKeyDown);
     }
 
+    /** @private */
+    __onNavbarSlotChange() {
+      this._updateTouchOptimizedMode();
+      this.toggleAttribute('has-navbar', !!this.querySelector('[slot="navbar"]'));
+    }
+
+    /** @private */
+    __onDrawerSlotChange() {
+      this._updateDrawerSize();
+      this.toggleAttribute('has-drawer', !!this.querySelector('[slot="drawer"]'));
+    }
+
     /**
      * A callback for the `primarySection` property observer.
      *

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

@@ -77,6 +77,13 @@ export type AppLayoutEventMap = AppLayoutCustomEventMap & HTMLElementEventMap;
  * `navbar`      | Container for the navigation bar
  * `drawer`      | Container for the drawer area
  *
+ * The following state attributes are available for styling:
+ *
+ * Attribute      | Description
+ * ---------------|-------------
+ * `has-drawer`   | Set when the element has light DOM content in the drawer slot.
+ * `has-navbar`   | Set when the element has light DOM content in the navbar slot.
+ *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * ### Component's slots

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

@@ -59,6 +59,13 @@ import { AppLayoutMixin } from './vaadin-app-layout-mixin.js';
  *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
+ * The following state attributes are available for styling:
+ *
+ * Attribute      | Description
+ * ---------------|-------------
+ * `has-drawer`   | Set when the element has light DOM content in the drawer slot.
+ * `has-navbar`   | Set when the element has light DOM content in the navbar slot.
+ *
  * ### Component's slots
  *
  * The following slots are available to be set
@@ -121,11 +128,11 @@ class AppLayout extends AppLayoutMixin(ElementMixin(ThemableMixin(PolylitMixin(L
   render() {
     return html`
       <div part="navbar" id="navbarTop">
-        <slot name="navbar" @slotchange="${this._updateTouchOptimizedMode}"></slot>
+        <slot name="navbar" @slotchange="${this.__onNavbarSlotChange}"></slot>
       </div>
       <div part="backdrop" @click="${this._onBackdropClick}" @touchend="${this._onBackdropTouchend}"></div>
       <div part="drawer" id="drawer">
-        <slot name="drawer" id="drawerSlot" @slotchange="${this._updateDrawerSize}"></slot>
+        <slot name="drawer" id="drawerSlot" @slotchange="${this.__onDrawerSlotChange}"></slot>
       </div>
       <div content>
         <slot></slot>
@@ -134,7 +141,7 @@ class AppLayout extends AppLayoutMixin(ElementMixin(ThemableMixin(PolylitMixin(L
         <slot name="navbar-bottom"></slot>
       </div>
       <div hidden>
-        <slot id="touchSlot" name="navbar touch-optimized" @slotchange="${this._updateTouchOptimizedMode}"></slot>
+        <slot id="touchSlot" name="navbar touch-optimized" @slotchange="${this.__onNavbarSlotChange}"></slot>
       </div>
     `;
   }

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

@@ -1,7 +1,46 @@
 /* @web/test-runner snapshot v1 */
 export const snapshots = {};
 
-snapshots["vaadin-app-layout desktop layout shadow default"] = 
+snapshots["vaadin-app-layout host default"] = 
+`<vaadin-app-layout
+  no-anim=""
+  overlay=""
+  primary-section="navbar"
+  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;"
+>
+</vaadin-app-layout>
+`;
+/* end snapshot vaadin-app-layout host default */
+
+snapshots["vaadin-app-layout host with drawer"] = 
+`<vaadin-app-layout
+  has-drawer=""
+  overlay=""
+  primary-section="navbar"
+  style="--_vaadin-app-layout-navbar-offset-size: 0px; --_vaadin-app-layout-navbar-offset-size-bottom: 0px; --_vaadin-app-layout-drawer-offset-size: 320px;"
+>
+  <div slot="drawer">
+    Drawer Content
+  </div>
+</vaadin-app-layout>
+`;
+/* end snapshot vaadin-app-layout host with drawer */
+
+snapshots["vaadin-app-layout host with navbar"] = 
+`<vaadin-app-layout
+  has-navbar=""
+  overlay=""
+  primary-section="navbar"
+  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;"
+>
+  <div slot="navbar">
+    Navbar Content
+  </div>
+</vaadin-app-layout>
+`;
+/* end snapshot vaadin-app-layout host with navbar */
+
+snapshots["vaadin-app-layout shadow desktop layout default"] = 
 `<div
   id="navbarTop"
   part="navbar"
@@ -42,9 +81,9 @@ snapshots["vaadin-app-layout desktop layout shadow default"] =
   </slot>
 </div>
 `;
-/* end snapshot vaadin-app-layout desktop layout shadow default */
+/* end snapshot vaadin-app-layout shadow desktop layout default */
 
-snapshots["vaadin-app-layout desktop layout shadow drawer closed"] = 
+snapshots["vaadin-app-layout shadow desktop layout drawer closed"] = 
 `<div
   id="navbarTop"
   part="navbar"
@@ -85,9 +124,9 @@ snapshots["vaadin-app-layout desktop layout shadow drawer closed"] =
   </slot>
 </div>
 `;
-/* end snapshot vaadin-app-layout desktop layout shadow drawer closed */
+/* end snapshot vaadin-app-layout shadow desktop layout drawer closed */
 
-snapshots["vaadin-app-layout mobile layout shadow default"] = 
+snapshots["vaadin-app-layout shadow mobile layout default"] = 
 `<div
   id="navbarTop"
   part="navbar"
@@ -131,9 +170,9 @@ snapshots["vaadin-app-layout mobile layout shadow default"] =
   </slot>
 </div>
 `;
-/* end snapshot vaadin-app-layout mobile layout shadow default */
+/* end snapshot vaadin-app-layout shadow mobile layout default */
 
-snapshots["vaadin-app-layout mobile layout shadow drawer opened"] = 
+snapshots["vaadin-app-layout shadow mobile layout drawer opened"] = 
 `<div
   id="navbarTop"
   part="navbar"
@@ -177,5 +216,5 @@ snapshots["vaadin-app-layout mobile layout shadow drawer opened"] =
   </slot>
 </div>
 `;
-/* end snapshot vaadin-app-layout mobile layout shadow drawer opened */
+/* end snapshot vaadin-app-layout shadow mobile layout drawer opened */
 

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

@@ -7,31 +7,55 @@ import '../../vaadin-drawer-toggle.js';
 describe('vaadin-app-layout', () => {
   let layout;
 
-  async function fixtureLayout() {
-    layout = fixtureSync(`
-      <vaadin-app-layout>
-        <vaadin-drawer-toggle id="toggle" slot="navbar">
-          Drawer Toggle
-        </vaadin-drawer-toggle>
-        <section slot="drawer">
-          Drawer Content
-        </section>
-        <main>Page Content</main>
-      </vaadin-app-layout>
-    `);
-    await nextRender();
-  }
+  describe('host', () => {
+    beforeEach(() => {
+      layout = fixtureSync('<vaadin-app-layout></vaadin-app-layout>');
+    });
+
+    it('default', async () => {
+      await expect(layout).dom.to.equalSnapshot();
+    });
 
-  describe('desktop layout', () => {
-    before(async () => {
-      await setViewport({ width: 1000, height: 1000 });
+    it('with drawer', async () => {
+      const drawer = document.createElement('div');
+      drawer.setAttribute('slot', 'drawer');
+      drawer.textContent = 'Drawer Content';
+      layout.appendChild(drawer);
+      await nextRender();
+      await expect(layout).dom.to.equalSnapshot();
     });
 
+    it('with navbar', async () => {
+      const navbar = document.createElement('div');
+      navbar.setAttribute('slot', 'navbar');
+      navbar.textContent = 'Navbar Content';
+      layout.appendChild(navbar);
+      await nextRender();
+      await expect(layout).dom.to.equalSnapshot();
+    });
+  });
+
+  describe('shadow', () => {
     beforeEach(async () => {
-      await fixtureLayout();
+      layout = fixtureSync(`
+        <vaadin-app-layout>
+          <vaadin-drawer-toggle id="toggle" slot="navbar">
+            Drawer Toggle
+          </vaadin-drawer-toggle>
+          <section slot="drawer">
+            Drawer Content
+          </section>
+          <main>Page Content</main>
+        </vaadin-app-layout>
+      `);
+      await nextRender();
     });
 
-    describe('shadow', () => {
+    describe('desktop layout', () => {
+      before(async () => {
+        await setViewport({ width: 1000, height: 1000 });
+      });
+
       it('default', async () => {
         await expect(layout).shadowDom.to.equalSnapshot();
       });
@@ -41,18 +65,12 @@ describe('vaadin-app-layout', () => {
         await expect(layout).shadowDom.to.equalSnapshot();
       });
     });
-  });
-
-  describe('mobile layout', () => {
-    before(async () => {
-      await setViewport({ width: 500, height: 500 });
-    });
 
-    beforeEach(async () => {
-      await fixtureLayout();
-    });
+    describe('mobile layout', () => {
+      before(async () => {
+        await setViewport({ width: 500, height: 500 });
+      });
 
-    describe('shadow', () => {
       it('default', async () => {
         await expect(layout).shadowDom.to.equalSnapshot();
       });

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

@@ -94,32 +94,29 @@ vaadin-app-layout > vaadin-master-detail-layout:nth-child(1 of :not([slot])):nth
   }
 }
 
-vaadin-app-layout:has([slot='navbar']):has([slot='drawer']) {
+vaadin-app-layout[has-navbar][has-drawer] {
   padding-top: var(--_vaadin-app-layout-navbar-offset-size);
 
   &::part(drawer) {
     padding-top: 0;
   }
 }
 
-vaadin-app-layout:has([slot='drawer']):not([overlay]):not([drawer-opened])
+vaadin-app-layout[has-drawer]:not([overlay]):not([drawer-opened])
   > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
   border-inline-start-width: min(var(--aura-app-layout-inset), var(--_aura-mdl-border));
 }
 
-vaadin-app-layout:has([slot='navbar']):has([slot='drawer'])[drawer-opened]:not([overlay])
+vaadin-app-layout[has-navbar][has-drawer][drawer-opened]:not([overlay])
   > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
   border-start-start-radius: var(--aura-app-layout-radius);
 }
 
-vaadin-app-layout:has([slot='navbar']):has([slot='drawer'])
-  > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
+vaadin-app-layout[has-navbar][has-drawer] > :nth-child(1 of :not([slot])):nth-last-child(1 of :not([slot])) {
   border-top-width: var(--_aura-mdl-border);
 }
 
-vaadin-app-layout:has([slot='navbar'])
-  > :is(:not([slot]), [slot='drawer'])
-  vaadin-drawer-toggle:not([theme~='permanent']),
-vaadin-app-layout:not(:has([slot='navbar'])) > [slot='drawer'] vaadin-drawer-toggle:not([theme~='permanent']) {
+vaadin-app-layout[has-navbar] > :is(:not([slot]), [slot='drawer']) vaadin-drawer-toggle:not([theme~='permanent']),
+vaadin-app-layout:not([has-navbar]) > [slot='drawer'] vaadin-drawer-toggle:not([theme~='permanent']) {
   display: none;
 }