From 72d4971fd90f67ab8bc0fb6c0f843872a0e999f0 Mon Sep 17 00:00:00 2001
From: Yuriy Yevstihnyeyev <yuriy@vaadin.com>
Date: Thu, 14 May 2020 14:23:29 +0300
Subject: [PATCH] fix: make input and overlay work from left-to-right in RTL

---
 src/vaadin-time-picker-text-field.html        | 26 +++++++++++++++++++
 src/vaadin-time-picker.html                   |  1 +
 test/visual/test.js                           | 14 +++++++++-
 theme/lumo/vaadin-time-picker-styles.html     |  1 -
 .../vaadin-time-picker-text-field-styles.html | 18 +++++++++++++
 theme/lumo/vaadin-time-picker.html            |  1 +
 6 files changed, 59 insertions(+), 2 deletions(-)
 create mode 100644 theme/lumo/vaadin-time-picker-text-field-styles.html

diff --git a/src/vaadin-time-picker-text-field.html b/src/vaadin-time-picker-text-field.html
index f16018d..84dd58d 100644
--- 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
index 8577c74..d0dc571 100644
--- 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
index 1bb7318..ce46e16 100644
--- 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
index e6a5242..9c90f0f 100644
--- 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
new file mode 100644
index 0000000..49116a8
--- /dev/null
+++ 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
index 3e001d8..8e86e0a 100644
--- 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">