Merge c8b6bbd into 55680b6

bower.json

@@ -28,12 +28,12 @@
   "dependencies": {
     "polymer": "^2.0.0",
     "iron-resizable-behavior": "^2.0.0",
-    "vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.2.1",
-    "vaadin-list-mixin": "vaadin/vaadin-list-mixin#^2.1.0",
-    "vaadin-item": "vaadin/vaadin-item#^2.1.0",
+    "vaadin-themable-mixin": "vaadin/vaadin-themable-mixin#^1.5.2",
+    "vaadin-list-mixin": "vaadin/vaadin-list-mixin#^2.4.0-alpha2",
+    "vaadin-item": "vaadin/vaadin-item#^2.2.0-alpha1",
     "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.2"
   },
   "devDependencies": {
     "iron-component-page": "^3.0.0",
@@ -42,7 +42,7 @@
     "iron-icon": "^2.0.0",
     "iron-pages": "^2.0.0",
     "iron-test-helpers": "^2.0.0",
-    "vaadin-demo-helpers": "vaadin/vaadin-demo-helpers#^3.0.0",
+    "vaadin-demo-helpers": "vaadin/vaadin-demo-helpers#^3.1.0-alpha1",
     "webcomponentsjs": "^1.0.0",
     "web-component-tester": "^6.1.5"
   },

src/vaadin-tabs.html

@@ -80,6 +80,16 @@
       :host([orientation="vertical"]) [part="forward-button"] {
         display: none;
       }
+
+      /* RTL specific styles */
+
+      :host([dir="rtl"]) [part="back-button"]::after {
+        content: '▶';
+      }
+
+      :host([dir="rtl"]) [part="forward-button"]::after {
+        content: '◀';
+      }
     </style>
     <div on-click="_scrollBack" part="back-button"></div>
 
@@ -182,11 +192,11 @@
         }
 
         _scrollForward() {
-          this._scroll(this._scrollOffset);
+          this._scroll(-this.__direction * this._scrollOffset);
         }
 
         _scrollBack() {
-          this._scroll(-1 * this._scrollOffset);
+          this._scroll(this.__direction * this._scrollOffset);
         }
 
         get _scrollOffset() {
@@ -197,14 +207,25 @@
           return this.$.scroll;
         }
 
+        get __direction() {
+          return !this._vertical && this.getAttribute('dir') === 'rtl' ? 1 : -1;
+        }
+
         _updateOverflow() {
-          const scrollPosition = this._vertical ? this._scrollerElement.scrollTop : this._scrollerElement.scrollLeft;
+          const scrollPosition = this._vertical ? this._scrollerElement.scrollTop : this.__getNormalizedScrollLeft(this._scrollerElement);
           let scrollSize = this._vertical ? this._scrollerElement.scrollHeight : this._scrollerElement.scrollWidth;
           // In Edge we need to adjust the size in 1 pixel
           scrollSize -= 1;
 
           let overflow = scrollPosition > 0 ? 'start' : '';
           overflow += scrollPosition + this._scrollOffset < scrollSize ? ' end' : '';
+
+          if (this.__direction == 1) {
+            overflow = overflow.replace(/start|end/gi, matched => {
+              return matched === 'start' ? 'end' : 'start';
+            });
+          }
+
           overflow ? this.setAttribute('overflow', overflow.trim()) : this.removeAttribute('overflow');
 
           this._repaintShadowNodesHack();

test/nav.html

@@ -91,76 +91,85 @@
 
       ['horizontal', 'vertical'].forEach(orientation => {
 
-        describe(`Overflow ${orientation}`, () => {
+        ['ltr', 'rtl'].forEach(direction => {
 
-          beforeEach(() => nav.orientation = orientation);
+          describe(`Overflow ${orientation} ${direction}`, () => {
+            let horizontalRtl;
 
-          describe('In large viewport', () => {
-            it(`when orientation=${orientation} should not have overflow`, function(done) {
-              setTimeout(() => {
-                expect(nav.hasAttribute('overflow')).to.be.false;
-                done();
-              }, 10);
+            beforeEach(() => {
+              horizontalRtl = orientation === 'horizontal' && direction === 'rtl';
+              document.documentElement.setAttribute('dir', direction);
+              nav.orientation = orientation;
             });
-          });
-
-          describe('In small viewport', () => {
 
-            // these tests pass in latest Safari but fails in previous version
-            if (safari10) {
-              return;
-            }
-
-            beforeEach(done => {
-              nav.style.width = '200px';
-              nav.style.height = '100px';
-              nav._updateOverflow();
-              Polymer.RenderStatus.afterNextRender(this, done);
+            describe('In large viewport', () => {
+              it(`when orientation=${orientation} should not have overflow`, function(done) {
+                setTimeout(() => {
+                  expect(nav.hasAttribute('overflow')).to.be.false;
+                  done();
+                }, 10);
+              });
             });
 
-            it(`when orientation=${orientation} should have overflow="end" if scroll is at the beginning`, done => {
-              setTimeout(() => {
-                expect(nav.getAttribute('overflow')).to.be.equal('end');
-                done();
-              }, 100);
-            });
+            describe('In small viewport', () => {
 
-            it(`when orientation=${orientation} should have overflow="start end" if scroll is at the middle`, done => {
-              const listener = nav._scrollerElement.addEventListener('scroll', () => {
-                expect(nav.getAttribute('overflow')).to.be.equal('start end');
-                nav._scrollerElement.removeEventListener('scroll', listener);
-                done();
+              // these tests pass in latest Safari but fails in previous version
+              if (safari10) {
+                return;
+              }
+
+              beforeEach(done => {
+                nav.style.width = '200px';
+                nav.style.height = '100px';
+                nav._updateOverflow();
+                Polymer.RenderStatus.afterNextRender(this, done);
               });
-              nav._scroll(2);
-            });
 
-            it(`when orientation=${orientation} should have overflow="start" if scroll is at the end`, done => {
-              const listener = nav._scrollerElement.addEventListener('scroll', () => {
-                expect(nav.getAttribute('overflow')).to.be.equal('start');
-                nav._scrollerElement.removeEventListener('scroll', listener);
-                done();
+              it(`when orientation=${orientation} should have overflow="end" if scroll is at the beginning`, done => {
+                setTimeout(() => {
+                  expect(nav.getAttribute('overflow')).to.be.equal('end');
+                  done();
+                }, 100);
               });
-              nav._scroll(400);
-            });
 
-            it(`when orientation=${orientation} should not have overflow="start" when over-scrolling`, () => {
-              const scroll = nav._scrollerElement;
+              it(`when orientation=${orientation} should have overflow="start end" if scroll is at the middle`, done => {
+                const listener = nav._scrollerElement.addEventListener('scroll', () => {
+                  expect(nav.getAttribute('overflow')).to.contain('start');
+                  expect(nav.getAttribute('overflow')).to.contain('end');
+                  nav._scrollerElement.removeEventListener('scroll', listener);
+                  done();
+                });
+                nav._scroll(horizontalRtl ? -2 : 2);
+              });
 
-              // Cannot set negative values to native scroll, monkey patching the properties
-              let pixels = 0;
-              Object.defineProperty(scroll, orientation == 'horizontal' ? 'scrollLeft' : 'scrollTop', {
-                get: () => pixels,
-                set: (v) => pixels = v
+              it(`when orientation=${orientation} should have overflow="start" if scroll is at the end`, done => {
+                const listener = nav._scrollerElement.addEventListener('scroll', () => {
+                  expect(nav.getAttribute('overflow')).to.be.equal('start');
+                  nav._scrollerElement.removeEventListener('scroll', listener);
+                  done();
+                });
+                nav._scroll(horizontalRtl ? -400 : 400);
               });
 
-              // Simulate over-scrolling
-              nav._scroll(-1);
-              scroll.dispatchEvent(new CustomEvent('scroll'));
+              it(`when orientation=${orientation} should not have overflow="start" when over-scrolling`, () => {
+                const scroll = nav._scrollerElement;
+
+                // Cannot set negative values to native scroll, monkey patching the properties
+                let pixels = 0;
+                Object.defineProperty(scroll, orientation == 'horizontal' ? 'scrollLeft' : 'scrollTop', {
+                  get: () => pixels,
+                  set: (v) => pixels = v
+                });
+
+                // Simulate over-scrolling
+                nav._scroll(horizontalRtl ? 400 : -400);
+                scroll.dispatchEvent(new CustomEvent('scroll'));
 
-              expect(nav.getAttribute('overflow')).to.be.equal('end');
+                expect(nav.getAttribute('overflow')).to.be.equal('end');
+              });
             });
-          });
 
+          });
         });
       });
     });

test/visual/anchor-tabs.html

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

test/visual/scrollable-tabs.html

@@ -6,10 +6,14 @@
   <script src="../../bower_components/webcomponentsjs/webcomponents-lite.js"></script>
 
   <script>
+    const dir = window.location.search.replace(/.*dir=(\w+).*/, '$1') || 'ltr';
+    document.documentElement.setAttribute('dir', dir);
+
     const theme = window.location.search.replace(/.*theme=(\w+).*/, '$1') || 'lumo';
     document.write(`<link rel="import" href="../../theme/${theme}/vaadin-tab.html">`);
     document.write(`<link rel="import" href="../../theme/${theme}/vaadin-tabs.html">`);
   </script>
+
 </head>
 
 <body>

test/visual/test.js

@@ -39,12 +39,26 @@ gemini.suite('vaadin-tabs', function(rootSuite) {
         .capture('scrollable-tabs');
     });
 
+    gemini.suite(`scrollable-tabs-rtl-${theme}`, (suite) => {
+      suite
+        .setUrl(`scrollable-tabs.html?theme=${theme}&dir=rtl`)
+        .setCaptureElements('#scrollable-tabs')
+        .capture('scrollable-tabs');
+    });
+
     gemini.suite(`anchor-tabs-${theme}`, (suite) => {
       suite
         .setUrl(`anchor-tabs.html?theme=${theme}`)
         .setCaptureElements('#anchor-tabs')
         .capture('anchor-tabs');
     });
+
+    gemini.suite(`anchor-tabs-rtl-${theme}`, (suite) => {
+      suite
+        .setUrl(`anchor-tabs.html?theme=${theme}&dir=rtl`)
+        .setCaptureElements('#anchor-tabs')
+        .capture('anchor-tabs');
+    });
   });
 
 });

theme/lumo/vaadin-tab-styles.html

@@ -189,6 +189,40 @@
         box-shadow: inset 0 0 0 2px var(--lumo-primary-color-50pct);
         border-radius: var(--lumo-border-radius);
       }
+
+      /* RTL specific styles */
+
+      :host([dir="rtl"])::before,
+      :host([dir="rtl"])::after {
+        left: auto;
+        right: 50%;
+        transform: translateX(50%) scale(0);
+      }
+
+      :host([dir="rtl"][selected]:not([orientation="vertical"]))::before,
+      :host([dir="rtl"][selected]:not([orientation="vertical"]))::after {
+        transform: translateX(50%) scale(1);
+      }
+
+      :host ::slotted(iron-icon:first-child) {
+        margin-right: 0;
+      }
+
+      :host ::slotted(iron-icon:last-child) {
+        margin-left: 0;
+      }
+
+      :host([orientation="vertical"][dir="rtl"]) {
+        transform-origin: 100% 50%;
+      }
+
+      :host([dir="rtl"][orientation="vertical"])::before,
+      :host([dir="rtl"][orientation="vertical"])::after {
+        left: auto;
+        right: 0;
+        border-radius: var(--lumo-border-radius) 0 0 var(--lumo-border-radius);
+        transform-origin: 0% 50%;
+      }
     </style>
   </template>
 </dom-module>

theme/lumo/vaadin-tabs-styles.html

@@ -183,6 +183,57 @@
       :host([theme~="equal-width-tabs"]) [part="tabs"] ::slotted(vaadin-tab) {
         flex: 1 0 0%;
       }
+
+      /* RTL specific styles */
+
+      :host([dir="rtl"]) [part="forward-button"]::after {
+        content: var(--lumo-icons-angle-left);
+      }
+
+      :host([dir="rtl"]) [part="back-button"]::after {
+        content: var(--lumo-icons-angle-right);
+      }
+
+      :host([orientation="vertical"][dir="rtl"]) {
+        box-shadow: 1px 0 0 0 var(--lumo-contrast-10pct);
+      }
+
+      :host([dir="rtl"]) [part="forward-button"] {
+        right: auto;
+        left: 0;
+      }
+
+      :host([dir="rtl"]) [part="tabs"] ::slotted(:not(vaadin-tab)) {
+        margin-left: 0;
+        margin-right: var(--lumo-space-m);
+      }
+
+      /* Both ends overflowing */
+      :host([dir="rtl"][overflow~="start"][overflow~="end"]:not([orientation="vertical"])) [part="tabs"] {
+        --_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, transparent 2em, #000 4em, #000 calc(100% - 4em), transparent calc(100% - 2em));
+      }
+
+      /* End overflowing */
+      :host([dir="rtl"][overflow~="end"]:not([orientation="vertical"])) [part="tabs"] {
+        --_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, #000 calc(100% - 4em), transparent calc(100% - 2em));
+      }
+
+      /* Start overflowing */
+      :host([dir="rtl"][overflow~="start"]:not([orientation="vertical"])) [part="tabs"] {
+        --_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, transparent 2em, #000 4em);
+      }
+
+      :host([dir="rtl"][theme~="hide-scroll-buttons"][overflow~="start"][overflow~="end"]:not([orientation="vertical"])) [part="tabs"] {
+        --_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, transparent, #000 2em, #000 calc(100% - 2em), transparent 100%);
+      }
+
+      :host([dir="rtl"][theme~="hide-scroll-buttons"][overflow~="end"]:not([orientation="vertical"])) [part="tabs"] {
+        --_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, #000 calc(100% - 2em), transparent 100%);
+      }
+
+      :host([dir="rtl"][theme~="hide-scroll-buttons"][overflow~="start"]:not([orientation="vertical"])) [part="tabs"] {
+        --_lumo-tabs-overflow-mask-image: linear-gradient(-90deg, transparent, #000 2em);
+      }
     </style>
   </template>
 </dom-module>

theme/material/vaadin-tab-styles.html

@@ -130,6 +130,12 @@
       ::slotted(iron-icon:not(:only-child)) {
         margin-bottom: 8px;
       }
+
+      /* RTL specific styles */
+
+      :host([dir="rtl"][orientation="vertical"][selected]) {
+        box-shadow: inset -2px 0 0 0 var(--material-primary-color);
+      }
     </style>
   </template>
 </dom-module>