Add RTL specific styles (#139)

* Add rtl specific styles and visual tests * Update default button styles
vaadin · Jan 13, 2020 · 1098bbf · 1098bbf
1 parent 9df10ab
commit 1098bbf
Show file tree

Hide file tree

Showing 9 changed files with 107 additions and 0 deletions.
diff --git a/src/vaadin-button.html b/src/vaadin-button.html
@@ -60,6 +60,7 @@
         position: absolute;
         top: 0;
         left: 0;
+        right: 0;
         width: 100%;
         height: 100%;
         opacity: 0;

diff --git a/test/visual/default-rtl.html b/test/visual/default-rtl.html
@@ -0,0 +1,50 @@
+<!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-button.html">`);
+  </script>
+
+  <link rel="import" href="../../../vaadin-lumo-styles/icons.html">
+  <link rel="import" href="../../../iron-icon/iron-icon.html">
+</head>
+
+<body>
+
+  <form style="display: inline-block;">
+    <fieldset id="default-tests">
+
+      <vaadin-button disabled dir="rtl">
+        Disabled
+      </vaadin-button>
+
+      <vaadin-button dir="rtl">
+        <img src="vaadin-logo.svg">
+      </vaadin-button>
+
+      <vaadin-button theme="tertiary" dir="rtl">
+        Tertiary
+      </vaadin-button>
+
+      <vaadin-button theme="large" dir="rtl">
+        <span>Icon suffix</span>
+        <iron-icon slot="suffix" icon="lumo:arrow-right"></iron-icon>
+      </vaadin-button>
+
+      <vaadin-button aria-label="Icon-only button" theme="icon" dir="rtl">
+        <iron-icon slot="prefix" icon="lumo:plus"></iron-icon>
+      </vaadin-button>
+
+      <vaadin-button dir="rtl">
+        <iron-icon slot="prefix" icon="lumo:edit"></iron-icon>
+        <span>Icon prefix</span>
+      </vaadin-button>
+
+    </fieldset>
+  </form>
+
+</body>
diff --git a/test/visual/screens/vaadin-button/default-rtl-tests-lumo/default/chrome.png b/test/visual/screens/vaadin-button/default-rtl-tests-lumo/default/chrome.png
diff --git a/test/visual/screens/vaadin-button/default-rtl-tests-lumo/default/firefox.png b/test/visual/screens/vaadin-button/default-rtl-tests-lumo/default/firefox.png
diff --git a/test/visual/screens/vaadin-button/default-rtl-tests-material/default/chrome.png b/test/visual/screens/vaadin-button/default-rtl-tests-material/default/chrome.png
diff --git a/test/visual/screens/vaadin-button/default-rtl-tests-material/default/firefox.png b/test/visual/screens/vaadin-button/default-rtl-tests-material/default/firefox.png
diff --git a/test/visual/test.js b/test/visual/test.js
@@ -21,6 +21,13 @@ gemini.suite('vaadin-button', function(rootSuite) {
         .capture('default');
     });
 
+    gemini.suite(`default-rtl-tests-${theme}`, function(suite) {
+      suite
+        .setUrl(`default-rtl.html?theme=${theme}`)
+        .setCaptureElements('body')
+        .capture('default');
+    });
+
     gemini.suite(`colors-${theme}`, function(suite) {
       suite
         .setUrl(`colors.html?theme=${theme}`)

diff --git a/theme/lumo/vaadin-button-styles.html b/theme/lumo/vaadin-button-styles.html
@@ -267,6 +267,24 @@
         margin-left: 0;
         margin-right: 0;
       }
+
+      /* RTL specific styles */
+
+      :host([dir="rtl"]) [part="prefix"] {
+        margin-left: 0.25em;
+        margin-right: -0.25em;
+      }
+
+      :host([dir="rtl"]) [part="suffix"] {
+        margin-left: -0.25em;
+        margin-right: 0.25em;
+      }
+
+      :host([dir="rtl"][theme~="icon"]) [part="prefix"],
+      :host([dir="rtl"][theme~="icon"]) [part="suffix"] {
+        margin-left: 0;
+        margin-right: 0;
+      }
     </style>
   </template>
 </dom-module>
diff --git a/theme/material/vaadin-button-styles.html b/theme/material/vaadin-button-styles.html
@@ -138,6 +138,37 @@
         margin-left: 8px;
         margin-right: -4px;
       }
+
+      /* RTL specific styles */
+
+      :host([dir="rtl"])::before {
+        left: auto;
+        right: 0;
+      }
+
+      :host([dir="rtl"])::after {
+        left: auto;
+        right: 50%;
+        transform: translate(50%, -50%);
+      }
+
+      :host([active][dir="rtl"])::after {
+        transform: translate(50%, -50%) scale(0.0000001);
+      }
+
+      :host(:hover:not([active])[dir="rtl"])::after {
+        transform: translate(50%, -50%) scale(1);
+      }
+
+      :host([dir="rtl"]) [part="prefix"] ::slotted(iron-icon) {
+        margin-right: -4px;
+        margin-left: 8px;
+      }
+
+      :host([dir="rtl"]) [part="suffix"] ::slotted(iron-icon) {
+        margin-left: -4px;
+        margin-right: 8px;
+      }
     </style>
   </template>
 </dom-module>