refactor!: update dialog to use native popover (#9807)

* use native popover for dialog overlay

* use dialog as content root

* update content root related tests

* export parts

* update snapshots

* add host snapshot

* move role to dialog

* move aria-label to dialog

* use ready instead of firstUpdated

* reflect dialog-specific state attributes

* move header title logic to dialog

* remove obsolete setting CRUD dialog role

* update integration tests

* simplify header title aria-label logic

* JSDoc fixes

Author: sissbruecker

packages/crud/src/vaadin-crud-dialog.js

@@ -167,13 +167,6 @@ class CrudDialog extends DialogBaseMixin(OverlayClassMixin(ThemePropertyMixin(Po
     `;
   }
 
-  /** @protected */
-  firstUpdated(props) {
-    super.firstUpdated(props);
-
-    this.role = 'dialog';
-  }
-
   /** @private **/
   __cancel() {
     this.dispatchEvent(new CustomEvent('cancel'));

packages/dialog/src/vaadin-dialog-base-mixin.d.ts

@@ -33,7 +33,7 @@ export declare class DialogBaseMixinClass {
   modeless: boolean;
 
   /**
-   * The `role` attribute value to be set on the overlay. Defaults to "dialog".
+   * The `role` attribute value to be set on the dialog. Defaults to "dialog".
    *
    * @attr {string} overlay-role
    */

packages/dialog/src/vaadin-dialog-base-mixin.js

@@ -77,13 +77,12 @@ export const DialogBaseMixin = (superClass) =>
         },
 
         /**
-         * The `role` attribute value to be set on the overlay. Defaults to "dialog".
+         * The `role` attribute value to be set on the dialog. Defaults to "dialog".
          *
          * @attr {string} overlay-role
          */
         overlayRole: {
           type: String,
-          value: 'dialog',
         },
       };
     }
@@ -103,6 +102,19 @@ export const DialogBaseMixin = (superClass) =>
       overlay.addEventListener('vaadin-overlay-closed', this.__handleOverlayClosed.bind(this));
 
       this._overlayElement = overlay;
+
+      if (!this.hasAttribute('role')) {
+        this.role = 'dialog';
+      }
+    }
+
+    /** @protected */
+    updated(props) {
+      super.updated(props);
+
+      if (props.has('overlayRole')) {
+        this.role = this.overlayRole || 'dialog';
+      }
     }
 
     /** @private */

packages/dialog/src/vaadin-dialog-overlay-mixin.js

@@ -4,6 +4,7 @@
  * This program is available under Apache License Version 2.0, available at https://vaadin.com/license/
  */
 import { OverlayMixin } from '@vaadin/overlay/src/vaadin-overlay-mixin.js';
+import { setOverlayStateAttribute } from '@vaadin/overlay/src/vaadin-overlay-utils.js';
 
 /**
  * @polymerMixin
@@ -43,6 +44,24 @@ export const DialogOverlayMixin = (superClass) =>
       ];
     }
 
+    /**
+     * Override method from OverlayFocusMixin to use owner as content root
+     * @protected
+     * @override
+     */
+    get _contentRoot() {
+      return this.owner;
+    }
+
+    /**
+     * Override method from OverlayFocusMixin to use owner as modal root
+     * @protected
+     * @override
+     */
+    get _modalRoot() {
+      return this.owner;
+    }
+
     /** @protected */
     ready() {
       super.ready();
@@ -59,6 +78,22 @@ export const DialogOverlayMixin = (superClass) =>
       });
     }
 
+    /**
+     * @protected
+     * @override
+     */
+    _attachOverlay() {
+      this.showPopover();
+    }
+
+    /**
+     * @protected
+     * @override
+     */
+    _detachOverlay() {
+      this.hidePopover();
+    }
+
     /** @private */
     __createContainer(slot) {
       const container = document.createElement('div');
@@ -99,8 +134,8 @@ export const DialogOverlayMixin = (superClass) =>
       this._oldOpenedFooterHeader = opened;
 
       // Set attributes here to update styles before detecting content overflow
-      this.toggleAttribute('has-header', !!headerRenderer);
-      this.toggleAttribute('has-footer', !!footerRenderer);
+      setOverlayStateAttribute(this, 'has-header', !!headerRenderer);
+      setOverlayStateAttribute(this, 'has-footer', !!footerRenderer);
 
       if (headerRendererChanged) {
         if (headerRenderer) {
@@ -134,7 +169,7 @@ export const DialogOverlayMixin = (superClass) =>
 
     /** @private */
     _headerTitleChanged(headerTitle, opened) {
-      this.toggleAttribute('has-title', !!headerTitle);
+      setOverlayStateAttribute(this, 'has-title', !!headerTitle);
 
       if (opened && (headerTitle || this._oldHeaderTitle)) {
         this.requestContentUpdate();
@@ -150,7 +185,7 @@ export const DialogOverlayMixin = (superClass) =>
           this.headerTitleElement.setAttribute('slot', 'title');
           this.headerTitleElement.classList.add('draggable');
         }
-        this.appendChild(this.headerTitleElement);
+        this.owner.appendChild(this.headerTitleElement);
         this.headerTitleElement.textContent = this.headerTitle;
       } else if (this.headerTitleElement) {
         this.headerTitleElement.remove();
@@ -167,7 +202,7 @@ export const DialogOverlayMixin = (superClass) =>
       if (this.headerContainer) {
         // If a new renderer has been set, make sure to reattach the container
         if (!this.headerContainer.parentElement) {
-          this.appendChild(this.headerContainer);
+          this.owner.appendChild(this.headerContainer);
         }
 
         if (this.headerRenderer) {
@@ -179,7 +214,7 @@ export const DialogOverlayMixin = (superClass) =>
       if (this.footerContainer) {
         // If a new renderer has been set, make sure to reattach the container
         if (!this.footerContainer.parentElement) {
-          this.appendChild(this.footerContainer);
+          this.owner.appendChild(this.footerContainer);
         }
 
         if (this.footerRenderer) {
@@ -227,9 +262,9 @@ export const DialogOverlayMixin = (superClass) =>
 
       const value = overflow.trim();
       if (value.length > 0 && this.getAttribute('overflow') !== value) {
-        this.setAttribute('overflow', value);
+        setOverlayStateAttribute(this, 'overflow', value);
       } else if (value.length === 0 && this.hasAttribute('overflow')) {
-        this.removeAttribute('overflow');
+        setOverlayStateAttribute(this, 'overflow', null);
       }
     }
   };

packages/dialog/src/vaadin-dialog.d.ts

@@ -91,16 +91,13 @@ export type DialogEventMap = DialogCustomEventMap & HTMLElementEventMap;
  *
  * ### Styling
  *
- * `<vaadin-dialog>` uses `<vaadin-dialog-overlay>` internal
- * themable component as the actual visible dialog overlay.
- *
- * See [`<vaadin-overlay>`](#/elements/vaadin-overlay) documentation.
- * for `<vaadin-dialog-overlay>` parts.
- *
- * In addition to `<vaadin-overlay>` parts, the following parts are available for styling:
+ * The following shadow DOM parts are available for styling:
  *
  * Part name        | Description
  * -----------------|-------------------------------------------
+ * `backdrop`       | Backdrop of the overlay
+ * `overlay`        | The overlay container
+ * `content`        | The overlay content
  * `header`         | Element wrapping title and header content
  * `header-content` | Element wrapping the header content slot
  * `title`          | Element wrapping the title slot
@@ -115,9 +112,6 @@ export type DialogEventMap = DialogCustomEventMap & HTMLElementEventMap;
  * `has-footer`     | Set when the element has footer renderer
  * `overflow`       | Set to `top`, `bottom`, none or both
  *
- * Note: the `theme` attribute value set on `<vaadin-dialog>` is
- * propagated to the internal `<vaadin-dialog-overlay>` component.
- *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {CustomEvent} resize - Fired when the dialog resize is finished.

packages/dialog/src/vaadin-dialog.js

@@ -48,16 +48,13 @@ export { DialogOverlay } from './vaadin-dialog-overlay.js';
  *
  * ### Styling
  *
- * `<vaadin-dialog>` uses `<vaadin-dialog-overlay>` internal
- * themable component as the actual visible dialog overlay.
- *
- * See [`<vaadin-overlay>`](#/elements/vaadin-overlay) documentation.
- * for `<vaadin-dialog-overlay>` parts.
- *
- * In addition to `<vaadin-overlay>` parts, the following parts are available for styling:
+ * The following shadow DOM parts are available for styling:
  *
  * Part name        | Description
  * -----------------|-------------------------------------------
+ * `backdrop`       | Backdrop of the overlay
+ * `overlay`        | The overlay container
+ * `content`        | The overlay content
  * `header`         | Element wrapping title and header content
  * `header-content` | Element wrapping the header content slot
  * `title`          | Element wrapping the title slot
@@ -72,9 +69,6 @@ export { DialogOverlay } from './vaadin-dialog-overlay.js';
  * `has-footer`     | Set when the element has footer renderer
  * `overflow`       | Set to `top`, `bottom`, none or both
  *
- * Note: the `theme` attribute value set on `<vaadin-dialog>` is
- * propagated to the internal `<vaadin-dialog-overlay>` component.
- *
  * See [Styling Components](https://vaadin.com/docs/latest/styling/styling-components) documentation.
  *
  * @fires {CustomEvent} resize - Fired when the dialog resize is finished.
@@ -108,32 +102,25 @@ class Dialog extends DialogSizeMixin(
 
   static get styles() {
     return css`
-      :host {
+      :host,
+      [hidden] {
         display: none !important;
       }
-    `;
-  }
 
-  static get properties() {
-    return {
-      /**
-       * Set the `aria-label` attribute for assistive technologies like
-       * screen readers. An empty string value for this property (the
-       * default) means that the `aria-label` attribute is not present.
-       */
-      ariaLabel: {
-        type: String,
-        value: '',
-      },
-    };
+      :host([opened]),
+      :host([opening]),
+      :host([closing]) {
+        display: contents !important;
+      }
+    `;
   }
 
   /** @protected */
   render() {
     return html`
       <vaadin-dialog-overlay
         id="overlay"
-        role="${this.overlayRole}"
+        popover="manual"
         .owner="${this}"
         .opened="${this.opened}"
         .headerTitle="${this.headerTitle}"
@@ -144,15 +131,29 @@ class Dialog extends DialogSizeMixin(
         @mousedown="${this._bringOverlayToFront}"
         @touchstart="${this._bringOverlayToFront}"
         theme="${ifDefined(this._theme)}"
-        aria-label="${ifDefined(this.ariaLabel || this.headerTitle)}"
         .modeless="${this.modeless}"
         .withBackdrop="${!this.modeless}"
         ?resizable="${this.resizable}"
         restore-focus-on-close
         focus-trap
-      ></vaadin-dialog-overlay>
+        exportparts="backdrop, overlay, header, title, header-content, content, footer"
+      >
+        <slot name="title" slot="title"></slot>
+        <slot name="header-content" slot="header-content"></slot>
+        <slot name="footer" slot="footer"></slot>
+        <slot></slot>
+      </vaadin-dialog-overlay>
     `;
   }
+
+  /** @protected */
+  updated(props) {
+    super.updated(props);
+
+    if (props.has('headerTitle')) {
+      this.ariaLabel = this.headerTitle;
+    }
+  }
 }
 
 defineCustomElement(Dialog);