@vaadin/vaadin-confirm-dialog - npm Package Compare versions

Comparing version 1.1.3 to 1.1.4

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-confirm-dialog",
-  "version": "1.1.3",
+  "version": "1.1.4",
   "main": "vaadin-confirm-dialog.js",
@@ -16,0 +16,0 @@ "author": "Vaadin Ltd",

src/vaadin-confirm-dialog.js

@@ -66,19 +66,8 @@ /**
         --_vaadin-confirm-dialog-content-height: auto;
+        --_vaadin-confirm-dialog-footer-height: auto;
       }
-
-      [part="content"] {
-        display: flex;
-        flex-direction: column;
-        justify-content: space-between;
-        width: var(--_vaadin-confirm-dialog-content-width);
-        height: var(--_vaadin-confirm-dialog-content-height);
-      }
-
-      [part="message"] {
-        flex: 1 0 auto;
-      }
     </style>
     <vaadin-dialog id="dialog" opened="{{opened}}" aria-label="[[_getAriaLabel(header)]]" no-close-on-outside-click="" no-close-on-esc="">
       <template>
-        <div part="content">
+        <div id="content">
           <div part="header">
@@ -94,26 +83,26 @@ <slot name="header">
           </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 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>
@@ -129,3 +118,3 @@ </template>
   static get version() {
-    return '1.1.3';
+    return '1.1.4';
   }
@@ -248,2 +237,8 @@
       confirmButton.focus();
+
+      const {height} = getComputedStyle(this.$.dialog.$.overlay.content.querySelector('[part=footer]'));
+      if (height != this._footerHeight) {
+        window.ShadyCSS.styleSubtree(this.$.dialog.$.overlay, {'--_vaadin-confirm-dialog-footer-height': height});
+        this._footerHeight = height;
+      }
     });
@@ -250,0 +245,0 @@ }

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

@@ -10,2 +10,8 @@ import '@vaadin/vaadin-lumo-styles/color.js';
     <style>
+      #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 {
@@ -12,0 +18,0 @@ margin-top: var(--lumo-space-s);

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

@@ -6,2 +6,7 @@ import { html } from '@polymer/polymer/lib/utils/html-tag.js';
     <style>
+      #content {
+        height: calc(var(--_vaadin-confirm-dialog-content-height) - var(--_vaadin-confirm-dialog-footer-height) - 39px);
+        width: var(--_vaadin-confirm-dialog-content-width);
+      }
+
       [part="message"] {
@@ -8,0 +13,0 @@ width: 25em;

No alert changes

Improved metrics

Total package byte prevSize

33908

increased by1.37%

Lines of code

436

increased by1.16%

No dependency changes