fix!: update vaadin-grid-selection-column to use autoWidth: true (#7232)

packages/grid/src/vaadin-grid-selection-column-base-mixin.js

@@ -31,6 +31,14 @@ export const GridSelectionColumnBaseMixin = (superClass) =>
           sync: true,
         },
 
+        /**
+         * Override `autoWidth` to enable auto-width
+         */
+        autoWidth: {
+          type: Boolean,
+          value: true,
+        },
+
         /**
          * Flex grow ratio for the cell widths. When set to 0, cell width is fixed.
          * @attr {number} flex-grow

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(`

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';

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';