fix: Table has same height when last row is selected

Before this change, when selecting the last row on a table in VR
there has been a 1px jump. Caused by the last row which had the same
default border-bottom-height of 2px as all remaining rows.
So when selecting the last row, the padding-bottom got reduced (as for all remaining rows) when selecting to make the available space for increasing the border-bottom-width from 1px to 2px. This caused the jump.

With this change, when selecting the last row it does not adjust the padding-bottom as it’d be needed for all remaining rows. This keeps the table in the same height in VR.

src/table/__integ__/selection.test.ts

@@ -0,0 +1,79 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import { BasePageObject } from '@cloudscape-design/browser-test-tools/page-objects';
+import useBrowser from '@cloudscape-design/browser-test-tools/use-browser';
+import createWrapper from '../../../lib/components/test-utils/selectors';
+
+const tableWrapper = createWrapper().findTable();
+
+class TablePage extends BasePageObject {
+  async selectFirstRow() {
+    await this.click(tableWrapper.findRowSelectionArea(1).toSelector());
+  }
+
+  async selectLastRow() {
+    const rowCount = await this.getElementsCount(tableWrapper.findRows().toSelector());
+    await this.click(tableWrapper.findRowSelectionArea(rowCount).toSelector());
+  }
+
+  async selectAll() {
+    await this.click(tableWrapper.findSelectAllTrigger().toSelector());
+  }
+
+  async getTableHeight() {
+    const { height } = await this.getBoundingBox(tableWrapper.toSelector());
+    return height;
+  }
+}
+
+describe('Selection has no effect on table height', () => {
+  const setupTest = (testFn: (page: TablePage) => Promise<void>) => {
+    return useBrowser(async browser => {
+      const page = new TablePage(browser);
+      await browser.url('#/light/table/shift-selection');
+      await page.waitForVisible(tableWrapper.findBodyCell(2, 1).toSelector());
+      await testFn(page);
+    });
+  };
+
+  test(
+    'select last row does not change table height',
+    setupTest(async page => {
+      const heightNoSelection = await page.getTableHeight();
+      await page.selectLastRow();
+      const heightWithLastRowSelected = await page.getTableHeight();
+      await expect(heightWithLastRowSelected).toBe(heightNoSelection);
+    })
+  );
+
+  test(
+    'select first row does not change table height',
+    setupTest(async page => {
+      const heightNoSelection = await page.getTableHeight();
+      await page.selectFirstRow();
+      const heightWithLastRowSelected = await page.getTableHeight();
+      await expect(heightWithLastRowSelected).toBe(heightNoSelection);
+    })
+  );
+
+  test(
+    'select first and last row does not change table height',
+    setupTest(async page => {
+      const heightNoSelection = await page.getTableHeight();
+      await page.selectFirstRow();
+      await page.selectLastRow();
+      const heightWithLastRowSelected = await page.getTableHeight();
+      await expect(heightWithLastRowSelected).toBe(heightNoSelection);
+    })
+  );
+
+  test(
+    'select all rows not change table height',
+    setupTest(async page => {
+      const heightNoSelection = await page.getTableHeight();
+      await page.selectAll();
+      const heightWithLastRowSelected = await page.getTableHeight();
+      await expect(heightWithLastRowSelected).toBe(heightNoSelection);
+    })
+  );
+});

src/table/body-cell/styles.scss

@@ -101,6 +101,13 @@ $success-icon-padding-right: calc(#{$edit-button-padding-right} + #{$icon-width-
     border-top: $selected-border;
     border-bottom: $selected-border;
     padding-bottom: $cell-vertical-padding;
+
+    // Last selected row has a fixed border-bottom width which do not change on selection in visual refresh.
+    // Adjust padding-bottom prevents a slight jump in the table height.
+    &.body-cell-last-row.is-visual-refresh {
+      padding-bottom: calc(#{$cell-vertical-padding} + #{awsui.$border-divider-list-width});
+    }
+
     &:first-child {
       border-left: $selected-border;
       border-radius: awsui.$border-radius-item 0 0 awsui.$border-radius-item;