@vaadin/confirm-dialog - npm Package Compare versions

Comparing version 23.1.0-alpha2 to 23.1.0-alpha3

package.json

 {
   "name": "@vaadin/confirm-dialog",
-  "version": "23.1.0-alpha2",
+  "version": "23.1.0-alpha3",
   "publishConfig": {
@@ -37,10 +37,10 @@ "access": "public"
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/button": "23.1.0-alpha2",
-    "@vaadin/component-base": "23.1.0-alpha2",
-    "@vaadin/dialog": "23.1.0-alpha2",
+    "@vaadin/button": "23.1.0-alpha3",
+    "@vaadin/component-base": "23.1.0-alpha3",
+    "@vaadin/dialog": "23.1.0-alpha3",
     "@vaadin/vaadin-license-checker": "^2.1.0",
-    "@vaadin/vaadin-lumo-styles": "23.1.0-alpha2",
-    "@vaadin/vaadin-material-styles": "23.1.0-alpha2",
-    "@vaadin/vaadin-overlay": "23.1.0-alpha2",
-    "@vaadin/vaadin-themable-mixin": "23.1.0-alpha2"
+    "@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"
   },
@@ -50,5 +50,5 @@ "devDependencies": {
     "@vaadin/testing-helpers": "^0.3.2",
-    "sinon": "^9.2.1"
+    "sinon": "^13.0.2"
   },
-  "gitHead": "6842dcb8b163d4512fae8d3d12a6559077a4aee6"
+  "gitHead": "8c9e64e8dfa158dd52a9bf6da351ff038c88ca85"
 }

src/vaadin-confirm-dialog-overlay.js

@@ -18,13 +18,16 @@ /**
 
-    [part='content'] {
+    [part='overlay'] {
       width: var(--_vaadin-confirm-dialog-content-width);
-      display: flex;
-      flex-direction: column;
       height: var(--_vaadin-confirm-dialog-content-height);
-      box-sizing: content-box;
     }
 
-    [part='message'] {
-      margin-bottom: auto;
+    /* Override display: contents */
+    :host([has-header]) ::slotted([slot='header']) {
+      display: block;
     }
+
+    /* Make buttons clickable */
+    [part='footer'] > * {
+      pointer-events: all;
+    }
   `,
@@ -36,21 +39,11 @@ { moduleId: 'vaadin-confirm-dialog-overlay-styles' }
 
-const dialogTemplate = html`
-  <div part="header">
-    <slot name="header"></slot>
+const footerTemplate = html`
+  <div part="cancel-button">
+    <slot name="cancel-button"></slot>
   </div>
-
-  <div part="message">
-    <slot></slot>
+  <div part="reject-button">
+    <slot name="reject-button"></slot>
   </div>
-
-  <div part="footer">
-    <div part="cancel-button">
-      <slot name="cancel-button"></slot>
-    </div>
-    <div part="reject-button">
-      <slot name="reject-button"></slot>
-    </div>
-    <div part="confirm-button">
-      <slot name="confirm-button"></slot>
-    </div>
+  <div part="confirm-button">
+    <slot name="confirm-button"></slot>
   </div>
@@ -72,6 +65,24 @@ `;
       memoizedTemplate = super.template.cloneNode(true);
+
+      // Replace two header slots with a single one
+      const headerPart = memoizedTemplate.content.querySelector('[part="header"]');
+      headerPart.innerHTML = '';
+      const headerSlot = document.createElement('slot');
+      headerSlot.setAttribute('name', 'header');
+      headerPart.appendChild(headerSlot);
+
+      // Place default slot inside a "message" part
       const contentPart = memoizedTemplate.content.querySelector('[part="content"]');
       const defaultSlot = contentPart.querySelector('slot:not([name])');
-      contentPart.removeChild(defaultSlot);
-      contentPart.appendChild(dialogTemplate.content.cloneNode(true));
+      const messagePart = document.createElement('div');
+      messagePart.setAttribute('part', 'message');
+      contentPart.appendChild(messagePart);
+      messagePart.appendChild(defaultSlot);
+
+      // Replace footer slot with button named slots
+      const footerPart = memoizedTemplate.content.querySelector('[part="footer"]');
+      footerPart.setAttribute('role', 'toolbar');
+      const footerSlot = footerPart.querySelector('slot');
+      footerPart.removeChild(footerSlot);
+      footerPart.appendChild(footerTemplate.content.cloneNode(true));
     }
@@ -92,2 +103,14 @@ return memoizedTemplate;
   }
+
+  /**
+   * @protected
+   * @override
+   */
+  _headerFooterRendererChange(headerRenderer, footerRenderer, opened) {
+    super._headerFooterRendererChange(headerRenderer, footerRenderer, opened);
+
+    // ConfirmDialog has header and footer but does not use renderers
+    this.setAttribute('has-header', '');
+    this.setAttribute('has-footer', '');
+  }
 }
@@ -94,0 +117,0 @@

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

@@ -8,4 +8,6 @@ import '@vaadin/vaadin-lumo-styles/color.js';
   css`
-    [part='header'] ::slotted(h3) {
+    :host([has-header]) [part='header'] ::slotted(h3) {
       margin-top: 0 !important;
+      margin-bottom: 0 !important;
+      margin-inline-start: calc(var(--lumo-space-l) - var(--lumo-space-m));
     }
@@ -19,19 +21,2 @@
 
-    [part='footer'] {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: flex-end;
-      margin: calc(var(--lumo-space-l) * -1);
-      margin-top: var(--lumo-space-l);
-      padding: 0 var(--lumo-space-l);
-      background-color: var(--lumo-contrast-5pct);
-      border-bottom-left-radius: var(--lumo-border-radius-l);
-      border-bottom-right-radius: var(--lumo-border-radius-l);
-    }
-
-    [part='footer'] > * {
-      margin-top: var(--lumo-space-s);
-      margin-bottom: var(--lumo-space-s);
-    }
-
     ::slotted([slot$='button'][theme~='tertiary']) {
@@ -47,54 +32,16 @@ padding-left: var(--lumo-space-s);
     @media (max-width: 360px) {
-      [part='footer'] {
+      :host([has-footer]) [part='footer'] {
         flex-direction: column-reverse;
+        align-items: stretch;
+        padding: var(--lumo-space-s) var(--lumo-space-l);
+        gap: var(--lumo-space-s);
       }
 
-      [part='footer'] div {
-        margin: var(--lumo-space-xs) calc(var(--lumo-space-l) / -2) calc(var(--lumo-space-xs) * -1);
-      }
-
       ::slotted([slot$='button']) {
         width: 100%;
-        margin-top: var(--lumo-space-xs);
-        margin-bottom: var(--lumo-space-xs);
+        margin: 0;
       }
-
-      [part='confirm-button'] {
-        margin-top: var(--lumo-space-s);
-      }
-
-      [part='cancel-button'] {
-        margin-bottom: var(--lumo-space-s);
-      }
     }
-
-    /* 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);
-    }
-
-    :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);
-    }
-
-    :host([dir='rtl']) [part='reject-button'] {
-      margin-right: var(--lumo-space-s);
-    }
   `,
   { moduleId: 'lumo-confirm-dialog-overlay' }
 );

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

@@ -12,3 +12,2 @@ import { css, registerStyles } from '@vaadin/vaadin-themable-mixin/vaadin-themable-mixin.js';
     [part='content'] {
-      padding: 8px 24px;
       min-width: 0;
@@ -18,3 +17,5 @@ }
     [part='header'] ::slotted(h3) {
-      margin-top: 0.75em !important;
+      margin-top: 0 !important;
+      margin-bottom: 0 !important;
+      margin-inline-start: 8px;
     }
@@ -25,33 +26,5 @@
       max-width: 100%;
-      margin-right: 24px;
+      margin-inline-end: 24px;
     }
 
-    [part='footer'] {
-      display: flex;
-      flex-wrap: wrap;
-      justify-content: flex-end;
-      margin-top: 28px;
-      margin-right: -16px;
-    }
-
-    /* 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) {
@@ -62,14 +35,2 @@ [part='footer'] {
       }
-
-      ::slotted([slot$='button']:not([slot^='confirm'])) {
-        margin-top: 8px;
-      }
-
-      :host(:not([dir='rtl'])) ::slotted([slot$='button']:not([slot^='confirm'])) {
-        margin-right: 0;
-      }
-
-      :host([dir='rtl']) ::slotted([slot$='button']:not([slot^='confirm'])) {
-        margin-left: 0;
-      }
     }
@@ -76,0 +37,0 @@ `,

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

Worsened metrics

Total package byte prevSize

45916

decreased by-2.54%

Lines of code

850

decreased by-5.97%

Dependency changes

• + Added@vaadin/button@23.1.0-alpha3(transitive)

• + Added@vaadin/component-base@23.1.0-alpha3(transitive)

• + Added@vaadin/dialog@23.1.0-alpha3(transitive)

• + Added@vaadin/icon@23.1.0-alpha3(transitive)

• + Added@vaadin/vaadin-lumo-styles@23.1.0-alpha3(transitive)

• + Added@vaadin/vaadin-material-styles@23.1.0-alpha3(transitive)

• + Added@vaadin/vaadin-overlay@23.1.0-alpha3(transitive)

• + Added@vaadin/vaadin-themable-mixin@23.1.0-alpha3(transitive)

• - Removed@vaadin/button@23.1.0-alpha2(transitive)

• - Removed@vaadin/component-base@23.1.0-alpha2(transitive)

• - Removed@vaadin/dialog@23.1.0-alpha2(transitive)

• - Removed@vaadin/icon@23.1.0-alpha2(transitive)

• - Removed@vaadin/vaadin-lumo-styles@23.1.0-alpha2(transitive)

• - Removed@vaadin/vaadin-material-styles@23.1.0-alpha2(transitive)

• - Removed@vaadin/vaadin-overlay@23.1.0-alpha2(transitive)

• - Removed@vaadin/vaadin-themable-mixin@23.1.0-alpha2(transitive)

• Updated@vaadin/button@23.1.0-alpha3

• Updated@vaadin/component-base@23.1.0-alpha3

• Updated@vaadin/dialog@23.1.0-alpha3

• Updated@vaadin/vaadin-lumo-styles@23.1.0-alpha3

• Updated@vaadin/vaadin-material-styles@23.1.0-alpha3

• Updated@vaadin/vaadin-overlay@23.1.0-alpha3

• Updated@vaadin/vaadin-themable-mixin@23.1.0-alpha3