chore: Refactor components to use BoxWithFallback instead of custom Box if statements and remove defaultSxProp references by jonrohan · Pull Request #6278 · primer/react

jonrohan · 2025-07-03T02:32:03Z

I wanted to go through all the components using defaultSxProp and see if we can refactor them to use BoxWithFallback which is essentially doing the same check sxProp != defaultSxProp.

Benefits

Cleans up the codepaths where we might have 2 implementations of a component to render
Prepares the components more for when we're going to remove sxProp support completely
Less uses of Box component

AI summary of changes

Updated CircleBadge snapshots to reflect class name changes.
Refactored CounterLabel to use BoxWithFallback and removed defaultSxProp.
Modified DataTable's TableContainer to utilize BoxWithFallback.
Changed Details component to use BoxWithFallback instead of Box.
Updated FormControl to replace Box with BoxWithFallback.
Refactored Header, InlineMessage, Pagehead, Radio, SegmentedControl, and SubNav components to use BoxWithFallback.
Simplified Spinner component by using BoxWithFallback.
Updated Timeline components to utilize BoxWithFallback for consistency.
Removed defaultSxProp references across various components for cleaner code.

Changelog

New

Changed

Removed

Rollout strategy

Patch release
Minor release
Major release; if selected, include a written rollout or migration plan
None; if selected, include a brief description as to why

Testing & Reviewing

Merge checklist

Added/updated tests
Added/updated documentation
Added/updated previews (Storybook)
Changes are SSR compatible
Tested in Chrome
Tested in Firefox
Tested in Safari
Tested in Edge
(GitHub staff only) Integration tests pass at github/github (Learn more about how to run integration tests)

…eferences - Updated CircleBadge snapshots to reflect class name changes. - Refactored CounterLabel to use BoxWithFallback and removed defaultSxProp. - Modified DataTable's TableContainer to utilize BoxWithFallback. - Changed Details component to use BoxWithFallback instead of Box. - Updated FormControl to replace Box with BoxWithFallback. - Refactored Header, InlineMessage, Pagehead, Radio, SegmentedControl, and SubNav components to use BoxWithFallback. - Simplified Spinner component by using BoxWithFallback. - Updated Timeline components to utilize BoxWithFallback for consistency. - Removed defaultSxProp references across various components for cleaner code.

changeset-bot · 2025-07-03T02:32:08Z

🦋 Changeset detected

Latest commit: 5d2d0db

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/react	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2025-07-03T02:32:29Z

👋 Hi, this pull request contains changes to the source code that github/github depends on. If you are GitHub staff, we recommend testing these changes with github/github using the integration workflow. Thanks!

github-actions · 2025-07-07T19:17:54Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	92.02 KB (-0.38% 🔽)
packages/react/dist/browser.umd.js	92.23 KB (-0.28% 🔽)

primer-integration · 2025-07-07T19:54:33Z

👋 Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/389116

jonrohan · 2025-07-07T19:55:35Z

 export const Description: React.FC<React.PropsWithChildren<ActionListDescriptionProps>> = ({
  variant = 'inline',
-  sx = defaultSxProp,
+  sx,


I removed the default assignment here because the BoxWithFallback component also will set sx = defaultSxProp

jonrohan · 2025-07-07T19:57:02Z

  as: Component = 'h3',
  className,
  children,
-  sx = defaultSxProp,


Anywhere where the props were spreading anyways like this {...rest} I removed the argument. I felt this was cleaner and will help us later when we drop the sx support (only needing to remove the SxProp type)

primer-integration · 2025-07-07T20:15:39Z

🟢 golden-jobs completed with status success.

joshblack

Phew, what a refactor 💯 Just left a couple style comments but honestly not too important. Thanks for doing this!

Co-authored-by: Josh Black <joshblack@github.com>

github-actions · 2025-07-07T20:50:28Z

👋 Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!

francinelucca

✨

github-actions Bot added the staff Author is a staff member label Jul 3, 2025

github-actions Bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Jul 3, 2025

jonrohan deployed to github-pages July 3, 2025 02:45 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-6278 July 3, 2025 02:46 Inactive

Update Details.tsx

d1a5468

jonrohan deployed to github-pages July 7, 2025 19:26 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-6278 July 7, 2025 19:27 Inactive

jonrohan added 2 commits July 7, 2025 12:48

Merge branch 'main' into refactor_use_boxwithfallback

62b3049

Create thick-rules-shout.md

9341539

github-actions Bot requested a deployment to storybook-preview-6278 July 7, 2025 19:55 Abandoned

jonrohan commented Jul 7, 2025

View reviewed changes

jonrohan deployed to github-pages July 7, 2025 20:04 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-6278 July 7, 2025 20:05 Inactive

github-actions Bot added integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Jul 7, 2025

jonrohan marked this pull request as ready for review July 7, 2025 20:16

jonrohan requested a review from a team as a code owner July 7, 2025 20:16

jonrohan requested review from francinelucca, joshblack and pksjce July 7, 2025 20:16

joshblack approved these changes Jul 7, 2025

View reviewed changes

Comment thread packages/react/src/Details/Details.tsx Outdated

Comment thread packages/react/src/SubNav/SubNav.tsx Outdated

Comment thread packages/react/src/VisuallyHidden/VisuallyHidden.tsx Outdated

Apply suggestions from code review

5d2d0db

Co-authored-by: Josh Black <joshblack@github.com>

github-actions Bot added the integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm label Jul 7, 2025

jonrohan enabled auto-merge July 7, 2025 20:51

jonrohan added this pull request to the merge queue Jul 7, 2025

jonrohan deployed to github-pages July 7, 2025 21:02 — with GitHub Actions View deployment

github-actions Bot temporarily deployed to storybook-preview-6278 July 7, 2025 21:02 Inactive

francinelucca approved these changes Jul 7, 2025

View reviewed changes

Merged via the queue into main with commit 29facae Jul 7, 2025

jonrohan deleted the refactor_use_boxwithfallback branch July 7, 2025 21:11

primer Bot mentioned this pull request Jul 7, 2025

Release tracking (37.28.0) #6233

Merged

Navigation Menu

Uh oh!

chore: Refactor components to use BoxWithFallback instead of custom Box if statements and remove defaultSxProp references - #6278

chore: Refactor components to use BoxWithFallback instead of custom Box if statements and remove defaultSxProp references#6278
jonrohan merged 5 commits into
mainfrom
refactor_use_boxwithfallback

jonrohan commented Jul 3, 2025 •

edited

Loading

Uh oh!

changeset-bot Bot commented Jul 3, 2025 •

edited

Loading

Uh oh!

github-actions Bot commented Jul 3, 2025

Uh oh!

github-actions Bot commented Jul 7, 2025 •

edited

Loading

Uh oh!

primer-integration Bot commented Jul 7, 2025

Uh oh!

jonrohan Jul 7, 2025

Uh oh!

jonrohan Jul 7, 2025

Uh oh!

primer-integration Bot commented Jul 7, 2025

Uh oh!

joshblack left a comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Jul 7, 2025

Uh oh!

francinelucca left a comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

Uh oh!

Conversation

jonrohan commented Jul 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

New

Changed

Removed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot Bot commented Jul 3, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Jul 3, 2025

Uh oh!

github-actions Bot commented Jul 7, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

primer-integration Bot commented Jul 7, 2025

Uh oh!

jonrohan Jul 7, 2025

Choose a reason for hiding this comment

Uh oh!

jonrohan Jul 7, 2025

Choose a reason for hiding this comment

Uh oh!

primer-integration Bot commented Jul 7, 2025

Uh oh!

joshblack left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

github-actions Bot commented Jul 7, 2025

Uh oh!

francinelucca left a comment

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

jonrohan commented Jul 3, 2025 •

edited

Loading

changeset-bot Bot commented Jul 3, 2025 •

edited

Loading

github-actions Bot commented Jul 7, 2025 •

edited

Loading