diff --git a/src/table/__integ__/resizable-columns.test.ts b/src/table/__integ__/resizable-columns.test.ts index a20bcd45d9..ec04e1c3f8 100644 --- a/src/table/__integ__/resizable-columns.test.ts +++ b/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); + })() +); diff --git a/src/table/header-cell/index.tsx b/src/table/header-cell/index.tsx index b696bd2581..ff8e92ed41 100644 --- a/src/table/header-cell/index.tsx +++ b/src/table/header-cell/index.tsx @@ -50,7 +50,7 @@ export interface TableHeaderCellProps { isExpandable?: boolean; hasDynamicContent?: boolean; variant: TableProps.Variant; - tableVariant?: string; + tableVariant?: TableProps.Variant; } export function TableHeaderCell({ @@ -213,6 +213,7 @@ export function TableHeaderCell({ // TODO: Replace with this when strings are available // tooltipText={i18n('ariaLabels.resizerTooltipText', resizerTooltipText)} tooltipText={resizerTooltipText} + isBorderless={variant === 'full-page' || variant === 'embedded' || variant === 'borderless'} /> ) : ( diff --git a/src/table/header-cell/th-element.tsx b/src/table/header-cell/th-element.tsx index fb8c38ecac..55e5739e02 100644 --- a/src/table/header-cell/th-element.tsx +++ b/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({ diff --git a/src/table/resizer/__tests__/index.test.tsx b/src/table/resizer/__tests__/index.test.tsx index 2ec330a783..52c843e4ef 100644 --- a/src/table/resizer/__tests__/index.test.tsx +++ b/src/table/resizer/__tests__/index.test.tsx @@ -27,7 +27,12 @@ describe('Resizer component', () => { - + @@ -54,7 +59,12 @@ describe('Resizer component', () => { - + diff --git a/src/table/resizer/index.tsx b/src/table/resizer/index.tsx index e058de8a10..b99b3f318c 100644 --- a/src/table/resizer/index.tsx +++ b/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 (
{ if (event.pointerType === 'mouse' && event.button !== 0) { @@ -400,11 +403,7 @@ export function Resizer({ data-focus-id={focusId} /> &: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; diff --git a/src/table/thead.tsx b/src/table/thead.tsx index 626184eff8..408ec0b5da 100644 --- a/src/table/thead.tsx +++ b/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;