add slot detection back to dialog; fixes #926 (#927)

docs/_includes/search.njk

@@ -1,4 +1,4 @@
-<wa-dialog id="site-search" no-header light-dismiss>
+<wa-dialog id="site-search" without-header light-dismiss>
   <div id="site-search-container">
     {# Header #}
     <header>

docs/docs/components/dialog.md

@@ -27,19 +27,20 @@ keywords: modal
 
 ## Examples
 
-### Dialog with Header
+### Dialog without Header
 
-Headers can be used to display titles and more. Use the `with-header` attribute to add a header to the dialog.
+Headers are enabled by default. To render a dialog without a header, add the `without-header` attribute.
 
 ```html {.example}
-<wa-dialog label="Dialog" class="dialog-header">
+<wa-dialog label="Dialog" without-header class="dialog-without-header">
   Lorem ipsum dolor sit amet, consectetur adipiscing elit.
+  <wa-button slot="footer" variant="brand" data-dialog="close">Close</wa-button>
 </wa-dialog>
 
 <wa-button>Open Dialog</wa-button>
 
 <script>
-  const dialog = document.querySelector('.dialog-header');
+  const dialog = document.querySelector('.dialog-without-header');
   const openButton = dialog.nextElementSibling;
 
   openButton.addEventListener('click', () => dialog.open = true);
@@ -48,7 +49,7 @@ Headers can be used to display titles and more. Use the `with-header` attribute
 
 ### Dialog with Footer
 
-Footers can be used to display titles and more. Use the `with-footer` attribute to add a footer to the dialog.
+Footers can be used to display titles and more. Use the `footer` slot to add a footer to the dialog.
 
 ```html {.example}
 <wa-dialog label="Dialog" class="dialog-footer">

docs/docs/resources/changelog.md

@@ -15,6 +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
 - 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

src/components/dialog/dialog.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';
@@ -56,6 +57,7 @@ export default class WaDialog 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('.dialog') dialog: HTMLDialogElement;
@@ -72,11 +74,8 @@ export default class WaDialog extends WebAwesomeElement {
    */
   @property({ reflect: true }) label = '';
 
-  /** Renders the dialog with a header. */
-  @property({ attribute: 'with-header', type: Boolean, reflect: true }) withHeader = false;
-
-  /** Renders the dialog 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 dialog will be closed when the user clicks outside of it. */
   @property({ attribute: 'light-dismiss', type: Boolean }) lightDismiss = false;
@@ -211,20 +210,25 @@ export default class WaDialog 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({
           dialog: true,
           'dialog--open': this.open,
-          'dialog--with-header': this.withHeader,
-          'dialog--with-footer': this.withFooter,
+          'dialog--has-header': hasHeader,
+          'dialog--has-footer': hasFooter,
         })}
         @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">
@@ -250,7 +254,7 @@ export default class WaDialog extends WebAwesomeElement {
 
         <div part="body" class="body"><slot></slot></div>
 
-        ${this.withFooter
+        ${hasFooter
           ? html`
               <footer part="footer" class="footer">
                 <slot name="footer"></slot>