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

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

packages/react/src/ActionList/Description.tsx

@@ -25,7 +24,7 @@ export type ActionListDescriptionProps = {

 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

packages/react/src/ActionList/Group.tsx

@@ -22,13 +21,12 @@ const Heading: React.FC<HeadingProps & React.HTMLAttributes<HTMLHeadingElement>>
  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!

packages/react/src/Details/Details.tsx

packages/react/src/SubNav/SubNav.tsx

packages/react/src/VisuallyHidden/VisuallyHidden.tsx

Co-authored-by: Josh Black <[email protected]>

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 pksjce, joshblack and francinelucca July 7, 2025 20:16

joshblack approved these changes Jul 7, 2025

View reviewed changes

packages/react/src/Details/Details.tsx Outdated Show resolved Hide resolved

packages/react/src/SubNav/SubNav.tsx Outdated Show resolved Hide resolved

packages/react/src/VisuallyHidden/VisuallyHidden.tsx Outdated Show resolved Hide resolved

Apply suggestions from code review

5d2d0db

Co-authored-by: Josh Black <[email protected]>

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 deployed to storybook-preview-6278 July 7, 2025 21:02 View deployment

francinelucca approved these changes Jul 7, 2025

View reviewed changes

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

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

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

Uh oh!

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!

Uh oh!

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

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!

Uh oh!

Uh oh!

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