@vaadin/dialog 23.1.0-alpha1 → 23.1.0-alpha4

package/package.json

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

package/src/vaadin-dialog-draggable-mixin.d.ts

@@ -6,7 +6,7 @@
 import { Constructor } from '@open-wc/dedupe-mixin';
 
 export declare function DialogDraggableMixin<T extends Constructor<HTMLElement>>(
-  base: T
+  base: T,
 ): T & Constructor<DialogDraggableMixinClass>;
 
 export declare class DialogDraggableMixinClass {

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

@@ -28,19 +28,19 @@ export const DialogDraggableMixin = (superClass) =>
         draggable: {
           type: Boolean,
           value: false,
-          reflectToAttribute: true
+          reflectToAttribute: true,
         },
 
         /** @private */
         _touchDevice: {
           type: Boolean,
-          value: isTouch
+          value: isTouch,
         },
 
         /* TODO: Expose as a public property (check naming) */
         __dragHandleClassName: {
-          type: String
-        }
+          type: String,
+        },
       };
     }
 
@@ -82,7 +82,9 @@ export const DialogDraggableMixin = (superClass) =>
         });
 
         if ((isResizerContainer && !isResizerContainerScrollbar) || isContentPart || isDraggable) {
-          !isDraggable && e.preventDefault();
+          if (!isDraggable) {
+            e.preventDefault();
+          }
           this._originalBounds = this.$.overlay.getBounds();
           const event = getMouseOrFirstTouchEvent(e);
           this._originalMouseCoords = { top: event.pageY, left: event.pageX };

package/src/vaadin-dialog-resizable-mixin.d.ts

@@ -6,7 +6,7 @@
 import { Constructor } from '@open-wc/dedupe-mixin';
 
 export declare function DialogResizableMixin<T extends Constructor<HTMLElement>>(
-  base: T
+  base: T,
 ): T & Constructor<DialogResizableMixinClass>;
 
 export declare class DialogResizableMixinClass {

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

@@ -24,6 +24,7 @@ registerStyles(
     .resizer-container {
       overflow: auto;
       flex-grow: 1;
+      border-radius: inherit; /* prevent child elements being drawn outside part=overlay */
     }
 
     [part='overlay'][style] .resizer-container {
@@ -35,6 +36,12 @@ registerStyles(
       display: none;
     }
 
+    :host([resizable]) [part='title'] {
+      cursor: move;
+      -webkit-user-select: none;
+      user-select: none;
+    }
+
     .resizer {
       position: absolute;
       height: 16px;
@@ -98,7 +105,7 @@ registerStyles(
       cursor: nwse-resize;
     }
   `,
-  { moduleId: 'vaadin-dialog-resizable-overlay-styles' }
+  { moduleId: 'vaadin-dialog-resizable-overlay-styles' },
 );
 
 /**
@@ -115,8 +122,8 @@ export const DialogResizableMixin = (superClass) =>
         resizable: {
           type: Boolean,
           value: false,
-          reflectToAttribute: true
-        }
+          reflectToAttribute: true,
+        },
       };
     }
 
@@ -245,7 +252,7 @@ export const DialogResizableMixin = (superClass) =>
       const content = this.$.overlay.$.content;
       content.setAttribute(
         'style',
-        'position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: content-box; height: auto;'
+        'position: absolute; top: 0; right: 0; bottom: 0; left: 0; box-sizing: content-box; height: auto;',
       );
       const { width: contentWidth, height: contentHeight } = getComputedStyle(content);
       content.removeAttribute('style');

package/src/vaadin-dialog.d.ts

@@ -110,6 +110,7 @@ export type DialogEventMap = HTMLElementEventMap & DialogCustomEventMap;
  * `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.
@@ -207,13 +208,13 @@ declare class Dialog extends ThemePropertyMixin(ElementMixin(DialogDraggableMixi
   addEventListener<K extends keyof DialogEventMap>(
     type: K,
     listener: (this: Dialog, ev: DialogEventMap[K]) => void,
-    options?: boolean | AddEventListenerOptions
+    options?: boolean | AddEventListenerOptions,
   ): void;
 
   removeEventListener<K extends keyof DialogEventMap>(
     type: K,
     listener: (this: Dialog, ev: DialogEventMap[K]) => void,
-    options?: boolean | EventListenerOptions
+    options?: boolean | EventListenerOptions,
   ): void;
 }
 

package/src/vaadin-dialog.js

@@ -15,32 +15,41 @@ 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'] {
+    [part='header'],
+    [part='header-content'],
+    [part='footer'] {
       display: flex;
+      align-items: center;
+      flex-wrap: wrap;
+      flex: none;
+      pointer-events: none;
+      z-index: 1;
+    }
+
+    ::slotted([slot='header-content']),
+    ::slotted([slot='title']),
+    ::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 */
-    footer[part='footer'] {
-      display: flex;
+    :host([has-title]) [part='header-content'],
+    [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(:not([has-title]):not([has-header])) [part='header'],
+    :host(:not([has-header])) [part='header-content'],
+    :host(:not([has-title])) [part='title'],
+    :host(:not([has-footer])) [part='footer'] {
+      display: none !important;
     }
 
     :host(:is([has-title], [has-header], [has-footer])) [part='content'] {
-      min-height: 100%;
       height: auto;
     }
 
@@ -54,8 +63,6 @@ registerStyles(
       :host(:is([has-title], [has-header], [has-footer])) [part='content'] {
         flex: 1;
         overflow: auto;
-        min-height: auto;
-        height: 100%;
       }
     }
 
@@ -71,7 +78,7 @@ registerStyles(
       max-width: none;
     }
   `,
-  { moduleId: 'vaadin-dialog-overlay-styles' }
+  { moduleId: 'vaadin-dialog-overlay-styles' },
 );
 
 let memoizedTemplate;
@@ -132,7 +139,7 @@ export class DialogOverlay extends OverlayElement {
   static get observers() {
     return [
       '_headerFooterRendererChange(headerRenderer, footerRenderer, opened)',
-      '_headerTitleChanged(headerTitle, opened)'
+      '_headerTitleChanged(headerTitle, opened)',
     ];
   }
 
@@ -146,15 +153,27 @@ export class DialogOverlay extends OverlayElement {
 
       headerRenderer: Function,
 
-      footerRenderer: 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 */
@@ -196,12 +215,17 @@ export class DialogOverlay extends OverlayElement {
     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();
       }
     }
 
@@ -211,6 +235,7 @@ export class DialogOverlay extends OverlayElement {
       } else if (this.footerContainer) {
         this.footerContainer.remove();
         this.footerContainer = null;
+        this.__updateOverflow();
       }
     }
 
@@ -222,18 +247,16 @@ export class DialogOverlay extends OverlayElement {
         this.requestContentUpdate();
       }
     }
-
-    this.toggleAttribute('has-header', !!headerRenderer);
-    this.toggleAttribute('has-footer', !!footerRenderer);
   }
 
   /** @private */
   _headerTitleChanged(headerTitle, opened) {
+    this.toggleAttribute('has-title', !!headerTitle);
+
     if (opened && (headerTitle || this._oldHeaderTitle)) {
       this.requestContentUpdate();
     }
     this._oldHeaderTitle = headerTitle;
-    this.toggleAttribute('has-title', !!headerTitle);
   }
 
   /** @private */
@@ -259,24 +282,33 @@ export class DialogOverlay extends OverlayElement {
   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.headerContainer) {
+      // If a new renderer has been set, make sure to reattach the container
+      if (!this.headerContainer.parentElement) {
+        this.appendChild(this.headerContainer);
+      }
 
-    if (this.footerContainer && !this.footerContainer.parentElement) {
-      this.appendChild(this.footerContainer);
+      if (this.headerRenderer) {
+        // Only call header renderer after the container has been initialized
+        this.headerRenderer.call(this.owner, this.headerContainer, this.owner);
+      }
     }
 
-    if (this.headerRenderer) {
-      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) {
-      this.footerRenderer.call(this.owner, this.footerContainer, this.owner);
+      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();
   }
 
   /**
@@ -331,6 +363,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);
@@ -386,6 +444,7 @@ customElements.define(DialogOverlay.is, DialogOverlay);
  * `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.
@@ -438,7 +497,7 @@ class Dialog extends ThemePropertyMixin(ElementMixin(DialogDraggableMixin(Dialog
       opened: {
         type: Boolean,
         value: false,
-        notify: true
+        notify: true,
       },
 
       /**
@@ -448,7 +507,7 @@ class Dialog extends ThemePropertyMixin(ElementMixin(DialogDraggableMixin(Dialog
        */
       noCloseOnOutsideClick: {
         type: Boolean,
-        value: false
+        value: false,
       },
 
       /**
@@ -458,7 +517,7 @@ class Dialog extends ThemePropertyMixin(ElementMixin(DialogDraggableMixin(Dialog
        */
       noCloseOnEsc: {
         type: Boolean,
-        value: false
+        value: false,
       },
 
       /**
@@ -468,7 +527,7 @@ class Dialog extends ThemePropertyMixin(ElementMixin(DialogDraggableMixin(Dialog
        */
       ariaLabel: {
         type: String,
-        value: ''
+        value: '',
       },
 
       /**
@@ -527,8 +586,8 @@ class Dialog extends ThemePropertyMixin(ElementMixin(DialogDraggableMixin(Dialog
        */
       modeless: {
         type: Boolean,
-        value: false
-      }
+        value: false,
+      },
     };
   }
 
@@ -536,7 +595,7 @@ class Dialog extends ThemePropertyMixin(ElementMixin(DialogDraggableMixin(Dialog
     return [
       '_openedChanged(opened)',
       '_ariaLabelChanged(ariaLabel)',
-      '_rendererChanged(renderer, headerRenderer, footerRenderer)'
+      '_rendererChanged(renderer, headerRenderer, footerRenderer)',
     ];
   }
 
@@ -566,9 +625,20 @@ class Dialog extends ThemePropertyMixin(ElementMixin(DialogDraggableMixin(Dialog
     this.$.overlay.setProperties({ owner: this, renderer, headerRenderer, footerRenderer });
   }
 
+  /** @protected */
+  connectedCallback() {
+    super.connectedCallback();
+    // Restore opened state if overlay was opened when disconnecting
+    if (this.__restoreOpened) {
+      this.opened = true;
+    }
+  }
+
   /** @protected */
   disconnectedCallback() {
     super.disconnectedCallback();
+    // Close overlay and memorize opened state
+    this.__restoreOpened = this.opened;
     this.opened = false;
   }
 

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

@@ -27,33 +27,45 @@ const dialogOverlay = css`
     padding: var(--lumo-space-l);
   }
 
-  [part='header'] {
-    gap: var(--lumo-space-s);
+  :host(:is([has-header], [has-title])) [part='header'] + [part='content'] {
+    padding-top: 0;
+  }
+
+  [part='header'],
+  [part='header-content'],
+  [part='footer'] {
+    gap: var(--lumo-space-xs) var(--lumo-space-s);
+    line-height: var(--lumo-line-height-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);
+  [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'] {
+  [part='footer'] {
     padding: var(--lumo-space-s) var(--lumo-space-m);
-    border-top: 1px solid var(--lumo-contrast-10pct);
+    background-color: var(--lumo-contrast-5pct);
+    border-radius: 0 0 var(--lumo-border-radius-l) var(--lumo-border-radius-l); /* Needed for Safari */
   }
 
-  /* No padding */
-  :host([theme~='no-padding']) [part='content'] {
-    padding: 0;
+  [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));
   }
 
-  :host([theme~='no-padding'][has-header]) [part='header'],
-  :host([theme~='no-padding'][has-title]) [part='header'] {
+  /* No padding */
+  :host([theme~='no-padding']) [part='content'] {
     padding: 0;
   }
 
-  :host([theme~='no-padding'][has-footer]) [part='footer'] {
-    padding: 0;
+  @media (min-height: 320px) {
+    :host([overflow~='top']) [part='header'] {
+      box-shadow: 0 1px 0 0 var(--lumo-contrast-10pct);
+    }
   }
 
   /* Animations */

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

@@ -16,17 +16,39 @@ const dialogOverlay = css`
     padding: 24px;
   }
 
-  :host([has-header]) [part='header'],
-  :host([has-title]) [part='header'] {
-    padding: 9px 24px;
-    font-weight: 500;
+  [part='header'] {
+    padding: 16px;
+  }
+
+  :host(:is([has-header], [has-title])) [part='header'] + [part='content'] {
+    padding-top: 0;
+  }
+
+  [part='header'],
+  [part='header-content'],
+  [part='footer'] {
     gap: 8px;
-    border-bottom: 1px solid var(--material-divider-color);
+    line-height: 1.2;
   }
 
-  :host([has-footer]) [part='footer'] {
+  [part='title'] {
+    font-size: var(--material-h5-font-size);
+    font-weight: 500;
+    margin-inline-start: 8px;
+  }
+
+  [part='footer'] {
     padding: 8px;
-    border-top: 1px solid var(--material-divider-color);
+  }
+
+  @media (min-height: 320px) {
+    :host([overflow~='top']) [part='header'] {
+      box-shadow: 0 1px 0 0 var(--material-divider-color);
+    }
+
+    :host([overflow~='bottom']) [part='footer'] {
+      box-shadow: 0 -1px 0 0 var(--material-divider-color);
+    }
   }
 
   /* No padding */
@@ -36,5 +58,5 @@ const dialogOverlay = css`
 `;
 
 registerStyles('vaadin-dialog-overlay', [overlay, dialogOverlay], {
-  moduleId: 'material-dialog'
+  moduleId: 'material-dialog',
 });