@vaadin/dialog 23.0.6 → 23.1.0-alpha3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vaadin/dialog",
-  "version": "23.0.6",
+  "version": "23.1.0-alpha3",
   "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.6",
-    "@vaadin/vaadin-lumo-styles": "^23.0.6",
-    "@vaadin/vaadin-material-styles": "^23.0.6",
-    "@vaadin/vaadin-overlay": "^23.0.6",
-    "@vaadin/vaadin-themable-mixin": "^23.0.6"
+    "@vaadin/component-base": "23.1.0-alpha3",
+    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha3",
+    "@vaadin/vaadin-material-styles": "23.1.0-alpha3",
+    "@vaadin/vaadin-overlay": "23.1.0-alpha3",
+    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha3"
   },
   "devDependencies": {
     "@esm-bundle/chai": "^4.3.4",
-    "@vaadin/polymer-legacy-adapter": "^23.0.6",
+    "@vaadin/polymer-legacy-adapter": "23.1.0-alpha3",
     "@vaadin/testing-helpers": "^0.3.2",
-    "@vaadin/text-area": "^23.0.6",
-    "sinon": "^9.2.1"
+    "@vaadin/text-area": "23.1.0-alpha3",
+    "sinon": "^13.0.2"
   },
-  "gitHead": "82ca8522e24a63343fb28bcb4c686e55d25c8858"
+  "gitHead": "8c9e64e8dfa158dd52a9bf6da351ff038c88ca85"
 }

package/src/vaadin-dialog-resizable-mixin.js

@@ -36,6 +36,12 @@ registerStyles(
       display: none;
     }
 
+    :host([resizable]) [part='title'] {
+      cursor: move;
+      -webkit-user-select: none;
+      user-select: none;
+    }
+
     .resizer {
       position: absolute;
       height: 16px;

package/src/vaadin-dialog.d.ts

@@ -94,6 +94,24 @@ 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
+ * `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.
  *
@@ -136,14 +154,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,62 @@ import { DialogResizableMixin } from './vaadin-dialog-resizable-mixin.js';
 registerStyles(
   'vaadin-dialog-overlay',
   css`
+    /* prefixing with the element tags to avoid styling confirm-dialog header part */
+    header[part='header'],
+    [part='header-content'],
+    footer[part='footer'] {
+      display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      flex: none;
+      pointer-events: none;
+      z-index: 1;
+    }
+
+    :host(:is([has-title], [has-header])) ::slotted([slot='header']),
+    ::slotted([slot='header-content']),
+    ::slotted([slot='title']),
+    :host([has-footer]) ::slotted([slot='footer']) {
+      display: contents;
+      pointer-events: auto;
+    }
+
+    [part='header-content'] {
+      flex: 1;
+    }
+
+    /* prefixing with the element tag to avoid styling confirm-dialog footer part */
+    :host([has-title]) [part='header-content'],
+    footer[part='footer'] {
+      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'] {
+      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;
+      }
+    }
+
     /*
       NOTE(platosha): Make some min-width to prevent collapsing of the content
       taking the parent width, e. g., <vaadin-grid> and such.
@@ -53,18 +109,213 @@ 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
     };
   }
 
+  /** @protected */
+  ready() {
+    super.ready();
+
+    const uniqueId = (DialogOverlay._uniqueId = 1 + DialogOverlay._uniqueId || 0);
+    this._titleId = `${this.constructor.is}-title-${uniqueId}`;
+
+    // Update overflow attribute on resize
+    this.__resizeObserver = new ResizeObserver(() => {
+      this.__updateOverflow();
+    });
+    this.__resizeObserver.observe(this.$.resizerContainer);
+
+    // Update overflow attribute on scroll
+    this.$.content.addEventListener('scroll', () => {
+      this.__updateOverflow();
+    });
+  }
+
+  /** @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;
+
+    // Set attributes here to update styles before detecting content overflow
+    this.toggleAttribute('has-header', !!headerRenderer);
+    this.toggleAttribute('has-footer', !!footerRenderer);
+
+    if (headerRendererChanged) {
+      if (headerRenderer) {
+        this.headerContainer = this.__initContainer(this.headerContainer, 'header-content');
+      } else if (this.headerContainer) {
+        this.headerContainer.remove();
+        this.headerContainer = null;
+        this.__updateOverflow();
+      }
+    }
+
+    if (footerRendererChanged) {
+      if (footerRenderer) {
+        this.footerContainer = this.__initContainer(this.footerContainer, 'footer');
+      } else if (this.footerContainer) {
+        this.footerContainer.remove();
+        this.footerContainer = null;
+        this.__updateOverflow();
+      }
+    }
+
+    if (
+      (headerRenderer && (headerRendererChanged || openedChanged)) ||
+      (footerRenderer && (footerRendererChanged || openedChanged))
+    ) {
+      if (opened) {
+        this.requestContentUpdate();
+      }
+    }
+  }
+
+  /** @private */
+  _headerTitleChanged(headerTitle, opened) {
+    this.toggleAttribute('has-title', !!headerTitle);
+
+    if (opened && (headerTitle || this._oldHeaderTitle)) {
+      this.requestContentUpdate();
+    }
+    this._oldHeaderTitle = 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 (this.headerContainer) {
+      // If a new renderer has been set, make sure to reattach the container
+      if (!this.headerContainer.parentElement) {
+        this.appendChild(this.headerContainer);
+      }
+
+      if (this.headerRenderer) {
+        // Only call header renderer after the container has been initialized
+        this.headerRenderer.call(this.owner, this.headerContainer, this.owner);
+      }
+    }
+
+    if (this.footerContainer) {
+      // If a new renderer has been set, make sure to reattach the container
+      if (!this.footerContainer.parentElement) {
+        this.appendChild(this.footerContainer);
+      }
+
+      if (this.footerRenderer) {
+        // Only call header renderer after the container has been initialized
+        this.footerRenderer.call(this.owner, this.footerContainer, this.owner);
+      }
+    }
+
+    this._headerTitleRenderer();
+
+    this.__updateOverflow();
+  }
+
   /**
    * Updates the coordinates of the overlay.
    * @param {!DialogOverlayBoundsParam} bounds
@@ -117,6 +368,32 @@ export class DialogOverlay extends OverlayElement {
       this.$.resizerContainer.scrollTop = scrollPosition;
     });
   }
+
+  /** @private */
+  __updateOverflow() {
+    let overflow = '';
+
+    // Only set "overflow" attribute if the dialog has a header, title or footer.
+    // Check for state attributes as extending components might not use renderers.
+    if (this.hasAttribute('has-header') || this.hasAttribute('has-footer') || this.headerTitle) {
+      const content = this.$.content;
+
+      if (content.scrollTop > 0) {
+        overflow += ' top';
+      }
+
+      if (content.scrollTop < content.scrollHeight - content.clientHeight) {
+        overflow += ' bottom';
+      }
+    }
+
+    const value = overflow.trim();
+    if (value.length > 0 && this.getAttribute('overflow') !== value) {
+      this.setAttribute('overflow', value);
+    } else if (value.length === 0 && this.hasAttribute('overflow')) {
+      this.removeAttribute('overflow');
+    }
+  }
 }
 
 customElements.define(DialogOverlay.is, DialogOverlay);
@@ -156,6 +433,24 @@ 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
+ * `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.
  *
@@ -175,16 +470,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 +545,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 +597,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 +616,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 +626,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,47 @@ const dialogOverlay = css`
     padding: var(--lumo-space-l);
   }
 
+  :host(:is([has-header], [has-title])) [part='header'] + [part='content'] {
+    padding-top: 0;
+  }
+
+  :host(:is([has-header], [has-title])) [part='header'],
+  :host([has-header]) [part='header-content'],
+  :host([has-footer]) [part='footer'] {
+    gap: var(--lumo-space-xs) var(--lumo-space-s);
+    line-height: var(--lumo-line-height-s);
+  }
+
+  :host(:is([has-header], [has-title])) [part='header'] {
+    padding: var(--lumo-space-m);
+    background-color: var(--lumo-base-color);
+    border-radius: var(--lumo-border-radius-l) var(--lumo-border-radius-l) 0 0; /* Needed for Safari */
+  }
+
+  :host([has-footer]) [part='footer'] {
+    padding: var(--lumo-space-s) var(--lumo-space-m);
+    background-color: var(--lumo-contrast-5pct);
+    border-radius: 0 0 var(--lumo-border-radius-l) var(--lumo-border-radius-l); /* Needed for Safari */
+  }
+
+  [part='title'] {
+    font-size: var(--lumo-font-size-xl);
+    font-weight: 600;
+    color: var(--lumo-header-text-color);
+    margin-inline-start: calc(var(--lumo-space-l) - var(--lumo-space-m));
+  }
+
   /* No padding */
   :host([theme~='no-padding']) [part='content'] {
     padding: 0;
   }
 
+  @media (min-height: 320px) {
+    :host(:is([has-header], [has-title])[overflow~='top']) [part='header'] {
+      box-shadow: 0 1px 0 0 var(--lumo-contrast-10pct);
+    }
+  }
+
   /* 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,41 @@ const dialogOverlay = css`
     padding: 24px;
   }
 
+  :host(:is([has-header], [has-title])) [part='header'] {
+    padding: 16px;
+  }
+
+  :host(:is([has-header], [has-title])) [part='header'] + [part='content'] {
+    padding-top: 0;
+  }
+
+  :host(:is([has-header], [has-title])) [part='header'],
+  :host([has-header]) [part='header-content'],
+  :host([has-footer]) [part='footer'] {
+    gap: 8px;
+    line-height: 1.2;
+  }
+
+  [part='title'] {
+    font-size: var(--material-h5-font-size);
+    font-weight: 500;
+    margin-inline-start: 8px;
+  }
+
+  :host([has-footer]) [part='footer'] {
+    padding: 8px;
+  }
+
+  @media (min-height: 320px) {
+    :host(:is([has-header], [has-title])[overflow~='top']) [part='header'] {
+      box-shadow: 0 1px 0 0 var(--material-divider-color);
+    }
+
+    :host([has-footer][overflow~='bottom']) [part='footer'] {
+      box-shadow: 0 -1px 0 0 var(--material-divider-color);
+    }
+  }
+
   /* No padding */
   :host([theme~='no-padding']) [part='content'] {
     padding: 0;