refactor: use RTL compatible overflow values (#3576)

vaadin · Mar 17, 2022 · aa79465 · aa79465
1 parent 4f086be
commit aa79465
Show file tree

Hide file tree

Showing 5 changed files with 60 additions and 12 deletions.
diff --git a/packages/grid/src/vaadin-grid-scroll-mixin.js b/packages/grid/src/vaadin-grid-scroll-mixin.js
@@ -136,6 +136,22 @@ export const ScrollMixin = (superClass) =>
         overflow += ' top';
       }
 
+      const scrollLeft = this.__getNormalizedScrollLeft(table);
+      if (scrollLeft > 0) {
+        overflow += ' start';
+      }
+
+      if (scrollLeft < table.scrollWidth - table.clientWidth) {
+        overflow += ' end';
+      }
+
+      if (this.__isRTL) {
+        overflow = overflow.replace(/start|end/gi, (matched) => {
+          return matched === 'start' ? 'end' : 'start';
+        });
+      }
+
+      // TODO: Remove "right" and "left" values in the next major.
       if (table.scrollLeft < table.scrollWidth - table.clientWidth) {
         overflow += ' right';
       }

diff --git a/packages/grid/src/vaadin-grid.d.ts b/packages/grid/src/vaadin-grid.d.ts
@@ -302,7 +302,7 @@ export interface GridEventMap<TItem> extends HTMLElementEventMap, GridCustomEven
  * `loading` | Set when the grid is loading data from data provider | :host
  * `interacting` | Keyboard navigation in interaction mode | :host
  * `navigating` | Keyboard navigation in navigation mode | :host
- * `overflow` | Set when rows are overflowing the grid viewport. Possible values: `top`, `bottom`, `left`, `right` | :host
+ * `overflow` | Set when rows are overflowing the grid viewport. Possible values: `top`, `bottom`, `start`, `end` | :host
  * `reordering` | Set when the grid's columns are being reordered | :host
  * `dragover` | Set when the grid (not a specific row) is dragged over | :host
  * `dragging-rows` : Set when grid rows are dragged  | :host

diff --git a/packages/grid/src/vaadin-grid.js b/packages/grid/src/vaadin-grid.js
@@ -188,7 +188,7 @@ import { StylingMixin } from './vaadin-grid-styling-mixin.js';
  * `loading` | Set when the grid is loading data from data provider | :host
  * `interacting` | Keyboard navigation in interaction mode | :host
  * `navigating` | Keyboard navigation in navigation mode | :host
- * `overflow` | Set when rows are overflowing the grid viewport. Possible values: `top`, `bottom`, `left`, `right` | :host
+ * `overflow` | Set when rows are overflowing the grid viewport. Possible values: `top`, `bottom`, `start`, `end` | :host
  * `reordering` | Set when the grid's columns are being reordered | :host
  * `dragover` | Set when the grid (not a specific row) is dragged over | :host
  * `dragging-rows` : Set when grid rows are dragged  | :host

diff --git a/packages/grid/test/scrolling-mode.test.js b/packages/grid/test/scrolling-mode.test.js
@@ -47,17 +47,17 @@ describe('scrolling mode', () => {
   });
 
   describe('overflow attribute', () => {
-    it('bottom right', () => {
+    it('bottom end right', () => {
       grid.scrollToIndex(0);
       flushGrid(grid);
-      expect(grid.getAttribute('overflow')).to.equal('bottom right');
+      expect(grid.getAttribute('overflow')).to.equal('bottom end right');
     });
 
-    it('bottom left', () => {
+    it('bottom start left', () => {
       grid.scrollToIndex(0);
       grid.$.table.scrollLeft = grid.$.table.scrollWidth;
       flushGrid(grid);
-      expect(grid.getAttribute('overflow')).to.equal('bottom left');
+      expect(grid.getAttribute('overflow')).to.equal('bottom start left');
     });
 
     it('bottom top', () => {
@@ -74,17 +74,49 @@ describe('scrolling mode', () => {
       expect(grid.getAttribute('overflow')).to.contain('right');
     });
 
-    it('top right', () => {
+    it('start end', () => {
+      grid.$.table.scrollLeft = 1;
+      flushGrid(grid);
+      expect(grid.getAttribute('overflow')).to.contain('start');
+      expect(grid.getAttribute('overflow')).to.contain('end');
+    });
+
+    it('top end right', () => {
       scrollToEnd(grid);
       flushGrid(grid);
-      expect(grid.getAttribute('overflow')).to.equal('top right');
+      expect(grid.getAttribute('overflow')).to.equal('top end right');
     });
 
-    it('top left', () => {
+    it('top start left', () => {
       scrollToEnd(grid);
       grid.$.table.scrollLeft = grid.$.table.scrollWidth;
       flushGrid(grid);
-      expect(grid.getAttribute('overflow')).to.equal('top left');
+      expect(grid.getAttribute('overflow')).to.equal('top start left');
+    });
+
+    describe('RTL', () => {
+      beforeEach(() => {
+        grid.setAttribute('dir', 'rtl');
+      });
+
+      it('end', () => {
+        expect(grid.getAttribute('overflow')).to.contain('end');
+        expect(grid.getAttribute('overflow')).to.not.contain('start');
+      });
+
+      it('start end', () => {
+        grid.$.table.scrollLeft = -1;
+        flushGrid(grid);
+        expect(grid.getAttribute('overflow')).to.contain('start');
+        expect(grid.getAttribute('overflow')).to.contain('end');
+      });
+
+      it('start', () => {
+        grid.$.table.scrollLeft = -grid.$.table.scrollWidth;
+        flushGrid(grid);
+        expect(grid.getAttribute('overflow')).to.contain('start');
+        expect(grid.getAttribute('overflow')).to.not.contain('end');
+      });
     });
   });
 });

diff --git a/packages/grid/theme/lumo/vaadin-grid-styles.js b/packages/grid/theme/lumo/vaadin-grid-styles.js
@@ -299,7 +299,7 @@ registerStyles(
       overflow: hidden;
     }
 
-    :host([overflow~='left']) [part~='cell'][last-frozen]:not([part~='details-cell']) {
+    :host([overflow~='end']) [part~='cell'][last-frozen]:not([part~='details-cell']) {
       border-right-color: var(--_lumo-grid-border-color);
     }
 
@@ -372,7 +372,7 @@ registerStyles(
       border-left: var(--_lumo-grid-border-width) solid transparent;
     }
 
-    :host([dir='rtl'][overflow~='right']) [part~='cell'][last-frozen]:not([part~='details-cell']) {
+    :host([dir='rtl'][overflow~='start']) [part~='cell'][last-frozen]:not([part~='details-cell']) {
       border-left-color: var(--_lumo-grid-border-color);
     }
   `,