Add rtl specific styles and visual tests

vaadin · Jan 9, 2020 · 734333b · 734333b
1 parent e0c1bab
commit 734333b
Show file tree

Hide file tree

Showing 22 changed files with 110 additions and 1 deletion.
diff --git a/src/vaadin-checkbox-group.html b/src/vaadin-checkbox-group.html
@@ -7,6 +7,7 @@
 <link rel="import" href="../../polymer/polymer-element.html">
 <link rel="import" href="../../polymer/lib/utils/flattened-nodes-observer.html">
 <link rel="import" href="../../vaadin-themable-mixin/vaadin-themable-mixin.html">
+<link rel="import" href="../../vaadin-element-mixin/vaadin-dir-mixin.html">
 <link rel="import" href="vaadin-checkbox.html">
 
 <dom-module id="vaadin-checkbox-group">
@@ -99,7 +100,7 @@
        * @element vaadin-checkbox-group
        * @demo demo/index.html
        */
-      class CheckboxGroupElement extends Vaadin.ThemableMixin(Polymer.Element) {
+      class CheckboxGroupElement extends Vaadin.ThemableMixin(Vaadin.DirMixin(Polymer.Element)) {
         static get is() {
           return 'vaadin-checkbox-group';
         }

diff --git a/src/vaadin-checkbox.html b/src/vaadin-checkbox.html
@@ -37,6 +37,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,69 @@
+<!DOCTYPE html>
+
+<head lang="en">
+  <meta charset="UTF-8">
+
+  <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
+  <script src="../../../iron-test-helpers/mock-interactions.js"></script>
+  <script>
+    const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
+    document.write(`<link rel="import" href="../../theme/${theme}/vaadin-checkbox.html">`);
+    document.write(`<link rel="import" href="../../theme/${theme}/vaadin-checkbox-group.html">`);
+    document.documentElement.setAttribute('dir', 'rtl');
+  </script>
+</head>
+
+<body>
+
+  <div id="default-tests" style="display: inline-block; padding: 10px;">
+    Are you drunk?
+
+    <vaadin-checkbox>
+      Yes
+    </vaadin-checkbox>
+
+    <vaadin-checkbox disabled>
+      No
+    </vaadin-checkbox>
+
+    <vaadin-checkbox indeterminate>
+      Maybe
+    </vaadin-checkbox>
+
+    <vaadin-checkbox></vaadin-checkbox>
+    <vaadin-checkbox></vaadin-checkbox>
+    Empty labels
+  </div>
+
+  <div id="validation-tests">
+    <vaadin-checkbox-group required error-message="Please choose a number" label="Choose a number" id="validation-checkbox-group">
+      <vaadin-checkbox value="1">1</vaadin-checkbox>
+      <vaadin-checkbox value="2">2</vaadin-checkbox>
+    </vaadin-checkbox-group>
+  </div>
+
+  <div id="wrapping-group-tests" style="width: 300px;">
+    <vaadin-checkbox-group label="Choose a number">
+      <vaadin-checkbox value="1">Checkbox 1</vaadin-checkbox>
+      <vaadin-checkbox value="2">Checkbox 2</vaadin-checkbox>
+      <vaadin-checkbox value="3">Checkbox 3</vaadin-checkbox>
+      <vaadin-checkbox value="4">Checkbox 4</vaadin-checkbox>
+      <vaadin-checkbox value="5">Checkbox 5</vaadin-checkbox>
+      <vaadin-checkbox value="6">Checkbox 6</vaadin-checkbox>
+      <vaadin-checkbox value="7">Checkbox 7</vaadin-checkbox>
+      <vaadin-checkbox value="8">Checkbox 8</vaadin-checkbox>
+      <vaadin-checkbox value="9">Checkbox 9</vaadin-checkbox>
+      <vaadin-checkbox value="10">Checkbox 10</vaadin-checkbox>
+    </vaadin-checkbox-group>
+  </div>
+
+  <script>
+    window.addEventListener('WebComponentsReady', () => {
+      const checkboxGroup = document.getElementById('validation-checkbox-group');
+      checkboxGroup.validate();
+
+      MockInteractions.keyDownOn(document.body, 9);
+    });
+  </script>
+
+</body>
diff --git a/test/visual/screens/vaadin-checkbox/default-rtl-tests-lumo/checked/chrome.png b/test/visual/screens/vaadin-checkbox/default-rtl-tests-lumo/checked/chrome.png
diff --git a/test/visual/screens/vaadin-checkbox/default-rtl-tests-lumo/checked/firefox.png b/test/visual/screens/vaadin-checkbox/default-rtl-tests-lumo/checked/firefox.png
diff --git a/test/visual/screens/vaadin-checkbox/default-rtl-tests-lumo/default/chrome.png b/test/visual/screens/vaadin-checkbox/default-rtl-tests-lumo/default/chrome.png
diff --git a/test/visual/screens/vaadin-checkbox/default-rtl-tests-lumo/default/firefox.png b/test/visual/screens/vaadin-checkbox/default-rtl-tests-lumo/default/firefox.png
diff --git a/test/visual/screens/vaadin-checkbox/default-rtl-tests-material/checked/chrome.png b/test/visual/screens/vaadin-checkbox/default-rtl-tests-material/checked/chrome.png
diff --git a/test/visual/screens/vaadin-checkbox/default-rtl-tests-material/checked/firefox.png b/test/visual/screens/vaadin-checkbox/default-rtl-tests-material/checked/firefox.png
diff --git a/test/visual/screens/vaadin-checkbox/default-rtl-tests-material/default/chrome.png b/test/visual/screens/vaadin-checkbox/default-rtl-tests-material/default/chrome.png
diff --git a/test/visual/screens/vaadin-checkbox/default-rtl-tests-material/default/firefox.png b/test/visual/screens/vaadin-checkbox/default-rtl-tests-material/default/firefox.png
diff --git a/test/visual/screens/vaadin-checkbox/validation-rtl-tests-lumo/error/chrome.png b/test/visual/screens/vaadin-checkbox/validation-rtl-tests-lumo/error/chrome.png
diff --git a/test/visual/screens/vaadin-checkbox/validation-rtl-tests-lumo/error/firefox.png b/test/visual/screens/vaadin-checkbox/validation-rtl-tests-lumo/error/firefox.png
diff --git a/test/visual/screens/vaadin-checkbox/validation-rtl-tests-material/error/chrome.png b/test/visual/screens/vaadin-checkbox/validation-rtl-tests-material/error/chrome.png
diff --git a/.../visual/screens/vaadin-checkbox/validation-rtl-tests-material/error/firefox.png b/.../visual/screens/vaadin-checkbox/validation-rtl-tests-material/error/firefox.png
diff --git a/test/visual/screens/vaadin-checkbox/wrapping-rtl-tests-lumo/default/chrome.png b/test/visual/screens/vaadin-checkbox/wrapping-rtl-tests-lumo/default/chrome.png
diff --git a/test/visual/screens/vaadin-checkbox/wrapping-rtl-tests-lumo/default/firefox.png b/test/visual/screens/vaadin-checkbox/wrapping-rtl-tests-lumo/default/firefox.png
diff --git a/test/visual/screens/vaadin-checkbox/wrapping-rtl-tests-material/default/chrome.png b/test/visual/screens/vaadin-checkbox/wrapping-rtl-tests-material/default/chrome.png
diff --git a/.../visual/screens/vaadin-checkbox/wrapping-rtl-tests-material/default/firefox.png b/.../visual/screens/vaadin-checkbox/wrapping-rtl-tests-material/default/firefox.png
diff --git a/test/visual/test.js b/test/visual/test.js
@@ -66,6 +66,32 @@ gemini.suite('vaadin-checkbox', function(rootSuite) {
         .setCaptureElements('#wrapping-group-tests')
         .capture('default');
     });
+
+    gemini.suite(`default-rtl-tests-${theme}`, function(suite) {
+      suite
+        .setUrl(`default-rtl.html?theme=${theme}`)
+        .setCaptureElements('#default-tests')
+        .capture('default')
+        .capture('checked', function(actions) {
+          actions.executeJS(function(window) {
+            window.document.querySelector('vaadin-checkbox').checked = true;
+          });
+        });
+    });
+
+    gemini.suite(`validation-rtl-tests-${theme}`, function(suite) {
+      suite
+        .setUrl(`default-rtl.html?theme=${theme}`)
+        .setCaptureElements('#validation-tests')
+        .capture('error');
+    });
+
+    gemini.suite(`wrapping-rtl-tests-${theme}`, function(suite) {
+      suite
+        .setUrl(`default-rtl.html?theme=${theme}`)
+        .setCaptureElements('#wrapping-group-tests')
+        .capture('default');
+    });
   });
 
 });
diff --git a/theme/lumo/vaadin-checkbox-styles.html b/theme/lumo/vaadin-checkbox-styles.html
@@ -119,6 +119,12 @@
       :host([indeterminate][disabled]) [part="checkbox"]::after {
         background-color: var(--lumo-contrast-30pct);
       }
+
+      /* RTL specific styles */
+
+      :host([dir="rtl"]) [part="label"]:not([empty]) {
+        margin: 0.1875em 0.375em 0.1875em 0.875em;
+      }
     </style>
   </template>
 </dom-module>

diff --git a/theme/material/vaadin-checkbox-styles.html b/theme/material/vaadin-checkbox-styles.html
@@ -135,6 +135,12 @@
       [part="native-checkbox"]:checked ~ [part="checkbox"] {
         opacity: 1;
       }
+
+      /* RTL specific styles */
+
+      :host([dir="rtl"]) [part="label"]:not([empty]) {
+        margin: 3px 6px 3px 12px;
+      }
     </style>
   </template>
 </dom-module>