@vaadin/dialog 23.0.4 → 23.1.0-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/dialog",
-  "version": "23.0.4",
+  "version": "23.1.0-alpha1",
   "publishConfig": {
     "access": "public"
   },
@@ -35,18 +35,18 @@
   "dependencies": {
     "@open-wc/dedupe-mixin": "^1.3.0",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/component-base": "^23.0.4",
-    "@vaadin/vaadin-lumo-styles": "^23.0.4",
-    "@vaadin/vaadin-material-styles": "^23.0.4",
-    "@vaadin/vaadin-overlay": "^23.0.4",
-    "@vaadin/vaadin-themable-mixin": "^23.0.4"
+    "@vaadin/component-base": "23.1.0-alpha1",
+    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha1",
+    "@vaadin/vaadin-material-styles": "23.1.0-alpha1",
+    "@vaadin/vaadin-overlay": "23.1.0-alpha1",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha1"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "^23.0.4",
+    "@vaadin/polymer-legacy-adapter": "23.1.0-alpha1",
     "@vaadin/testing-helpers": "^0.3.2",
-    "@vaadin/text-area": "^23.0.4",
+    "@vaadin/text-area": "23.1.0-alpha1",
     "sinon": "^9.2.1"
   },
-  "gitHead": "d8db2046661c42fb5aac09ed683b500bf4613b26"
+  "gitHead": "5d0cdee069f866037c507265fafb4d0476795333"
 }

package/src/vaadin-dialog.d.ts

@@ -94,6 +94,23 @@ export type DialogEventMap = HTMLElementEventMap & DialogCustomEventMap;
  * 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:
+ *
+ * Part name        | Description
+ * -----------------|-------------------------------------------
+ * `header`         | Element wrapping title and header content
+ * `header-content` | Element wrapping the header content slot
+ * `title`          | Element wrapping the title slot
+ * `footer`         | Element wrapping the footer slot
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute        | Description
+ * -----------------|--------------------------------------------
+ * `has-title`      | Set when the element has a title
+ * `has-header`     | Set when the element has header renderer
+ * `has-footer`     | Set when the element has footer renderer
+ *
  * Note: the `theme` attribute value set on `<vaadin-dialog>` is
  * propagated to the internal `<vaadin-dialog-overlay>` component.
  *
@@ -136,14 +153,52 @@ declare class Dialog extends ThemePropertyMixin(ElementMixin(DialogDraggableMixi
    */
   renderer: DialogRenderer | null | undefined;
 
+  /**
+   * String used for rendering a dialog title.
+   *
+   * If both `headerTitle` and `headerRenderer` are defined, the title
+   * and the elements created by the renderer will be placed next to
+   * each other, with the title coming first.
+   *
+   * When `headerTitle` is set, the attribute `has-title` is added to the overlay element.
+   * @attr {string} header-title
+   */
+  headerTitle: string | null | undefined;
+
+  /**
+   * Custom function for rendering the dialog header.
+   * Receives two arguments:
+   *
+   * - `root` The root container DOM element. Append your content to it.
+   * - `dialog` The reference to the `<vaadin-dialog>` element.
+   *
+   * If both `headerTitle` and `headerRenderer` are defined, the title
+   * and the elements created by the renderer will be placed next to
+   * each other, with the title coming first.
+   *
+   * When `headerRenderer` is set, the attribute `has-header` is added to the overlay element.
+   */
+  headerRenderer: DialogRenderer | null | undefined;
+
+  /**
+   * Custom function for rendering the dialog footer.
+   * Receives two arguments:
+   *
+   * - `root` The root container DOM element. Append your content to it.
+   * - `dialog` The reference to the `<vaadin-dialog>` element.
+   *
+   * When `footerRenderer` is set, the attribute `has-footer` is added to the overlay element.
+   */
+  footerRenderer: DialogRenderer | null | undefined;
+
   /**
    * Set to true to remove backdrop and allow click events on background elements.
    */
   modeless: boolean;
 
   /**
-   * Requests an update for the content of the dialog.
-   * While performing the update, it invokes the renderer passed in the `renderer` property.
+   * While performing the update, it invokes the renderer passed in the `renderer` property,
+   * as well as `headerRender` and `footerRenderer` properties, if these are defined.
    *
    * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
    */

package/src/vaadin-dialog.js

@@ -15,6 +15,50 @@ import { DialogResizableMixin } from './vaadin-dialog-resizable-mixin.js';
 registerStyles(
   'vaadin-dialog-overlay',
   css`
+    /* prefixing with the element tag to avoid styling confirm-dialog header part */
+    header[part='header'] {
+      display: flex;
+    }
+
+    [part='header-content'] {
+      flex: 1;
+    }
+
+    /* prefixing with the element tag to avoid styling confirm-dialog footer part */
+    footer[part='footer'] {
+      display: flex;
+      justify-content: flex-end;
+    }
+
+    :host(:not([has-title]):not([has-header])) header[part='header'],
+    :host(:not([has-title])) [part='title'] {
+      display: none;
+    }
+
+    :host(:not([has-footer])) footer[part='footer'] {
+      display: none;
+    }
+
+    :host(:is([has-title], [has-header], [has-footer])) [part='content'] {
+      min-height: 100%;
+      height: auto;
+    }
+
+    @media (min-height: 320px) {
+      :host(:is([has-title], [has-header], [has-footer])) .resizer-container {
+        overflow: hidden;
+        display: flex;
+        flex-direction: column;
+      }
+
+      :host(:is([has-title], [has-header], [has-footer])) [part='content'] {
+        flex: 1;
+        overflow: auto;
+        min-height: auto;
+        height: 100%;
+      }
+    }
+
     /*
       NOTE(platosha): Make some min-width to prevent collapsing of the content
       taking the parent width, e. g., <vaadin-grid> and such.
@@ -53,18 +97,188 @@ export class DialogOverlay extends OverlayElement {
       resizerContainer.classList.add('resizer-container');
       resizerContainer.appendChild(contentPart);
       overlayPart.appendChild(resizerContainer);
+
+      const headerContainer = document.createElement('header');
+      headerContainer.setAttribute('part', 'header');
+      resizerContainer.insertBefore(headerContainer, contentPart);
+
+      const titleContainer = document.createElement('div');
+      titleContainer.setAttribute('part', 'title');
+      headerContainer.appendChild(titleContainer);
+
+      const titleSlot = document.createElement('slot');
+      titleSlot.setAttribute('name', 'title');
+      titleContainer.appendChild(titleSlot);
+
+      const headerContentContainer = document.createElement('div');
+      headerContentContainer.setAttribute('part', 'header-content');
+      headerContainer.appendChild(headerContentContainer);
+
+      const headerSlot = document.createElement('slot');
+      headerSlot.setAttribute('name', 'header-content');
+      headerContentContainer.appendChild(headerSlot);
+
+      const footerContainer = document.createElement('footer');
+      footerContainer.setAttribute('part', 'footer');
+      resizerContainer.appendChild(footerContainer);
+
+      const footerSlot = document.createElement('slot');
+      footerSlot.setAttribute('name', 'footer');
+      footerContainer.appendChild(footerSlot);
     }
     return memoizedTemplate;
   }
 
+  static get observers() {
+    return [
+      '_headerFooterRendererChange(headerRenderer, footerRenderer, opened)',
+      '_headerTitleChanged(headerTitle, opened)'
+    ];
+  }
+
   static get properties() {
     return {
       modeless: Boolean,
 
-      withBackdrop: Boolean
+      withBackdrop: Boolean,
+
+      headerTitle: String,
+
+      headerRenderer: Function,
+
+      footerRenderer: Function
     };
   }
 
+  ready() {
+    super.ready();
+
+    const uniqueId = (DialogOverlay._uniqueId = 1 + DialogOverlay._uniqueId || 0);
+    this._titleId = `${this.constructor.is}-title-${uniqueId}`;
+  }
+
+  /** @private */
+  __createContainer(slot) {
+    const container = document.createElement('div');
+    container.setAttribute('slot', slot);
+    return container;
+  }
+
+  /** @private */
+  __clearContainer(container) {
+    container.innerHTML = '';
+    // Whenever a Lit-based renderer is used, it assigns a Lit part to the node it was rendered into.
+    // When clearing the rendered content, this part needs to be manually disposed of.
+    // Otherwise, using a Lit-based renderer on the same node will throw an exception or render nothing afterward.
+    delete container._$litPart$;
+  }
+
+  /** @private */
+  __initContainer(container, slot) {
+    if (container) {
+      // Reset existing container in case if a new renderer is set.
+      this.__clearContainer(container);
+    } else {
+      // Create the container, but wait to append it until requestContentUpdate is called.
+      container = this.__createContainer(slot);
+    }
+    return container;
+  }
+
+  /** @private */
+  _headerFooterRendererChange(headerRenderer, footerRenderer, opened) {
+    const headerRendererChanged = this.__oldHeaderRenderer !== headerRenderer;
+    this.__oldHeaderRenderer = headerRenderer;
+
+    const footerRendererChanged = this.__oldFooterRenderer !== footerRenderer;
+    this.__oldFooterRenderer = footerRenderer;
+
+    const openedChanged = this._oldOpenedFooterHeader !== opened;
+    this._oldOpenedFooterHeader = opened;
+
+    if (headerRendererChanged) {
+      if (headerRenderer) {
+        this.headerContainer = this.__initContainer(this.headerContainer, 'header-content');
+      } else if (this.headerContainer) {
+        this.headerContainer.remove();
+        this.headerContainer = null;
+      }
+    }
+
+    if (footerRendererChanged) {
+      if (footerRenderer) {
+        this.footerContainer = this.__initContainer(this.footerContainer, 'footer');
+      } else if (this.footerContainer) {
+        this.footerContainer.remove();
+        this.footerContainer = null;
+      }
+    }
+
+    if (
+      (headerRenderer && (headerRendererChanged || openedChanged)) ||
+      (footerRenderer && (footerRendererChanged || openedChanged))
+    ) {
+      if (opened) {
+        this.requestContentUpdate();
+      }
+    }
+
+    this.toggleAttribute('has-header', !!headerRenderer);
+    this.toggleAttribute('has-footer', !!footerRenderer);
+  }
+
+  /** @private */
+  _headerTitleChanged(headerTitle, opened) {
+    if (opened && (headerTitle || this._oldHeaderTitle)) {
+      this.requestContentUpdate();
+    }
+    this._oldHeaderTitle = headerTitle;
+    this.toggleAttribute('has-title', !!headerTitle);
+  }
+
+  /** @private */
+  _headerTitleRenderer() {
+    if (this.headerTitle) {
+      if (!this.headerTitleElement) {
+        this.headerTitleElement = document.createElement('span');
+        this.headerTitleElement.id = this._titleId;
+        this.headerTitleElement.setAttribute('slot', 'title');
+        this.headerTitleElement.classList.add('draggable');
+
+        this.setAttribute('aria-labelledby', this._titleId);
+      }
+      this.appendChild(this.headerTitleElement);
+      this.headerTitleElement.textContent = this.headerTitle;
+    } else if (this.headerTitleElement) {
+      this.headerTitleElement.remove();
+      this.headerTitleElement = null;
+      this.removeAttribute('aria-labelledby');
+    }
+  }
+
+  requestContentUpdate() {
+    super.requestContentUpdate();
+
+    // If a new renderer has been set, make sure to reattach the header/footer roots
+    if (this.headerContainer && !this.headerContainer.parentElement) {
+      this.appendChild(this.headerContainer);
+    }
+
+    if (this.footerContainer && !this.footerContainer.parentElement) {
+      this.appendChild(this.footerContainer);
+    }
+
+    if (this.headerRenderer) {
+      this.headerRenderer.call(this.owner, this.headerContainer, this.owner);
+    }
+
+    if (this.footerRenderer) {
+      this.footerRenderer.call(this.owner, this.footerContainer, this.owner);
+    }
+
+    this._headerTitleRenderer();
+  }
+
   /**
    * Updates the coordinates of the overlay.
    * @param {!DialogOverlayBoundsParam} bounds
@@ -156,6 +370,23 @@ customElements.define(DialogOverlay.is, DialogOverlay);
  * 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:
+ *
+ * Part name        | Description
+ * -----------------|-------------------------------------------
+ * `header`         | Element wrapping title and header content
+ * `header-content` | Element wrapping the header content slot
+ * `title`          | Element wrapping the title slot
+ * `footer`         | Element wrapping the footer slot
+ *
+ * The following state attributes are available for styling:
+ *
+ * Attribute        | Description
+ * -----------------|--------------------------------------------
+ * `has-title`      | Set when the element has a title
+ * `has-header`     | Set when the element has header renderer
+ * `has-footer`     | Set when the element has footer renderer
+ *
  * Note: the `theme` attribute value set on `<vaadin-dialog>` is
  * propagated to the internal `<vaadin-dialog-overlay>` component.
  *
@@ -175,16 +406,17 @@ class Dialog extends ThemePropertyMixin(ElementMixin(DialogDraggableMixin(Dialog
     return html`
       <style>
         :host {
-          display: none;
+          display: none !important;
         }
       </style>
 
       <vaadin-dialog-overlay
         id="overlay"
+        header-title="[[headerTitle]]"
         on-opened-changed="_onOverlayOpened"
         on-mousedown="_bringOverlayToFront"
         on-touchstart="_bringOverlayToFront"
-        theme$="[[theme]]"
+        theme$="[[_theme]]"
         modeless="[[modeless]]"
         with-backdrop="[[!modeless]]"
         resizable$="[[resizable]]"
@@ -249,6 +481,46 @@ class Dialog extends ThemePropertyMixin(ElementMixin(DialogDraggableMixin(Dialog
        */
       renderer: Function,
 
+      /**
+       * String used for rendering a dialog title.
+       *
+       * If both `headerTitle` and `headerRenderer` are defined, the title
+       * and the elements created by the renderer will be placed next to
+       * each other, with the title coming first.
+       *
+       * When `headerTitle` is set, the attribute `has-title` is added to the overlay element.
+       * @attr {string} header-title
+       */
+      headerTitle: String,
+
+      /**
+       * Custom function for rendering the dialog header.
+       * Receives two arguments:
+       *
+       * - `root` The root container DOM element. Append your content to it.
+       * - `dialog` The reference to the `<vaadin-dialog>` element.
+       *
+       * If both `headerTitle` and `headerRenderer` are defined, the title
+       * and the elements created by the renderer will be placed next to
+       * each other, with the title coming first.
+       *
+       * When `headerRenderer` is set, the attribute `has-header` is added to the overlay element.
+       * @type {DialogRenderer | undefined}
+       */
+      headerRenderer: Function,
+
+      /**
+       * Custom function for rendering the dialog footer.
+       * Receives two arguments:
+       *
+       * - `root` The root container DOM element. Append your content to it.
+       * - `dialog` The reference to the `<vaadin-dialog>` element.
+       *
+       * When `footerRenderer` is set, the attribute `has-footer` is added to the overlay element.
+       * @type {DialogRenderer | undefined}
+       */
+      footerRenderer: Function,
+
       /**
        * Set to true to remove backdrop and allow click events on background elements.
        * @type {boolean}
@@ -261,7 +533,11 @@ class Dialog extends ThemePropertyMixin(ElementMixin(DialogDraggableMixin(Dialog
   }
 
   static get observers() {
-    return ['_openedChanged(opened)', '_ariaLabelChanged(ariaLabel)', '_rendererChanged(renderer)'];
+    return [
+      '_openedChanged(opened)',
+      '_ariaLabelChanged(ariaLabel)',
+      '_rendererChanged(renderer, headerRenderer, footerRenderer)'
+    ];
   }
 
   /** @protected */
@@ -276,7 +552,8 @@ class Dialog extends ThemePropertyMixin(ElementMixin(DialogDraggableMixin(Dialog
 
   /**
    * Requests an update for the content of the dialog.
-   * While performing the update, it invokes the renderer passed in the `renderer` property.
+   * While performing the update, it invokes the renderer passed in the `renderer` property,
+   * as well as `headerRender` and `footerRenderer` properties, if these are defined.
    *
    * It is not guaranteed that the update happens immediately (synchronously) after it is requested.
    */
@@ -285,8 +562,8 @@ class Dialog extends ThemePropertyMixin(ElementMixin(DialogDraggableMixin(Dialog
   }
 
   /** @private */
-  _rendererChanged(renderer) {
-    this.$.overlay.setProperties({ owner: this, renderer });
+  _rendererChanged(renderer, headerRenderer, footerRenderer) {
+    this.$.overlay.setProperties({ owner: this, renderer, headerRenderer, footerRenderer });
   }
 
   /** @protected */

package/theme/lumo/vaadin-dialog-styles.js

@@ -27,11 +27,35 @@ const dialogOverlay = css`
     padding: var(--lumo-space-l);
   }
 
+  [part='header'] {
+    gap: var(--lumo-space-s);
+  }
+
+  :host([has-header]) [part='header'],
+  :host([has-title]) [part='header'] {
+    padding: var(--lumo-space-m) var(--lumo-space-l);
+    border-bottom: 1px solid var(--lumo-contrast-10pct);
+  }
+
+  :host([has-footer]) [part='footer'] {
+    padding: var(--lumo-space-s) var(--lumo-space-m);
+    border-top: 1px solid var(--lumo-contrast-10pct);
+  }
+
   /* No padding */
   :host([theme~='no-padding']) [part='content'] {
     padding: 0;
   }
 
+  :host([theme~='no-padding'][has-header]) [part='header'],
+  :host([theme~='no-padding'][has-title]) [part='header'] {
+    padding: 0;
+  }
+
+  :host([theme~='no-padding'][has-footer]) [part='footer'] {
+    padding: 0;
+  }
+
   /* Animations */
 
   :host([opening]),

package/theme/material/vaadin-dialog-styles.js

@@ -1,4 +1,5 @@
 import '@vaadin/vaadin-material-styles/shadow.js';
+import '@vaadin/vaadin-material-styles/color.js';
 import { overlay } from '@vaadin/vaadin-material-styles/mixins/overlay.js';
 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
@@ -15,6 +16,19 @@ const dialogOverlay = css`
     padding: 24px;
   }
 
+  :host([has-header]) [part='header'],
+  :host([has-title]) [part='header'] {
+    padding: 9px 24px;
+    font-weight: 500;
+    gap: 8px;
+    border-bottom: 1px solid var(--material-divider-color);
+  }
+
+  :host([has-footer]) [part='footer'] {
+    padding: 8px;
+    border-top: 1px solid var(--material-divider-color);
+  }
+
   /* No padding */
   :host([theme~='no-padding']) [part='content'] {
     padding: 0;