add slot detection back to drawer; #928 (#931)

* add slot detection back to drawer; #928

* remove unneeded attribute

docs/docs/components/drawer.md

@@ -8,7 +8,7 @@ icon: drawer
 <!-- cspell:dictionaries lorem-ipsum -->
 
 ```html {.example}
-<wa-drawer label="Drawer" class="drawer-overview">
+<wa-drawer label="Drawer" id="drawer-overview">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
   <wa-button slot="footer" variant="brand" data-drawer="close">Close</wa-button>
 </wa-drawer>
@@ -16,7 +16,7 @@ icon: drawer
 <wa-button>Open Drawer</wa-button>
 
 <script>
-  const drawer = document.querySelector('.drawer-overview');
+  const drawer = document.querySelector('#drawer-overview');
   const openButton = drawer.nextElementSibling;
 
   openButton.addEventListener('click', () => drawer.open = true);
@@ -25,19 +25,20 @@ icon: drawer
 
 ## Examples
 
-### Drawer with Header
+### Drawer without Header
 
-Headers can be used to display titles and more. Use the `with-header` attribute to add a header to the drawer.
+Headers are enabled by default. To render a drawer without a header, add the `without-header` attribute.
 
 ```html {.example}
-<wa-drawer label="Drawer" class="drawer-header">
+<wa-drawer label="Drawer" without-header class="drawer-without-header">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  <wa-button slot="footer" variant="brand" data-drawer="close">Close</wa-button>
 </wa-drawer>
 
 <wa-button>Open Drawer</wa-button>
 
 <script>
-  const drawer = document.querySelector('.drawer-header');
+  const drawer = document.querySelector('.drawer-without-header');
   const openButton = drawer.nextElementSibling;
 
   openButton.addEventListener('click', () => drawer.open = true);
@@ -46,7 +47,7 @@ Headers can be used to display titles and more. Use the `with-header` attribute
 
 ### Drawer with Footer
 
-Footers can be used to display titles and more. Use the `with-footer` attribute to add a footer to the drawer.
+Footers can be used to display titles and more. Use the `footer` slot to add a footer to the drawer.
 
 ```html {.example}
 <wa-drawer label="Drawer" class="drawer-footer">
@@ -261,9 +262,9 @@ You can use `event.detail.source` to determine what triggered the request to clo
 </script>
 ```
 
-### Customizing Initial Focus
+### Setting Initial Focus
 
-By default, the drawer's panel will gain focus when opened. This allows a subsequent tab press to focus on the first tabbable element in the drawer. If you want a different element to have focus, add the `autofocus` attribute to it as shown below.
+To give focus to a specific element when the drawer opens, use the `autofocus` attribute.
 
 ```html {.example}
 <wa-drawer label="Drawer" class="drawer-focus">

docs/docs/resources/changelog.md

@@ -15,7 +15,7 @@ During the alpha period, things might break! We take breaking changes very serio
 ## Next
 
 - 🚨 BREAKING: Renamed `<image-comparer>` to `<wa-comparer>` and improved compatibility for non-image content
-- 🚨 BREAKING:  Added slot detection to `<wa-dialog>` so you don't need to specify `with-header` and `with-footer`; headers are on by default now, but you can use the `without-header` attribute to turn them off
+- 🚨 BREAKING:  Added slot detection to `<wa-dialog>` and `<wa-drawer>` so you don't need to specify `with-header` and `with-footer`; headers are on by default now, but you can use the `without-header` attribute to turn them off
 - Added support for Duotone Thin, Light, and Regular styles and the Sharp Duotone family of styles to `<wa-icon>`
 - Fixed a bug that caused `<wa-radio-group>` to have an undesired margin below it
 - Fixed a bug in the Matter theme that prevented clicks on form control labels to not focus the control

docs/docs/themes/edit/index.njk

@@ -38,7 +38,7 @@ unlisted: true
       <wa-icon name="code" variant="solid"></wa-icon>
       Code
     </wa-button>
-    <wa-drawer label="Theme code" with-header :open="ui.showCode" @wa-after-hide="ui.showCode = false" light-dismiss>
+    <wa-drawer label="Theme code" :open="ui.showCode" @wa-after-hide="ui.showCode = false" light-dismiss>
       <wa-tab-group class="import-stylesheet-code" :active="ui.code" @wa-tab-show="ui.code = $event.detail.name">
         <wa-tab panel="css">CSS</wa-tab>
         <wa-tab-panel name="css">

src/components/dialog/dialog.css

@@ -63,7 +63,7 @@
   }
 }
 
-.dialog--open {
+.open {
   display: flex;
   opacity: 1;
 }
@@ -128,9 +128,9 @@
 
 .dialog::backdrop {
   /*
-      NOTE: the ::backdrop element doesn't inherit properly in Safari yet, but it will in 17.4! At that time, we can
-      remove the fallback values here.
-    */
+    NOTE: the ::backdrop element doesn't inherit properly in Safari yet, but it will in 17.4! At that time, we can
+    remove the fallback values here.
+  */
   background-color: var(--wa-color-overlay-modal, rgb(0 0 0 / 0.25));
 }
 

src/components/dialog/dialog.ts

@@ -220,9 +220,7 @@ export default class WaDialog extends WebAwesomeElement {
         part="dialog"
         class=${classMap({
           dialog: true,
-          'dialog--open': this.open,
-          'dialog--has-header': hasHeader,
-          'dialog--has-footer': hasFooter,
+          open: this.open,
         })}
         @cancel=${this.handleDialogCancel}
         @click=${this.handleDialogClick}

src/components/drawer/drawer.css

@@ -40,15 +40,15 @@
     animation: show-backdrop var(--hide-duration, 200ms) ease reverse;
   }
 
-  &.show.drawer--top {
+  &.show.top {
     animation: show-drawer-from-top var(--show-duration) ease;
   }
 
-  &.hide.drawer--top {
+  &.hide.top {
     animation: show-drawer-from-top var(--hide-duration) ease reverse;
   }
 
-  &.show.drawer--end {
+  &.show.end {
     animation: show-drawer-from-end var(--show-duration) ease;
 
     &:dir(rtl) {
@@ -56,7 +56,7 @@
     }
   }
 
-  &.hide.drawer--end {
+  &.hide.end {
     animation: show-drawer-from-end var(--hide-duration) ease reverse;
 
     &:dir(rtl) {
@@ -64,15 +64,15 @@
     }
   }
 
-  &.show.drawer--bottom {
+  &.show.bottom {
     animation: show-drawer-from-bottom var(--show-duration) ease;
   }
 
-  &.hide.drawer--bottom {
+  &.hide.bottom {
     animation: show-drawer-from-bottom var(--hide-duration) ease reverse;
   }
 
-  &.show.drawer--start {
+  &.show.start {
     animation: show-drawer-from-start var(--show-duration) ease;
 
     &:dir(rtl) {
@@ -80,7 +80,7 @@
     }
   }
 
-  &.hide.drawer--start {
+  &.hide.start {
     animation: show-drawer-from-start var(--hide-duration) ease reverse;
 
     &:dir(rtl) {
@@ -97,7 +97,7 @@
   outline: none;
 }
 
-.drawer--top {
+.top {
   top: 0;
   inset-inline-end: auto;
   bottom: auto;
@@ -106,7 +106,7 @@
   height: var(--size);
 }
 
-.drawer--end {
+.end {
   top: 0;
   inset-inline-end: 0;
   bottom: auto;
@@ -115,7 +115,7 @@
   height: 100%;
 }
 
-.drawer--bottom {
+.bottom {
   top: auto;
   inset-inline-end: auto;
   bottom: 0;
@@ -124,7 +124,7 @@
   height: var(--size);
 }
 
-.drawer--start {
+.start {
   top: 0;
   inset-inline-end: auto;
   bottom: auto;

src/components/drawer/drawer.ts

@@ -7,6 +7,7 @@ import { WaHideEvent } from '../../events/hide.js';
 import { WaShowEvent } from '../../events/show.js';
 import { animateWithClass } from '../../internal/animate.js';
 import { lockBodyScrolling, unlockBodyScrolling } from '../../internal/scroll.js';
+import { HasSlotController } from '../../internal/slot.js';
 import { watch } from '../../internal/watch.js';
 import WebAwesomeElement from '../../internal/webawesome-element.js';
 import { LocalizeController } from '../../utilities/localize.js';
@@ -61,6 +62,7 @@ export default class WaDrawer extends WebAwesomeElement {
   static shadowStyle = styles;
 
   private readonly localize = new LocalizeController(this);
+  private readonly hasSlotController = new HasSlotController(this, 'footer', 'header-actions', 'label');
   private originalTrigger: HTMLElement | null;
 
   @query('.drawer') drawer: HTMLDialogElement;
@@ -80,11 +82,8 @@ export default class WaDrawer extends WebAwesomeElement {
   /** The direction from which the drawer will open. */
   @property({ reflect: true }) placement: 'top' | 'end' | 'bottom' | 'start' = 'end';
 
-  /** Renders the drawer with a header. */
-  @property({ attribute: 'with-header', type: Boolean, reflect: true }) withHeader = false;
-
-  /** Renders the drawer with a footer. */
-  @property({ attribute: 'with-footer', type: Boolean, reflect: true }) withFooter = false;
+  /** Disables the header. This will also remove the default close button. */
+  @property({ attribute: 'without-header', type: Boolean, reflect: true }) withoutHeader = false;
 
   /** When enabled, the drawer will be closed when the user clicks outside of it. */
   @property({ attribute: 'light-dismiss', type: Boolean }) lightDismiss = true;
@@ -223,24 +222,27 @@ export default class WaDrawer extends WebAwesomeElement {
   }
 
   render() {
+    const hasHeader =
+      !this.withoutHeader &&
+      (this.label.length > 0 || this.hasSlotController.test('label') || this.hasSlotController.test('header-actions'));
+    const hasFooter = this.hasSlotController.test('footer');
+
     return html`
       <dialog
         part="dialog"
         class=${classMap({
           drawer: true,
-          'drawer--open': this.open,
-          'drawer--top': this.placement === 'top',
-          'drawer--end': this.placement === 'end',
-          'drawer--bottom': this.placement === 'bottom',
-          'drawer--start': this.placement === 'start',
-          'drawer--with-header': this.withHeader,
-          'drawer--with-footer': this.withFooter,
+          open: this.open,
+          top: this.placement === 'top',
+          end: this.placement === 'end',
+          bottom: this.placement === 'bottom',
+          start: this.placement === 'start',
         })}
         @cancel=${this.handleDialogCancel}
         @click=${this.handleDialogClick}
         @pointerdown=${this.handleDialogPointerDown}
       >
-        ${this.withHeader
+        ${hasHeader
           ? html`
               <header part="header" class="header">
                 <h2 part="title" class="title" id="title">
@@ -266,7 +268,7 @@ export default class WaDrawer extends WebAwesomeElement {
 
         <div part="body" class="body"><slot></slot></div>
 
-        ${this.withFooter
+        ${hasFooter
           ? html`
               <footer part="footer" class="footer">
                 <slot name="footer"></slot>