Merge 89002d1 into f592dc3

vaadin · Apr 3, 2020 · 12bb458 · 12bb458
2 parents f592dc3 + 89002d1
commit 12bb458
Show file tree

Hide file tree

Showing 31 changed files with 137 additions and 26 deletions.
diff --git a/bower.json b/bower.json
@@ -28,13 +28,13 @@
   ],
   "dependencies": {
     "polymer": "^2.0.0",
-    "vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.4.1",
-    "vaadin-element-mixin": "vaadin/vaadin-element-mixin#^2.0.0",
-    "vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.3.0",
-    "vaadin-material-styles": "vaadin/vaadin-material-styles#^1.2.0",
-    "vaadin-text-field": "vaadin/vaadin-text-field#^2.3.0",
+    "vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.5.2",
+    "vaadin-element-mixin": "vaadin/vaadin-element-mixin#^2.3.1",
+    "vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.6.0",
+    "vaadin-material-styles": "vaadin/vaadin-material-styles#^1.3.2",
+    "vaadin-text-field": "vaadin/vaadin-text-field#^2.6.0-alpha4",
     "vaadin-button": "vaadin/vaadin-button#^2.1.0",
-    "vaadin-overlay": "^3.2.1"
+    "vaadin-overlay": "vaadin/vaadin-overlay#^3.4.0"
   },
   "devDependencies": {
     "iron-component-page": "^3.0.0",

diff --git a/test/visual/default.html b/test/visual/default.html
@@ -2,14 +2,17 @@
 
 <head lang="en">
   <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <title></title>
   <script src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
   <script>
     const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
     document.write('<link rel="import" href="../../theme/' + theme + '/vaadin-login-overlay.html">');
+    const dir = window.location.search.replace(/.*dir=(\w+).*/, '$1') || 'ltr';
+    document.documentElement.setAttribute('dir', dir);
   </script>
 </head>
 
 <body style="height: 100vh; margin: 0; padding: 0;">
-  <vaadin-login-overlay opened></vaadin-login-overlay>
+  <vaadin-login-overlay opened error></vaadin-login-overlay>
 </body>
diff --git a/...in-login-overlay/default-tests-desktop-lumo-ltr/vaadin-login-overlay/chrome.png b/...in-login-overlay/default-tests-desktop-lumo-ltr/vaadin-login-overlay/chrome.png
diff --git a/...n-login-overlay/default-tests-desktop-lumo-ltr/vaadin-login-overlay/firefox.png b/...n-login-overlay/default-tests-desktop-lumo-ltr/vaadin-login-overlay/firefox.png
diff --git a/...in-login-overlay/default-tests-desktop-lumo-rtl/vaadin-login-overlay/chrome.png b/...in-login-overlay/default-tests-desktop-lumo-rtl/vaadin-login-overlay/chrome.png
diff --git a/...n-login-overlay/default-tests-desktop-lumo-rtl/vaadin-login-overlay/firefox.png b/...n-login-overlay/default-tests-desktop-lumo-rtl/vaadin-login-overlay/firefox.png
diff --git a/...ogin-overlay/default-tests-desktop-material-ltr/vaadin-login-overlay/chrome.png b/...ogin-overlay/default-tests-desktop-material-ltr/vaadin-login-overlay/chrome.png
diff --git a/...gin-overlay/default-tests-desktop-material-ltr/vaadin-login-overlay/firefox.png b/...gin-overlay/default-tests-desktop-material-ltr/vaadin-login-overlay/firefox.png
diff --git a/...ogin-overlay/default-tests-desktop-material-rtl/vaadin-login-overlay/chrome.png b/...ogin-overlay/default-tests-desktop-material-rtl/vaadin-login-overlay/chrome.png
diff --git a/...gin-overlay/default-tests-desktop-material-rtl/vaadin-login-overlay/firefox.png b/...gin-overlay/default-tests-desktop-material-rtl/vaadin-login-overlay/firefox.png
diff --git a/...din-login-overlay/default-tests-medium-lumo-ltr/vaadin-login-overlay/chrome.png b/...din-login-overlay/default-tests-medium-lumo-ltr/vaadin-login-overlay/chrome.png
diff --git a/...in-login-overlay/default-tests-medium-lumo-ltr/vaadin-login-overlay/firefox.png b/...in-login-overlay/default-tests-medium-lumo-ltr/vaadin-login-overlay/firefox.png
diff --git a/...din-login-overlay/default-tests-medium-lumo-rtl/vaadin-login-overlay/chrome.png b/...din-login-overlay/default-tests-medium-lumo-rtl/vaadin-login-overlay/chrome.png
diff --git a/...in-login-overlay/default-tests-medium-lumo-rtl/vaadin-login-overlay/firefox.png b/...in-login-overlay/default-tests-medium-lumo-rtl/vaadin-login-overlay/firefox.png
diff --git a/...login-overlay/default-tests-medium-material-ltr/vaadin-login-overlay/chrome.png b/...login-overlay/default-tests-medium-material-ltr/vaadin-login-overlay/chrome.png
diff --git a/...ogin-overlay/default-tests-medium-material-ltr/vaadin-login-overlay/firefox.png b/...ogin-overlay/default-tests-medium-material-ltr/vaadin-login-overlay/firefox.png
diff --git a/...login-overlay/default-tests-medium-material-rtl/vaadin-login-overlay/chrome.png b/...login-overlay/default-tests-medium-material-rtl/vaadin-login-overlay/chrome.png
diff --git a/...ogin-overlay/default-tests-medium-material-rtl/vaadin-login-overlay/firefox.png b/...ogin-overlay/default-tests-medium-material-rtl/vaadin-login-overlay/firefox.png
diff --git a/...n-overlay/default-tests-small-portrait-lumo-ltr/vaadin-login-overlay/chrome.png b/...n-overlay/default-tests-small-portrait-lumo-ltr/vaadin-login-overlay/chrome.png
diff --git a/...-overlay/default-tests-small-portrait-lumo-ltr/vaadin-login-overlay/firefox.png b/...-overlay/default-tests-small-portrait-lumo-ltr/vaadin-login-overlay/firefox.png
diff --git a/...n-overlay/default-tests-small-portrait-lumo-rtl/vaadin-login-overlay/chrome.png b/...n-overlay/default-tests-small-portrait-lumo-rtl/vaadin-login-overlay/chrome.png
diff --git a/...-overlay/default-tests-small-portrait-lumo-rtl/vaadin-login-overlay/firefox.png b/...-overlay/default-tests-small-portrait-lumo-rtl/vaadin-login-overlay/firefox.png
diff --git a/...erlay/default-tests-small-portrait-material-ltr/vaadin-login-overlay/chrome.png b/...erlay/default-tests-small-portrait-material-ltr/vaadin-login-overlay/chrome.png
diff --git a/...rlay/default-tests-small-portrait-material-ltr/vaadin-login-overlay/firefox.png b/...rlay/default-tests-small-portrait-material-ltr/vaadin-login-overlay/firefox.png
diff --git a/...erlay/default-tests-small-portrait-material-rtl/vaadin-login-overlay/chrome.png b/...erlay/default-tests-small-portrait-material-rtl/vaadin-login-overlay/chrome.png
diff --git a/...rlay/default-tests-small-portrait-material-rtl/vaadin-login-overlay/firefox.png b/...rlay/default-tests-small-portrait-material-rtl/vaadin-login-overlay/firefox.png
diff --git a/test/visual/test.js b/test/visual/test.js
@@ -14,12 +14,25 @@ gemini.suite('vaadin-login-overlay', function(rootSuite) {
     .before(wait)
     .after(goToAboutBlank);
 
-  ['lumo', 'material'].forEach(theme => {
-    gemini.suite(`default-tests-${theme}`, function(suite) {
-      suite
-        .setUrl(`/default.html?theme=${theme}`)
-        .setCaptureElements('body')
-        .capture(`vaadin-login-overlay`);
+  const screens = [
+    {name: 'desktop', width: 1600, height: 1000},
+    {name: 'medium', width: 1000, height: 600},
+    {name: 'small-portrait', width: 500, height: 1000}
+  ];
+
+  screens.forEach(({name, width, height}) => {
+
+    ['lumo', 'material'].forEach(theme => {
+      ['ltr', 'rtl'].forEach(direction => {
+
+        gemini.suite(`default-tests-${name}-${theme}-${direction}`, function(suite) {
+          suite
+            .before(action => action.setWindowSize(width, height))
+            .setUrl(`default.html?theme=${theme}&dir=${direction}`)
+            .setCaptureElements('body')
+            .capture(`vaadin-login-overlay`);
+        });
+      });
     });
   });
 

diff --git a/theme/lumo/vaadin-login-form-wrapper-styles.html b/theme/lumo/vaadin-login-form-wrapper-styles.html
@@ -25,13 +25,20 @@
       [part="error-message"] {
         background-color: var(--lumo-error-color-10pct);
         padding: var(--lumo-space-m);
-        padding-left: var(--lumo-size-m);
         border-radius: var(--lumo-border-radius);
         margin-top: var(--lumo-space-m);
         margin-bottom: var(--lumo-space-s);
         color: var(--lumo-error-text-color);
       }
 
+      :host(:not([dir="rtl"])) [part="error-message"] {
+        padding-left: var(--lumo-size-m);
+      }
+
+      :host([dir="rtl"]) [part="error-message"] {
+        padding-right: var(--lumo-size-m);
+      }
+
       [part="error-message"]::before {
         content: var(--lumo-icons-error);
         font-family: lumo-icons;
@@ -41,10 +48,18 @@
         height: 1em;
         line-height: 1;
         text-align: center;
+      }
+
+      :host(:not([dir="rtl"])) [part="error-message"]::before {
         /* Visual centering */
         margin-left: calc(var(--lumo-size-m) * -0.95);
       }
 
+      :host([dir="rtl"]) [part="error-message"]::before {
+        /* Visual centering */
+        margin-right: calc(var(--lumo-size-m) * -0.95);
+      }
+
       [part="error-message-title"] {
         margin: 0 0 0.25em;
         color: inherit;

diff --git a/theme/lumo/vaadin-login-overlay-styles.html b/theme/lumo/vaadin-login-overlay-styles.html
@@ -31,14 +31,6 @@
         height: 100%;
       }
 
-      @media only screen
-      and (max-width: 500px) {
-        [part="overlay"],
-        [part="content"] {
-          height: 100%;
-        }
-      }
-
       [part="card"] {
         width: calc(var(--lumo-size-m) * 10);
         background: var(--lumo-base-color) linear-gradient(var(--lumo-tint-5pct), var(--lumo-tint-5pct));
@@ -74,6 +66,11 @@
       /* Small screen */
       @media only screen
       and (max-width: 500px) {
+        [part="overlay"],
+        [part="content"] {
+          height: 100%;
+        }
+
         [part="content"] {
           min-height: 100%;
           background: var(--lumo-base-color);
@@ -87,6 +84,11 @@
           box-shadow: none;
           margin: 0;
         }
+
+        /* RTL styles */
+        :host([dir="rtl"]) [part="brand"] {
+          padding: var(--lumo-space-l) var(--lumo-space-l) var(--lumo-space-l) var(--lumo-space-xl);
+        }
       }
 
       /* Landscape small screen */
@@ -168,6 +170,21 @@
           padding-left: calc(var(--lumo-space-l) + constant(safe-area-inset-left));
           padding-left: calc(var(--lumo-space-l) + env(safe-area-inset-left));
         }
+
+        /* RTL styles */
+        :host([dir="rtl"]) [part="card"] {
+          padding-left: constant(safe-area-inset-right);
+          padding-left: env(safe-area-inset-right);
+          padding-right: constant(safe-area-inset-left);
+          padding-right: env(safe-area-inset-left);
+        }
+
+        :host([dir="rtl"]) [part="brand"] {
+          margin-right: calc(constant(safe-area-inset-left) * -1);
+          margin-right: calc(env(safe-area-inset-left) * -1);
+          padding-right: calc(var(--lumo-space-l) + constant(safe-area-inset-left));
+          padding-right: calc(var(--lumo-space-l) + env(safe-area-inset-left));
+        }
       }
     </style>
   </template>

diff --git a/theme/material/vaadin-login-form-wrapper-styles.html b/theme/material/vaadin-login-form-wrapper-styles.html
@@ -30,13 +30,20 @@
       [part="error-message"] {
         background-color: hsla(3, 100%, 60%, 0.1);
         padding: 1rem;
-        padding-left: 2.25rem;
         border-radius: 0.25em;
         margin-top: 1rem;
         margin-bottom: 0.5rem;
         color: var(--material-error-text-color);
       }
 
+      :host(:not([dir="rtl"])) [part="error-message"] {
+        padding-left: 2.25rem;
+      }
+
+      :host([dir="rtl"]) [part="error-message"] {
+        padding-right: 2.25rem;
+      }
+
       [part="error-message"]::before {
         content: "!";
         font-size: 1.3em;
@@ -46,10 +53,18 @@
         height: 1em;
         line-height: 1;
         text-align: center;
+      }
+
+      :host(:not([dir="rtl"])) [part="error-message"]::before {
         /* Visual centering */
         margin-left: calc(2.25rem * -0.95);
       }
 
+      :host([dir="rtl"]) [part="error-message"]::before {
+        /* Visual centering */
+        margin-right: calc(2.25rem * -0.95);
+      }
+
       [part="error-message"] h5 {
         margin: 0 0 0.25em;
         color: inherit;

diff --git a/theme/material/vaadin-login-overlay-styles.html b/theme/material/vaadin-login-overlay-styles.html
@@ -81,6 +81,11 @@
         margin-bottom: 0;
       }
 
+      /* RTL styles */
+      :host([dir="rtl"]) [part="brand"] {
+        padding: 2.8rem 3.5rem 1.5rem 2.5rem;
+      }
+
       /* Small screen */
       @media only screen
       and (max-width: 1023px) {
@@ -100,6 +105,11 @@
           margin-top: -80px;
           margin-bottom: 20px;
         }
+
+        /* RTL styles */
+        :host([dir="rtl"]) [part="brand"] {
+          padding: 0 2rem 5.5rem 2.5rem;
+        }
       }
 
       /* Very small screen */
@@ -221,6 +231,15 @@
         [part="form"] ::slotted(*) {
           height: 100%;
         }
+
+        /* RTL styles */
+        :host([dir="rtl"]) [part="brand"] {
+          padding: 1.5rem 1.5rem 1.5rem 2.5rem;
+        }
+
+        :host([dir="rtl"]) [part="form"] {
+          margin: 80px -20px 40px 30px;
+        }
       }
 
       /* Landscape really big screen */
@@ -242,13 +261,30 @@
 
         [part="form"] {
           height: 100%;
-          margin-right: 22px;
           -webkit-overflow-scrolling: touch;
         }
 
-        [part="form"] ::slotted(*) {
+        :host(:not([dir="rtl"])) [part="form"] {
+          margin-right: 22px;
+        }
+
+        :host(:not([dir="rtl"])) [part="form"] ::slotted(*) {
           right: 80px;
         }
+
+        /* RTL styles */
+        :host([dir="rtl"]) [part="brand"] {
+          padding-right: 4rem;
+          padding-left: 1rem;
+        }
+
+        :host([dir="rtl"]) [part="form"] {
+          margin-left: 22px;
+        }
+
+        :host([dir="rtl"]) [part="form"]::slotted(*) {
+          left: 80px;
+        }
       }
 
       /* Handle iPhone X notch */
@@ -261,11 +297,18 @@
           padding: 0 env(safe-area-inset-bottom);
         }
 
-        [part="brand"] {
+        :host(:not([dir="rtl"])) [part="brand"] {
           margin-left: calc(constant(safe-area-inset-bottom) * -1);
           margin-left: calc(env(safe-area-inset-bottom) * -1);
           padding-left: calc(1.5rem + constant(safe-area-inset-bottom));
         }
+
+        /* RTL styles */
+        :host([dir="rtl"]) [part="brand"] {
+          margin-right: calc(constant(safe-area-inset-bottom) * -1);
+          margin-right: calc(env(safe-area-inset-bottom) * -1);
+          padding-right: calc(1.5rem + constant(safe-area-inset-bottom));
+        }
       }
     </style>
   </template>
@@ -316,6 +359,11 @@
           min-height: 250px;
         }
       }
+
+      /* RTL styles */
+      :host([dir="rtl"][theme~="with-overlay"]) [part="form"] {
+        padding: 2rem 1.8rem 2rem 2.5rem;
+      }
     </style>
   </template>
 </dom-module>