fix: Fixes table resizer overflow causing unwanted scroll (#4102)

Author: pan-kot

src/table/__integ__/resizable-columns.test.ts

@@ -76,6 +76,14 @@ class TablePage extends BasePageObject {
     });
   }
 
+  getTableClientWidth() {
+    return this.browser.execute(() => document.querySelector('table')!.clientWidth);
+  }
+
+  getTableScrollWidth() {
+    return this.browser.execute(() => document.querySelector('table')!.scrollWidth);
+  }
+
   async getColumnMinWidth(columnIndex: number) {
     const columnSelector = tableWrapper
       // use internal CSS-selector to always receive the real table header and not a sticky copy
@@ -368,3 +376,15 @@ test.each([false, true])(
     );
   }
 );
+
+test.each([false, true])('should not be horizontally scrollable upon rendering, isFullPage=%s', isFullPage =>
+  useBrowser({ width: 1200, height: 1000 }, async browser => {
+    const page = new TablePage(browser);
+    await browser.url(`#/light/table/resizable-columns?visualRefresh=true&fullPage=${String(isFullPage)}`);
+    await page.waitForVisible(tableWrapper.findBodyCell(2, 1).toSelector());
+
+    const tableClientWidth = await page.getTableClientWidth();
+    const tableScrollWidth = await page.getTableScrollWidth();
+    expect(tableScrollWidth).toBe(tableClientWidth);
+  })()
+);

src/table/header-cell/index.tsx

@@ -50,7 +50,7 @@ export interface TableHeaderCellProps<ItemType> {
   isExpandable?: boolean;
   hasDynamicContent?: boolean;
   variant: TableProps.Variant;
-  tableVariant?: string;
+  tableVariant?: TableProps.Variant;
 }
 
 export function TableHeaderCell<ItemType>({
@@ -213,6 +213,7 @@ export function TableHeaderCell<ItemType>({
           // TODO: Replace with this when strings are available
           // tooltipText={i18n('ariaLabels.resizerTooltipText', resizerTooltipText)}
           tooltipText={resizerTooltipText}
+          isBorderless={variant === 'full-page' || variant === 'embedded' || variant === 'borderless'}
         />
       ) : (
         <Divider className={styles['resize-divider']} />

src/table/header-cell/th-element.tsx

@@ -36,8 +36,8 @@ export interface TableThElementProps {
   tableRole: TableRole;
   children: React.ReactNode;
   variant: TableProps.Variant;
+  tableVariant?: TableProps.Variant;
   ariaLabel?: string;
-  tableVariant?: string;
 }
 
 export function TableThElement({

src/table/resizer/__tests__/index.test.tsx

@@ -27,7 +27,12 @@ describe('Resizer component', () => {
         <thead>
           <tr>
             <th>
-              <Resizer onWidthUpdate={mockOnWidthUpdate} onWidthUpdateCommit={mockOnWidthUpdateCommit} minWidth={80} />
+              <Resizer
+                onWidthUpdate={mockOnWidthUpdate}
+                onWidthUpdateCommit={mockOnWidthUpdateCommit}
+                minWidth={80}
+                isBorderless={false}
+              />
             </th>
           </tr>
         </thead>
@@ -54,7 +59,12 @@ describe('Resizer component', () => {
         <thead>
           <tr>
             <th>
-              <Resizer onWidthUpdate={mockOnWidthUpdate} onWidthUpdateCommit={mockOnWidthUpdateCommit} minWidth={80} />
+              <Resizer
+                onWidthUpdate={mockOnWidthUpdate}
+                onWidthUpdateCommit={mockOnWidthUpdateCommit}
+                minWidth={80}
+                isBorderless={false}
+              />
             </th>
           </tr>
         </thead>

src/table/resizer/index.tsx

@@ -27,6 +27,7 @@ interface ResizerProps {
   showFocusRing?: boolean;
   roleDescription?: string;
   tooltipText?: string;
+  isBorderless: boolean;
 }
 
 const AUTO_GROW_START_TIME = 10;
@@ -47,6 +48,7 @@ export function Resizer({
   focusId,
   roleDescription,
   tooltipText,
+  isBorderless,
 }: ResizerProps) {
   onWidthUpdate = useStableCallback(onWidthUpdate);
   onWidthUpdateCommit = useStableCallback(onWidthUpdateCommit);
@@ -227,7 +229,7 @@ export function Resizer({
 
     const onKeyDown = (event: KeyboardEvent) => {
       if (isKeyboardDragging) {
-        const keys = [KeyCode.left, KeyCode.right, KeyCode.enter, KeyCode.right, KeyCode.space, KeyCode.escape];
+        const keys = [KeyCode.left, KeyCode.right, KeyCode.enter, KeyCode.space, KeyCode.escape];
 
         if (keys.indexOf(event.keyCode) !== -1) {
           event.preventDefault();
@@ -319,7 +321,9 @@ export function Resizer({
 
   return (
     <div
-      className={clsx(styles['resizer-wrapper'], isVisualRefresh && styles['is-visual-refresh'])}
+      // When the table is borderless (works in visual refresh tables only), the last resize handle must not
+      // exceed table's edges, as it causes an unintended overflow otherwise.
+      className={clsx(styles['resizer-wrapper'], (!isVisualRefresh || isBorderless) && styles['is-borderless'])}
       ref={positioningWrapperRef}
     >
       <DragHandleWrapper
@@ -360,8 +364,7 @@ export function Resizer({
           ref={resizerToggleRef}
           className={clsx(
             styles.resizer,
-            (resizerHasFocus || showFocusRing || isKeyboardDragging) && styles['has-focus'],
-            isVisualRefresh && styles['is-visual-refresh']
+            (resizerHasFocus || showFocusRing || isKeyboardDragging) && styles['has-focus']
           )}
           onPointerDown={event => {
             if (event.pointerType === 'mouse' && event.button !== 0) {
@@ -400,11 +403,7 @@ export function Resizer({
           data-focus-id={focusId}
         />
         <span
-          className={clsx(
-            styles['divider-interactive'],
-            (isPointerDown || isDragging) && styles['divider-active'],
-            isVisualRefresh && styles['is-visual-refresh']
-          )}
+          className={clsx(styles['divider-interactive'], (isPointerDown || isDragging) && styles['divider-active'])}
           data-awsui-table-suppress-navigation={true}
           ref={resizerSeparatorRef}
           id={separatorId}

src/table/resizer/styles.scss

@@ -20,12 +20,12 @@ $block-gap: calc(2 * #{awsui.$space-xs} + #{awsui.$space-xxxs});
 .resizer-wrapper {
   inset-block: 0;
   position: absolute;
-  inset-inline-end: calc(-1 * #{$handle-width} / 2);
+  inset-inline-end: calc(-1 * $handle-width / 2);
   inline-size: $handle-width;
   overflow: hidden;
   z-index: 10;
 
-  th:last-child > &:has(.divider-interactive):not(.is-visual-refresh) {
+  th:last-child > &:has(.divider-interactive).is-borderless {
     inset-inline-end: 0;
   }
 }
@@ -58,6 +58,11 @@ th:not(:last-child) > .divider-disabled {
   inset-inline-end: calc(#{$handle-width} / 2);
 }
 
+// stylelint-disable-next-line selector-combinator-disallowed-list
+th:last-child > .resizer-wrapper.is-borderless .divider-interactive {
+  inset-inline-end: 0;
+}
+
 .divider-active {
   border-inline-start: $active-separator-width solid awsui.$color-border-divider-active;
 }
@@ -89,10 +94,6 @@ th:not(:last-child) > .divider-disabled {
   }
 }
 
-th:last-child > .resizer:not(.is-visual-refresh) {
-  inset-inline-end: 0;
-}
-
 .tracker {
   display: none;
   position: absolute;

src/table/thead.tsx

@@ -24,7 +24,7 @@ export interface TheadProps {
   sortingDescending: boolean | undefined;
   sortingDisabled: boolean | undefined;
   variant: TableProps.Variant;
-  tableVariant?: string;
+  tableVariant?: TableProps.Variant;
   wrapLines: boolean | undefined;
   resizableColumns: boolean | undefined;
   getSelectAllProps?: () => SelectionProps;