Remove support for `sx` and `Box` usage from the `UnderlineNav` component by liuliu-dev · Pull Request #6668 · primer/react

liuliu-dev · 2025-08-25T22:26:07Z

Closes#5770

Note: Multiple repos are still using sx props with UnderlineNav. Tracking here: https://github.com/github/primer/issues/5827

Changelog

Removed

Removed sx props and Box from UnderlineNav.

Rollout strategy

Major release; if selected, include a written rollout or migration plan

changeset-bot · 2025-08-25T22:26:10Z

🦋 Changeset detected

Latest commit: d59c187

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

This PR includes changesets to release 2 packages

Name	Type
@primer/react	Major
@primer/styled-react	Major

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-08-25T22:26:33Z

👋 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-08-25T22:30:20Z

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	89.8 KB (-0.06% 🔽)
packages/react/dist/browser.umd.js	90.05 KB (+0.07% 🔺)

Copilot

Pull Request Overview

This PR removes the deprecated sx prop and Box component usage from the UnderlineNav component as part of a major release. The changes replace styled-system functionality with CSS modules and native HTML elements for better performance and maintainability.

Key Changes

Removed sx prop support from both UnderlineNav and UnderlineNavItem components
Replaced Box components with native HTML elements (li, div, span)
Migrated inline styles to CSS modules for better maintainability

Reviewed Changes

Copilot reviewed 7 out of 7 changed files in this pull request and generated no comments.

Show a summary per file

File	Description
`packages/react/src/UnderlineNav/styles.ts`	Changed marginRight from theme unit to explicit pixel value
`packages/react/src/UnderlineNav/UnderlineNavItem.tsx`	Removed sx prop, Box import, replaced Box with li element and CSS module
`packages/react/src/UnderlineNav/UnderlineNavItem.module.css`	Added CSS module for UnderlineNavItem styling
`packages/react/src/UnderlineNav/UnderlineNav.tsx`	Removed sx prop, Box imports, replaced Box elements with native HTML
`packages/react/src/UnderlineNav/UnderlineNav.module.css`	Added CSS module for menu item content styling
`packages/react/src/UnderlineNav/UnderlineNav.docs.json`	Removed sx prop from documentation
`.changeset/hot-mirrors-feel.md`	Added changeset for major version bump

…inenav

github-actions · 2025-09-18T20:54:09Z

👋 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!

github-actions · 2025-09-18T21:01:40Z

👋 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!

joshblack

Looks great! just left one question

joshblack · 2025-09-18T21:04:28Z

- ${sx};
-`
+// Needed for typing the ref with HTMLULListElement
+export const NavigationList = styled.ul``


Super random, do we need this export? I couldn't find where it is used 🤔

Removed 🧹

github-actions · 2025-09-18T21:09:12Z

👋 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!

github-actions · 2025-09-22T17:08:36Z

👋 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!

primer-integration · 2025-09-22T17:15:05Z

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

…er/react into liuliu/migrate-underlinenav

github-actions · 2025-09-22T17:27:49Z

👋 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!

primer-integration · 2025-09-22T17:28:39Z

🟢 ci completed with status success.

…inenav

github-actions · 2025-09-22T17:49:22Z

👋 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!

github-actions · 2025-09-22T17:57:08Z

👋 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!

github-actions · 2025-09-22T18:02:01Z

👋 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!

liuliu-dev added 2 commits August 25, 2025 15:23

remove sx, Box from UnderlineNav
56ff803

changeset
7a931cf

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

liuliu-dev deployed to github-pages August 25, 2025 22:35 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-6668 August 25, 2025 22:35 Inactive

fix lint and format
6b390bc

liuliu-dev deployed to github-pages August 25, 2025 22:56 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-6668 August 25, 2025 22:56 Inactive

use 4px instead of 1 for inline style
07f4df0

liuliu-dev deployed to github-pages August 25, 2025 23:24 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-6668 August 25, 2025 23:24 Inactive

Merge branch 'main' into liuliu/migrate-underlinenav
f9ef25d

liuliu-dev deployed to github-pages August 26, 2025 21:08 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-6668 August 26, 2025 21:09 Inactive

Merge branch 'main' into liuliu/migrate-underlinenav
9f5f349

liuliu-dev deployed to github-pages August 26, 2025 22:57 — with GitHub Actions View deployment

github-actionsBottemporarily deployed to storybook-preview-6668 August 26, 2025 22:58 Inactive

liuliu-dev marked this pull request as ready for review August 26, 2025 22:58

CopilotAI review requested due to automatic review settings August 26, 2025 22:58

liuliu-dev requested a review from a team as a code owner August 26, 2025 22:58

liuliu-dev requested a review from TylerJDev August 26, 2025 22:58

CopilotAI reviewed Aug 26, 2025
View reviewed changes

llastflowersand others added 3 commits August 27, 2025 11:25

remove sx support from CounterLabel
484eff5

remove sx from docs
e08db63

Update CounterLabel to remove sx support
226ef2c

TylerJDev approved these changes Aug 28, 2025
View reviewed changes

Merge remote-tracking branch 'origin/main' into liuliu/migrate-underl…
b8b577b
…inenav

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

lint ignore
2d88dfc

github-actionsBot added integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Sep 18, 2025

github-actionsBottemporarily deployed to storybook-preview-6668 September 18, 2025 21:03 Inactive

joshblack approved these changes Sep 18, 2025
View reviewed changes

ignore polymorphic.ts in config, remove unused NavigationList
d8dafd7

github-actionsBot added integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm and removed integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Sep 18, 2025

Merge branch 'main' into liuliu/migrate-underlinenav
23ffbd5

liuliu-dev added 2 commits September 22, 2025 10:26

conflicts
ac7804d

Merge branch 'liuliu/migrate-underlinenav' ofhttps://github.com/prim…
1da2ad8
…er/react into liuliu/migrate-underlinenav

llastflowersand others added 4 commits September 22, 2025 10:36

Merge branch 'main' into llastflowers/5783/no-sx-CounterLabel
e8a8ea2

Merge remote-tracking branch 'origin/main' into liuliu/migrate-underl…
60ade2a
…inenav

Merge branch 'main' into llastflowers/5783/no-sx-CounterLabel
984fbd5

conflicts
c7f8fe8

conflicts
f45fd91

conflicts..
d59c187

primerBot mentioned this pull request Sep 22, 2025
Release tracking (rc) #6892
Merged

mperrotti mentioned this pull request Sep 24, 2025
Remove Box usage and sx prop from UnderlineNav #6869
Closed
13 tasks

Uh oh!

Conversation

liuliu-dev commented Aug 25, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

Removed

Rollout strategy

Uh oh!

changeset-botBot commented Aug 25, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actionsBot commented Aug 25, 2025

Uh oh!

github-actionsBot commented Aug 25, 2025• edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

size-limit report 📦

Uh oh!

CopilotAI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Key Changes

Reviewed Changes

Uh oh!

github-actionsBot commented Sep 18, 2025

Uh oh!

github-actionsBot commented Sep 18, 2025

Uh oh!

joshblack left a comment

Choose a reason for hiding this comment

Uh oh!

joshblackSep 18, 2025

Choose a reason for hiding this comment

Uh oh!

liuliu-devSep 18, 2025

Choose a reason for hiding this comment

Uh oh!

github-actionsBot commented Sep 18, 2025

Uh oh!

github-actionsBot commented Sep 22, 2025

Uh oh!

primer-integrationBot commented Sep 22, 2025

Uh oh!

github-actionsBot commented Sep 22, 2025

Uh oh!

primer-integrationBot commented Sep 22, 2025

Uh oh!

github-actionsBot commented Sep 22, 2025

Uh oh!

github-actionsBot commented Sep 22, 2025

Uh oh!

github-actionsBot commented Sep 22, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

5 participants

liuliu-dev commented Aug 25, 2025•
edited
Loading

changeset-botBot commented Aug 25, 2025•
edited
Loading

github-actionsBot commented Aug 25, 2025•
edited
Loading