feat: add RTL specific styles (#855)

vaadin · Mar 18, 2020 · a35cd90 · a35cd90
1 parent f31e4ca
commit a35cd90
Show file tree

Hide file tree

Showing 36 changed files with 114 additions and 21 deletions.
diff --git a/bower.json b/bower.json
@@ -35,13 +35,13 @@
     "iron-resizable-behavior": "^2.0.0",
     "polymer": "^2.0.0",
     "vaadin-control-state-mixin": "vaadin/vaadin-control-state-mixin#^2.1.1",
-    "vaadin-overlay": "vaadin/vaadin-overlay#^3.2.0",
-    "vaadin-text-field": "vaadin/vaadin-text-field#^2.4.3",
-    "vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.3.2",
+    "vaadin-overlay": "vaadin/vaadin-overlay#^3.4.0",
+    "vaadin-text-field": "vaadin/vaadin-text-field#^2.6.0-alpha3",
+    "vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.5.2",
     "vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.1.1",
     "vaadin-material-styles": "vaadin/vaadin-material-styles#^1.1.2",
-    "vaadin-item": "vaadin/vaadin-item#^2.1.0",
-    "vaadin-element-mixin": "vaadin/vaadin-element-mixin#^2.0.0"
+    "vaadin-item": "vaadin/vaadin-item#^2.2.0-alpha1",
+    "vaadin-element-mixin": "vaadin/vaadin-element-mixin#^2.3.0"
   },
   "devDependencies": {
     "iron-form": "^2.0.0",
@@ -50,7 +50,7 @@
     "paper-input": "^2.0.0",
     "vaadin-button": "vaadin/vaadin-button#^2.1.0",
     "web-component-tester": "^6.1.5",
-    "vaadin-demo-helpers": "vaadin/vaadin-demo-helpers#^3.0.0",
+    "vaadin-demo-helpers": "vaadin/vaadin-demo-helpers#^3.1.0-alpha1",
     "vaadin-dialog": "^2.2.1"
   },
   "resolutions": {

diff --git a/src/vaadin-combo-box-item.html b/src/vaadin-combo-box-item.html
@@ -5,6 +5,7 @@
 -->
 <link rel="import" href="../../polymer/polymer-element.html">
 <link rel="import" href="../../vaadin-themable-mixin/vaadin-themable-mixin.html">
+<link rel="import" href="../../vaadin-element-mixin/vaadin-dir-mixin.html">
 
 <dom-module id="vaadin-combo-box-item">
   <template>
@@ -47,7 +48,7 @@
      * @mixes Vaadin.ThemableMixin
      * @private
      */
-    class ComboBoxItemElement extends Vaadin.ThemableMixin(Polymer.Element) {
+    class ComboBoxItemElement extends Vaadin.ThemableMixin(Vaadin.DirMixin(Polymer.Element)) {
       static get is() {
         return 'vaadin-combo-box-item';
       }

diff --git a/test/visual/default-rtl.html b/test/visual/default-rtl.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+
+<head lang="en">
+  <meta charset="UTF-8">
+
+  <script src="../../../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-combo-box.html">`);
+    document.documentElement.setAttribute('dir', 'rtl');
+  </script>
+</head>
+
+<body>
+
+  <div id="default-rtl-tests" style="padding: 10px;">
+    Plain
+    <vaadin-combo-box></vaadin-combo-box>
+
+    <br>Label
+    <vaadin-combo-box label="Element"></vaadin-combo-box>
+
+    <br>Value
+    <vaadin-combo-box value="Carbon" items='["Carbon"]'></vaadin-combo-box>
+  </div>
+
+</body>
diff --git a/test/visual/dropdown.html b/test/visual/dropdown.html
@@ -5,9 +5,13 @@
 
   <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
   <script>
+    const dir = window.location.search.replace(/.*dir=(\w+).*/, '$1') || 'ltr';
+    document.documentElement.setAttribute('dir', dir);
+
     const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
     document.write(`<link rel="import" href="../../theme/${theme}/vaadin-combo-box.html">`);
   </script>
+
   <dom-module id="text-field-styles" theme-for="vaadin-text-field">
     <template>
       <style>
@@ -23,8 +27,8 @@
 <body>
 
   <div id="dropdown-tests" style="padding: 10px; min-height: 300px;">
-    Plain template
-    <vaadin-combo-box id="plain" item-label-path="name" item-value-path="symbol"></vaadin-combo-box>
+    Selected item
+    <vaadin-combo-box id="selected" value="He" item-label-path="name" item-value-path="symbol"></vaadin-combo-box>
 
     <br> Item template
     <vaadin-combo-box id="template" item-label-path="name" item-value-path="symbol">

diff --git a/test/visual/screens/vaadin-combo-box/default-rtl-tests-lumo/default/chrome.png b/test/visual/screens/vaadin-combo-box/default-rtl-tests-lumo/default/chrome.png
diff --git a/test/visual/screens/vaadin-combo-box/default-rtl-tests-lumo/default/firefox.png b/test/visual/screens/vaadin-combo-box/default-rtl-tests-lumo/default/firefox.png
diff --git a/test/visual/screens/vaadin-combo-box/default-rtl-tests-material/default/chrome.png b/test/visual/screens/vaadin-combo-box/default-rtl-tests-material/default/chrome.png
diff --git a/.../visual/screens/vaadin-combo-box/default-rtl-tests-material/default/firefox.png b/.../visual/screens/vaadin-combo-box/default-rtl-tests-material/default/firefox.png
diff --git a/test/visual/screens/vaadin-combo-box/dropdown-lumo-ltr-selected/default/chrome.png b/test/visual/screens/vaadin-combo-box/dropdown-lumo-ltr-selected/default/chrome.png
diff --git a/.../visual/screens/vaadin-combo-box/dropdown-lumo-ltr-selected/default/firefox.png b/.../visual/screens/vaadin-combo-box/dropdown-lumo-ltr-selected/default/firefox.png
diff --git a/.../visual/screens/vaadin-combo-box/dropdown-lumo-ltr-template/template/chrome.png b/.../visual/screens/vaadin-combo-box/dropdown-lumo-ltr-template/template/chrome.png
diff --git a/...visual/screens/vaadin-combo-box/dropdown-lumo-ltr-template/template/firefox.png b/...visual/screens/vaadin-combo-box/dropdown-lumo-ltr-template/template/firefox.png
diff --git a/test/visual/screens/vaadin-combo-box/dropdown-lumo-rtl-selected/default/chrome.png b/test/visual/screens/vaadin-combo-box/dropdown-lumo-rtl-selected/default/chrome.png
diff --git a/.../visual/screens/vaadin-combo-box/dropdown-lumo-rtl-selected/default/firefox.png b/.../visual/screens/vaadin-combo-box/dropdown-lumo-rtl-selected/default/firefox.png
diff --git a/.../visual/screens/vaadin-combo-box/dropdown-lumo-rtl-template/template/chrome.png b/.../visual/screens/vaadin-combo-box/dropdown-lumo-rtl-template/template/chrome.png
diff --git a/...visual/screens/vaadin-combo-box/dropdown-lumo-rtl-template/template/firefox.png b/...visual/screens/vaadin-combo-box/dropdown-lumo-rtl-template/template/firefox.png
diff --git a/test/visual/screens/vaadin-combo-box/dropdown-lumo/default/chrome.png b/test/visual/screens/vaadin-combo-box/dropdown-lumo/default/chrome.png
diff --git a/test/visual/screens/vaadin-combo-box/dropdown-lumo/default/firefox.png b/test/visual/screens/vaadin-combo-box/dropdown-lumo/default/firefox.png
diff --git a/test/visual/screens/vaadin-combo-box/dropdown-lumo/template/chrome.png b/test/visual/screens/vaadin-combo-box/dropdown-lumo/template/chrome.png
diff --git a/test/visual/screens/vaadin-combo-box/dropdown-lumo/template/firefox.png b/test/visual/screens/vaadin-combo-box/dropdown-lumo/template/firefox.png
diff --git a/...sual/screens/vaadin-combo-box/dropdown-material-ltr-selected/default/chrome.png b/...sual/screens/vaadin-combo-box/dropdown-material-ltr-selected/default/chrome.png
diff --git a/...ual/screens/vaadin-combo-box/dropdown-material-ltr-selected/default/firefox.png b/...ual/screens/vaadin-combo-box/dropdown-material-ltr-selected/default/firefox.png
diff --git a/...ual/screens/vaadin-combo-box/dropdown-material-ltr-template/template/chrome.png b/...ual/screens/vaadin-combo-box/dropdown-material-ltr-template/template/chrome.png
diff --git a/...al/screens/vaadin-combo-box/dropdown-material-ltr-template/template/firefox.png b/...al/screens/vaadin-combo-box/dropdown-material-ltr-template/template/firefox.png
diff --git a/...sual/screens/vaadin-combo-box/dropdown-material-rtl-selected/default/chrome.png b/...sual/screens/vaadin-combo-box/dropdown-material-rtl-selected/default/chrome.png
diff --git a/...ual/screens/vaadin-combo-box/dropdown-material-rtl-selected/default/firefox.png b/...ual/screens/vaadin-combo-box/dropdown-material-rtl-selected/default/firefox.png
diff --git a/...ual/screens/vaadin-combo-box/dropdown-material-rtl-template/template/chrome.png b/...ual/screens/vaadin-combo-box/dropdown-material-rtl-template/template/chrome.png
diff --git a/...al/screens/vaadin-combo-box/dropdown-material-rtl-template/template/firefox.png b/...al/screens/vaadin-combo-box/dropdown-material-rtl-template/template/firefox.png
diff --git a/test/visual/screens/vaadin-combo-box/dropdown-material/default/chrome.png b/test/visual/screens/vaadin-combo-box/dropdown-material/default/chrome.png
diff --git a/test/visual/screens/vaadin-combo-box/dropdown-material/default/firefox.png b/test/visual/screens/vaadin-combo-box/dropdown-material/default/firefox.png
diff --git a/test/visual/screens/vaadin-combo-box/dropdown-material/template/chrome.png b/test/visual/screens/vaadin-combo-box/dropdown-material/template/chrome.png
diff --git a/test/visual/screens/vaadin-combo-box/dropdown-material/template/firefox.png b/test/visual/screens/vaadin-combo-box/dropdown-material/template/firefox.png
diff --git a/test/visual/test.js b/test/visual/test.js
@@ -15,6 +15,13 @@ gemini.suite('vaadin-combo-box', function(rootSuite) {
     .after(goToAboutBlank);
 
   ['lumo', 'material'].forEach(theme => {
+    gemini.suite(`default-rtl-tests-${theme}`, function(suite) {
+      suite
+        .setUrl(`default-rtl.html?theme=${theme}`)
+        .setCaptureElements('#default-rtl-tests')
+        .capture('default');
+    });
+
     gemini.suite(`default-tests-${theme}`, function(suite) {
       suite
         .setUrl(`default.html?theme=${theme}`)
@@ -36,20 +43,28 @@ gemini.suite('vaadin-combo-box', function(rootSuite) {
         .capture('default');
     });
 
-    gemini.suite(`dropdown-${theme}`, function(suite) {
-      suite
-        .setUrl(`dropdown.html?theme=${theme}`)
-        .setCaptureElements('#dropdown-tests')
-        .capture('default', function(actions) {
-          actions.executeJS(function(window) {
-            window.document.querySelector('#plain').open();
+    ['ltr', 'rtl'].forEach(dir => {
+      gemini.suite(`dropdown-${theme}-${dir}-selected`, function(suite) {
+        suite
+          .setUrl(`dropdown.html?theme=${theme}&dir=${dir}`)
+          .setCaptureElements('#dropdown-tests')
+          .capture('default', function(actions) {
+            actions.executeJS(function(window) {
+              window.document.querySelector('#selected').open();
+            });
           });
-        })
-        .capture('template', function(actions) {
-          actions.executeJS(function(window) {
-            window.document.querySelector('#template').open();
+      });
+
+      gemini.suite(`dropdown-${theme}-${dir}-template`, function(suite) {
+        suite
+          .setUrl(`dropdown.html?theme=${theme}&dir=${dir}`)
+          .setCaptureElements('#dropdown-tests')
+          .capture('template', function(actions) {
+            actions.executeJS(function(window) {
+              window.document.querySelector('#template').open();
+            });
           });
-        });
+      });
     });
   });
 

diff --git a/theme/lumo/vaadin-combo-box-dropdown-styles.html b/theme/lumo/vaadin-combo-box-dropdown-styles.html
@@ -84,6 +84,16 @@
           transform: rotate(360deg);
         }
       }
+
+      /* RTL specific styles */
+
+      :host([loading][dir="rtl"]) [part~="loader"] {
+        left: auto;
+        margin-left: 0;
+        margin-right: auto;
+        margin-inline-start: 0;
+        margin-inline-end: auto;
+      }
     </style>
   </template>
 </dom-module>
diff --git a/theme/lumo/vaadin-combo-box-item-styles.html b/theme/lumo/vaadin-combo-box-item-styles.html
@@ -42,6 +42,12 @@
           box-shadow: none;
         }
       }
+
+      /* RTL specific styles */
+      :host([dir="rtl"]) {
+        padding-right: calc(var(--lumo-border-radius) / 4);
+        padding-left: calc(var(--lumo-space-l) + var(--lumo-border-radius) / 4);
+      }
     </style>
   </template>
 </dom-module>
diff --git a/theme/material/vaadin-combo-box-dropdown-styles.html b/theme/material/vaadin-combo-box-dropdown-styles.html
@@ -90,6 +90,36 @@
           background-size: 300% 100%;
         }
       }
+
+      /* RTL specific styles */
+
+      @keyframes material-combo-box-loader-progress-rtl {
+        0% {
+          background-position: 100% 0;
+          background-size: 300% 100%;
+        }
+
+        33% {
+          background-position: 200% 0;
+          background-size: 400% 100%;
+        }
+
+        67% {
+          background-position: 300% 0;
+          background-size: 250% 100%;
+        }
+
+        100% {
+          background-position: 400% 0;
+          background-size: 300% 100%;
+        }
+      }
+
+      :host([loading][dir="rtl"]) [part="loader"] {
+        animation:
+          3s linear infinite material-combo-box-loader-progress-rtl,
+          .3s .1s both material-combo-box-loader-fade-in;
+      }
     </style>
   </template>
 </dom-module>