chore(List): swap List to container queries

packages/gamut/src/DataList/Controls/ExpandControl.tsx

@@ -21,14 +21,14 @@ export const ExpandControl: React.FC<ExpandColProps> = ({
   expanded,
   onExpand,
 }) => (
-  <FlexBox center mt={{ _: 8, xs: 0 }} pl={{ _: 0, xs: 16 }} width={1}>
+  <FlexBox center mt={{ _: 8, c_sm: 0 }} pl={{ _: 0, c_sm: 16 }} width={1}>
     <TextButton
       aria-expanded={expanded}
       aria-label={`Expand ${id} Row`}
       disabled={disabled}
       size="small"
       variant="secondary"
-      width={{ _: 1, xs: 32 }}
+      width={{ _: 1, c_sm: 32 }}
       onClick={() => {
         onExpand?.({ rowId: id, toggle: expanded });
       }}

packages/gamut/src/DataList/DataGrid.tsx

@@ -55,6 +55,8 @@ export function DataGrid<
     hideSelectAll = false,
     scrollToTopOnUpdate = false,
     id,
+    wrapperWidth,
+    overflow,
   } = props;
 
   const empty = rows.length === 0;
@@ -117,11 +119,13 @@ export function DataGrid<
           id={id}
           loading={loading}
           minHeight={minHeight}
+          overflow={overflow}
           scrollToTopOnUpdate={scrollToTopOnUpdate}
           scrollable={scrollable}
           shadow={shadow}
           spacing={spacing}
           variant={variant}
+          wrapperWidth={wrapperWidth ?? undefined}
         >
           {renderedRows.map((row) => {
             const rowId = row[idKey];

packages/gamut/src/DataList/Tables/Rows/TableRow.tsx

@@ -77,7 +77,7 @@ export const TableRow: DataRow = ({
       {selectable && (
         <ListCol
           {...listColProps}
-          display={{ _: 'flex', xs: 'flex' }}
+          display={{ _: 'flex', c_sm: 'flex' }}
           size="content"
           type="control"
         >
@@ -136,7 +136,11 @@ export const TableRow: DataRow = ({
         );
       })}
       {expandable && (
-        <ListCol {...listColProps} order={[1000, 'initial']} size="content">
+        <ListCol
+          {...listColProps}
+          order={{ _: 1000, c_sm: 'initial' }}
+          size="content"
+        >
           <ExpandControl
             disabled={loading}
             expanded={expanded}

packages/gamut/src/DataList/__tests__/DataGrid.test.tsx

@@ -92,7 +92,7 @@ describe('DataGrid', () => {
     });
 
     it("clicking the row's checkbox deselects the row when the row is already selected", () => {
-      renderView({ selected: [1] });
+      renderView({ selected: ['1'] });
 
       const checkbox = screen.getByRole('checkbox', { name: 'Select 1' });
 
@@ -110,7 +110,7 @@ describe('DataGrid', () => {
     });
 
     it('selecting another row adds the row to the selection', () => {
-      renderView({ selected: [2] });
+      renderView({ selected: ['2'] });
 
       const checkbox = screen.getByRole('checkbox', { name: 'Select 1' });
 
@@ -173,14 +173,14 @@ describe('DataGrid', () => {
 
   describe('Expanding Rows', () => {
     it('Renders an expanded row when passed the correct id', () => {
-      renderView({ expanded: [1] });
+      renderView({ expanded: ['1'] });
 
       screen.getByText('Expanded 1');
       screen.getByRole('button', { expanded: true });
     });
 
     it('allows multiple expanded rows by default', () => {
-      renderView({ expanded: [1, 2] });
+      renderView({ expanded: ['1', '2'] });
 
       screen.getByText('Expanded 1');
       screen.getByText('Expanded 2');
@@ -205,7 +205,7 @@ describe('DataGrid', () => {
       });
     });
     it('calls the onRowExpand with the id omitted when an expanded row toggle is clicked', () => {
-      renderView({ expanded: [1] });
+      renderView({ expanded: ['1'] });
 
       const expandButton = screen.getByRole('button', { name: `Expand 1 Row` });
 
@@ -516,4 +516,36 @@ describe('DataGrid', () => {
       });
     });
   });
+
+  describe('wrapperWidth prop', () => {
+    it('applies wrapperWidth to the table container when provided', () => {
+      renderView({ wrapperWidth: '600px' });
+
+      const tableContainer = screen.getByTestId('scrollable-test');
+      expect(tableContainer).toHaveStyle({
+        maxWidth: '600px',
+        width: '600px',
+      });
+    });
+
+    it('uses default width when wrapperWidth is not provided', () => {
+      renderView();
+
+      const tableContainer = screen.getByTestId('scrollable-test');
+      expect(tableContainer).toHaveStyle({
+        maxWidth: '100%',
+        width: 'inherit',
+      });
+    });
+
+    it('passes wrapperWidth through to the underlying List component', () => {
+      renderView({ wrapperWidth: '750px' });
+
+      const tableContainer = screen.getByTestId('scrollable-test');
+      expect(tableContainer).toHaveStyle({
+        maxWidth: '750px',
+        width: '750px',
+      });
+    });
+  });
 });

packages/gamut/src/List/List.tsx

@@ -29,6 +29,11 @@ export interface ListProps extends AllListProps<ComponentProps<typeof ListEl>> {
    * How the List container should handle overflow.
    */
   overflow?: BoxProps['overflow'];
+  /**
+   * This is an override for the width of the wrapper element that contains the List.
+   * It is useful for custom scroll and breakpoint handling. Use with caution.
+   */
+  wrapperWidth?: BoxProps['width'];
 }
 
 export const List = forwardRef<HTMLUListElement, ListProps>(
@@ -49,6 +54,7 @@ export const List = forwardRef<HTMLUListElement, ListProps>(
       emptyMessage,
       overflow = 'auto',
       scrollToTopOnUpdate = false,
+      wrapperWidth,
       ...rest
     },
     ref
@@ -140,12 +146,12 @@ export const List = forwardRef<HTMLUListElement, ListProps>(
             as={isTable && !isEmpty && !loading ? 'table' : 'div'}
             data-testid={`scrollable-${id}`}
             height={isEmpty ? height : 'fit-content'}
-            maxWidth={1}
+            maxWidth={wrapperWidth || 1}
             minHeight={minHeight}
             overflow="inherit"
             position="relative"
             ref={!isEmpty ? tableRef : undefined}
-            width="inherit"
+            width={wrapperWidth || 'inherit'}
           >
             {content}
           </Box>

packages/gamut/src/List/ListCol.tsx

@@ -31,7 +31,10 @@ export const ListCol = forwardRef<HTMLDivElement, ListColProps>(
     );
     if (sticky) {
       return (
-        <StickyHeaderColWrapper data-testid="header-container">
+        <StickyHeaderColWrapper
+          as={isTable ? 'th' : 'div'}
+          data-testid="header-container"
+        >
           {col}
         </StickyHeaderColWrapper>
       );

packages/gamut/src/List/ListRow.tsx

@@ -38,7 +38,7 @@ export type ListRowProps = ExpandableRowProps | SimpleRowProps;
 
 const expandStyles = css({
   overflow: 'hidden',
-  gridColumn: { _: 'span 2', xs: 'span 12' },
+  gridColumn: { _: 'span 2', c_sm: 'span 12' },
 });
 
 const DivExpand = styled(motion.div)(expandStyles);
@@ -124,10 +124,10 @@ export const ListRow = forwardRef<HTMLLIElement, ListRowProps>(
       <RowEl
         aria-live={renderExpanded ? 'polite' : undefined}
         expanded={isTable ? undefined : !!renderExpanded}
-        gridAutoRows={{ _: undefined, xs: 'minmax(1.5rem, max-content) 6fr' }}
+        gridAutoRows={{ _: undefined, c_sm: 'minmax(1.5rem, max-content) 6fr' }}
         gridTemplateColumns={{
           _: 'minmax(0, 1fr) max-content',
-          xs: gridTemplateColumns,
+          c_sm: gridTemplateColumns,
         }}
         isOl={renderNumbering}
         role={role}

packages/gamut/src/List/__tests__/List.test.tsx

@@ -9,6 +9,8 @@ import { ListRow } from '../ListRow';
 // Add the custom matchers provided by '@emotion/jest'
 expect.extend(matchers);
 
+// NOTE: We have removed the query styling tests here, they are to be replaced with visual tests: GM-1240
+
 const renderView = setupRtl(List, {
   children: (
     <ListRow data-testid="row-el">
@@ -44,9 +46,6 @@ describe('List', () => {
 
     expect(rowEl).toHaveStyle({ borderTop: 'none' });
     expect(rowEl).toHaveStyle({ gap: theme.spacing[8] });
-    expect(rowEl).toHaveStyleRule('gap', theme.spacing[40], {
-      media: theme.breakpoints.xs,
-    });
   });
 
   it('configures columns with the correct variants', () => {
@@ -55,12 +54,8 @@ describe('List', () => {
     const colEl = view.getByText('Hello');
 
     expect(colEl).not.toHaveStyle({ py: 16 });
-    expect(colEl).toHaveStyleRule('padding-top', theme.spacing[16], {
-      media: theme.breakpoints.xs,
-    });
-    expect(colEl).toHaveStyleRule('padding-bottom', theme.spacing[16], {
-      media: theme.breakpoints.xs,
-    });
+    expect(colEl).toHaveStyleRule('padding-left', theme.spacing[8]);
+    expect(colEl).toHaveStyleRule('padding-right', theme.spacing[8]);
 
     expect(colEl).not.toHaveStyle({ position: 'sticky' });
   });
@@ -128,4 +123,27 @@ describe('List', () => {
     });
     expect(view.queryByText('Surprise!')).toBeNull();
   });
+
+  describe('wrapperWidth prop', () => {
+    it('applies wrapperWidth to the table container when provided', () => {
+      const { view } = renderView({ wrapperWidth: '500px' });
+
+      const tableContainer = view.container.querySelector(
+        '[data-testid="scrollable-list-el"]'
+      );
+      expect(tableContainer).toHaveStyle({ maxWidth: '500px', width: '500px' });
+    });
+
+    it('uses inherit width when wrapperWidth is not provided', () => {
+      const { view } = renderView();
+
+      const tableContainer = view.container.querySelector(
+        '[data-testid="scrollable-list-el"]'
+      );
+      expect(tableContainer).toHaveStyle({
+        maxWidth: '100%',
+        width: 'inherit',
+      });
+    });
+  });
 });