diff --git a/test/visual/rtl.html b/test/visual/rtl.html new file mode 100644 index 0000000..0d493df --- /dev/null +++ b/test/visual/rtl.html @@ -0,0 +1,32 @@ + + + + + + + + + + + + +
+ + Item 0 + Item 1 + Item 2 (selected) + Item 3 (disabled) + Item 4 + +
+ 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 new file mode 100644 index 0000000..8b272cf Binary files /dev/null and b/test/visual/screens/vaadin-list-box/rtl-list-box-lumo/list-box/chrome.png differ 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 new file mode 100644 index 0000000..5e84030 Binary files /dev/null and b/test/visual/screens/vaadin-list-box/rtl-list-box-lumo/list-box/firefox.png differ 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 new file mode 100644 index 0000000..ceaa1ac Binary files /dev/null and b/test/visual/screens/vaadin-list-box/rtl-list-box-material/list-box/chrome.png differ 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 new file mode 100644 index 0000000..f52f899 Binary files /dev/null and b/test/visual/screens/vaadin-list-box/rtl-list-box-material/list-box/firefox.png differ diff --git a/test/visual/test.js b/test/visual/test.js index 4602307..6f48bae 100644 --- 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 index 9c1212d..76d60dc 100644 --- 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)); + } diff --git a/theme/material/vaadin-list-box-styles.html b/theme/material/vaadin-list-box-styles.html index 41b47f2..32350d3 100644 --- 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; + }