fix: update reboot file to conditionally use logical properties or physical properties by LinKCoding · Pull Request #3281 · Codecademy/gamut

LinKCoding · 2026-03-12T18:01:17Z

Overview

Updates the reboot.tsx file that overrides user agent styling to conditionally use logical properties or physical properties

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

Testing Instructions

Don't make me tap the sign.

Go to Card
Use the toolbar and set Storybook to use logical properties
Check that it looks the same
Use the toolbar and set RTL, see that the text is now aligned to the dir
...
Finish and do a celebratory dance

PR Links and Envs

Repository	PR Link
N/A

nx-cloud · 2026-03-12T18:03:09Z

View your CI Pipeline Execution ↗ for commit 5d144e5

☁️ Nx Cloud last updated this comment at 2026-03-12 19:40:34 UTC

nx-cloud · 2026-03-12T18:03:09Z

View your CI Pipeline Execution ↗ for commit 15db791

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

codecov · 2026-03-12T18:05:42Z

⚠️ JUnit XML file not found

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

LinKCoding · 2026-03-12T18:20:35Z

packages/gamut-styles/src/globals/Reboot.tsx

-      margin-top: 0;
-      margin-bottom: ${theme.spacing[16]};
+      ${useLogicalProperties ? 'margin-block-start' : 'margin-top'}: 0;
+      ${useLogicalProperties ? 'margin-block-end' : 'margin-bottom'}: 1rem;


TS gets really fincky about how it parses these strings. Sometimes ${theme.space[x]} throws an error, sometimes it doesn't

Opted to convert to rem to just keep everything consistent

weird, any idea what the cause of that flakiness is? smells like a canary to me.

LinKCoding · 2026-03-12T19:22:38Z

packages/styleguide/src/lib/Atoms/Card/Card.stories.tsx

 export const StaticLight: Story = {
  render: () => (
    <Background bg="white">
+      <p>Test test</p>


This is just to allow for inspecting when useLogicalProperties is false, then the rendered CSS is physical (margin-top and margin-bottom) and when it's true it'll render margin-inline-start and margin-inline-end

I will remove after approval

codecademydev · 2026-03-12T19:41:47Z

📬 Published Alpha Packages:

@codecademy/gamut@68.1.1-alpha.613ffe.0
@codecademy/gamut-icons@9.56.4-alpha.613ffe.0
@codecademy/gamut-illustrations@0.58.7-alpha.613ffe.0
@codecademy/gamut-kit@0.6.586-alpha.613ffe.0
@codecademy/gamut-patterns@0.10.26-alpha.613ffe.0
@codecademy/gamut-styles@17.12.1-alpha.613ffe.0
@codecademy/gamut-tests@5.3.1-alpha.613ffe.0
@codecademy/styleguide@79.2.1-alpha.613ffe.0

github-actions · 2026-03-12T19:50:35Z

🚀 Styleguide deploy preview ready!

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

sh0ji

nice, this will work well. my requested change is to keep the semantics of theme consistent.

sh0ji · 2026-03-12T19:36:54Z

packages/gamut-styles/src/globals/Reboot.tsx

-      margin-top: 0;
-      margin-bottom: ${theme.spacing[16]};
+      ${useLogicalProperties ? 'margin-block-start' : 'margin-top'}: 0;
+      ${useLogicalProperties ? 'margin-block-end' : 'margin-bottom'}: 1rem;


weird, any idea what the cause of that flakiness is? smells like a canary to me.

sh0ji · 2026-03-12T19:56:28Z

packages/gamut-styles/src/GamutProvider.tsx

+  // Merge useLogicalProperties into theme so variance can access it via props.theme.
+  const themeWithLogicalProperties = useMemo(
+    () => ({ ...theme, useLogicalProperties }),
+    [theme, useLogicalProperties]
+  );
+
  const globals = shouldInsertGlobals && (
    <>
-      <Typography theme={theme} />
-      <Reboot theme={theme} />
+      <Typography theme={themeWithLogicalProperties} />
+      <Reboot theme={themeWithLogicalProperties} />


I'm a bit wary of changing the shape of theme like this since it's already a well-defined concept in Gamut.

I can think of two options off the top of my head to resolve this but don't feel like you have to use either. My main concern is semantic consistency for our props and I'm sure there are other options here.

add useLogicalProperties to the Typography & Reboot props. For instance:

<Reboot theme={theme} logicalProperties={useLogicalProperties />

create a hook to access provider props from within children. For instance:

export const Reboot: React.FC<{ theme: Theme }> = ({ theme }) => { const { logicalProperties } = useExperimentalFeatures(); // text-align: ${logicalProperties ? 'start' : 'left'};

I do think option 2 is better since it opens the door for using this pattern for "work-in-progress" stuff in the future, but it's obviously more work. You'd have to create an <ExperimentalFeatureProvider> and related hook (private APIs just for us) and move the useLogicalProperties there.

oh and the only reason I even thought of option 2 was because of the conversation about "beta" releases, so FYI @dreamwasp. even if we don't use that pattern here, you may want to consider it as a way for us to gate features.

sh0ji

changing this to approved after talking with @LinKCoding. I didn't realize that the themeWithLogicalProperties was already being used so I'm fine with addressing this more holistically in another PR.

fix reboot file and storybook controls

65eb91f

LinKCoding commented Mar 12, 2026

View reviewed changes

LinKCoding added 2 commits March 12, 2026 14:23

slight clean up

15db791

add test case in card, will remove after approval

9142462

LinKCoding commented Mar 12, 2026

View reviewed changes

dreamwasp approved these changes Mar 12, 2026

View reviewed changes

LinKCoding marked this pull request as ready for review March 12, 2026 19:37

LinKCoding requested a review from a team as a code owner March 12, 2026 19:37

LinKCoding requested review from aresnik11 and sh0ji March 12, 2026 19:37

remove test p tag

5d144e5

sh0ji requested changes Mar 12, 2026

View reviewed changes

sh0ji approved these changes Mar 12, 2026

View reviewed changes

Conversation

LinKCoding commented Mar 12, 2026 • edited by atlassian bot Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Overview

PR Checklist

Testing Instructions

PR Links and Envs

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

Uh oh!

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

Uh oh!

⚠️ JUnit XML file not found

Uh oh!

LinKCoding Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

sh0ji Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

LinKCoding Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

codecademydev commented Mar 12, 2026

Uh oh!

github-actions bot commented Mar 12, 2026

Uh oh!

sh0ji left a comment

Choose a reason for hiding this comment

Uh oh!

sh0ji Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

sh0ji Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

sh0ji Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

sh0ji left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

LinKCoding commented Mar 12, 2026 •

edited by atlassian bot

Loading

nx-cloud bot commented Mar 12, 2026 •

edited

Loading

nx-cloud bot commented Mar 12, 2026 •

edited

Loading

codecov bot commented Mar 12, 2026 •

edited

Loading