fix: extend width of the frozen column to include border

vaadin · Mar 18, 2024 · 8665a40 · 8665a40
1 parent 6efce67
commit 8665a40
Show file tree

Hide file tree

Showing 21 changed files with 62 additions and 0 deletions.
diff --git a/packages/grid/test/visual/grid.common.js b/packages/grid/test/visual/grid.common.js
@@ -189,6 +189,61 @@ describe('grid', () => {
         });
       });
 
+      describe('selection', () => {
+        let selectionColumn;
+
+        describe('start', () => {
+          beforeEach(async () => {
+            element = fixtureSync(`
+              <vaadin-grid style="height: 250px; max-width: 260px">
+                <vaadin-grid-selection-column auto-select></vaadin-grid-selection-column>
+                <vaadin-grid-column path="name.first" header="First name"></vaadin-grid-column>
+                <vaadin-grid-column path="name.last" header="Last name"></vaadin-grid-column>
+              </vaadin-grid>
+            `);
+            element.items = users;
+            flushGrid(element);
+            await nextRender(element);
+            selectionColumn = element.querySelector('vaadin-grid-selection-column');
+          });
+
+          it('initial', async () => {
+            await visualDiff(element, `${dir}-selection-start-initial`);
+          });
+
+          it('frozen', async () => {
+            selectionColumn.frozen = true;
+            element.$.table.scrollLeft = element.__isRTL ? -20 : 20;
+            await visualDiff(element, `${dir}-selection-start-frozen`);
+          });
+        });
+
+        describe('end', () => {
+          beforeEach(async () => {
+            element = fixtureSync(`
+              <vaadin-grid style="height: 250px; max-width: 260px">
+                <vaadin-grid-column path="name.first" header="First name"></vaadin-grid-column>
+                <vaadin-grid-column path="name.last" header="Last name"></vaadin-grid-column>
+                <vaadin-grid-selection-column auto-select></vaadin-grid-selection-column>
+              </vaadin-grid>
+            `);
+            element.items = users;
+            flushGrid(element);
+            await nextRender(element);
+            selectionColumn = element.querySelector('vaadin-grid-selection-column');
+          });
+
+          it('initial', async () => {
+            await visualDiff(element, `${dir}-selection-end-initial`);
+          });
+
+          it('frozen', async () => {
+            selectionColumn.frozenToEnd = true;
+            await visualDiff(element, `${dir}-selection-end-frozen`);
+          });
+        });
+      });
+
       describe('row focus', () => {
         beforeEach(async () => {
           element = fixtureSync(`

diff --git a/packages/grid/test/visual/lumo/grid.test.js b/packages/grid/test/visual/lumo/grid.test.js
@@ -2,6 +2,7 @@ import { fixtureSync, nextRender } from '@vaadin/testing-helpers';
 import { visualDiff } from '@web/test-runner-visual-regression';
 import '../../../theme/lumo/vaadin-grid.js';
 import '../../../theme/lumo/vaadin-grid-column-group.js';
+import '../../../theme/lumo/vaadin-grid-selection-column.js';
 import '../../../theme/lumo/vaadin-grid-sorter.js';
 import '../../../theme/lumo/vaadin-grid-sort-column.js';
 import '../../../theme/lumo/vaadin-grid-tree-column.js';

diff --git a/...es/grid/test/visual/lumo/screenshots/grid/baseline/ltr-selection-end-frozen.png b/...es/grid/test/visual/lumo/screenshots/grid/baseline/ltr-selection-end-frozen.png
diff --git a/...s/grid/test/visual/lumo/screenshots/grid/baseline/ltr-selection-end-initial.png b/...s/grid/test/visual/lumo/screenshots/grid/baseline/ltr-selection-end-initial.png
diff --git a/.../grid/test/visual/lumo/screenshots/grid/baseline/ltr-selection-start-frozen.png b/.../grid/test/visual/lumo/screenshots/grid/baseline/ltr-selection-start-frozen.png
diff --git a/...grid/test/visual/lumo/screenshots/grid/baseline/ltr-selection-start-initial.png b/...grid/test/visual/lumo/screenshots/grid/baseline/ltr-selection-start-initial.png
diff --git a/packages/grid/test/visual/lumo/screenshots/grid/baseline/rtl-frozen-end.png b/packages/grid/test/visual/lumo/screenshots/grid/baseline/rtl-frozen-end.png
diff --git a/...es/grid/test/visual/lumo/screenshots/grid/baseline/rtl-selection-end-frozen.png b/...es/grid/test/visual/lumo/screenshots/grid/baseline/rtl-selection-end-frozen.png
diff --git a/...s/grid/test/visual/lumo/screenshots/grid/baseline/rtl-selection-end-initial.png b/...s/grid/test/visual/lumo/screenshots/grid/baseline/rtl-selection-end-initial.png
diff --git a/.../grid/test/visual/lumo/screenshots/grid/baseline/rtl-selection-start-frozen.png b/.../grid/test/visual/lumo/screenshots/grid/baseline/rtl-selection-start-frozen.png
diff --git a/...grid/test/visual/lumo/screenshots/grid/baseline/rtl-selection-start-initial.png b/...grid/test/visual/lumo/screenshots/grid/baseline/rtl-selection-start-initial.png
diff --git a/packages/grid/test/visual/material/grid.test.js b/packages/grid/test/visual/material/grid.test.js
@@ -1,5 +1,6 @@
 import '../../../theme/material/vaadin-grid.js';
 import '../../../theme/material/vaadin-grid-column-group.js';
+import '../../../theme/material/vaadin-grid-selection-column.js';
 import '../../../theme/material/vaadin-grid-sorter.js';
 import '../../../theme/material/vaadin-grid-sort-column.js';
 import '../../../theme/material/vaadin-grid-tree-column.js';

diff --git a/...rid/test/visual/material/screenshots/grid/baseline/ltr-selection-end-frozen.png b/...rid/test/visual/material/screenshots/grid/baseline/ltr-selection-end-frozen.png
diff --git a/...id/test/visual/material/screenshots/grid/baseline/ltr-selection-end-initial.png b/...id/test/visual/material/screenshots/grid/baseline/ltr-selection-end-initial.png
diff --git a/...d/test/visual/material/screenshots/grid/baseline/ltr-selection-start-frozen.png b/...d/test/visual/material/screenshots/grid/baseline/ltr-selection-start-frozen.png
diff --git a/.../test/visual/material/screenshots/grid/baseline/ltr-selection-start-initial.png b/.../test/visual/material/screenshots/grid/baseline/ltr-selection-start-initial.png
diff --git a/...rid/test/visual/material/screenshots/grid/baseline/rtl-selection-end-frozen.png b/...rid/test/visual/material/screenshots/grid/baseline/rtl-selection-end-frozen.png
diff --git a/...id/test/visual/material/screenshots/grid/baseline/rtl-selection-end-initial.png b/...id/test/visual/material/screenshots/grid/baseline/rtl-selection-end-initial.png
diff --git a/...d/test/visual/material/screenshots/grid/baseline/rtl-selection-start-frozen.png b/...d/test/visual/material/screenshots/grid/baseline/rtl-selection-start-frozen.png
diff --git a/.../test/visual/material/screenshots/grid/baseline/rtl-selection-start-initial.png b/.../test/visual/material/screenshots/grid/baseline/rtl-selection-start-initial.png
diff --git a/packages/grid/theme/lumo/vaadin-grid-styles.js b/packages/grid/theme/lumo/vaadin-grid-styles.js
@@ -306,6 +306,11 @@ registerStyles(
       border-left-color: var(--_lumo-grid-border-color);
     }
 
+    [part~='cell'][last-frozen] ::slotted(vaadin-grid-cell-content),
+    [part~='cell'][first-frozen-to-end] ::slotted(vaadin-grid-cell-content) {
+      min-width: calc(100% + var(--_lumo-grid-border-width));
+    }
+
     /* Row stripes */
 
     :host([theme~='row-stripes']) [part~='even-row'] [part~='body-cell'],