ActionList.Group should allow for TrailingActions

[mattcosta7]

Describe the bug

ActionList.Group should allow for a TrailingAction, potentially with an api similar to this one, to maintain consistency with ActionList.Item

<ActionList.Group>
  <ActionList.GroupHeader>
    Title
    <ActionList.TrailingVisual>
      {/* reviewer dropdown */}
    </ActionList.TrailingVisual>
  </ActionList.GroupHeader>

  <ActionList.Item>
    {/* ... */}
  </ActionList.Item>

  {/* ... */}
</ActionList.Group>

Expected behavior

A user can define a trailing action for a group which appears as a button/link on the end of the group header, similar to the provided sample screenshot

Screenshots

Additional context

Slack thread

[lesliecdubs]

Thanks for filing! We're going to explore the accessibility implications of this and will get back to you.

[siddharthkp]

Leaving notes for the future:

The mock up here is a perfect use case for NavigationList, so we could pick this up with the upcoming work. cc @colebemis

Because NavigationList uses ActionList under the hood, we would need to add this to ActionList.

However, we should add safe guards in place for ActionMenu (which also uses ActionList) because a button next to group title inside role=group would need different semantics (maybe even a different design pattern).

For now, we can choose to simply no allow a trailingAction inside an ActionMenu Group

[mattcosta7]

Definitely @siddharthkp ! We actually mocked this up as an implementation of navigationlist since there wasn't a component for it yet :-)

[github-actions[bot]]

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

[mattcosta7]

Not stale

[github-actions[bot]]

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

[dylanatsmith]

Adding some additional use cases:

Search workflows

This is live in the repo Actions tab (ex: https://github.com/github/github/actions)

Manage knowledge bases

This is from a new design for Copilot chat

[github-actions[bot]]

Uh oh! @dylanatsmith, the image you shared is missing helpful alt text. Check https://github.com/primer/react/issues/2043#issuecomment-1943608899.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.