Merge cb175f0 into 65b7a3e

bower.json

@@ -34,7 +34,7 @@
     "vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.2.1",
     "vaadin-lumo-styles": "vaadin/vaadin-lumo-styles#^1.1.0",
     "vaadin-material-styles": "vaadin/vaadin-material-styles#^1.1.0",
-    "vaadin-element-mixin": "vaadin/vaadin-element-mixin#^2.0.0"
+    "vaadin-element-mixin": "vaadin/vaadin-element-mixin#^2.3.0"
   },
   "devDependencies": {
     "iron-component-page": "^3.0.0",

src/vaadin-horizontal-layout.html

@@ -29,18 +29,29 @@
         padding: 1em;
       }
 
-      :host([theme~="spacing"]) ::slotted(*) {
+      :host([theme~="spacing"]:not([dir="rtl"])) ::slotted(*) {
         margin-left: 1em;
       }
 
+      :host([theme~="spacing"][dir="rtl"]) ::slotted(*) {
+        margin-right: 1em;
+      }
+
       /*
         Compensate for the first item margin, so that there is no gap around
         the layout itself.
        */
       :host([theme~="spacing"])::before {
         content: "";
+      }
+
+      :host([theme~="spacing"]:not([dir="rtl"]))::before {
         margin-left: -1em;
       }
+
+      :host([theme~="spacing"][dir="rtl"])::before {
+        margin-right: -1em;
+      }
     </style>
 
     <slot></slot>

test/visual/default.html

@@ -6,8 +6,11 @@
   <script src="../../../webcomponentsjs/webcomponents-lite.js"></script>
   <script>
     const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
+    const dir = window.location.search.replace(/.*dir=(\w+).*/, '$1') || 'ltr';
     document.write(`<link rel="import" href="../../theme/${theme}/vaadin-horizontal-layout.html">`);
     document.write(`<link rel="import" href="../../theme/${theme}/vaadin-vertical-layout.html">`);
+
+    document.documentElement.setAttribute('dir', dir);
   </script>
   <script>
     addEventListener('WebComponentsReady', function() {

test/visual/test.js

@@ -11,19 +11,22 @@ gemini.suite('vaadin-ordered-layout', function(rootSuite) {
         window.location.href = 'about:blank'; // just go away, please!
       });
     });
-  ['lumo', 'material'].forEach(theme => {
-    gemini.suite(`horizontal-layout-${theme}`, function(suite) {
-      suite
-        .setUrl(`default.html?theme=${theme}`)
-        .setCaptureElements('#horizontal-layout')
-        .capture('horizontal-layout');
-    });
 
-    gemini.suite(`vertical-layout-${theme}`, function(suite) {
-      suite
-        .setUrl(`default.html?theme=${theme}`)
-        .setCaptureElements('#vertical-layout')
-        .capture('vertical-layout');
+  ['ltr', 'rtl'].forEach(dir => {
+    ['lumo', 'material'].forEach(theme => {
+      gemini.suite(`horizontal-layout-${theme}-${dir}`, function(suite) {
+        suite
+          .setUrl(`default.html?theme=${theme}&dir=${dir}`)
+          .setCaptureElements('#horizontal-layout')
+          .capture('horizontal-layout');
+      });
+
+      gemini.suite(`vertical-layout-${theme}-${dir}`, function(suite) {
+        suite
+          .setUrl(`default.html?theme=${theme}&dir=${dir}`)
+          .setCaptureElements('#vertical-layout')
+          .capture('vertical-layout');
+      });
     });
   });
 });

theme/lumo/vaadin-horizontal-layout-styles.html

@@ -4,54 +4,102 @@
 <dom-module id="lumo-horizontal-layout" theme-for="vaadin-horizontal-layout">
   <template>
     <style include="lumo-ordered-layout">
-      :host([theme~="spacing-xs"]) ::slotted(*) {
+      :host([theme~="spacing-xs"]:not([dir="rtl"])) ::slotted(*) {
         margin-left: var(--lumo-space-xs);
       }
 
-      :host([theme~="spacing-s"]) ::slotted(*) {
+      :host([theme~="spacing-s"]:not([dir="rtl"])) ::slotted(*) {
         margin-left: var(--lumo-space-s);
       }
 
-      :host([theme~="spacing"]) ::slotted(*) {
+      :host([theme~="spacing"]:not([dir="rtl"])) ::slotted(*) {
         margin-left: var(--lumo-space-m);
       }
 
-      :host([theme~="spacing-l"]) ::slotted(*) {
+      :host([theme~="spacing-l"]:not([dir="rtl"])) ::slotted(*) {
         margin-left: var(--lumo-space-l);
       }
 
-      :host([theme~="spacing-xl"]) ::slotted(*) {
+      :host([theme~="spacing-xl"]:not([dir="rtl"])) ::slotted(*) {
         margin-left: var(--lumo-space-xl);
       }
 
       /*
         Compensate for the first item margin, so that there is no gap around
         the layout itself.
        */
-      :host([theme~="spacing-xs"])::before {
+      :host([theme~="spacing-xs"])::before,
+      :host([theme~="spacing-s"])::before,
+      :host([theme~="spacing"])::before,
+      :host([theme~="spacing-l"])::before,
+      :host([theme~="spacing-xl"])::before {
         content: "";
+      }
+
+      :host([theme~="spacing-xs"]:not([dir="rtl"]))::before {
         margin-left: calc(var(--lumo-space-xs) * -1);
       }
 
-      :host([theme~="spacing-s"])::before {
-        content: "";
+      :host([theme~="spacing-s"]:not([dir="rtl"]))::before {
         margin-left: calc(var(--lumo-space-s) * -1);
       }
 
-      :host([theme~="spacing"])::before {
-        content: "";
+      :host([theme~="spacing"]:not([dir="rtl"]))::before {
         margin-left: calc(var(--lumo-space-m) * -1);
       }
 
-      :host([theme~="spacing-l"])::before {
-        content: "";
+      :host([theme~="spacing-l"]:not([dir="rtl"]))::before {
         margin-left: calc(var(--lumo-space-l) * -1);
       }
 
-      :host([theme~="spacing-xl"])::before {
-        content: "";
+      :host([theme~="spacing-xl"]:not([dir="rtl"]))::before {
         margin-left: calc(var(--lumo-space-xl) * -1);
       }
+
+      /* RTL styles */
+      :host([dir="rtl"][theme~="spacing-xs"]) ::slotted(*) {
+        margin-right: var(--lumo-space-xs);
+      }
+
+      :host([dir="rtl"][theme~="spacing-s"]) ::slotted(*) {
+        margin-right: var(--lumo-space-s);
+      }
+
+      :host([dir="rtl"][theme~="spacing"]) ::slotted(*) {
+        margin-right: var(--lumo-space-m);
+      }
+
+      :host([dir="rtl"][theme~="spacing-l"]) ::slotted(*) {
+        margin-right: var(--lumo-space-l);
+      }
+
+      :host([dir="rtl"][theme~="spacing-xl"]) ::slotted(*) {
+        margin-right: var(--lumo-space-xl);
+      }
+
+      /*
+        Compensate for the first item margin, so that there is no gap around
+        the layout itself.
+       */
+      :host([dir="rtl"][theme~="spacing-xs"])::before {
+        margin-right: calc(var(--lumo-space-xs) * -1);
+      }
+
+      :host([dir="rtl"][theme~="spacing-s"])::before {
+        margin-right: calc(var(--lumo-space-s) * -1);
+      }
+
+      :host([dir="rtl"][theme~="spacing"])::before {
+        margin-right: calc(var(--lumo-space-m) * -1);
+      }
+
+      :host([dir="rtl"][theme~="spacing-l"])::before {
+        margin-right: calc(var(--lumo-space-l) * -1);
+      }
+
+      :host([dir="rtl"][theme~="spacing-xl"])::before {
+        margin-right: calc(var(--lumo-space-xl) * -1);
+      }
     </style>
   </template>
 </dom-module>

theme/material/vaadin-horizontal-layout-styles.html

@@ -3,54 +3,102 @@
 <dom-module id="material-horizontal-layout" theme-for="vaadin-horizontal-layout">
   <template>
     <style include="material-ordered-layout">
-      :host([theme~="spacing-xs"]) ::slotted(*) {
+      :host([theme~="spacing-xs"]:not([dir="rtl"])) ::slotted(*) {
         margin-left: 4px;
       }
 
-      :host([theme~="spacing-s"]) ::slotted(*) {
+      :host([theme~="spacing-s"]:not([dir="rtl"])) ::slotted(*) {
         margin-left: 8px;
       }
 
-      :host([theme~="spacing"]) ::slotted(*) {
+      :host([theme~="spacing"]:not([dir="rtl"])) ::slotted(*) {
         margin-left: 16px;
       }
 
-      :host([theme~="spacing-l"]) ::slotted(*) {
+      :host([theme~="spacing-l"]:not([dir="rtl"])) ::slotted(*) {
         margin-left: 24px;
       }
 
-      :host([theme~="spacing-xl"]) ::slotted(*) {
+      :host([theme~="spacing-xl"]:not([dir="rtl"])) ::slotted(*) {
         margin-left: 40px;
       }
 
       /*
         Compensate for the first item margin, so that there is no gap around
         the layout itself.
        */
-      :host([theme~="spacing-xs"])::before {
+      :host([theme~="spacing-xs"])::before,
+      :host([theme~="spacing-s"])::before,
+      :host([theme~="spacing"])::before,
+      :host([theme~="spacing-l"])::before,
+      :host([theme~="spacing-xl"])::before {
         content: "";
+      }
+
+      :host([theme~="spacing-xs"]:not([dir="rtl"]))::before {
         margin-left: -4px;
       }
 
-      :host([theme~="spacing-s"])::before {
-        content: "";
+      :host([theme~="spacing-s"]:not([dir="rtl"]))::before {
         margin-left: -8px;
       }
 
-      :host([theme~="spacing"])::before {
-        content: "";
+      :host([theme~="spacing"]:not([dir="rtl"]))::before {
         margin-left: -16px;
       }
 
-      :host([theme~="spacing-l"])::before {
-        content: "";
+      :host([theme~="spacing-l"]:not([dir="rtl"]))::before {
         margin-left: -24px;
       }
 
-      :host([theme~="spacing-xl"])::before {
-        content: "";
+      :host([theme~="spacing-xl"]:not([dir="rtl"]))::before {
         margin-left: -40px;
       }
+
+      /* RTL styles */
+      :host([dir="rtl"][theme~="spacing-xs"]) ::slotted(*) {
+        margin-right: 4px;
+      }
+
+      :host([dir="rtl"][theme~="spacing-s"]) ::slotted(*) {
+        margin-right: 8px;
+      }
+
+      :host([dir="rtl"][theme~="spacing"]) ::slotted(*) {
+        margin-right: 16px;
+      }
+
+      :host([dir="rtl"][theme~="spacing-l"]) ::slotted(*) {
+        margin-right: 24px;
+      }
+
+      :host([dir="rtl"][theme~="spacing-xl"]) ::slotted(*) {
+        margin-right: 40px;
+      }
+
+      /*
+        Compensate for the first item margin, so that there is no gap around
+        the layout itself.
+       */
+      :host([dir="rtl"][theme~="spacing-xs"])::before {
+        margin-right: -4px;
+      }
+
+      :host([dir="rtl"][theme~="spacing-s"])::before {
+        margin-right: -8px;
+      }
+
+      :host([dir="rtl"][theme~="spacing"])::before {
+        margin-right: -16px;
+      }
+
+      :host([dir="rtl"][theme~="spacing-l"])::before {
+        margin-right: -24px;
+      }
+
+      :host([dir="rtl"][theme~="spacing-xl"])::before {
+        margin-right: -40px;
+      }
     </style>
   </template>
 </dom-module>