Add expand to `NavList`

[TylerJDev]

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

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

Proposed API

Basic example:

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

Multiple expands:

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

Group example (storybook)

Changelog

New

• Adds new component NavList.ShowMoreItem

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

🦋 Changeset detected

Latest commit: d22f63f6c782b80831dba223a08515e0836f417d

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

size-limit report 📦

Path	Size
packages/react/dist/browser.esm.js	106.02 KB (+0.24% 🔺)
packages/react/dist/browser.umd.js	106.33 KB (+0.15% 🔺)

[TylerJDev]

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]

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]

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

[TylerJDev]

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

I think going with parity is a good idea! I renamed it to ShowMoreItem so that we're more in sync with the PVC NavList. Thank you for the suggestion! :grin:

[TylerJDev]

Super weird question, but we don't really have a way to mark this as "experimental" since it's a sub-component, do we? 😅

I don't think we do, but maybe this is something we'd want to have for future sub-components? 🤔

[TylerJDev]

Pinging @primer/engineer-reviewers for any additional reviews!

[lesliecdubs]

👋🏻 @TylerJDev wanted to check in as I noticed this one has been sitting without action for a while. What's the next step needed here? Have we gotten the necessary alignment from Primer Design and the rest of the engineering team on the addition of the "more" feature?

[TylerJDev]

Hey @lesliecdubs! This is pretty much finished, I just haven't had time to come back to the last suggested change. As for alignment with design, I'm wondering what's the best way to go about that?

[lesliecdubs]

Thanks for following up @tylerjdev. I'll leave you to the final change.

As for alignment with design, I'm wondering what's the best way to go about that?

Typically, pattern proposal issues like https://github.com/github/primer/issues/2637 go to a Primer Patterns meeting for discussion and approval. Perhaps you could add yourself to the next meeting invite and agenda, or if that doesn't work perhaps the Primer Design FR could weigh in on the PR.

[github-actions[bot]]

Hi! This pull request has been marked as stale because it has been open with no activity for 60 days. You can comment on the pull request or remove the stale label to keep it open. If you do nothing, this pull request will be closed in 7 days.

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

[TylerJDev]

@joshblack, should be ready for another review! I moved towards the data API that you suggested, and it seems to work great! Let me know if you have any suggestions or ways to improve it! 😁

[primer-integration[bot]]

:wave: Hi from github/github! Your integration PR is ready: https://github.com/github/github/pull/363691

[primer-integration[bot]]

🟢 golden-jobs completed with status success.

[github-actions[bot]]

:wave: Hi, there are new commits since the last successful integration test. We recommend running the integration workflow once more, unless you are sure the new changes do not affect github/github. Thanks!