feat: Logical properties by LinKCoding · Pull Request #3265 · Codecademy/gamut

LinKCoding · 2026-02-11T21:03:43Z

Overview

Updates
Gamut:

Adds a new prop, useLogicalProperties which defaults to true, to GamutProvider
Updates tokens in variance/config.ts
Updates margin and padding related props to include both physical and logical CSS properties
Adds logical properties for border related CSS properties:
- border*, borderWidth*, borderColor*, borderStyle*, borderRadius*,
Adds logical properties for width + height related CSS props
Adds logical properties for inset + overflow related CSS props
Adds direction as a token
Adds a new function, getPropertyMode, to transform to resolve the correct CSS property to use
Addresses resulting test failures due to mismatched style expectations
- Updates MockGamutProvider to include useLogicalProps

Storybook:

Splits up Props into separate pages each related to their respective collection of props
- Adds more examples for updated props
Adds a new toolbar tool for switching between logical and physical CSS properties
Adds a new toolbar tool for switching direction (LTR to RTL and vice versa)
Adds documentation for useLogicalProperties

PR Checklist

Related to designs:
Related to JIRA ticket: GMT-1451
I have run this code to verify it works
This PR includes unit tests for the code change
This PR includes testing instructions tests for the code change
The alpha package of this PR is passing end-to-end tests in all relevant Codecademy repositories

Related PRs:

Testing Instructions

Don't make me tap the sign.

Go to Foundations/System/Props/About
Check out the About page and the other new separated out pages
Check over /border, /color, /layout, /positioning, and /space
Verify that the examples, information, and token tables in the pages make sense
Check over some components and see how they respond when the logical/physical button and/or LTR/RTL buttons are toggled
a. some notable examples: Menu, Popover, PopoverContainer, Tab, Tip, ConnectedForm/GridForm, DataList/DataTable
...
Finish and do a celebratory dance

PR Links and Envs

Repository	PR Link
Monolith	Monolith PR
Mono	Mono PR

* re-orged Props.mdx files into separate pages * updated MDN links * update properties column with working links and styling * updated statuses for pages that will receive new logical properties * formatted * fix Responsive Properities story * applied Cass's feedback

…l vs Physical prop resolution (#3234) * working PoC * fix build and format * lint fixes * some more refactoring * fix existing test failures * add test for getPropertyMode * updated gamutprovider to include useLogicalProperties * fix failiing tests * more test fixes * formatted * add logicalprops switcher to toolbar * updated shorthand in margin related CSS properties * fix linting issue re: physical * update docs to show logical prop updates to margin related props * updated padding too * updated Usage Guide and clean up * add new file to explain logical and physical properties * update docs for readibility * formatted and cleaned up * fix tests and edit MockGamutProvider to use useLogicalProperties * temp fix for test failure * removed useLogicalProperties from contextValue b.c. it's not used anymore * added toolbar button for direction * address Cass's feedback

* working PoC * fix build and format * lint fixes * some more refactoring * fix existing test failures * add test for getPropertyMode * updated gamutprovider to include useLogicalProperties * fix failiing tests * more test fixes * formatted * add logicalprops switcher to toolbar * updated shorthand in margin related CSS properties * fix linting issue re: physical * update docs to show logical prop updates to margin related props * updated padding too * updated Usage Guide and clean up * add new file to explain logical and physical properties * update docs for readibility * formatted and cleaned up * fix tests and edit MockGamutProvider to use useLogicalProperties * temp fix for test failure * start on border related logical props * updated more border props * formatted * added border color props * grammar * formatted * feat(Icon): ✨ Add Live Learning Icon * chore(release): publish - @Codecademy/gamut@68.0.1 - @codecademy/gamut-icons@9.55.0 - @codecademy/gamut-kit@0.6.580 --------- Co-authored-by: Kenny Lin <kenny.lin.91@gmail.com> Co-authored-by: Hailey <hailey.robledo@skillsoft.com> Co-authored-by: codecademydev <dev@codecademy.com>

- @Codecademy/gamut@68.0.1 - @codecademy/gamut-icons@9.55.0 - @codecademy/gamut-kit@0.6.580

- @codecademy/styleguide@79.1.0

- @codecademy/styleguide@79.1.1

…l vs Physical prop resolution (#3234) * working PoC * fix build and format * lint fixes * some more refactoring * fix existing test failures * add test for getPropertyMode * updated gamutprovider to include useLogicalProperties * fix failiing tests * more test fixes * formatted * add logicalprops switcher to toolbar * updated shorthand in margin related CSS properties * fix linting issue re: physical * update docs to show logical prop updates to margin related props * updated padding too * updated Usage Guide and clean up * add new file to explain logical and physical properties * update docs for readibility * formatted and cleaned up * fix tests and edit MockGamutProvider to use useLogicalProperties * temp fix for test failure * removed useLogicalProperties from contextValue b.c. it's not used anymore * added toolbar button for direction * address Cass's feedback

nx-cloud · 2026-02-11T21:26:39Z

View your CI Pipeline Execution ↗ for commit f09dace

☁️ Nx Cloud last updated this comment at 2026-03-11 13:18:45 UTC

codecov · 2026-02-11T21:28:56Z

⚠️ JUnit XML file not found

The CLI was unable to find any JUnit XML files to upload.
For more help, visit our troubleshooting guide.

* cleaned working state * fix ContentContainer test * formatted

* added logical props and provided examples * add in story * fix popover tests * forcing GHA checks * clean up some comments * fix story height * add example for overflow * new story * formatted * fix popovercontainer alignment * revert testing change

dreamwasp · 2026-03-09T15:08:36Z

packages/gamut-styles/src/GamutProvider.tsx

+  // Merge useLogicalProperties into theme so variance can access it via props.theme
+  const themeWithLogicalProperties = {
+    ...theme,
+    useLogicalProperties,
+  };
  const content = (
-    <ThemeProvider theme={theme}>
+    <ThemeProvider theme={themeWithLogicalProperties}>


i wonder if you should memoize this, ThemeProivider is kindof an expensive operation and we want to make sure it doesn't rerender for unrelated reasons

dreamwasp · 2026-03-09T15:09:37Z

...s/gamut/src/ConnectedForm/ConnectedInputs/ConnectedNestedCheckboxes/__tests__/utils.test.tsx

@@ -522,7 +523,7 @@ describe('ConnectedNestedCheckboxes utils', () => {
    });

    it('should render an unchecked checkbox with correct props', () => {
-      const state = { checked: false };
+      const state = { checked: false, indeterminate: false };


i don't think you need these changes, aren't they getting indeterminate by default

ah thanks! yea, I'll revert —
fwiw, I saw these as TS errors 🤔
but after I removed the indeterminate: false they didn't come back
so maybe just some weird package state before.

dreamwasp · 2026-03-09T15:18:04Z

packages/gamut/src/PopoverContainer/PopoverContainer.tsx

+        {...popoverPosition.styles}
+        /* Physical inline style for centered alignments (top/bottom) where
+           inset-inline-start would incorrectly flip the center point in RTL */
+        /* eslint-disable-next-line gamut/no-inline-style */
+        style={popoverPosition.physicalStyles}


i'm not the biggest fan of this approach - can 't we just swap the margin prop based on direction? this RTL change probably means we need to bump up the urgency of our ticket for PopoverContainer flipping dir when its offscreen ( i think we have something like this in the backlog)

Would you want me to revert?

I don't remember messing with margin and got hung up on the edges (top, bottom, right, left) and getting stunk this before resorting to the robot to provide an answer.

per our discussion — will keep this, and cut a bigger ticket to address

dreamwasp · 2026-03-09T15:19:00Z

packages/styleguide/.storybook/components/Elements/Markdown.tsx

  color: ${themed('colors.navy-700')};
  background-color: ${themed('colors.gray-100')};
  display: inline-block;
-  overflow-x: scroll;


did we move this style somewhere else?

tbh I don't even remember how I got here... lol
but I saw this was overriding line 36 (where overflow-x was being set to auto)

Any preference? auto vs scroll?

dreamwasp

have a couple comments but nothing blocking 🔥

codecademydev · 2026-03-11T13:19:59Z

📬 Published Alpha Packages:

@codecademy/gamut@68.1.0-alpha.1d8645.0
@codecademy/gamut-icons@9.56.3-alpha.1d8645.0
@codecademy/gamut-illustrations@0.58.6-alpha.1d8645.0
@codecademy/gamut-kit@0.6.585-alpha.1d8645.0
@codecademy/gamut-patterns@0.10.25-alpha.1d8645.0
@codecademy/gamut-styles@17.12.0-alpha.1d8645.0
@codecademy/gamut-tests@5.3.0-alpha.1d8645.0
@codecademy/styleguide@79.2.0-alpha.1d8645.0
@codecademy/variance@0.26.0-alpha.1d8645.0

github-actions · 2026-03-11T13:22:13Z

🚀 Styleguide deploy preview ready!

Preview URL: https://69b16c7e1fadcb397cf5400b--gamut-preview.netlify.app
Deploy Logs: https://app.netlify.com/projects/gamut-preview/deploys/69b16c7e1fadcb397cf5400b

LinKCoding and others added 14 commits November 21, 2025 15:47

denoting main branch

9920b86

Merge branch 'main' into kl-gmt-1451-logical-props

fe97fd6

Merge branch 'main' into kl-gmt-1451-logical-props

1abd01c

feat(Icon): ✨ Add Live Learning Icon

09e0652

chore(release): publish

83ebf1b

- @Codecademy/gamut@68.0.1 - @codecademy/gamut-icons@9.55.0 - @codecademy/gamut-kit@0.6.580

resolve merge conflict

1683d7c

chore(release): publish

bda4fe1

- @codecademy/styleguide@79.1.0

docs: update background color for InfoTip zindex story

f25a13e

chore(release): publish

d127fde

- @codecademy/styleguide@79.1.1

resolve merge conflict

28d8599

LinKCoding added 6 commits February 17, 2026 11:00

Merge branch 'main' into kl-gmt-1451-logical-props--jh-revert

a621ae9

feat: Layout related logical CSS props (#3267)

b43cbf1

* cleaned working state * fix ContentContainer test * formatted

merged main in

8cc159e

missed a merge conflict

6663fb6

mis-read merge conflict, fixed duped themeprovider

bd97207

LinKCoding marked this pull request as ready for review March 6, 2026 18:42

LinKCoding requested a review from a team as a code owner March 6, 2026 18:42

LinKCoding requested review from aresnik11 and dreamwasp March 6, 2026 18:42

dreamwasp reviewed Mar 9, 2026

View reviewed changes

dreamwasp approved these changes Mar 9, 2026

View reviewed changes

LinKCoding added 5 commits March 10, 2026 11:37

address Cass's feedback

5e0c46e

switch to opt-in, i.e. useLogicalProperties is false by default

2bd4f41

add in some tests for popovercontainer

6263f0e

formatted

1581878

Merge branch 'main' into kl-gmt-1451-logical-props--jh-revert

f09dace

Conversation

LinKCoding commented Feb 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

PR Checklist

Related PRs:

Testing Instructions

PR Links and Envs

Uh oh!

nx-cloud bot commented Feb 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

codecov bot commented Feb 11, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

⚠️ JUnit XML file not found

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

dreamwasp left a comment

Choose a reason for hiding this comment

Uh oh!

codecademydev commented Mar 11, 2026

Uh oh!

github-actions bot commented Mar 11, 2026

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

7 participants

LinKCoding commented Feb 11, 2026 •

edited

Loading

nx-cloud bot commented Feb 11, 2026 •

edited

Loading

codecov bot commented Feb 11, 2026 •

edited

Loading