revert: Consider container paddings in table calculations (#1650) (#1693

)
cloudscape-design · Oct 26, 2023 · 5c781f0 · 5c781f0
1 parent e95eede
commit 5c781f0
Show file tree

Hide file tree

Showing 6 changed files with 14 additions and 59 deletions.
diff --git a/pages/table/resizable-columns-rounding.page.tsx b/pages/table/resizable-columns-rounding.page.tsx
@@ -39,11 +39,11 @@ const items: Array<Item> = [
 ];
 
 export default function () {
-  const [width, setWidth] = useState(649);
+  const [width, setWidth] = useState(609);
   return (
     <>
       <h1>Table in container with special size </h1>
-      <button id="shrink-container" onClick={() => setWidth(635)}>
+      <button id="shrink-container" onClick={() => setWidth(595)}>
         Resize container
       </button>
       <div style={{ width }}>

diff --git a/pages/table/resizable-columns.page.tsx b/pages/table/resizable-columns.page.tsx
@@ -1,6 +1,6 @@
 // Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 // SPDX-License-Identifier: Apache-2.0
-import React, { useContext, useState } from 'react';
+import React, { useState } from 'react';
 import range from 'lodash/range';
 import zipObject from 'lodash/zipObject';
 import Button from '~components/button';
@@ -13,7 +13,6 @@ import SpaceBetween from '~components/space-between';
 import Table, { TableProps } from '~components/table';
 import { NonCancelableCustomEvent } from '~components/interfaces';
 import ScreenshotArea from '../utils/screenshot-area';
-import AppContext, { AppContextType } from '../app/app-context';
 
 declare global {
   interface Window {
@@ -91,22 +90,7 @@ const items: Item[] = [
   })),
 ];
 
-type PageContext = React.Context<
-  AppContextType<{
-    wrapLines: boolean;
-    stickyHeader: boolean;
-    resizableColumns: boolean;
-    fullPage: boolean;
-  }>
->;
-
 export default function App() {
-  const { urlParams, setUrlParams } = useContext(AppContext as PageContext);
-  const wrapLines = urlParams.wrapLines ?? false;
-  const stickyHeader = urlParams.stickyHeader ?? false;
-  const resizableColumns = urlParams.resizableColumns ?? true;
-  const fullPage = urlParams.fullPage ?? false;
-
   const [renderKey, setRenderKey] = useState(0);
   const [columns, setColumns] = useState(columnsConfig);
   const [columnDisplay, setColumnDisplay] = useState([
@@ -116,7 +100,9 @@ export default function App() {
     { id: 'state', visible: true },
     { id: 'extra', visible: false },
   ]);
-
+  const [wrapLines, setWrapLines] = useState(false);
+  const [stickyHeader, setStickyHeader] = useState(false);
+  const [resizableColumns, setResizableColumns] = useState(true);
   const [sorting, setSorting] = useState<TableProps.SortingState<any>>();
 
   function handleWidthChange(event: NonCancelableCustomEvent<TableProps.ColumnWidthsChangeDetail>) {
@@ -141,26 +127,23 @@ export default function App() {
       <Container header={<Header>Preferences</Header>}>
         <ColumnLayout columns={3} borders="vertical">
           <div>
-            <Checkbox checked={wrapLines} onChange={event => setUrlParams({ wrapLines: event.detail.checked })}>
+            <Checkbox checked={wrapLines} onChange={event => setWrapLines(event.detail.checked)}>
               Wrap lines
             </Checkbox>
             <Checkbox
               id="sticky-header-toggle"
               checked={stickyHeader}
-              onChange={event => setUrlParams({ stickyHeader: event.detail.checked })}
+              onChange={event => setStickyHeader(event.detail.checked)}
             >
               Sticky header
             </Checkbox>
             <Checkbox
               id="resizable-columns-toggle"
               checked={resizableColumns}
-              onChange={event => setUrlParams({ resizableColumns: event.detail.checked })}
+              onChange={event => setResizableColumns(event.detail.checked)}
             >
               Resizable columns
             </Checkbox>
-            <Checkbox checked={fullPage} onChange={event => setUrlParams({ fullPage: event.detail.checked })}>
-              Full page table
-            </Checkbox>
           </div>
           <div>
             {columnsConfig.map(column => (
@@ -199,7 +182,6 @@ export default function App() {
           sortingDescending={sorting?.isDescending}
           onSortingChange={event => setSorting(event.detail)}
           onColumnWidthsChange={handleWidthChange}
-          variant={fullPage ? 'full-page' : undefined}
         />
       </ScreenshotArea>
     </SpaceBetween>

diff --git a/src/table/__integ__/resizable-columns.test.ts b/src/table/__integ__/resizable-columns.test.ts
@@ -186,31 +186,6 @@ describe.each([true, false])('StickyHeader=%s', sticky => {
     })
   );
 
-  // The page width of 620px is an empirical value defined for the respective test page in VR
-  // so that the container width is slightly less than the table width (a sum of the column widths).
-  // In that case we expect the container to be scrollable and no auto-width set for the last column.
-  test(
-    'should set explicit width for the last column when table width exceeds container width',
-    useBrowser({ width: 620, height: 1000 }, async browser => {
-      const page = new TablePage(browser);
-      await browser.url('#/light/table/resizable-columns?visualRefresh=true');
-      await page.waitForVisible(tableWrapper.findBodyCell(2, 1).toSelector());
-
-      await expect(page.getColumnStyle(4)).resolves.toContain('width: 120px;');
-    })
-  );
-
-  test(
-    'should set explicit width for the last column when full-page table width exceeds container width',
-    useBrowser({ width: 600, height: 1000 }, async browser => {
-      const page = new TablePage(browser);
-      await browser.url('#/light/table/resizable-columns?visualRefresh=true&fullPage=true');
-      await page.waitForVisible(tableWrapper.findBodyCell(2, 1).toSelector());
-
-      await expect(page.getColumnStyle(4)).resolves.toContain('width: 120px;');
-    })
-  );
-
   test(
     'should shrink the last column after revealing a column',
     setupStickyTest(async page => {

diff --git a/src/table/internal.tsx b/src/table/internal.tsx
@@ -119,8 +119,6 @@ const InternalTable = React.forwardRef(
     const [tableWidth, tableMeasureRef] = useContainerQuery<number>(rect => rect.contentBoxWidth);
     const tableRefObject = useRef(null);
 
-    console.log(containerWidth, tableWidth);
-
     const secondaryWrapperRef = React.useRef<HTMLDivElement>(null);
     const theadRef = useRef<HTMLTableRowElement>(null);
     const stickyHeaderRef = React.useRef<StickyHeaderRef>(null);
@@ -235,7 +233,7 @@ const InternalTable = React.forwardRef(
       tableRole,
     };
 
-    const wrapperRef = useMergeRefs(wrapperRefObject, stickyState.refs.wrapper);
+    const wrapperRef = useMergeRefs(wrapperMeasureRef, wrapperRefObject, stickyState.refs.wrapper);
     const tableRef = useMergeRefs(tableMeasureRef, tableRefObject, stickyState.refs.table);
 
     const wrapperProps = getTableWrapperRoleProps({
@@ -334,7 +332,6 @@ const InternalTable = React.forwardRef(
               onScroll={handleScroll}
               {...wrapperProps}
             >
-              <div className={styles['wrapper-content-measure']} ref={wrapperMeasureRef}></div>
               {!!renderAriaLive && !!firstIndex && (
                 <LiveRegion>
                   <span>

diff --git a/src/table/styles.scss b/src/table/styles.scss
@@ -68,8 +68,7 @@
   scrollbar-width: none; /* Hide scrollbar in Firefox */
   &.variant-stacked,
   &.variant-container {
-    & > .table,
-    & > .wrapper-content-measure {
+    & > .table {
       padding-left: awsui.$space-table-horizontal;
       padding-right: awsui.$space-table-horizontal;
     }
@@ -108,6 +107,8 @@
     @supports (position: sticky) {
       position: sticky;
       left: 0;
+      // Offset table paddings to position centered when sticky
+      margin: 0 calc(-2 * #{awsui.$space-table-horizontal});
     }
     /* stylelint-enable plugin/no-unsupported-browser-features */
   }

diff --git a/src/table/thead.tsx b/src/table/thead.tsx
@@ -18,7 +18,7 @@ import { TableThElement } from './header-cell/th-element';
 import { findUpUntil } from '@cloudscape-design/component-toolkit/dom';
 
 export interface TheadProps {
-  containerWidth: null | number;
+  containerWidth: number | null;
   selectionType: TableProps.SelectionType | undefined;
   columnDefinitions: ReadonlyArray<TableProps.ColumnDefinition<any>>;
   sortingColumn: TableProps.SortingColumn<any> | undefined;