Skip to content

feat: Layout related logical CSS props #3267

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

Merged
LinKCoding merged 3 commits into from
Mar 5, 2026
Merged

feat: Layout related logical CSS props #3267

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
47b6975
cleaned working state
LinKCoding Feb 12, 2026
323e40f
fix ContentContainer test
LinKCoding Mar 5, 2026
846971c
formatted
LinKCoding Mar 5, 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
61 changes: 54 additions & 7 deletions packages/gamut-styles/src/variance/config.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -320,16 +320,63 @@ export const layout = {
overflowY: { property: 'overflowY' },
dimensions: {
property: 'width',
properties: ['width', 'height'],
properties: {
physical: ['width', 'height'],
logical: ['inlineSize', 'blockSize'],
},
resolveProperty: getPropertyMode,
transform: transformSize,
},
width: {
property: {
physical: 'width',
logical: 'inlineSize',
},
resolveProperty: getPropertyMode,
transform: transformSize,
},
minWidth: {
property: {
physical: 'minWidth',
logical: 'minInlineSize',
},
resolveProperty: getPropertyMode,
transform: transformSize,
},
maxWidth: {
property: {
physical: 'maxWidth',
logical: 'maxInlineSize',
},
resolveProperty: getPropertyMode,
transform: transformSize,
},
height: {
property: {
physical: 'height',
logical: 'blockSize',
},
resolveProperty: getPropertyMode,
transform: transformSize,
},
minHeight: {
property: {
physical: 'minHeight',
logical: 'minBlockSize',
},
resolveProperty: getPropertyMode,
transform: transformSize,
},
maxHeight: {
property: {
physical: 'maxHeight',
logical: 'maxBlockSize',
},
resolveProperty: getPropertyMode,
transform: transformSize,
},
width: { property: 'width', transform: transformSize },
minWidth: { property: 'minWidth', transform: transformSize },
maxWidth: { property: 'maxWidth', transform: transformSize },
height: { property: 'height', transform: transformSize },
minHeight: { property: 'minHeight', transform: transformSize },
maxHeight: { property: 'maxHeight', transform: transformSize },
verticalAlign: { property: 'verticalAlign' },
direction: { property: 'direction' },
...selfAlignments,
...gridItems,
...flexItems,
Expand Down
9 changes: 5 additions & 4 deletions packages/gamut/src/ContentContainer/__tests__/ContentContainer.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,11 +6,12 @@ import { ContentContainer } from '..';
const renderView = setupRtl(ContentContainer);

describe('ContentContainer', () => {
it('has maxWidth of contentWidths.max when size is medium', () => {
it('has maxInlineSize of contentWidths.max when size is medium', () => {
Copy link
Copy Markdown
Contributor

@dreamwasp dreamwasp Mar 4, 2026

Choose a reason for hiding this comment

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

is there a reason for the boolean if we aren't testing both props

Copy link
Copy Markdown
Contributor Author

@LinKCoding LinKCoding Mar 5, 2026

Choose a reason for hiding this comment

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

Oh... nice catch —
in fixing this issue, turns out that the test was still failing (locally) but not showing up in GH for some reason.

Will update soon!

const { view } = renderView({ size: 'medium' });

expect(view.container.firstChild).toHaveStyle(
`maxWidth: ${contentWidths.max}`
);
expect(
window.getComputedStyle(view.container.firstChild as Element)
.maxInlineSize
).toBe(contentWidths.max);
});
});
77 changes: 52 additions & 25 deletions packages/gamut/src/DataList/__tests__/DataGrid.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,12 @@
import { setupRtl } from '@codecademy/gamut-tests';
import { MockGamutProvider, setupRtl } from '@codecademy/gamut-tests';
import { matchers } from '@emotion/jest';
import { act, fireEvent, RenderResult, screen } from '@testing-library/react';
import {
act,
fireEvent,
render,
RenderResult,
screen,
} from '@testing-library/react';

import { DataGrid, DataGridProps } from '../DataGrid';
import { ColumnConfig } from '../types';
Expand Down Expand Up @@ -583,37 +589,58 @@ describe('DataGrid', () => {
});
});

describe('wrapperWidth prop', () => {
it('applies wrapperWidth to the table container when provided', () => {
renderView({ wrapperWidth: '600px' });
describe.each([
{
useLogicalProperties: true,
widthProp: 'inlineSize',
maxWidthProp: 'maxInlineSize',
},
{
useLogicalProperties: false,
widthProp: 'width',
maxWidthProp: 'maxWidth',
},
])(
'wrapperWidth prop (useLogicalProperties: $useLogicalProperties)',
({ useLogicalProperties, widthProp, maxWidthProp }) => {
const renderWithLogicalProps = (overrides?: Partial<Props>) =>
render(
<MockGamutProvider useLogicalProperties={useLogicalProperties}>
<DataGrid {...props} {...overrides} />
</MockGamutProvider>
);

const tableContainer = screen.getByTestId('scrollable-test');
expect(tableContainer).toHaveStyle({
maxWidth: '600px',
width: '600px',
it('applies wrapperWidth to the table container when provided', () => {
renderWithLogicalProps({ wrapperWidth: '600px' });

const tableContainer = screen.getByTestId('scrollable-test');
expect(tableContainer).toHaveStyle({
[maxWidthProp]: '600px',
[widthProp]: '600px',
});
});
});

it('uses default width when wrapperWidth is not provided', () => {
renderView();
it('uses default width when wrapperWidth is not provided', () => {
renderWithLogicalProps();

const tableContainer = screen.getByTestId('scrollable-test');
expect(tableContainer).toHaveStyle({
maxWidth: '100%',
width: 'inherit',
const tableContainer = screen.getByTestId('scrollable-test');
expect(tableContainer).toHaveStyle({
[maxWidthProp]: '100%',
[widthProp]: 'inherit',
});
});
});

it('passes wrapperWidth through to the underlying List component', () => {
renderView({ wrapperWidth: '750px' });
it('passes wrapperWidth through to the underlying List component', () => {
renderWithLogicalProps({ wrapperWidth: '750px' });

const tableContainer = screen.getByTestId('scrollable-test');
expect(tableContainer).toHaveStyle({
maxWidth: '750px',
width: '750px',
const tableContainer = screen.getByTestId('scrollable-test');
expect(tableContainer).toHaveStyle({
[maxWidthProp]: '750px',
[widthProp]: '750px',
});
});
});
});
}
);

describe('Container query control', () => {
it('applies container query styles by default', () => {
Expand Down
73 changes: 53 additions & 20 deletions packages/gamut/src/List/__tests__/List.test.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,9 @@
import { theme } from '@codecademy/gamut-styles';
import { setupRtl } from '@codecademy/gamut-tests';
import { MockGamutProvider, setupRtl } from '@codecademy/gamut-tests';
import { matchers } from '@emotion/jest';
import { render } from '@testing-library/react';

import { List } from '../List';
import { List, ListProps } from '../List';
import { ListCol } from '../ListCol';
import { ListRow } from '../ListRow';

Expand Down Expand Up @@ -131,28 +132,60 @@ 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"]'
describe.each([
Copy link
Copy Markdown
Contributor

@dreamwasp dreamwasp Mar 4, 2026

Choose a reason for hiding this comment

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

i'm a big fan of this pattern!

Copy link
Copy Markdown
Contributor Author

@LinKCoding LinKCoding Mar 5, 2026

Choose a reason for hiding this comment

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

We probably won't need it with visual testing 🤞
And also it's a bandaid cause we're testing for CSS props which, probs shouldn't need to do

{
useLogicalProperties: true,
widthProp: 'inlineSize',
maxWidthProp: 'maxInlineSize',
},
{
useLogicalProperties: false,
widthProp: 'width',
maxWidthProp: 'maxWidth',
},
])(
'wrapperWidth prop (useLogicalProperties: $useLogicalProperties)',
({ useLogicalProperties, widthProp, maxWidthProp }) => {
const defaultChildren = (
<ListRow data-testid="row-el">
<ListCol>Hello</ListCol>
</ListRow>
);
expect(tableContainer).toHaveStyle({ maxWidth: '500px', width: '500px' });
});

it('uses inherit width when wrapperWidth is not provided', () => {
const { view } = renderView();
const renderWithLogicalProps = (overrides?: Partial<ListProps>) =>
render(
<MockGamutProvider useLogicalProperties={useLogicalProperties}>
<List id="list-el" {...overrides}>
{overrides?.children ?? defaultChildren}
</List>
</MockGamutProvider>
);

it('applies wrapperWidth to the table container when provided', () => {
const view = renderWithLogicalProps({ wrapperWidth: '500px' });

const tableContainer = view.container.querySelector(
'[data-testid="scrollable-list-el"]'
);
expect(tableContainer).toHaveStyle({
[maxWidthProp]: '500px',
[widthProp]: '500px',
});
});

it('uses inherit width when wrapperWidth is not provided', () => {
const view = renderWithLogicalProps();

const tableContainer = view.container.querySelector(
'[data-testid="scrollable-list-el"]'
);
expect(tableContainer).toHaveStyle({
maxWidth: '100%',
width: 'inherit',
const tableContainer = view.container.querySelector(
'[data-testid="scrollable-list-el"]'
);
expect(tableContainer).toHaveStyle({
[maxWidthProp]: '100%',
[widthProp]: 'inherit',
});
});
});
});
}
);

it('applies container query styles by default', () => {
const { view } = renderView();
Expand Down
7 changes: 3 additions & 4 deletions packages/gamut/src/Pagination/EllipsisButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,22 +6,21 @@ import { wrapWithSlideAnimation } from './utils';

export type EllipsisButtonProps = PaginationButtonProps & {
'aria-label': string;
direction: 'back' | 'forward';
buttonDirection: 'back' | 'forward';
};

const ellipsisButtonContents = { ellipsis: '•••', back: '«', forward: '»' };

export const BaseEllipsisButton = forwardRef<
ButtonBaseElements,
EllipsisButtonProps
// eslint-disable-next-line react/prop-types
>(({ direction, showButton, ...props }, ref) => {
>(({ buttonDirection, showButton, ...props }, ref) => {
const [contents, setContents] = useState(ellipsisButtonContents.ellipsis);

return (
<PaginationButton
ellipsis
onMouseEnter={() => setContents(ellipsisButtonContents[direction])}
onMouseEnter={() => setContents(ellipsisButtonContents[buttonDirection])}
onMouseLeave={() => setContents(ellipsisButtonContents.ellipsis)}
{...props}
ref={ref}
Expand Down
1 change: 0 additions & 1 deletion packages/gamut/src/Pagination/PaginationButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,6 @@ export type PaginationButtonProps = ComponentProps<
export const PaginationButton = forwardRef<
ButtonBaseElements,
PaginationButtonProps
// eslint-disable-next-line react/prop-types
>(
(
{
Expand Down
Loading