feat: Add typography and layout related logical props

packages/gamut-styles/src/variance/config.ts

@@ -323,13 +323,56 @@ export const layout = {
     properties: ['width', 'height'],
     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 },
+  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,
+  },
   verticalAlign: { property: 'verticalAlign' },
+  direction: { property: 'direction' },
   ...selfAlignments,
   ...gridItems,
   ...flexItems,

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

@@ -6,11 +6,15 @@ import { ContentContainer } from '..';
 const renderView = setupRtl(ContentContainer);
 
 describe('ContentContainer', () => {
-  it('has maxWidth of contentWidths.max when size is medium', () => {
+  // Note: Only testing one mode here since variant() caches styles after first render.
+  it('has maxInlineSize of contentWidths.max when size is medium', () => {
+    const useLogicalProperties = true;
+    const maxWidthProp = useLogicalProperties ? 'maxInlineSize' : 'maxWidth';
+
     const { view } = renderView({ size: 'medium' });
 
     expect(view.container.firstChild).toHaveStyle(
-      `maxWidth: ${contentWidths.max}`
+      `${maxWidthProp}: ${contentWidths.max}`
     );
   });
 });

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

@@ -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';
@@ -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', () => {

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

@@ -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';
 
@@ -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([
+    {
+      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();

packages/gamut/src/Pagination/EllipsisButton.tsx

@@ -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}

packages/gamut/src/Pagination/PaginationButton.tsx

@@ -39,7 +39,6 @@ export type PaginationButtonProps = ComponentProps<
 export const PaginationButton = forwardRef<
   ButtonBaseElements,
   PaginationButtonProps
-  // eslint-disable-next-line react/prop-types
 >(
   (
     {