Adds NavList.GroupHeading component

[mperrotti]

We needed linked group headings when developing the new Primer docs. Instead of faking it by using ActionList.GroupHeading, we discussed updating the NavList API to allow rendering NavList.Group headings using NavList.GroupHeading instead of the more restrictive title prop: <NavList.Group title="Group title">

This was discussed in a weekly Primer patterns/API working sesh on Sept 24 2024 (notes)

The NavList group headings would be styled exactly the same except when they're hovered. The first group heading in this image is being hovered.

Changelog

Adds NavList.GroupHeading component

New

NavList.GroupHeading component

Changed

Removed

Rollout strategy

• [ ] Patch release
• [x] 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
• [x] Added/updated previews (Storybook)
• [ ] Changes are SSR compatible
• [x] 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[bot]]

🦋 Changeset detected

Latest commit: 5765a19e36a3cd34b481a4b730eb5743a40b762a

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[bot]]

:wave: 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[bot]]

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	97.02 KB (+0.12% 🔺)
packages/react/dist/browser.umd.js	97.35 KB (+0.11% 🔺)

[mperrotti]

I'm seeing some different styles in the heading between the "With Group" and "With Group Heading Links" stories (mainly the color), wondering if that's intended

This is an intentional style change we decided to make last week.

---

Also wondering what would happen if a user used this in alongside the title prop (and if we even care to cover/prevent for that use case)

Great question! I'll look into this and add some guards to prevent undesired results.