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

Comparing version 1.2.0-alpha1 to 1.2.0-alpha2

package.json

@@ -13,3 +13,3 @@ {
   "name": "@vaadin/vaadin-confirm-dialog",
-  "version": "1.2.0-alpha1",
+  "version": "1.2.0-alpha2",
   "main": "vaadin-confirm-dialog.js",
@@ -34,10 +34,10 @@ "author": "Vaadin Ltd",
     "@polymer/polymer": "^3.0.0",
-    "@vaadin/vaadin-themable-mixin": "^1.2.0",
-    "@vaadin/vaadin-element-mixin": "^2.0.0",
-    "@vaadin/vaadin-lumo-styles": "^1.1.0",
-    "@vaadin/vaadin-material-styles": "^1.1.0",
+    "@vaadin/vaadin-themable-mixin": "^1.5.2",
+    "@vaadin/vaadin-element-mixin": "^2.3.2",
+    "@vaadin/vaadin-lumo-styles": "^1.6.0",
+    "@vaadin/vaadin-material-styles": "^1.3.0",
     "@vaadin/vaadin-license-checker": "^2.1.0",
-    "@vaadin/vaadin-dialog": "^2.1.0",
-    "@vaadin/vaadin-button": "^2.1.0",
-    "@vaadin/vaadin-overlay": "^3.2.0"
+    "@vaadin/vaadin-dialog": "^2.3.0",
+    "@vaadin/vaadin-button": "^2.3.0-alpha1",
+    "@vaadin/vaadin-overlay": "^3.4.0"
   },
@@ -49,3 +49,3 @@ "devDependencies": {
     "wct-browser-legacy": "^1.0.1",
-    "@vaadin/vaadin-demo-helpers": "^3.0.0",
+    "@vaadin/vaadin-demo-helpers": "^3.1.0-alpha1",
     "@vaadin/vaadin-icons": "^4.2.0",
@@ -52,0 +52,0 @@ "@polymer/iron-test-helpers": "^3.0.0"

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="[[noCloseOnEsc]]">
+    <vaadin-dialog id="dialog" opened="{{opened}}" aria-label="[[_getAriaLabel(header)]]" theme\$="[[theme]]" no-close-on-outside-click="" no-close-on-esc="[[noCloseOnEsc]]">
       <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.2.0-alpha1';
+    return '1.2.0-alpha2';
   }
@@ -230,2 +219,15 @@
 
+  /**
+   * @protected
+   */
+  static _finalizeClass() {
+    super._finalizeClass();
+
+    const devModeCallback = window.Vaadin.developmentModeCallback;
+    const licenseChecker = devModeCallback && devModeCallback['vaadin-license-checker'];
+    if (typeof licenseChecker === 'function') {
+      licenseChecker(ConfirmDialogElement);
+    }
+  }
+
   ready() {
@@ -241,2 +243,23 @@ super.ready();
 
+  attributeChangedCallback(name, oldValue, newValue) {
+    super.attributeChangedCallback(name, oldValue, newValue);
+    if (name === 'dir') {
+      const value = newValue === 'rtl';
+      this.__isRTL = value;
+      this.opened && this.__toggleContentRTL(value);
+    }
+  }
+
+  __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');
+    }
+  }
+
   _openedChanged() {
@@ -254,5 +277,13 @@ if (!this.opened) {
 
+    this.opened && this.__toggleContentRTL(this.__isRTL);
+
     beforeNextRender(this, () => {
       var confirmButton = this._confirmButton || this.$.dialog.$.overlay.content.querySelector('#confirm');
       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;
+      }
     });
@@ -333,7 +364,1 @@ }
 export { ConfirmDialogElement };
-
-const licenseChecker = window.Vaadin.developmentModeCallback
-  && window.Vaadin.developmentModeCallback['vaadin-license-checker'];
-if (typeof licenseChecker === 'function') {
-  licenseChecker(ConfirmDialogElement);
-}

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

@@ -7,12 +7,23 @@ import '@vaadin/vaadin-lumo-styles/color.js';
 
-const $_documentContainer = html`<dom-module id="lumo-confirm-dialog" theme-for="vaadin-confirm-dialog">
+const $_documentContainer = html`<dom-module id="lumo-confirm-dialog-overlay" theme-for="vaadin-dialog-overlay">
   <template>
     <style>
-      [part="header"] {
-        margin-top: var(--lumo-space-s);
-        margin-bottom: var(--lumo-space-m);
+      #content {
+        height: auto;
+        box-sizing: content-box;
       }
+    </style>
+  </template>
+</dom-module><dom-module id="lumo-confirm-dialog" theme-for="vaadin-confirm-dialog">
+  <template>
+    <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 {
-        margin: 0;
+        margin-top: var(--lumo-space-s);
+        margin-bottom: var(--lumo-space-m);
       }
@@ -48,11 +59,14 @@
         flex-grow: 1;
+      }
+
+      :not([dir="rtl"]) > .cancel-button {
         margin-left: calc(var(--lumo-space-s) * -1);
       }
 
-      .confirm-button {
+      :not([dir="rtl"]) > .confirm-button {
         margin-right: calc(var(--lumo-space-s) * -1);
       }
 
-      .reject-button,
-      .confirm-button {
+      :not([dir="rtl"]) > .reject-button,
+      :not([dir="rtl"]) > .confirm-button {
         margin-left: var(--lumo-space-s);
@@ -85,2 +99,17 @@ }
       }
+
+      /* RTL specific styles */
+
+      [dir="rtl"] > .cancel-button {
+        margin-right: calc(var(--lumo-space-s) * -1);
+      }
+
+      [dir="rtl"] > .confirm-button {
+        margin-left: calc(var(--lumo-space-s) * -1);
+      }
+
+      [dir="rtl"] > .reject-button,
+      [dir="rtl"] > .confirm-button {
+        margin-right: var(--lumo-space-s);
+      }
     </style>
@@ -87,0 +116,0 @@ </template>

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"] {
@@ -21,4 +26,4 @@ width: 25em;
 
-      [part="footer"] div:nth-child(-n + 2) vaadin-button,
-      [part="footer"] div:nth-child(-n + 2) ::slotted(*) {
+      [part="footer"]:not([dir="rtl"]) div:nth-child(-n + 2) vaadin-button,
+      [part="footer"]:not([dir="rtl"]) div:nth-child(-n + 2) ::slotted(*) {
         margin-right: 8px;
@@ -43,3 +48,27 @@ }
         }
+
+        /* RTL specific styles */
+
+        [part="footer"][dir="rtl"] div:nth-child(-n + 2) vaadin-button,
+        [part="footer"][dir="rtl"] div:nth-child(-n + 2) ::slotted(*) {
+          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;
+      }
     </style>
@@ -58,2 +87,4 @@ </template>
         min-width: 0;
+        height: auto;
+        box-sizing: content-box;
       }
@@ -60,0 +91,0 @@ </style>

No alert changes

Improved metrics

Total package byte prevSize

36429

increased by8.08%

Lines of code

509

increased by15.95%

Dependency changes

• Updated@vaadin/vaadin-button@^2.3.0-alpha1

• Updated@vaadin/vaadin-dialog@^2.3.0

• Updated@vaadin/vaadin-element-mixin@^2.3.2

• Updated@vaadin/vaadin-lumo-styles@^1.6.0

• Updated@vaadin/vaadin-material-styles@^1.3.0

• Updated@vaadin/vaadin-overlay@^3.4.0

• Updated@vaadin/vaadin-themable-mixin@^1.5.2