@vaadin/confirm-dialog - npm Package Compare versions

Comparing version 23.0.0-alpha1 to 23.0.0-alpha2

package.json

 {
   "name": "@vaadin/confirm-dialog",
-  "version": "23.0.0-alpha1",
+  "version": "23.0.0-alpha2",
   "publishConfig": {
@@ -36,10 +36,10 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "23.0.0-alpha1",
-    "@vaadin/component-base": "23.0.0-alpha1",
-    "@vaadin/dialog": "23.0.0-alpha1",
+    "@vaadin/button": "23.0.0-alpha2",
+    "@vaadin/component-base": "23.0.0-alpha2",
+    "@vaadin/dialog": "23.0.0-alpha2",
     "@vaadin/vaadin-license-checker": "^2.1.0",
-    "@vaadin/vaadin-lumo-styles": "23.0.0-alpha1",
-    "@vaadin/vaadin-material-styles": "23.0.0-alpha1",
-    "@vaadin/vaadin-overlay": "23.0.0-alpha1",
-    "@vaadin/vaadin-themable-mixin": "23.0.0-alpha1"
+    "@vaadin/vaadin-lumo-styles": "23.0.0-alpha2",
+    "@vaadin/vaadin-material-styles": "23.0.0-alpha2",
+    "@vaadin/vaadin-overlay": "23.0.0-alpha2",
+    "@vaadin/vaadin-themable-mixin": "23.0.0-alpha2"
   },
@@ -51,3 +51,3 @@ "devDependencies": {
   },
-  "gitHead": "fbcb07328fdf88260e3b461088d207426b21c710"
+  "gitHead": "070f586dead02ca41b66717820c647f48bf1665f"
 }

src/vaadin-confirm-dialog.d.ts

@@ -7,3 +7,4 @@ /**
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.js';
+import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 
@@ -38,10 +39,21 @@ /**
  *
- * The following Shadow DOM parts are available for styling the dialog parts:
+ * The `<vaadin-confirm-dialog>` is not themable. Apply styles to `<vaadin-confirm-dialog-overlay>`
+ * component and use its shadow parts for styling.
+ * See [`<vaadin-overlay>`](#/elements/vaadin-overlay) for the overlay styling documentation.
  *
- * Part name  | Description
- * -----------|---------------------------------------------------------|
- * `header`   | Header of the confirmation dialog
- * `message`  | Container for the message of the dialog
- * `footer`   | Container for the buttons
+ * In addition to `<vaadin-overlay>` parts, the following parts are available for theming:
  *
+ * Part name        | Description
+ * -----------------|-------------------------------------------
+ * `header`         | The header element wrapper
+ * `message`        | The message element wrapper
+ * `footer`         | The footer element that wraps the buttons
+ * `cancel-button`  | The "Cancel" button wrapper
+ * `confirm-button` | The "Confirm" button wrapper
+ * `reject-button`  | The "Reject" button wrapper
+ *
+ * Use `confirmTheme`, `cancelTheme` and `rejectTheme` properties to customize buttons theme.
+ * Also, the `theme` attribute value set on `<vaadin-confirm-dialog>` is propagated to the
+ * `<vaadin-confirm-dialog-overlay>` component.
+ *
  * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
@@ -51,11 +63,10 @@ *
  *
- * The following parts are available for replacement:
+ * The following slots are available for providing custom content:
  *
  * Slot name         | Description
- * ------------------|---------------------------------------------------------|
- * `header`          | Header of the confirmation dialog
- * `message`         | Container for the message of the dialog
- * `cancel-button`   | Container for the Cancel button
- * `reject-button`   | Container for the Reject button
- * `confirm-button`  | Container for the Confirm button
+ * ------------------|---------------------------
+ * `header`          | Slot for header element
+ * `cancel-button`   | Slot for "Cancel" button
+ * `confirm-button`  | Slot for "Confirm" button
+ * `reject-button`   | Slot for "Reject" button
  *
@@ -67,3 +78,3 @@ * @fires {Event} confirm - Fired when Confirm button was pressed.
  */
-declare class ConfirmDialog extends ElementMixin(ThemableMixin(HTMLElement)) {
+declare class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(HTMLElement))) {
   /**
@@ -70,0 +81,0 @@ * True if the overlay is currently displayed.

src/vaadin-confirm-dialog.js

@@ -7,7 +7,8 @@ /**
 import '@vaadin/vaadin-license-checker/vaadin-license-checker.js';
-import '@vaadin/button/src/vaadin-button.js';
-import '@vaadin/dialog/src/vaadin-dialog.js';
+import './vaadin-confirm-dialog-overlay.js';
+import { FlattenedNodesObserver } from '@polymer/polymer/lib/utils/flattened-nodes-observer.js';
 import { html, PolymerElement } from '@polymer/polymer/polymer-element.js';
 import { ElementMixin } from '@vaadin/component-base/src/element-mixin.js';
-import { ThemableMixin } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
+import { SlotMixin } from '@vaadin/component-base/src/slot-mixin.js';
+import { ThemePropertyMixin } from '@vaadin/vaadin-themable-mixin/vaadin-theme-property-mixin.js';
 
@@ -25,10 +26,21 @@ /**
  *
- * The following Shadow DOM parts are available for styling the dialog parts:
+ * The `<vaadin-confirm-dialog>` is not themable. Apply styles to `<vaadin-confirm-dialog-overlay>`
+ * component and use its shadow parts for styling.
+ * See [`<vaadin-overlay>`](#/elements/vaadin-overlay) for the overlay styling documentation.
  *
- * Part name  | Description
- * -----------|---------------------------------------------------------|
- * `header`   | Header of the confirmation dialog
- * `message`  | Container for the message of the dialog
- * `footer`   | Container for the buttons
+ * In addition to `<vaadin-overlay>` parts, the following parts are available for theming:
  *
+ * Part name        | Description
+ * -----------------|-------------------------------------------
+ * `header`         | The header element wrapper
+ * `message`        | The message element wrapper
+ * `footer`         | The footer element that wraps the buttons
+ * `cancel-button`  | The "Cancel" button wrapper
+ * `confirm-button` | The "Confirm" button wrapper
+ * `reject-button`  | The "Reject" button wrapper
+ *
+ * Use `confirmTheme`, `cancelTheme` and `rejectTheme` properties to customize buttons theme.
+ * Also, the `theme` attribute value set on `<vaadin-confirm-dialog>` is propagated to the
+ * `<vaadin-confirm-dialog-overlay>` component.
+ *
  * See [Styling Components](https://vaadin.com/docs/latest/ds/customization/styling-components) documentation.
@@ -38,11 +50,10 @@ *
  *
- * The following parts are available for replacement:
+ * The following slots are available for providing custom content:
  *
  * Slot name         | Description
- * ------------------|---------------------------------------------------------|
- * `header`          | Header of the confirmation dialog
- * `message`         | Container for the message of the dialog
- * `cancel-button`   | Container for the Cancel button
- * `reject-button`   | Container for the Reject button
- * `confirm-button`  | Container for the Confirm button
+ * ------------------|---------------------------
+ * `header`          | Slot for header element
+ * `cancel-button`   | Slot for "Cancel" button
+ * `confirm-button`  | Slot for "Confirm" button
+ * `reject-button`   | Slot for "Reject" button
  *
@@ -55,6 +66,7 @@ * @fires {Event} confirm - Fired when Confirm button was pressed.
  * @extends HTMLElement
+ * @mixes SlotMixin
  * @mixes ElementMixin
- * @mixes ThemableMixin
+ * @mixes ThemePropertyMixin
  */
-class ConfirmDialog extends ElementMixin(ThemableMixin(PolymerElement)) {
+class ConfirmDialog extends SlotMixin(ElementMixin(ThemePropertyMixin(PolymerElement))) {
   static get template() {
@@ -65,67 +77,25 @@ return html`
           display: none;
-          --_vaadin-confirm-dialog-content-width: auto;
-          --_vaadin-confirm-dialog-content-height: auto;
-          --_vaadin-confirm-dialog-footer-height: auto;
         }
+
+        [hidden] {
+          display: none !important;
+        }
       </style>
 
-      <vaadin-dialog
+      <vaadin-confirm-dialog-dialog
         id="dialog"
         opened="{{opened}}"
         aria-label="[[_getAriaLabel(header)]]"
-        theme$="_vaadin-confirm-dialog-dialog-overlay-theme [[theme]]"
+        theme$="[[theme]]"
         no-close-on-outside-click
         no-close-on-esc="[[noCloseOnEsc]]"
-      ></vaadin-dialog>
+      ></vaadin-confirm-dialog-dialog>
 
-      <template id="dialogTemplate">
-        <div id="content">
-          <div part="header">
-            <slot name="header">
-              <h3 class="header">[[header]]</h3>
-            </slot>
-          </div>
-
-          <div part="message" id="message">
-            <slot></slot>
-            [[message]]
-          </div>
-        </div>
-
-        <div part="footer">
-          <div class="cancel-button">
-            <slot name="cancel-button">
-              <vaadin-button
-                id="cancel"
-                theme$="[[cancelTheme]]"
-                on-click="_cancel"
-                hidden$="[[!cancel]]"
-                aria-describedby="message"
-              >
-                [[cancelText]]
-              </vaadin-button>
-            </slot>
-          </div>
-          <div class="reject-button">
-            <slot name="reject-button">
-              <vaadin-button
-                id="reject"
-                theme$="[[rejectTheme]]"
-                on-click="_reject"
-                hidden$="[[!reject]]"
-                aria-describedby="message"
-              >
-                [[rejectText]]
-              </vaadin-button>
-            </slot>
-          </div>
-          <div class="confirm-button">
-            <slot name="confirm-button">
-              <vaadin-button id="confirm" theme$="[[confirmTheme]]" on-click="_confirm" aria-describedby="message">
-                [[confirmText]]
-              </vaadin-button>
-            </slot>
-          </div>
-        </div>
-      </template>
+      <div hidden>
+        <slot name="header"></slot>
+        <slot></slot>
+        <slot name="cancel-button"></slot>
+        <slot name="reject-button"></slot>
+        <slot name="confirm-button"></slot>
+      </div>
     `;
@@ -147,4 +117,3 @@ }
         value: false,
-        notify: true,
-        observer: '_openedChanged'
+        notify: true
       },
@@ -165,3 +134,4 @@
       message: {
-        type: String
+        type: String,
+        value: ''
       },
@@ -259,5 +229,43 @@
 
-      /** @private */
+      /**
+       * A reference to the "Cancel" button which will be teleported to the overlay.
+       * @private
+       */
+      _cancelButton: {
+        type: HTMLElement,
+        observer: '_cancelButtonChanged'
+      },
+
+      /**
+       * A reference to the "Confirm" button which will be teleported to the overlay.
+       * @private
+       */
       _confirmButton: {
-        type: Element
+        type: HTMLElement,
+        observer: '_confirmButtonChanged'
+      },
+
+      /**
+       * A reference to the "header" node which will be teleported to the overlay.
+       * @private
+       */
+      _headerNode: {
+        type: HTMLElement
+      },
+
+      /**
+       * A reference to the message which will be placed in the overlay default slot.
+       * @private
+       */
+      _messageNode: {
+        type: HTMLElement
+      },
+
+      /**
+       * A reference to the "Reject" button which will be teleported to the overlay.
+       * @private
+       */
+      _rejectButton: {
+        type: HTMLElement,
+        observer: '_rejectButtonChanged'
       }
@@ -279,7 +287,66 @@ };
 
+  static get observers() {
+    return [
+      '__updateConfirmButton(_confirmButton, confirmText, confirmTheme)',
+      '__updateCancelButton(_cancelButton, cancelText, cancelTheme, cancel)',
+      '__updateHeaderNode(_headerNode, header)',
+      '__updateMessageNode(_messageNode, message)',
+      '__updateRejectButton(_rejectButton, rejectText, rejectTheme, reject)'
+    ];
+  }
+
   /** @protected */
+  get slots() {
+    // NOTE: order in which slots are listed matches the template.
+    return {
+      ...super.slots,
+      header: () => {
+        const h3 = document.createElement('h3');
+        this.__defaultHeader = h3;
+        return h3;
+      },
+      '': () => {
+        const div = document.createElement('div');
+        this.__defaultMessage = div;
+        return div;
+      },
+      'cancel-button': () => {
+        const button = document.createElement('vaadin-button');
+        button.setAttribute('theme', this.cancelTheme);
+        button.textContent = this.cancelText;
+        return button;
+      },
+      'reject-button': () => {
+        const button = document.createElement('vaadin-button');
+        button.setAttribute('theme', this.rejectTheme);
+        button.textContent = this.rejectText;
+        return button;
+      },
+      'confirm-button': () => {
+        return document.createElement('vaadin-button');
+      }
+    };
+  }
+
+  constructor() {
+    super();
+    this.__slottedNodes = [];
+    this._observer = new FlattenedNodesObserver(this, (info) => {
+      this.__onDomChange(info.addedNodes);
+    });
+  }
+
+  /** @protected */
   ready() {
     super.ready();
 
-    this.$.dialog.$.overlay.addEventListener('vaadin-overlay-escape-press', this._escPressed.bind(this));
+    this.__boundCancel = this._cancel.bind(this);
+    this.__boundConfirm = this._confirm.bind(this);
+    this.__boundReject = this._reject.bind(this);
+
+    this._overlayElement = this.$.dialog.$.overlay;
+    this._overlayElement.addEventListener('vaadin-overlay-escape-press', this._escPressed.bind(this));
+    this._overlayElement.addEventListener('vaadin-overlay-open', () => this.__onDialogOpened());
+    this._overlayElement.addEventListener('vaadin-confirm-dialog-close', () => this.__onDialogClosed());
+
     if (this._dimensions) {
@@ -292,14 +359,14 @@ Object.keys(this._dimensions).forEach((name) => {
 
-  /**
-   * @param {string} name
-   * @param {?string} oldValue
-   * @param {?string} newValue
-   * @protected
-   */
-  attributeChangedCallback(name, oldValue, newValue) {
-    super.attributeChangedCallback(name, oldValue, newValue);
-    if (name === 'dir') {
-      const value = newValue === 'rtl';
-      this.__isRTL = value;
-      this.opened && this.__toggleContentRTL(value);
+  /** @private */
+  __onDialogOpened() {
+    const overlay = this._overlayElement;
+
+    // Teleport slotted nodes to the overlay element.
+    this.__slottedNodes.forEach((node) => {
+      overlay.appendChild(node);
+    });
+
+    const confirmButton = overlay.querySelector('[slot="confirm-button"]');
+    if (confirmButton) {
+      confirmButton.focus();
     }
@@ -309,44 +376,109 @@ }
   /** @private */
-  __toggleContentRTL(rtl) {
-    const contentBlock = this.$.dialog.$.overlay.content.querySelector('#content');
-    const footerBlock = this.$.dialog.$.overlay.content.querySelector('[part=footer]');
-    if (rtl) {
-      contentBlock.setAttribute('dir', 'rtl');
-      footerBlock.setAttribute('dir', 'rtl');
-    } else {
-      contentBlock.removeAttribute('dir');
-      footerBlock.removeAttribute('dir');
-    }
+  __onDialogClosed() {
+    const nodes = this.__slottedNodes;
+
+    // Reset the list of nodes, it will be re-created.
+    this.__slottedNodes = [];
+
+    // Move nodes from the overlay back to the host.
+    nodes.forEach((node) => {
+      this.appendChild(node);
+    });
   }
 
   /** @private */
-  _openedChanged() {
-    if (!this.opened) {
-      return;
-    }
+  __onDomChange(addedNodes) {
+    // TODO: restore default element when a corresponding slotted element is removed.
+    // Consider creating a controller to reuse custom helper logic from FieldMixin.
+    addedNodes.forEach((node) => {
+      this.__slottedNodes.push(node);
 
-    // TODO: A temporary hack as far as `vaadin-dialog` doesn't support the Polymer Template API anymore.
-    this.$.dialog.$.overlay.template = this.$.dialogTemplate;
+      const isElementNode = node.nodeType == Node.ELEMENT_NODE;
+      const slotName = isElementNode ? node.getAttribute('slot') : '';
 
-    const overlay = this.$.dialog.$.overlay;
-
-    Array.from(this.childNodes).forEach((c) => {
-      const newChild = overlay.$.content.appendChild(c);
-      if (newChild.getAttribute && newChild.getAttribute('slot') == 'confirm-button' && newChild.focus) {
-        this._confirmButton = newChild;
+      // Handle named slots (header and buttons).
+      if (slotName) {
+        if (slotName.indexOf('button') >= 0) {
+          const [button] = slotName.split('-');
+          this[`_${button}Button`] = node;
+        } else if (slotName == 'header') {
+          this._headerNode = node;
+        }
+      } else {
+        const isNotEmptyText = node.nodeType == Node.TEXT_NODE && node.textContent.trim() !== '';
+        // Handle default slot (message element).
+        if (isNotEmptyText || (isElementNode && node.slot === '')) {
+          this._messageNode = node;
+        }
       }
     });
+  }
 
-    this.__toggleContentRTL(this.__isRTL);
+  /** @private */
+  _cancelButtonChanged(button, oldButton) {
+    this.__setupSlottedButton(button, oldButton, this.__boundCancel);
+  }
 
-    requestAnimationFrame(() => {
-      const confirmButton = this._confirmButton || overlay.content.querySelector('#confirm');
-      confirmButton.focus();
+  /** @private */
+  _confirmButtonChanged(button, oldButton) {
+    this.__setupSlottedButton(button, oldButton, this.__boundConfirm);
+  }
 
-      const { height } = getComputedStyle(overlay.content.querySelector('[part=footer]'));
-      this.$.dialog.$.overlay.style.setProperty('--_vaadin-confirm-dialog-footer-height', height);
-    });
+  /** @private */
+  _rejectButtonChanged(button, oldButton) {
+    this.__setupSlottedButton(button, oldButton, this.__boundReject);
   }
 
   /** @private */
+  __setupSlottedButton(slottedButton, currentButton, clickListener) {
+    if (currentButton && currentButton.parentElement) {
+      currentButton.remove();
+    }
+
+    slottedButton.addEventListener('click', clickListener);
+  }
+
+  /** @private */
+  __updateCancelButton(button, cancelText, cancelTheme, showCancel) {
+    if (button) {
+      button.textContent = cancelText;
+      button.setAttribute('theme', cancelTheme);
+      button.toggleAttribute('hidden', !showCancel);
+    }
+  }
+
+  /** @private */
+  __updateConfirmButton(button, confirmText, confirmTheme) {
+    if (button) {
+      button.textContent = confirmText;
+      button.setAttribute('theme', confirmTheme);
+    }
+  }
+
+  /** @private */
+  __updateHeaderNode(headerNode, header) {
+    // Only update text content for the default header node.
+    if (headerNode && headerNode === this.__defaultHeader) {
+      headerNode.textContent = header;
+    }
+  }
+
+  /** @private */
+  __updateMessageNode(messageNode, message) {
+    // Only update text content for the default message node.
+    if (messageNode && messageNode === this.__defaultMessage) {
+      messageNode.textContent = message;
+    }
+  }
+
+  /** @private */
+  __updateRejectButton(button, rejectText, rejectTheme, showReject) {
+    if (button) {
+      button.textContent = rejectText;
+      button.setAttribute('theme', rejectTheme);
+      button.toggleAttribute('hidden', !showReject);
+    }
+  }
+
+  /** @private */
   _escPressed(event) {
@@ -393,3 +525,3 @@ if (!event.defaultPrevented) {
   _setDimensionIfAttached(name, value) {
-    if (this.$ && this.$.dialog) {
+    if (this._overlayElement) {
       this._setDimension(name, value);
@@ -404,3 +536,3 @@ } else {
   _setDimension(name, value) {
-    this.$.dialog.$.overlay.style.setProperty(`--_vaadin-confirm-dialog-content-${name}`, value);
+    this._overlayElement.style.setProperty(`--_vaadin-confirm-dialog-content-${name}`, value);
   }
@@ -407,0 +539,0 @@

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

@@ -6,28 +6,8 @@ import '@vaadin/vaadin-lumo-styles/color.js';
 registerStyles(
-  'vaadin-dialog-overlay',
+  'vaadin-confirm-dialog-overlay',
   css`
-    :host([theme~='_vaadin-confirm-dialog-dialog-overlay-theme']) [part='content'] {
-      height: auto;
-      box-sizing: content-box;
+    [part='header'] ::slotted(h3) {
+      margin-top: 0 !important;
     }
-  `,
-  { moduleId: 'lumo-confirm-dialog-overlay' }
-);
 
-registerStyles(
-  'vaadin-confirm-dialog',
-  css`
-    #content {
-      height: calc(
-        var(--_vaadin-confirm-dialog-content-height) - var(--_vaadin-confirm-dialog-footer-height) - var(--lumo-space-s)
-      );
-      width: var(--_vaadin-confirm-dialog-content-width);
-    }
-
-    [part='header'],
-    .header {
-      margin-top: var(--lumo-space-s);
-      margin-bottom: var(--lumo-space-m);
-    }
-
     [part='message'] {
@@ -49,3 +29,3 @@ width: 25em;
 
-    [part='footer'] div {
+    [part='footer'] > * {
       margin-top: var(--lumo-space-s);
@@ -55,3 +35,3 @@ margin-bottom: var(--lumo-space-s);
 
-    vaadin-button[theme~='tertiary'] {
+    ::slotted([slot$='button'][theme~='tertiary']) {
       padding-left: var(--lumo-space-s);
@@ -61,19 +41,6 @@ padding-right: var(--lumo-space-s);
 
-    .cancel-button {
+    [part='cancel-button'] {
       flex-grow: 1;
     }
 
-    :not([dir='rtl']) > .cancel-button {
-      margin-left: calc(var(--lumo-space-s) * -1);
-    }
-
-    :not([dir='rtl']) > .confirm-button {
-      margin-right: calc(var(--lumo-space-s) * -1);
-    }
-
-    :not([dir='rtl']) > .reject-button,
-    :not([dir='rtl']) > .confirm-button {
-      margin-left: var(--lumo-space-s);
-    }
-
     @media (max-width: 360px) {
@@ -88,4 +55,3 @@ [part='footer'] {
 
-      [part='footer'] vaadin-button,
-      [part='footer'] ::slotted(*) {
+      ::slotted([slot$='button']) {
         width: 100%;
@@ -96,7 +62,7 @@ margin-top: var(--lumo-space-xs);
 
-      [part='footer'] .confirm-button {
+      [part='confirm-button'] {
         margin-top: var(--lumo-space-s);
       }
 
-      [part='footer'] .cancel-button {
+      [part='cancel-button'] {
         margin-bottom: var(--lumo-space-s);
@@ -106,17 +72,31 @@ }
 
-    /* RTL specific styles */
-    [dir='rtl'] > .cancel-button {
+    /* LTR styles */
+    :host(:not([dir='rtl'])) [part='cancel-button'] {
+      margin-left: calc(var(--lumo-space-s) * -1);
+    }
+
+    :host(:not([dir='rtl'])) [part='confirm-button'] {
       margin-right: calc(var(--lumo-space-s) * -1);
+      margin-left: var(--lumo-space-s);
     }
 
-    [dir='rtl'] > .confirm-button {
+    :host(:not([dir='rtl'])) [part='reject-button'] {
+      margin-left: var(--lumo-space-s);
+    }
+
+    /* RTL styles */
+    :host([dir='rtl']) [part='cancel-button'] {
+      margin-right: calc(var(--lumo-space-s) * -1);
+    }
+
+    :host([dir='rtl']) [part='confirm-button'] {
+      margin-right: var(--lumo-space-s);
       margin-left: calc(var(--lumo-space-s) * -1);
     }
 
-    [dir='rtl'] > .reject-button,
-    [dir='rtl'] > .confirm-button {
+    :host([dir='rtl']) [part='reject-button'] {
       margin-right: var(--lumo-space-s);
     }
   `,
-  { moduleId: 'lumo-confirm-dialog' }
+  { moduleId: 'lumo-confirm-dialog-overlay' }
 );

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

 import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
 
 registerStyles(
-  'vaadin-dialog-overlay',
+  'vaadin-confirm-dialog-overlay',
   css`
-    :host([theme~='_vaadin-confirm-dialog-dialog-overlay-theme']) [part='overlay'] {
+    [part='overlay'] {
       max-width: 100%;
@@ -11,18 +11,9 @@ min-width: 0;
 
-    :host([theme~='_vaadin-confirm-dialog-dialog-overlay-theme']) [part='content'] {
+    [part='content'] {
       padding: 8px 24px;
       min-width: 0;
-      height: auto;
-      box-sizing: content-box;
     }
-  `,
-  { moduleId: 'material-confirm-dialog-overlay' }
-);
 
-registerStyles(
-  'vaadin-confirm-dialog',
-  css`
-    #content {
-      height: calc(var(--_vaadin-confirm-dialog-content-height) - var(--_vaadin-confirm-dialog-footer-height) - 39px);
-      width: var(--_vaadin-confirm-dialog-content-width);
+    [part='header'] ::slotted(h3) {
+      margin-top: 0.75em !important;
     }
@@ -44,7 +35,22 @@
 
-    [part='footer']:not([dir='rtl']) div:nth-child(-n + 2) vaadin-button,
-    [part='footer']:not([dir='rtl']) div:nth-child(-n + 2) ::slotted(*) {
+    /* LTR styles */
+    :host(:not([dir='rtl'])) ::slotted([slot$='button']:not([slot^='confirm'])) {
       margin-right: 8px;
     }
 
+    /* RTL styles */
+    :host([dir='rtl']) [part='message'] {
+      margin-left: 24px;
+      margin-right: 0;
+    }
+
+    :host([dir='rtl']) [part='footer'] {
+      margin-left: -16px;
+      margin-right: 0;
+    }
+
+    :host([dir='rtl']) ::slotted([slot$='button']:not([slot^='confirm'])) {
+      margin-left: 8px;
+    }
+
     @media (max-width: 360px) {
@@ -56,37 +62,16 @@ [part='footer'] {
 
-      [part='footer'] div:nth-child(-n + 2) vaadin-button,
-      [part='footer'] div:nth-child(-n + 2) ::slotted(*) {
+      ::slotted([slot$='button']:not([slot^='confirm'])) {
         margin-top: 8px;
-        margin-right: 0;
       }
 
-      [part='footer'] div:nth-last-child(1) vaadin-button,
-      [part='footer'] div:nth-last-child(1) ::slotted(*) {
-        margin-top: 8px;
+      :host(:not([dir='rtl'])) ::slotted([slot$='button']:not([slot^='confirm'])) {
+        margin-right: 0;
       }
 
-      /* RTL specific styles */
-      [part='footer'][dir='rtl'] div:nth-child(-n + 2) vaadin-button,
-      [part='footer'][dir='rtl'] div:nth-child(-n + 2) ::slotted(*) {
+      :host([dir='rtl']) ::slotted([slot$='button']:not([slot^='confirm'])) {
         margin-left: 0;
       }
     }
-
-    /* RTL specific styles */
-    [dir='rtl'] > [part='message'] {
-      margin-left: 24px;
-      margin-right: 0;
-    }
-
-    [part='footer'][dir='rtl'] {
-      margin-left: -16px;
-      margin-right: 0;
-    }
-
-    [part='footer'][dir='rtl'] div:nth-child(-n + 2) vaadin-button,
-    [part='footer'][dir='rtl'] div:nth-child(-n + 2) ::slotted(*) {
-      margin-left: 8px;
-    }
   `,
-  { moduleId: 'material-confirm-dialog' }
+  { moduleId: 'material-confirm-dialog-overlay' }
 );

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

45653

increased by17.65%

Number of package files

12

increased by9.09%

Lines of code

884

increased by30.19%

Dependency changes

• + Added@vaadin/button@23.0.0-alpha2(transitive)

• + Added@vaadin/component-base@23.0.0-alpha2(transitive)

• + Added@vaadin/dialog@23.0.0-alpha2(transitive)

• + Added@vaadin/icon@23.0.0-alpha2(transitive)

• + Added@vaadin/vaadin-lumo-styles@23.0.0-alpha2(transitive)

• + Added@vaadin/vaadin-material-styles@23.0.0-alpha2(transitive)

• + Added@vaadin/vaadin-overlay@23.0.0-alpha2(transitive)

• + Added@vaadin/vaadin-themable-mixin@23.0.0-alpha2(transitive)

• - Removed@vaadin/button@23.0.0-alpha1(transitive)

• - Removed@vaadin/component-base@23.0.0-alpha1(transitive)

• - Removed@vaadin/dialog@23.0.0-alpha1(transitive)

• - Removed@vaadin/icon@23.0.0-alpha1(transitive)

• - Removed@vaadin/vaadin-lumo-styles@23.0.0-alpha1(transitive)

• - Removed@vaadin/vaadin-material-styles@23.0.0-alpha1(transitive)

• - Removed@vaadin/vaadin-overlay@23.0.0-alpha1(transitive)

• - Removed@vaadin/vaadin-themable-mixin@23.0.0-alpha1(transitive)

• Updated@vaadin/button@23.0.0-alpha2

• Updated@vaadin/component-base@23.0.0-alpha2

• Updated@vaadin/dialog@23.0.0-alpha2

• Updated@vaadin/vaadin-lumo-styles@23.0.0-alpha2

• Updated@vaadin/vaadin-material-styles@23.0.0-alpha2

• Updated@vaadin/vaadin-overlay@23.0.0-alpha2

• Updated@vaadin/vaadin-themable-mixin@23.0.0-alpha2