SubNav v2

[rezrah]

Summary

Part of https://github.com/github/primer/issues/3312

Updates SubNav component to support anchor-based navigation similar to AnchorNav.

⚠️ Despite being internally referred to as SubNav v2 there are no breaking changes to the API as part of this update. A full visual refresh however, has been implemented per latest Site guidance.

🔗 Documentation
🔗 Storybook examples

List of notable changes:

• updated SubNav.Submenu to support variant="anchor"
• updated Storybook examples to respect color modes and differentiate between dropdown and anchor submenu types
• fixed various bugs in existing subnav like not closing mobile overlays when clicking outside it

What should reviewers focus on?

• Manually review each of the Storybook examples for design accuracy
• Read through the docs and verify new features are accurately captured

Steps to test:

1. Use these Storybook examples
2. Use this docs link
3. Use the visual diffs to see before and afters

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

• Tracking issue

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

New anchor navigation

Light	Dark

[changeset-bot]

🦋 Changeset detected

Latest commit: 4a89735

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

This PR includes changesets to release 6 packages

Name	Type
@primer/react-brand	Minor
@primer/brand-primitives	Minor
@primer/brand-e2e	Minor
@primer/brand-fonts	Minor
@primer/brand-config	Minor
@primer/brand-storybook	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]

🔍 Design token changes found

View CSS variable changes

- --brand-SubNav-color-link-active: var(--base-color-scale-blue-5);
+ --brand-SubNav-color-link-active: var(--brand-color-text-default);

- --brand-SubNav-color-link-active: var(--base-color-scale-blue-3);
+ --brand-SubNav-color-link-active: var(--brand-color-text-default);

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

[github-actions]

🟢 No visual differences found

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

[joshfarrant]

Commenting to remove Changes requested status

nvm, that didn't work 😶

[joshfarrant]

Looking great!

[danielguillan]

This looks really great!

Just a few minor visual adjustments are needed based on my design review:

• Heading font size:
  • small: 20px → 16px
  • large: 20px → 18px
• SubNav Links font size:
  • large: 16px → 14px
• Gap between links:
  • large: 24px → 20px
• Separator (/) color:
  • light mode: gray-4
  • dark mode: gray-5

AnchorNav top and bottom paddings should be set to 12 and 20 respectively. We might need to adjust the link line-height and/or paddings accordingly to compensate the overall height.

Dropdown items should align with the parent link above.

Link to the Figma implementation for reference.

I'll preemptively approve so you can merge when these tweaks are ready.