Merge 321818c into 5a664dc

vaadin · Jan 22, 2020 · 344b5fb · 344b5fb
2 parents 5a664dc + 321818c
commit 344b5fb
Show file tree

Hide file tree

Showing 8 changed files with 52 additions and 0 deletions.
diff --git a/test/visual/rtl.html b/test/visual/rtl.html
@@ -0,0 +1,32 @@
+<!DOCTYPE html>
+
+<head lang="en">
+  <meta charset="UTF-8">
+  <title></title>
+  <script src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
+  <script>
+    const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
+    document.documentElement.setAttribute('dir', 'rtl');
+    document.write(`<link rel="import" href="../../theme/${theme}/vaadin-list-box.html">`);
+    document.write(`<link rel="import" href="../../../vaadin-item/theme/${theme}/vaadin-item.html">`);
+  </script>
+
+  <style>
+    #list-box-tests {
+      font-family: sans-serif;
+      width: 400px;
+    }
+  </style>
+</head>
+
+<body>
+  <div id="rtl-list-box-tests">
+    <vaadin-list-box selected="2">
+      <vaadin-item>Item 0</vaadin-item>
+      <vaadin-item>Item 1</vaadin-item>
+      <vaadin-item>Item 2 (selected)</vaadin-item>
+      <vaadin-item disabled>Item 3 (disabled)</vaadin-item>
+      <vaadin-item>Item 4</vaadin-item>
+    </vaadin-list-box>
+  </div>
+</body>
diff --git a/test/visual/screens/vaadin-list-box/rtl-list-box-lumo/list-box/chrome.png b/test/visual/screens/vaadin-list-box/rtl-list-box-lumo/list-box/chrome.png
diff --git a/test/visual/screens/vaadin-list-box/rtl-list-box-lumo/list-box/firefox.png b/test/visual/screens/vaadin-list-box/rtl-list-box-lumo/list-box/firefox.png
diff --git a/test/visual/screens/vaadin-list-box/rtl-list-box-material/list-box/chrome.png b/test/visual/screens/vaadin-list-box/rtl-list-box-material/list-box/chrome.png
diff --git a/test/visual/screens/vaadin-list-box/rtl-list-box-material/list-box/firefox.png b/test/visual/screens/vaadin-list-box/rtl-list-box-material/list-box/firefox.png
diff --git a/test/visual/test.js b/test/visual/test.js
@@ -20,6 +20,13 @@ gemini.suite('vaadin-list-box', function(rootSuite) {
         .setCaptureElements('#list-box-tests')
         .capture('list-box');
     });
+
+    gemini.suite(`rtl-list-box-${theme}`, function(suite) {
+      suite
+        .setUrl(`rtl.html?theme=${theme}`)
+        .setCaptureElements('#rtl-list-box-tests')
+        .capture('list-box');
+    });
   });
 
 });
diff --git a/theme/lumo/vaadin-list-box-styles.html b/theme/lumo/vaadin-list-box-styles.html
@@ -71,6 +71,13 @@
         margin: var(--lumo-space-s) var(--lumo-border-radius);
         background-color: var(--lumo-contrast-10pct);
       }
+
+      /* RTL specific styles */
+
+      :host([dir="rtl"]) [part="items"] ::slotted(vaadin-item) {
+        padding-left: calc(var(--lumo-space-l) + var(--lumo-border-radius) / 4);
+        padding-right: var(--_lumo-list-box-item-padding-left, calc(var(--lumo-border-radius) / 4));
+      }
     </style>
   </template>
 </dom-module>
diff --git a/theme/material/vaadin-list-box-styles.html b/theme/material/vaadin-list-box-styles.html
@@ -56,6 +56,12 @@
         margin: 8px 0;
         background-color: var(--material-divider-color);
       }
+
+      /* RTL specific styles */
+
+      :host([dir="rtl"]) [part="items"] ::slotted(vaadin-item) {
+        padding: 8px 10px 8px 32px;
+      }
     </style>
   </template>
 </dom-module>