From eee631b37990327d33ffd751b1b6644add8c0375 Mon Sep 17 00:00:00 2001 From: Kenny Lin Date: Tue, 3 Mar 2026 17:03:04 -0500 Subject: [PATCH 01/12] starting point --- .../DataList/Tables/Rows/TableHeaderRow.tsx | 116 +++++++++--------- packages/gamut/src/List/ListRow.tsx | 6 +- packages/gamut/src/List/TableHeader.tsx | 3 +- packages/gamut/src/List/elements.tsx | 2 +- packages/gamut/src/List/utils.ts | 17 +++ 5 files changed, 81 insertions(+), 63 deletions(-) create mode 100644 packages/gamut/src/List/utils.ts diff --git a/packages/gamut/src/DataList/Tables/Rows/TableHeaderRow.tsx b/packages/gamut/src/DataList/Tables/Rows/TableHeaderRow.tsx index eadcef3b36a..0096dd94cd4 100644 --- a/packages/gamut/src/DataList/Tables/Rows/TableHeaderRow.tsx +++ b/packages/gamut/src/DataList/Tables/Rows/TableHeaderRow.tsx @@ -43,67 +43,65 @@ export const TableHeaderRow: HeaderComponent = ({ invisible={invisible} isDataList={listType === 'table' && variant !== 'table'} > - <> - {selectable && ( - - {!hideSelectAll && ( - - )} - - )} - {columns.map(({ key, header, sortable, filters, ...colProps }) => { - const rowProperty = key as string; - const renderKey = prefixId(`header-col-${rowProperty}`); - const columnText = String(header || key); - const sortDirection = headerRowDirections?.[rowProperty] ?? 'none'; - const ariaSortDirection = - sortDirection === 'none' - ? 'none' - : sortDirection === 'asc' - ? 'ascending' - : 'descending'; + {selectable && ( + + {!hideSelectAll && ( + + )} + + )} + {columns.map(({ key, header, sortable, filters, ...colProps }) => { + const rowProperty = key as string; + const renderKey = prefixId(`header-col-${rowProperty}`); + const columnText = String(header || key); + const sortDirection = headerRowDirections?.[rowProperty] ?? 'none'; + const ariaSortDirection = + sortDirection === 'none' + ? 'none' + : sortDirection === 'asc' + ? 'ascending' + : 'descending'; - return ( - - - {filters && ( - - )} - {sortable ? ( - - {columnText} - - ) : ( - columnText - )} - - - ); - })} - {expandable && ( - - + return ( + + + {filters && ( + + )} + {sortable ? ( + + {columnText} + + ) : ( + columnText + )} + - )} - + ); + })} + {expandable && ( + + + + )} ); }; diff --git a/packages/gamut/src/List/ListRow.tsx b/packages/gamut/src/List/ListRow.tsx index a682da3a112..5742da34ac2 100644 --- a/packages/gamut/src/List/ListRow.tsx +++ b/packages/gamut/src/List/ListRow.tsx @@ -9,6 +9,7 @@ import { WithChildrenProp } from '../utils'; import { RowEl } from './elements'; import { useListContext } from './ListProvider'; import { PublicListProps } from './types'; +import { markFirstCol } from './utils'; export interface RowProps extends Partial>> { @@ -84,7 +85,8 @@ export const ListRow = forwardRef( (!renderExpanded && !onClick) || isTable ? { ...rowConfig, ...rowProps } : { spacing: keepSpacingWhileExpanded ? rowConfig.spacing : undefined }; - let content = children; + const markedChildren = markFirstCol(children); + let content = markedChildren; const renderNumbering = isOl && renderExpanded === undefined && !onClick; if ((renderExpanded || Boolean(onClick)) && !isTable) { @@ -106,7 +108,7 @@ export const ListRow = forwardRef( {...rowProps} ref={ref} > - {children} + {markedChildren} ); } diff --git a/packages/gamut/src/List/TableHeader.tsx b/packages/gamut/src/List/TableHeader.tsx index 60810da9c91..00b28d1f4d6 100644 --- a/packages/gamut/src/List/TableHeader.tsx +++ b/packages/gamut/src/List/TableHeader.tsx @@ -4,6 +4,7 @@ import { Box } from '../Box'; import { HeaderRowEl } from './elements'; import { useListContext } from './ListProvider'; import { PublicListProps } from './types'; +import { markFirstCol } from './utils'; export interface TableHeaderProps extends Partial>> {} @@ -20,7 +21,7 @@ export const TableHeader = forwardRef( spacing={spacing} variant={variant} > - {children} + {markFirstCol(children)} ); diff --git a/packages/gamut/src/List/elements.tsx b/packages/gamut/src/List/elements.tsx index 86d8ee6cb70..7915eae6b95 100644 --- a/packages/gamut/src/List/elements.tsx +++ b/packages/gamut/src/List/elements.tsx @@ -407,7 +407,7 @@ const columnSpacing = variant({ prop: 'spacing', base: { px: { _: 0, c_base: 8, c_sm: 0 }, - '&:first-of-type': { + '&[data-first-col]': { pl: 8, }, }, diff --git a/packages/gamut/src/List/utils.ts b/packages/gamut/src/List/utils.ts new file mode 100644 index 00000000000..6e02a32aae4 --- /dev/null +++ b/packages/gamut/src/List/utils.ts @@ -0,0 +1,17 @@ +import { Children, cloneElement, isValidElement, ReactNode } from 'react'; + +/** + * Marks the first column with `data-first-col` for use as an attribute selector. + * Avoids `:first-of-type` (broken when `` and `` mix in a row) and + * `:first-child` (triggers Emotion's SSR warning). + */ +export const markFirstCol = (children: ReactNode): ReactNode => { + let marked = false; + return Children.map(children, (child) => { + if (!marked && isValidElement(child)) { + marked = true; + return cloneElement(child, { 'data-first-col': true } as object); + } + return child; + }); +}; From 21d5ce4d832d1f456ffb2b128761e2b4d8c37aab Mon Sep 17 00:00:00 2001 From: Kenny Lin Date: Wed, 4 Mar 2026 10:11:30 -0500 Subject: [PATCH 02/12] fix alignment for datalist header --- packages/gamut/src/DataList/Tables/Rows/TableHeaderRow.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/gamut/src/DataList/Tables/Rows/TableHeaderRow.tsx b/packages/gamut/src/DataList/Tables/Rows/TableHeaderRow.tsx index 0096dd94cd4..a91f9d5299a 100644 --- a/packages/gamut/src/DataList/Tables/Rows/TableHeaderRow.tsx +++ b/packages/gamut/src/DataList/Tables/Rows/TableHeaderRow.tsx @@ -77,7 +77,7 @@ export const TableHeaderRow: HeaderComponent = ({ columnHeader dataTablePadding={dataTablePadding} > - + {filters && ( Date: Wed, 4 Mar 2026 11:01:09 -0500 Subject: [PATCH 03/12] formatted --- packages/gamut/src/DataList/Tables/Rows/TableHeaderRow.tsx | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/gamut/src/DataList/Tables/Rows/TableHeaderRow.tsx b/packages/gamut/src/DataList/Tables/Rows/TableHeaderRow.tsx index a91f9d5299a..375d79c0617 100644 --- a/packages/gamut/src/DataList/Tables/Rows/TableHeaderRow.tsx +++ b/packages/gamut/src/DataList/Tables/Rows/TableHeaderRow.tsx @@ -77,7 +77,12 @@ export const TableHeaderRow: HeaderComponent = ({ columnHeader dataTablePadding={dataTablePadding} > - + {filters && ( Date: Fri, 6 Mar 2026 15:33:23 -0500 Subject: [PATCH 04/12] fixed last-of-type too --- packages/gamut/src/List/ListRow.tsx | 4 ++-- packages/gamut/src/List/TableHeader.tsx | 4 ++-- packages/gamut/src/List/elements.tsx | 2 +- packages/gamut/src/List/utils.ts | 23 ++++++++++++----------- 4 files changed, 17 insertions(+), 16 deletions(-) diff --git a/packages/gamut/src/List/ListRow.tsx b/packages/gamut/src/List/ListRow.tsx index 5742da34ac2..de1f514369c 100644 --- a/packages/gamut/src/List/ListRow.tsx +++ b/packages/gamut/src/List/ListRow.tsx @@ -9,7 +9,7 @@ import { WithChildrenProp } from '../utils'; import { RowEl } from './elements'; import { useListContext } from './ListProvider'; import { PublicListProps } from './types'; -import { markFirstCol } from './utils'; +import { markEdgeCols } from './utils'; export interface RowProps extends Partial>> { @@ -85,7 +85,7 @@ export const ListRow = forwardRef( (!renderExpanded && !onClick) || isTable ? { ...rowConfig, ...rowProps } : { spacing: keepSpacingWhileExpanded ? rowConfig.spacing : undefined }; - const markedChildren = markFirstCol(children); + const markedChildren = markEdgeCols(children); let content = markedChildren; const renderNumbering = isOl && renderExpanded === undefined && !onClick; diff --git a/packages/gamut/src/List/TableHeader.tsx b/packages/gamut/src/List/TableHeader.tsx index 00b28d1f4d6..31b5baf920c 100644 --- a/packages/gamut/src/List/TableHeader.tsx +++ b/packages/gamut/src/List/TableHeader.tsx @@ -4,7 +4,7 @@ import { Box } from '../Box'; import { HeaderRowEl } from './elements'; import { useListContext } from './ListProvider'; import { PublicListProps } from './types'; -import { markFirstCol } from './utils'; +import { markEdgeCols } from './utils'; export interface TableHeaderProps extends Partial>> {} @@ -21,7 +21,7 @@ export const TableHeader = forwardRef( spacing={spacing} variant={variant} > - {markFirstCol(children)} + {markEdgeCols(children)} ); diff --git a/packages/gamut/src/List/elements.tsx b/packages/gamut/src/List/elements.tsx index 7915eae6b95..4b390f0863b 100644 --- a/packages/gamut/src/List/elements.tsx +++ b/packages/gamut/src/List/elements.tsx @@ -387,7 +387,7 @@ const columnStates = states({ * In that case, the padding is instead added directly to the Expandable control. */ lastChildPadding: { - '&:last-of-type': { + '&[data-last-col]': { pr: 8, }, }, diff --git a/packages/gamut/src/List/utils.ts b/packages/gamut/src/List/utils.ts index 6e02a32aae4..b6f6359768a 100644 --- a/packages/gamut/src/List/utils.ts +++ b/packages/gamut/src/List/utils.ts @@ -1,17 +1,18 @@ import { Children, cloneElement, isValidElement, ReactNode } from 'react'; /** - * Marks the first column with `data-first-col` for use as an attribute selector. - * Avoids `:first-of-type` (broken when `` and `` mix in a row) and - * `:first-child` (triggers Emotion's SSR warning). + * Marks the first and last columns with `data-first-col` / `data-last-col` + * for use as attribute selectors. Avoids `:first-of-type` / `:last-of-type` + * (broken when `` and `` mix in a row) and `:first-child` / `:last-child` + * (triggers Emotion's SSR warning). */ -export const markFirstCol = (children: ReactNode): ReactNode => { - let marked = false; - return Children.map(children, (child) => { - if (!marked && isValidElement(child)) { - marked = true; - return cloneElement(child, { 'data-first-col': true } as object); - } - return child; +export const markEdgeCols = (children: ReactNode): ReactNode => { + const arr = Children.toArray(children).filter(isValidElement); + const lastIdx = arr.length - 1; + return arr.map((child, i) => { + const props: Record = {}; + if (i === 0) props['data-first-col'] = true; + if (i === lastIdx) props['data-last-col'] = true; + return Object.keys(props).length ? cloneElement(child, props as object) : child; }); }; From a36bc38474f5f42536f55f6697c7e73f73c65382 Mon Sep 17 00:00:00 2001 From: Kenny Lin Date: Fri, 6 Mar 2026 15:38:08 -0500 Subject: [PATCH 05/12] formatted --- packages/gamut/src/List/utils.ts | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/gamut/src/List/utils.ts b/packages/gamut/src/List/utils.ts index b6f6359768a..c1d3bf1bce1 100644 --- a/packages/gamut/src/List/utils.ts +++ b/packages/gamut/src/List/utils.ts @@ -13,6 +13,8 @@ export const markEdgeCols = (children: ReactNode): ReactNode => { const props: Record = {}; if (i === 0) props['data-first-col'] = true; if (i === lastIdx) props['data-last-col'] = true; - return Object.keys(props).length ? cloneElement(child, props as object) : child; + return Object.keys(props).length + ? cloneElement(child, props as object) + : child; }); }; From 30d73122c7e7c70649cbae2a398dc41fa3443121 Mon Sep 17 00:00:00 2001 From: Kenny Lin Date: Mon, 9 Mar 2026 16:47:23 -0400 Subject: [PATCH 06/12] changed up approach --- .../src/DataList/Tables/Rows/TableHeaderRow.tsx | 10 +++++++--- packages/gamut/src/DataList/Tables/Rows/TableRow.tsx | 12 ++++++++++-- packages/gamut/src/List/ListRow.tsx | 6 ++---- packages/gamut/src/List/TableHeader.tsx | 3 +-- 4 files changed, 20 insertions(+), 11 deletions(-) diff --git a/packages/gamut/src/DataList/Tables/Rows/TableHeaderRow.tsx b/packages/gamut/src/DataList/Tables/Rows/TableHeaderRow.tsx index 375d79c0617..0b502a9e653 100644 --- a/packages/gamut/src/DataList/Tables/Rows/TableHeaderRow.tsx +++ b/packages/gamut/src/DataList/Tables/Rows/TableHeaderRow.tsx @@ -44,7 +44,7 @@ export const TableHeaderRow: HeaderComponent = ({ isDataList={listType === 'table' && variant !== 'table'} > {selectable && ( - + {!hideSelectAll && ( )} - {columns.map(({ key, header, sortable, filters, ...colProps }) => { + {columns.map(({ key, header, sortable, filters, ...colProps }, idx) => { const rowProperty = key as string; const renderKey = prefixId(`header-col-${rowProperty}`); const columnText = String(header || key); @@ -68,11 +68,15 @@ export const TableHeaderRow: HeaderComponent = ({ : sortDirection === 'asc' ? 'ascending' : 'descending'; + const isFirst = !selectable && idx === 0; + const isLast = !expandable && idx === columns.length - 1; return ( + )} diff --git a/packages/gamut/src/DataList/Tables/Rows/TableRow.tsx b/packages/gamut/src/DataList/Tables/Rows/TableRow.tsx index 963e552792b..d1ff33102da 100644 --- a/packages/gamut/src/DataList/Tables/Rows/TableRow.tsx +++ b/packages/gamut/src/DataList/Tables/Rows/TableRow.tsx @@ -86,6 +86,7 @@ export const TableRow: DataRow = ({ {selectable && ( + + {render ? ( render(row) ) : typeof row[key] === 'string' || typeof row[key] === 'number' ? ( @@ -177,6 +184,7 @@ export const TableRow: DataRow = ({ {expandable && ( diff --git a/packages/gamut/src/List/ListRow.tsx b/packages/gamut/src/List/ListRow.tsx index de1f514369c..a682da3a112 100644 --- a/packages/gamut/src/List/ListRow.tsx +++ b/packages/gamut/src/List/ListRow.tsx @@ -9,7 +9,6 @@ import { WithChildrenProp } from '../utils'; import { RowEl } from './elements'; import { useListContext } from './ListProvider'; import { PublicListProps } from './types'; -import { markEdgeCols } from './utils'; export interface RowProps extends Partial>> { @@ -85,8 +84,7 @@ export const ListRow = forwardRef( (!renderExpanded && !onClick) || isTable ? { ...rowConfig, ...rowProps } : { spacing: keepSpacingWhileExpanded ? rowConfig.spacing : undefined }; - const markedChildren = markEdgeCols(children); - let content = markedChildren; + let content = children; const renderNumbering = isOl && renderExpanded === undefined && !onClick; if ((renderExpanded || Boolean(onClick)) && !isTable) { @@ -108,7 +106,7 @@ export const ListRow = forwardRef( {...rowProps} ref={ref} > - {markedChildren} + {children} ); } diff --git a/packages/gamut/src/List/TableHeader.tsx b/packages/gamut/src/List/TableHeader.tsx index 31b5baf920c..60810da9c91 100644 --- a/packages/gamut/src/List/TableHeader.tsx +++ b/packages/gamut/src/List/TableHeader.tsx @@ -4,7 +4,6 @@ import { Box } from '../Box'; import { HeaderRowEl } from './elements'; import { useListContext } from './ListProvider'; import { PublicListProps } from './types'; -import { markEdgeCols } from './utils'; export interface TableHeaderProps extends Partial>> {} @@ -21,7 +20,7 @@ export const TableHeader = forwardRef( spacing={spacing} variant={variant} > - {markEdgeCols(children)} + {children} ); From ffc5b3b0cada862475d78ef6cf8a58b00212c96c Mon Sep 17 00:00:00 2001 From: Kenny Lin Date: Mon, 9 Mar 2026 17:18:57 -0400 Subject: [PATCH 07/12] updated test and removed utils --- .../gamut/src/List/__tests__/List.test.tsx | 2 +- packages/gamut/src/List/utils.ts | 20 ------------------- 2 files changed, 1 insertion(+), 21 deletions(-) delete mode 100644 packages/gamut/src/List/utils.ts diff --git a/packages/gamut/src/List/__tests__/List.test.tsx b/packages/gamut/src/List/__tests__/List.test.tsx index 71f2e500f36..2b6e549c4b8 100644 --- a/packages/gamut/src/List/__tests__/List.test.tsx +++ b/packages/gamut/src/List/__tests__/List.test.tsx @@ -14,7 +14,7 @@ expect.extend(matchers); const renderView = setupRtl(List, { children: ( - Hello + Hello ), id: 'list-el', diff --git a/packages/gamut/src/List/utils.ts b/packages/gamut/src/List/utils.ts deleted file mode 100644 index c1d3bf1bce1..00000000000 --- a/packages/gamut/src/List/utils.ts +++ /dev/null @@ -1,20 +0,0 @@ -import { Children, cloneElement, isValidElement, ReactNode } from 'react'; - -/** - * Marks the first and last columns with `data-first-col` / `data-last-col` - * for use as attribute selectors. Avoids `:first-of-type` / `:last-of-type` - * (broken when `` and `` mix in a row) and `:first-child` / `:last-child` - * (triggers Emotion's SSR warning). - */ -export const markEdgeCols = (children: ReactNode): ReactNode => { - const arr = Children.toArray(children).filter(isValidElement); - const lastIdx = arr.length - 1; - return arr.map((child, i) => { - const props: Record = {}; - if (i === 0) props['data-first-col'] = true; - if (i === lastIdx) props['data-last-col'] = true; - return Object.keys(props).length - ? cloneElement(child, props as object) - : child; - }); -}; From cf4a206881ab6f3cbbaa0d5d96f9cd9b3c92d78f Mon Sep 17 00:00:00 2001 From: Kenny Lin Date: Mon, 9 Mar 2026 17:23:35 -0400 Subject: [PATCH 08/12] formatted --- packages/gamut/src/List/__tests__/List.test.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/gamut/src/List/__tests__/List.test.tsx b/packages/gamut/src/List/__tests__/List.test.tsx index 2b6e549c4b8..1c4ffae13bd 100644 --- a/packages/gamut/src/List/__tests__/List.test.tsx +++ b/packages/gamut/src/List/__tests__/List.test.tsx @@ -14,7 +14,9 @@ expect.extend(matchers); const renderView = setupRtl(List, { children: ( - Hello + + Hello + ), id: 'list-el', From 8ac13c13f36dae1df3b73e988a567907b340bbee Mon Sep 17 00:00:00 2001 From: Kenny Lin Date: Mon, 9 Mar 2026 21:38:11 -0400 Subject: [PATCH 09/12] rework approach again... --- .../DataList/Tables/Rows/TableHeaderRow.tsx | 13 +++------ .../src/DataList/Tables/Rows/TableRow.tsx | 19 +++---------- packages/gamut/src/List/ListCol.tsx | 1 - packages/gamut/src/List/elements.tsx | 27 +++++-------------- 4 files changed, 12 insertions(+), 48 deletions(-) diff --git a/packages/gamut/src/DataList/Tables/Rows/TableHeaderRow.tsx b/packages/gamut/src/DataList/Tables/Rows/TableHeaderRow.tsx index 0b502a9e653..705c0705c49 100644 --- a/packages/gamut/src/DataList/Tables/Rows/TableHeaderRow.tsx +++ b/packages/gamut/src/DataList/Tables/Rows/TableHeaderRow.tsx @@ -35,7 +35,6 @@ export const TableHeaderRow: HeaderComponent = ({ const { expandable, selectable, onSelect, onFilter, onSort, prefixId } = useControlContext(); const { variant, listType } = useListContext(); - const dataTablePadding = listType === 'table' && variant === 'table'; const headerRowDirections = useListState().query?.sort; return ( @@ -44,7 +43,7 @@ export const TableHeaderRow: HeaderComponent = ({ isDataList={listType === 'table' && variant !== 'table'} > {selectable && ( - + {!hideSelectAll && ( )} - {columns.map(({ key, header, sortable, filters, ...colProps }, idx) => { + {columns.map(({ key, header, sortable, filters, ...colProps }) => { const rowProperty = key as string; const renderKey = prefixId(`header-col-${rowProperty}`); const columnText = String(header || key); @@ -68,18 +67,12 @@ export const TableHeaderRow: HeaderComponent = ({ : sortDirection === 'asc' ? 'ascending' : 'descending'; - const isFirst = !selectable && idx === 0; - const isLast = !expandable && idx === columns.length - 1; - return ( + )} diff --git a/packages/gamut/src/DataList/Tables/Rows/TableRow.tsx b/packages/gamut/src/DataList/Tables/Rows/TableRow.tsx index d1ff33102da..817418c6bda 100644 --- a/packages/gamut/src/DataList/Tables/Rows/TableRow.tsx +++ b/packages/gamut/src/DataList/Tables/Rows/TableRow.tsx @@ -9,7 +9,6 @@ import { import { Text } from '../../..'; import { ListCol, ListRow } from '../../../List'; import { ColProps } from '../../../List/elements'; -import { useListContext } from '../../../List/ListProvider'; import { Shimmer } from '../../../Loading/Shimmer'; import { ExpandControl, SelectControl } from '../../Controls'; import { useControlContext } from '../../hooks/useListControls'; @@ -48,10 +47,7 @@ export const TableRow: DataRow = ({ prefixId, } = useControlContext(); - const { variant, listType } = useListContext(); - const dataTablePadding = listType === 'table' && variant === 'table'; - - const listColProps = { dataTablePadding, showOverflow }; + const listColProps = { showOverflow }; const controlIndices = useMemo(() => { const controlIndices = new Map(); @@ -86,7 +82,6 @@ export const TableRow: DataRow = ({ {selectable && ( + + {render ? ( render(row) ) : typeof row[key] === 'string' || typeof row[key] === 'number' ? ( @@ -184,7 +172,6 @@ export const TableRow: DataRow = ({ {expandable && ( diff --git a/packages/gamut/src/List/ListCol.tsx b/packages/gamut/src/List/ListCol.tsx index 0aa54bcedc0..1397710844b 100644 --- a/packages/gamut/src/List/ListCol.tsx +++ b/packages/gamut/src/List/ListCol.tsx @@ -27,7 +27,6 @@ export const ListCol = forwardRef( as={colEl} columnHeader={columnHeader} delimiter={sticky && activeVariants.variant === 'table'} - lastChildPadding={!(type === 'expandControl')} ref={ref} sticky={sticky} type={isOrderedHeader ? 'orderedHeader' : type} diff --git a/packages/gamut/src/List/elements.tsx b/packages/gamut/src/List/elements.tsx index 4b390f0863b..e5a32ffff2e 100644 --- a/packages/gamut/src/List/elements.tsx +++ b/packages/gamut/src/List/elements.tsx @@ -99,6 +99,10 @@ const interactiveState = states({ const spacingVariants = variant({ prop: 'spacing', + base: { + px: { _: 8, c_base: 0, c_sm: 8 }, + // px: 8, + }, variants: { normal: { rowGap: { _: 0, c_base: 8, c_sm: 0 }, @@ -110,7 +114,6 @@ const spacingVariants = variant({ columnGap: { _: 32, c_base: 8, c_sm: 32 }, gap: { _: 40, c_base: 8, c_sm: 40 }, }, - compact: { gap: 0, py: 0, @@ -374,23 +377,6 @@ const columnStates = states({ whiteSpace: 'normal', alignItems: 'flex-end', }, - dataTablePadding: { - '&:first-of-type': { - pl: 8, - }, - '&:last-of-type': { - pr: 8, - }, - }, - /** - * We add this to every RowEl except expandable DataList because it causes a layout shift. - * In that case, the padding is instead added directly to the Expandable control. - */ - lastChildPadding: { - '&[data-last-col]': { - pr: 8, - }, - }, wrap: { whiteSpace: 'normal', }, @@ -407,9 +393,6 @@ const columnSpacing = variant({ prop: 'spacing', base: { px: { _: 0, c_base: 8, c_sm: 0 }, - '&[data-first-col]': { - pl: 8, - }, }, variants: { normal: { @@ -485,6 +468,8 @@ export const StickyHeaderColWrapper = styled.th( left: 0, zIndex: -1, }, + // p: 0 removes the browser's default padding of 1px + p: 0, display: 'flex', flexShrink: 0, position: 'sticky', From 60c383275cdb60367073e24eda79850405b07fa9 Mon Sep 17 00:00:00 2001 From: Kenny Lin Date: Tue, 10 Mar 2026 10:10:31 -0400 Subject: [PATCH 10/12] clean up time --- packages/gamut/src/List/__tests__/List.test.tsx | 4 +--- packages/gamut/src/List/elements.tsx | 1 - 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/packages/gamut/src/List/__tests__/List.test.tsx b/packages/gamut/src/List/__tests__/List.test.tsx index 1c4ffae13bd..71f2e500f36 100644 --- a/packages/gamut/src/List/__tests__/List.test.tsx +++ b/packages/gamut/src/List/__tests__/List.test.tsx @@ -14,9 +14,7 @@ expect.extend(matchers); const renderView = setupRtl(List, { children: ( - - Hello - + Hello ), id: 'list-el', diff --git a/packages/gamut/src/List/elements.tsx b/packages/gamut/src/List/elements.tsx index e5a32ffff2e..6b4abbb4d3c 100644 --- a/packages/gamut/src/List/elements.tsx +++ b/packages/gamut/src/List/elements.tsx @@ -101,7 +101,6 @@ const spacingVariants = variant({ prop: 'spacing', base: { px: { _: 8, c_base: 0, c_sm: 8 }, - // px: 8, }, variants: { normal: { From 566a00e189a59664761811f7770382c475b1b717 Mon Sep 17 00:00:00 2001 From: Kenny Lin Date: Tue, 10 Mar 2026 11:20:54 -0400 Subject: [PATCH 11/12] fix test --- packages/gamut/src/List/__tests__/List.test.tsx | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/packages/gamut/src/List/__tests__/List.test.tsx b/packages/gamut/src/List/__tests__/List.test.tsx index 71f2e500f36..71ac957db4f 100644 --- a/packages/gamut/src/List/__tests__/List.test.tsx +++ b/packages/gamut/src/List/__tests__/List.test.tsx @@ -51,11 +51,11 @@ describe('List', () => { it('configures columns with the correct variants', () => { const { view } = renderView(); + const rowEl = view.getByTestId('row-el'); const colEl = view.getByText('Hello'); - expect(colEl).not.toHaveStyle({ py: 16 }); - expect(colEl).toHaveStyle({ paddingLeft: theme.spacing[8] }); - expect(colEl).toHaveStyle({ paddingRight: theme.spacing[8] }); + expect(rowEl).toHaveStyle({ paddingLeft: theme.spacing[8] }); + expect(rowEl).toHaveStyle({ paddingRight: theme.spacing[8] }); expect(colEl).not.toHaveStyle({ position: 'sticky' }); }); From f2850aab88cb5692934bab3b94f902173abce8e0 Mon Sep 17 00:00:00 2001 From: Kenny Lin Date: Mon, 16 Mar 2026 16:31:54 -0400 Subject: [PATCH 12/12] removed red bg from list story --- .../src/lib/Organisms/Lists & Tables/List/List.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx b/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx index 5bb383969f0..2d70635fc15 100644 --- a/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx +++ b/packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx @@ -99,7 +99,7 @@ export const Table: Story = { export const Plain: Story = { args: { spacing: 'condensed', variant: 'plain' }, render: (args) => ( - + ),