Add expand to `NavList`

TylerJDev commented 1 week ago

Adds new component NavList.Expand, allows native support for "expanding" content within a NavList.

Closes https://github.com/github/primer/issues/2637

Proposed API

<NavList>
  <NavList.Item href="#" aria-current="page">Item 1</NavList.Item>
  <NavList.Item href="#">Item 2</NavList.Item>
  <NavList.Expand label="Show more">
    <NavList.Item href="#">Item 3</NavList.Item>
    <NavList.Item href="#">Item 4</NavList.Item>
  </NavList.Expand>
</NavList>

Multiple expands:

<NavList>
  <NavList.Item href="#" aria-current="page">Item 1</NavList.Item>
  <NavList.Item href="#">Item 2</NavList.Item>
  <NavList.Expand label="Show more">
    <NavList.Item href="#">Item 3</NavList.Item>
    <NavList.Item href="#">Item 4</NavList.Item>
    <NavList.Expand label="Show more">
      <NavList.Item href="#">Item 5</NavList.Item>
      <NavList.Item href="#">Item 6</NavList.Item>
     </NavList.Expand>
  </NavList.Expand>
</NavList>

Group example (storybook)

Changelog

New

Adds new component NavList.Expand

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

[x] Added/updated tests
[x] 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] commented 1 week ago

🦋 Changeset detected

Latest commit: 3c0c94259decd22eba88563430eae274031c46e8

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] commented 1 week ago

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	91.16 KB (+0.22% 🔺)
packages/react/dist/browser.umd.js	91.51 KB (+0.3% 🔺)

TylerJDev commented 4 days ago

Questions for reviewers!

Should we rename expand with something else? I am indifferent to the name, but I do think that there are other possible names that could work.
- collapsible
- disclosure
- expandable
- ...etc, (note: some of the names might imply that the control can be "collapsed" when it is expanded, which isn't the case in the current proposed API.
Would we ever want to support the control to be collapsible? Currently in PVC, the control does not collapse when expanded and custom implementations of NavList with a "show more" do not collapse.
- For now, the goal of this PR is parity with PVC and to unblock teams, of which only the "expand" functionality is required, but would love to hear any thoughts on this!
I added the ability to put expands inside of expands, which allows you to "nest" expands. This was added so that we'd have parity with PVC and how it handles "pages" (second group example).

TylerJDev commented 4 days ago

Would love any and all reviews from the team! This PR is serving mainly as a proposal to the NavList API, to add a new pattern/component. :grin:

Cc: @primer/engineer-reviewers

joshblack commented 1 day ago

Should we rename expand with something else

I'd love to try and come up with a descriptive name but it's definitely challenging 🤔 Maybe we could use NavList.ShowMoreItem to align with PVC? Which I think has the method: with_show_more_item

primer / react