Migrate the TabNav component to use CSS modules

[jonrohan]

Changelog

New

Changed

Migrating TabNav to use CSS modules

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]

🦋 Changeset detected

Latest commit: 25e3be4

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	Minor

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]

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

[Copilot]

Pull Request Overview

This PR migrates the TabNav component from styled-components to CSS Modules, replacing custom styled wrappers with BoxWithFallback and adding scoped CSS in TabNav.module.css.

• Swapped out styled-components usage for BoxWithFallback and CSS module classes.
• Introduced TabNav.module.css to encapsulate styles for the nav, tab list, links, and selected state.
• Updated tests to remove the Box wrapper and use a plain <div> for markup.

Reviewed Changes

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

File	Description
packages/react/src/TabNav/tests/TabNav.test.tsx	Replaced <Box> wrapper with <div>
packages/react/src/TabNav/TabNav.tsx	Removed styled-components, wired up CSS modules
packages/react/src/TabNav/TabNav.module.css	New CSS module for TabNav layout and styles

Comments suppressed due to low confidence (1)

packages/react/src/TabNav/TabNav.module.css:29

• CSS module files typically do not support Sass mixins by default. Either convert this file to a .module.scss with proper preprocessor support or replace the mixin with valid PostCSS/CSS syntax for focus styles.

    @mixin focusOutline -6px;

[Copilot]

For role="tab", aria-selected should always be present with a boolean value (true or false). Change to aria-selected={selected} so it does not get omitted.

Suggested change

	aria-selected={selected ? true : undefined}
	aria-selected={selected}

[github-actions]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	94.51 KB (0%)
packages/react/dist/browser.umd.js	94.64 KB (0%)

[primer-integration]

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

[primer-integration]

🔴 golden-jobs completed with status failure.