fix: make input and overlay work from left-to-right in RTL

vaadin · May 14, 2020 · 72d4971 · 72d4971
1 parent 7768e5b
commit 72d4971
Show file tree

Hide file tree

Showing 6 changed files with 59 additions and 2 deletions.
diff --git a/src/vaadin-time-picker-text-field.html b/src/vaadin-time-picker-text-field.html
@@ -6,6 +6,32 @@
 
 <link rel="import" href="../../vaadin-text-field/src/vaadin-text-field.html">
 
+<dom-module id="vaadin-time-picker-text-field-styles" theme-for="vaadin-time-picker-text-field">
+  <template>
+    <style>
+      :host([dir="rtl"]) [part="input-field"] {
+        direction: ltr;
+      }
+
+      :host([dir="rtl"]) [part="value"]::placeholder {
+        direction: rtl;
+        text-align: left;
+      }
+
+      :host([dir="rtl"]) [part="input-field"] ::slotted(input)::placeholder {
+        direction: rtl;
+        text-align: left;
+      }
+
+      :host([dir="rtl"]) [part="value"]:-ms-input-placeholder,
+      :host([dir="rtl"]) [part="input-field"] ::slotted(input):-ms-input-placeholder {
+        direction: rtl;
+        text-align: left;
+      }
+    </style>
+  </template>
+</dom-module>
+
 <script>
   (function() {
     /**

diff --git a/src/vaadin-time-picker.html b/src/vaadin-time-picker.html
@@ -39,6 +39,7 @@
         disabled="[[disabled]]"
         readonly="[[readonly]]"
         auto-open-disabled="[[autoOpenDisabled]]"
+        dir="ltr"
         theme$="[[theme]]">
       <template>
         [[item.label]]

diff --git a/test/visual/test.js b/test/visual/test.js
@@ -18,7 +18,12 @@ gemini.suite('vaadin-time-picker', function(rootSuite) {
     suite
       .setUrl('default.html')
       .setCaptureElements('#default-tests')
-      .capture('default');
+      .capture('default')
+      .capture('rtl', function(actions) {
+        actions.executeJS(function(window) {
+          window.document.dir = 'rtl';
+        });
+      });
   });
 
   gemini.suite('dropdown', function(suite) {
@@ -42,6 +47,13 @@ gemini.suite('vaadin-time-picker', function(rootSuite) {
           window.closeTimePickers();
           window.document.querySelector('#step').__dropdownElement.opened = true;
         });
+      })
+      .capture('rtl', function(actions) {
+        actions.executeJS(function(window) {
+          window.closeTimePickers();
+          window.document.dir = 'rtl';
+          window.document.querySelector('#plain').__dropdownElement.opened = true;
+        });
       });
   });
 

diff --git a/theme/lumo/vaadin-time-picker-styles.html b/theme/lumo/vaadin-time-picker-styles.html
@@ -1,5 +1,4 @@
 <link rel="import" href="../../../vaadin-combo-box/theme/lumo/vaadin-combo-box-light.html">
-<link rel="import" href="../../../vaadin-text-field/theme/lumo/vaadin-text-field.html">
 <link rel="import" href="../../../vaadin-lumo-styles/mixins/field-button.html">
 <link rel="import" href="../../../vaadin-lumo-styles/font-icons.html">
 

diff --git a/theme/lumo/vaadin-time-picker-text-field-styles.html b/theme/lumo/vaadin-time-picker-text-field-styles.html
@@ -0,0 +1,18 @@
+<link rel="import" href="../../../vaadin-text-field/theme/lumo/vaadin-text-field.html">
+
+<dom-module id="lumo-time-picker-text-field" theme-for="vaadin-time-picker-text-field">
+  <template>
+    <style>
+      :not(*):placeholder-shown, /* to prevent broken styles on IE */
+      :host([dir="rtl"]) [part="value"]:placeholder-shown,
+      :host([dir="rtl"]) [part="input-field"] ::slotted(input:placeholder-shown) {
+        --_lumo-text-field-overflow-mask-image: none;
+      }
+
+      :host([dir="rtl"]) [part="value"],
+      :host([dir="rtl"]) [part="input-field"] ::slotted(input) {
+        --_lumo-text-field-overflow-mask-image: linear-gradient(to left, transparent, #000 1.25em);
+      }
+    </style>
+  </template>
+</dom-module>
diff --git a/theme/lumo/vaadin-time-picker.html b/theme/lumo/vaadin-time-picker.html
@@ -1,2 +1,3 @@
 <link rel="import" href="vaadin-time-picker-styles.html">
+<link rel="import" href="vaadin-time-picker-text-field-styles.html">
 <link rel="import" href="../../src/vaadin-time-picker.html">