Skip to content

fix(DataList): Padding on first column and alignment for headers #3277

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
LinKCoding wants to merge 16 commits into
base: main
Choose a base branch
from
+70 −91
Open

fix(DataList): Padding on first column and alignment for headers #3277

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
16 commits
Select commit Hold shift + click to select a range
eee631b
starting point
LinKCoding Mar 3, 2026
21d5ce4
fix alignment for datalist header
LinKCoding Mar 4, 2026
0301c83
formatted
LinKCoding Mar 4, 2026
ca3df60
Merge branch 'main' into kl-gmt-1544-datalist-th-td-padding
LinKCoding Mar 6, 2026
dcac7fe
fixed last-of-type too
LinKCoding Mar 6, 2026
a36bc38
formatted
LinKCoding Mar 6, 2026
30d7312
changed up approach
LinKCoding Mar 9, 2026
ffc5b3b
updated test and removed utils
LinKCoding Mar 9, 2026
cf4a206
formatted
LinKCoding Mar 9, 2026
8ac13c1
rework approach again...
LinKCoding Mar 10, 2026
60c3832
clean up time
LinKCoding Mar 10, 2026
566a00e
fix test
LinKCoding Mar 10, 2026
d8acde0
Merge branch 'main' into kl-gmt-1544-datalist-th-td-padding
LinKCoding Mar 12, 2026
0039b65
merge main in
LinKCoding Mar 12, 2026
f2850aa
removed red bg from list story
LinKCoding Mar 16, 2026
80a2fdf
Merge branch 'main' into kl-gmt-1544-datalist-th-td-padding
LinKCoding Mar 17, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
120 changes: 60 additions & 60 deletions packages/gamut/src/DataList/Tables/Rows/TableHeaderRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,75 +35,75 @@ 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 (
<StyledHeaderRow
invisible={invisible}
isDataList={listType === 'table' && variant !== 'table'}
>
<>
{selectable && (
<ListCol size="content">
{!hideSelectAll && (
<SelectControl
disabled={empty}
label="Select All"
name={prefixId('all')}
rowId="header"
selected={selected}
onSelect={onSelect}
/>
)}
</ListCol>
)}
{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 (
<ListCol
key={renderKey}
{...colProps}
aria-sort={sortable ? ariaSortDirection : undefined}
columnHeader
dataTablePadding={dataTablePadding}
{selectable && (
Copy link
Contributor Author

@LinKCoding LinKCoding Mar 4, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

removed the fragment b.c. it was interfering with the addition of data-first-col for the first element in the TableHeader
Also doesn't seem necessary

Copy link
Contributor Author

@LinKCoding LinKCoding Mar 10, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not using data-*-col approach anymore, so re-adding is fine, but it's also not necessary from what I can tell

<ListCol size="content">
{!hideSelectAll && (
<SelectControl
disabled={empty}
label="Select All"
name={prefixId('all')}
rowId="header"
selected={selected}
onSelect={onSelect}
/>
)}
</ListCol>
)}
{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 (
<ListCol
key={renderKey}
{...colProps}
aria-sort={sortable ? ariaSortDirection : undefined}
columnHeader
>
<FlexBox
alignItems={selectable ? 'center' : 'flex-end'}
gap={8}
height="100%"
width="100%"
>
<FlexBox alignItems="flex-end" gap={8} height="100%" width="100%">
{filters && (
<FilterControl
columnKey={rowProperty}
justify={colProps.justify}
options={filters}
onFilter={onFilter}
/>
)}
{sortable ? (
<SortControl columnKey={rowProperty} onSort={onSort}>
{columnText}
</SortControl>
) : (
columnText
)}
</FlexBox>
</ListCol>
);
})}
{expandable && (
<ListCol ghost size="content">
<ExpandControl />
{filters && (
<FilterControl
columnKey={rowProperty}
justify={colProps.justify}
options={filters}
onFilter={onFilter}
/>
)}
{sortable ? (
<SortControl columnKey={rowProperty} onSort={onSort}>
{columnText}
</SortControl>
) : (
columnText
)}
</FlexBox>
</ListCol>
)}
</>
);
})}
{expandable && (
<ListCol ghost size="content">
<ExpandControl />
</ListCol>
)}
</StyledHeaderRow>
);
};
Expand Down
7 changes: 1 addition & 6 deletions packages/gamut/src/DataList/Tables/Rows/TableRow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -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<number, number>();
Expand Down Expand Up @@ -113,7 +109,6 @@ export const TableRow: DataRow = ({
fill,
type,
};

if (type === 'control') {
const controlIndex = controlIndices.get(index) ?? 0;

Expand Down
1 change: 0 additions & 1 deletion packages/gamut/src/List/ListCol.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ export const ListCol = forwardRef<HTMLDivElement, ListColProps>(
as={colEl}
columnHeader={columnHeader}
delimiter={sticky && activeVariants.variant === 'table'}
lastChildPadding={!(type === 'expandControl')}
ref={ref}
sticky={sticky}
type={isOrderedHeader ? 'orderedHeader' : type}
Expand Down
5 changes: 3 additions & 2 deletions packages/gamut/src/List/__tests__/List.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -61,11 +61,12 @@ describe('List', () => {
: 'paddingRight';

const { view } = renderView();
const rowEl = view.getByRole('listitem');
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' });
});

Expand Down
26 changes: 5 additions & 21 deletions packages/gamut/src/List/elements.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,9 @@ const interactiveState = states({

const spacingVariants = variant({
prop: 'spacing',
base: {
px: { _: 8, c_base: 0, c_sm: 8 },
},
variants: {
normal: {
rowGap: { _: 0, c_base: 8, c_sm: 0 },
Expand All @@ -110,7 +113,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,
Expand Down Expand Up @@ -374,23 +376,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: {
'&:last-of-type': {
pr: 8,
},
},
wrap: {
whiteSpace: 'normal',
},
Expand All @@ -407,9 +392,6 @@ const columnSpacing = variant({
prop: 'spacing',
base: {
px: { _: 0, c_base: 8, c_sm: 0 },
'&:first-of-type': {
pl: 8,
},
},
variants: {
normal: {
Expand Down Expand Up @@ -485,6 +467,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',
Expand Down
2 changes: 1 addition & 1 deletion packages/styleguide/src/lib/Organisms/Lists & Tables/List/List.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -99,7 +99,7 @@ export const Table: Story = {
export const Plain: Story = {
args: { spacing: 'condensed', variant: 'plain' },
render: (args) => (
<Box bg="red" width={1}>
<Box width={1}>
<ListExample {...args} />
</Box>
),
Expand Down
Loading