SubNav refactor by rezrah · Pull Request #1248 · primer/brand

rezrah · 2026-02-10T13:13:20Z

Summary

Towards https://github.com/github/brand-marketing-design/issues/2606

Updatest the visual appearance of SubNav and deprecates one prop.

🔗 Docs
🔗 Storyboook

List of notable changes:

Applies brand refactor styles (gridline on by default)
deprecates hasShadow prop

What should reviewers focus on?

Check for edge cases
Review the before/afters in FIles Changes tab and try to spot inadvertent changes

Steps to test:

Supporting resources (related issues, external links, etc):

Designs

Contributor checklist:

All new and existing CI checks pass
Tests prove that the feature works and covers both happy and unhappy paths
Any drop in coverage, breaking changes or regressions have been documented above
UI Changes contain new visual snapshots (generated by adding update snapshots label to the PR)
All developer debugging and non-functional logging has been removed
Related issues have been referenced in the PR description

Reviewer checklist:

Check that pull request and proposed changes adhere to our contribution guidelines and code of conduct
Check that tests prove the feature works and covers both happy and unhappy paths
Check that there aren't other open Pull Requests for the same update/change

Screenshots:

Please try to provide before and after screenshots or videos

Before	After

changeset-bot · 2026-02-10T13:13:31Z

🦋 Changeset detected

Latest commit: aa41671

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

This PR includes changesets to release 8 packages

Name	Type
@primer/react-brand	Patch
@primer/brand-primitives	Patch
@primer/brand-docs	Patch
@primer/brand-css	Patch
@primer/brand-e2e	Patch
@primer/brand-fonts	Patch
@primer/brand-config	Patch
@primer/brand-storybook	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 · 2026-02-10T13:15:14Z

🔍 Design token changes found

View CSS variable changes

+ --brand-SubNav-bgColor: var(--brand-color-canvas-default);

- --brand-SubNav-color-subMenu-bgColor: var(--base-color-scale-white-0);
+ --brand-SubNav-color-link-bgColor: #e4ebe6;

+ --brand-SubNav-bgColor: var(--brand-color-canvas-default);

- --brand-SubNav-color-subMenu-bgColor: var(--base-color-scale-white-0);
+ --brand-SubNav-color-link-bgColor: #323834;

github-actions · 2026-02-10T13:16:52Z

🟢 Unit test coverage changes found

Unit test coverage has been updated through this PR.

Changes: 0 new tests, 0 removed tests, 1 improved, 1 decreased

Component/Hook	Statements	Functions	Branches	Change
`SubNav`	~~86.0%~~ 87.0%	~~84.8%~~ 85.1%	~~77.7%~~ 77.5%	+1.0%

github-actions · 2026-02-10T13:18:34Z

🟢 No visual differences found

Our visual comparison tests did not find any differences in the UI.

…nav-brand-refactor

Copilot

Pull request overview

Refactors the SubNav component to match updated Brand styles (including borders/gridlines by default), introduces new SubNav design tokens, and updates tests/docs/snapshots. It also propagates aria-current support through the FlexTemplate recipe so “current page” state can be reflected in SubNav links.

Changes:

Refactor SubNav markup/styling (icons, active states, narrow overlay behavior) and deprecate hasShadow.
Add aria-current support to FlexTemplate link types + stories and pass it through to SubNav.Link.
Update visual testing (snapshots, flaky-story skipping) and docs/changesets/tokens for the new SubNav look.

Reviewed changes

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

Show a summary per file

File	Description
packages/react/src/recipes/FlexTemplate/examples/FlexTemplate.examples.stories.tsx	Marks “current” FlexTemplate links in examples via `aria-current`.
packages/react/src/recipes/FlexTemplate/FlexTemplate.types.ts	Extends link type to support `'aria-current'`.
packages/react/src/recipes/FlexTemplate/FlexTemplate.tsx	Passes `aria-current` through to `SubNav.Link`.
packages/react/src/SubNav/SubNav.tsx	Core SubNav refactor: icons, narrow toggle structure/ARIA, overlay sizing, active state class.
packages/react/src/SubNav/SubNav.module.css	New SubNav visuals (borders, typography, pill active styles, overlay layout tweaks).
packages/react/src/SubNav/SubNav.module.css.d.ts	CSS module typings updated for new class names.
packages/react/src/SubNav/SubNav.test.tsx	Updates unit tests to reflect new behavior (separator test removed, new accessible-name expectations).
packages/react/src/SubNav/SubNav.visual.spec.ts	Removes flaky “Anchor Nav Variant” visual test while keeping narrow/other scenarios.
packages/react/src/SubNav/SubNav.visual.spec.ts-snapshots/Visual-Comparison-SubNav-SubNav-Sub-Heading-1-linux.png	Updated visual snapshot for new styling.
packages/react/src/SubNav/SubNav.visual.spec.ts-snapshots/Visual-Comparison-SubNav-SubNav-Full-Width-1-linux.png	Updated visual snapshot for new styling.
packages/react/src/SubNav/SubNav.visual.spec.ts-snapshots/Visual-Comparison-SubNav-SubNav-Forwarded-Refs-1-linux.png	Updated visual snapshot for new styling.
packages/react/src/SubNav/SubNav.visual.spec.ts-snapshots/Visual-Comparison-SubNav-SubNav-Default-1-linux.png	Updated visual snapshot for new styling.
packages/react/src/SubNav/SubNav.visual.spec.ts-snapshots/Visual-Comparison-SubNav-SubNav-Anchor-Nav-Default-Link-Variant-1-linux.png	Updated visual snapshot for new styling.
packages/react/src/SubNav/SubNav.visual.spec.ts-snapshots/Visual-Comparison-SubNav-SubNav-Active-Sub-Heading-1-linux.png	Updated visual snapshot for new styling.
packages/react/src/SubNav/SubNav.visual.spec.ts-snapshots/Visual-Comparison-SubNav-Mobile-viewport-test-for-Sub-Heading-Narrow-SubNav-Sub-Heading-Narrow-1-linux.png	Updated mobile snapshot for new styling.
packages/react/src/SubNav/SubNav.visual.spec.ts-snapshots/Visual-Comparison-SubNav-Mobile-viewport-test-for-Full-Width-Narrow-SubNav-Full-Width-Narrow-1-linux.png	Updated mobile snapshot for new styling.
packages/react/src/SubNav/SubNav.visual.spec.ts-snapshots/Visual-Comparison-SubNav-Mobile-viewport-test-0855d-ing-Narrow-SubNav-Active-Sub-Heading-Narrow-1-linux.png	Updated mobile snapshot for new styling.
packages/e2e/scripts/playwright/update-visual-snapshots	Allows passing extra Playwright args through the snapshot update script.
packages/e2e/scripts/playwright/playwright.generate-tests.ts	Skips the flaky anchor-nav variant story in generated visual tests.
packages/design-tokens/src/tokens/functional/components/sub-nav/colors.js	Adds/adjusts SubNav tokens (background + link bgColor).
apps/next-docs/content/components/SubNav/index.mdx	Removes `hasShadow` docs/example and updates props table.
.changeset/proud-pans-cross.md	Changeset for new SubNav tokens in `@primer/brand-primitives`.
.changeset/icy-cities-swim.md	Changeset documenting SubNav refactor + `hasShadow` deprecation + Action variant change.

packages/react/src/SubNav/SubNav.tsx

packages/react/src/SubNav/SubNav.module.css

…nav-brand-refactor

danielguillan

Great updates! They work perfectly.

.changeset/icy-cities-swim.md

danielguillan · 2026-02-23T09:04:39Z

packages/design-tokens/src/tokens/functional/components/sub-nav/colors.js

+      value: 'var(--base-color-scale-white-0)',
+      dark: '#000',


We should be able to use --(--brand-color-cavas-default) here, which maps to white-0 (#fff) and black-0 (#000) and is semantically appropriate.

perfect, thanks Dani. I assumed that we don't use #000 exactly for black-0, but that's only in light mode. Now both use canvas.

danielguillan · 2026-02-23T09:13:48Z

packages/react/src/SubNav/SubNav.module.css

+  font-size: calc(var(--base-size-16) - 1px);
+  line-height: calc(var(--base-size-16) - 1px);


🙈 Is that 1px difference significant enough to warrant deviating from the type scale?

I know 😅. This matches the design exactly. I normally would push for standardisation but 16px IMO did feel a bit too big, and we don't have anything lower until 12px. As it's the SubNav I think it's okay as a one-off, but let me add an annotation to make it clear it's an exception. Does that work for you @danielguillan?

cc @jesussandreas

packages/react/src/SubNav/SubNav.module.css

…nav-brand-refactor

first iteration

4ea23c3

rezrah temporarily deployed to github-pages February 10, 2026 13:16 — with GitHub Actions Inactive

apply correct default bg

fbf4ef6

rezrah temporarily deployed to github-pages February 10, 2026 15:00 — with GitHub Actions Inactive

remove hover effect

e67e139

rezrah temporarily deployed to github-pages February 10, 2026 15:09 — with GitHub Actions Inactive

fix main heading padding across breakpoints

e08b0a7

rezrah temporarily deployed to github-pages February 10, 2026 15:24 — with GitHub Actions Inactive

update dropdown designs

2f0a1ee

rezrah temporarily deployed to github-pages February 12, 2026 17:40 — with GitHub Actions Inactive

fix aria-current on desktop links

b253a89

rezrah temporarily deployed to github-pages February 12, 2026 17:51 — with GitHub Actions Inactive

fix padding

7d640aa

rezrah temporarily deployed to github-pages February 12, 2026 20:02 — with GitHub Actions Inactive

add changeset

cdacb56

rezrah temporarily deployed to github-pages February 12, 2026 20:19 — with GitHub Actions Inactive

fix bugs

a5ec222

rezrah temporarily deployed to github-pages February 16, 2026 16:27 — with GitHub Actions Inactive

rezrah added 2 commits February 19, 2026 17:41

qa feedback

5096ca6

Merge branch 'main' of github.com:primer/brand into rezrah/update-sub…

e9d3ead

…nav-brand-refactor

rezrah temporarily deployed to github-pages February 19, 2026 17:47 — with GitHub Actions Inactive

rezrah requested a review from danielguillan February 20, 2026 14:19

rezrah marked this pull request as ready for review February 20, 2026 14:19

rezrah requested a review from a team as a code owner February 20, 2026 14:19

Copilot AI review requested due to automatic review settings February 20, 2026 14:19

Copilot started reviewing on behalf of rezrah February 20, 2026 14:19 View session

Copilot AI reviewed Feb 20, 2026

View reviewed changes

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

packages/react/src/SubNav/SubNav.module.css Outdated Show resolved Hide resolved

rezrah added 2 commits February 20, 2026 14:32

Merge branch 'main' of github.com:primer/brand into rezrah/update-sub…

48cb584

…nav-brand-refactor

copilot feedback

b9af4b4

rezrah temporarily deployed to github-pages February 20, 2026 14:44 — with GitHub Actions Inactive

danielguillan approved these changes Feb 23, 2026

View reviewed changes

rezrah added 2 commits February 23, 2026 10:27

Merge branch 'main' of github.com:primer/brand into rezrah/update-sub…

6d60324

…nav-brand-refactor

regen snapshots

1f2786d

rezrah temporarily deployed to github-pages February 23, 2026 10:52 — with GitHub Actions Inactive

update canvas tokens

aa41671

rezrah temporarily deployed to github-pages February 23, 2026 11:02 — with GitHub Actions Inactive

rezrah merged commit 39772c1 into main Feb 23, 2026
23 checks passed

rezrah deleted the rezrah/update-subnav-brand-refactor branch February 23, 2026 11:47

primer bot mentioned this pull request Feb 23, 2026

Release tracking #1247

Open

		font-size: calc(var(--base-size-16) - 1px);
		line-height: calc(var(--base-size-16) - 1px);

Conversation

rezrah commented Feb 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Summary

List of notable changes:

What should reviewers focus on?

Steps to test:

Supporting resources (related issues, external links, etc):

Contributor checklist:

Reviewer checklist:

Screenshots:

Uh oh!

changeset-bot bot commented Feb 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Feb 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🔍 Design token changes found

Uh oh!

github-actions bot commented Feb 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🟢 Unit test coverage changes found

Uh oh!

github-actions bot commented Feb 10, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🟢 No visual differences found

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Uh oh!

Uh oh!

danielguillan left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

danielguillan Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

rezrah Feb 23, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

danielguillan Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

rezrah Feb 23, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

rezrah commented Feb 10, 2026 •

edited

Loading

changeset-bot bot commented Feb 10, 2026 •

edited

Loading

github-actions bot commented Feb 10, 2026 •

edited

Loading

github-actions bot commented Feb 10, 2026 •

edited

Loading

github-actions bot commented Feb 10, 2026 •

edited

Loading

rezrah Feb 23, 2026 •

edited

Loading