feat(TabNav): remove support for sx prop #6864

jonrohan · 2025-09-17T01:06:14Z

Closes #6779

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)

changeset-bot · 2025-09-17T01:06:19Z

🦋 Changeset detected

Latest commit: 6de983d

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-09-17T01:06:47Z

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

…to remove_sx_support_tabnav

primer-integration · 2025-09-25T21:39:25Z

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

primer-integration · 2025-09-25T22:00:54Z

🟢 ci completed with status success.

Copilot

Pull Request Overview

This PR removes support for the sx prop from the TabNav component in the main @primer/react package while maintaining backward compatibility by providing a styled-components wrapper in the @primer/styled-react package.

Removes SxProp from TabNavProps and TabNavLinkProps in the main React package
Replaces BoxWithFallback usage with plain HTML elements to eliminate sx styling
Creates a new styled-components wrapper in the styled-react package that preserves sx functionality

Reviewed Changes

Copilot reviewed 5 out of 5 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/react/src/TabNav/TabNav.tsx	Removes sx prop support and BoxWithFallback usage from main component
packages/styled-react/src/components/TabNav.tsx	Creates new styled-components wrapper that preserves sx functionality
packages/styled-react/src/deprecated.tsx	Updates exports to use local TabNav implementation
packages/styled-react/src/tests/primer-react-deprecated.browser.test.tsx	Updates test to include polymorphic rendering validation
.changeset/lucky-wasps-nail.md	Documents the breaking change

Copilot · 2025-09-25T22:03:07Z

packages/styled-react/src/components/TabNav.tsx

+// @ts-ignore forwardedAs is valid here but I don't know how to fix the typescript error
+const TabNavImpl = ({as, ...props}: TabNavProps) => <StyledTabNav forwardedAs={as} {...props} />


Instead of using @ts-ignore, consider using a proper TypeScript assertion or interface extension to handle the forwardedAs prop. This improves type safety and code maintainability.

Copilot · 2025-09-25T22:03:08Z

packages/styled-react/src/components/TabNav.tsx

+// @ts-ignore forwardedAs is valid here but I don't know how to fix the typescript error
+const TabNavLink = ({as, ...props}: TabNavLinkProps) => <StyledTabNavLink forwardedAs={as} {...props} />


Instead of using @ts-ignore, consider using a proper TypeScript assertion or interface extension to handle the forwardedAs prop. This improves type safety and code maintainability.

francinelucca

🎉

github-actions · 2025-09-26T19:34:51Z

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

Co-authored-by: Marie Lucca <francinelucca@github.com> Co-authored-by: Marie Lucca <40550942+francinelucca@users.noreply.github.com>

Remove sx support from the TabNav component

e3b7646

github-actions bot added staff Author is a staff member integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Sep 17, 2025

Create changeset

dd57a1e

github-actions bot temporarily deployed to storybook-preview-6864 September 17, 2025 01:14 Inactive

jonrohan deployed to github-pages September 17, 2025 01:23 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6864 September 17, 2025 01:23 Inactive

github-actions bot added integration-tests: failing Changes in this PR 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 Sep 17, 2025

Merge branch 'main' into remove_sx_support_tabnav

1029226

jonrohan deployed to github-pages September 22, 2025 18:05 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6864 September 22, 2025 18:05 Inactive

Merge branch 'main' into remove_sx_support_tabnav

6998c9a

jonrohan deployed to github-pages September 23, 2025 01:59 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6864 September 23, 2025 01:59 Inactive

Merge branch 'main' into remove_sx_support_tabnav

93c4664

jonrohan deployed to github-pages September 24, 2025 04:47 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6864 September 24, 2025 04:48 Inactive

Use link ref component

8c4431e

jonrohan deployed to github-pages September 24, 2025 05:30 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6864 September 24, 2025 05:31 Inactive

francinelucca and others added 2 commits September 25, 2025 10:13

use styled() wrapper in TabNav

8677994

Merge branch 'main' into remove_sx_support_tabnav

41e067c

github-actions bot requested a deployment to storybook-preview-6864 September 25, 2025 14:17 Abandoned

francinelucca deployed to github-pages September 25, 2025 14:26 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6864 September 25, 2025 14:27 Inactive

francinelucca added 2 commits September 25, 2025 11:20

remove unused imports

85f4d71

Merge branch 'remove_sx_support_tabnav' of github.com:primer/react in…

8594706

…to remove_sx_support_tabnav

francinelucca deployed to github-pages September 25, 2025 20:30 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6864 September 25, 2025 20:31 Inactive

francinelucca added 2 commits September 25, 2025 17:27

fix as prop

be66cd3

fix fix fix

51e1b7b

github-actions bot requested a deployment to storybook-preview-6864 September 25, 2025 21:38 Abandoned

francinelucca deployed to github-pages September 25, 2025 21:45 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-6864 September 25, 2025 21:46 Inactive

github-actions bot added integration-tests: passing Changes in this PR do NOT cause breaking changes in gh/gh and removed integration-tests: failing Changes in this PR cause breaking changes in gh/gh labels Sep 25, 2025

francinelucca marked this pull request as ready for review September 25, 2025 22:02

francinelucca requested a review from a team as a code owner September 25, 2025 22:02

francinelucca requested review from Copilot and francinelucca and removed request for francinelucca September 25, 2025 22:02

Copilot AI reviewed Sep 25, 2025

View reviewed changes

francinelucca approved these changes Sep 25, 2025

View reviewed changes

jonrohan enabled auto-merge September 25, 2025 22:59

Merge branch 'main' into remove_sx_support_tabnav

6de983d

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 Sep 26, 2025

jonrohan added this pull request to the merge queue Sep 26, 2025

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

github-actions bot deployed to storybook-preview-6864 September 26, 2025 19:43 View deployment

Merged via the queue into main with commit b0abd78 Sep 26, 2025
39 of 41 checks passed

jonrohan deleted the remove_sx_support_tabnav branch September 26, 2025 19:47

primer bot mentioned this pull request Sep 26, 2025

Release tracking (rc) #6913

Merged

llastflowers pushed a commit that referenced this pull request Sep 29, 2025

feat(TabNav): remove support for sx prop (#6864)

28af9d5

Co-authored-by: Marie Lucca <francinelucca@github.com> Co-authored-by: Marie Lucca <40550942+francinelucca@users.noreply.github.com>

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(TabNav): remove support for sx prop #6864

feat(TabNav): remove support for sx prop #6864

jonrohan commented Sep 17, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Sep 17, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Sep 17, 2025

Uh oh!

primer-integration bot commented Sep 25, 2025

Uh oh!

primer-integration bot commented Sep 25, 2025

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Sep 25, 2025

Uh oh!

Copilot AI Sep 25, 2025

Uh oh!

francinelucca left a comment

Uh oh!

github-actions bot commented Sep 26, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

		// @ts-ignore forwardedAs is valid here but I don't know how to fix the typescript error
		const TabNavImpl = ({as, ...props}: TabNavProps) => <StyledTabNav forwardedAs={as} {...props} />

		// @ts-ignore forwardedAs is valid here but I don't know how to fix the typescript error
		const TabNavLink = ({as, ...props}: TabNavLinkProps) => <StyledTabNavLink forwardedAs={as} {...props} />

feat(TabNav): remove support for sx prop #6864

feat(TabNav): remove support for sx prop #6864

Conversation

jonrohan commented Sep 17, 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 Sep 17, 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 Sep 17, 2025

Uh oh!

primer-integration bot commented Sep 25, 2025

Uh oh!

primer-integration bot commented Sep 25, 2025

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Reviewed Changes

Uh oh!

Copilot AI Sep 25, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Sep 25, 2025

Choose a reason for hiding this comment

Uh oh!

francinelucca left a comment

Choose a reason for hiding this comment

Uh oh!

github-actions bot commented Sep 26, 2025

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

jonrohan commented Sep 17, 2025 •

edited

Loading

changeset-bot bot commented Sep 17, 2025 •

edited

Loading