Add ActionList.GroupHeading.LeadingVisual

[mattobee]

Summary

This adds a way to put a leading visual (an icon, usually) before the title in an ActionList.Group heading. Today you can already add a trailing action to a group heading; this gives you the matching thing on the other side.

It mirrors the existing ActionList.GroupHeading.TrailingAction API, so usage looks like this:

<ActionList>
  <ActionList.Group>
    <ActionList.GroupHeading as="h3">
      <ActionList.GroupHeading.LeadingVisual>
        <FileDirectoryIcon />
      </ActionList.GroupHeading.LeadingVisual>
      Custom fields
    </ActionList.GroupHeading>
    <ActionList.Item>…</ActionList.Item>
  </ActionList.Group>
</ActionList>

It's gated behind a new primer_react_action_list_group_heading_leading_visual feature flag (off by default), and it can be combined with TrailingAction. Needed for github/github-ui#22642 (collapsed nav group popover).

Implementation notes

• The leading visual is decorative, so unlike TrailingAction it doesn't throw for listbox / menu roles. It renders before the heading element so it never becomes part of the heading's accessible name.
• The useSlots config is built from only the enabled flags. That way, if one feature is on and the other off, the disabled one's child passes straight through to the heading unchanged rather than being stripped out.

Changelog

New

• ActionList.GroupHeading.LeadingVisual (behind primer_react_action_list_group_heading_leading_visual).
• ActionListGroupHeadingLeadingVisualProps type export.

Changed

• Nothing changes for existing consumers; the feature is opt-in via the flag.

Removed

• Nothing.

Rollout strategy

• Patch release
• 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

New unit tests in Group.test.tsx cover: flag on (visual renders as a sibling of the heading, not inside it), flag off (passes through inside the heading), listbox role, both leading + trailing together, and the case where only the trailing flag is on (leading visual is not stripped). A Storybook story With LeadingVisual on GroupHeading (behind feature flag) is added under ActionList → Features.

Note: I wasn't able to run the local test/lint/type-check suite in my environment because npm install fails to resolve @github/tab-container-element@4.8.2 from the reachable registries. CI should run the full suite.

Merge checklist

• Added/updated tests
• Added/updated documentation
• Added/updated previews (Storybook)
• Changes are SSR compatible
• Tested in Chrome
• Tested in Firefox
• Tested in Safari
• Tested in Edge
• (GitHub staff only) Integration tests pass at github/github-ui

[changeset-bot]

🦋 Changeset detected

Latest commit: d0f6768

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]

⚠️ Action required

👋 Hi, this pull request contains changes to the source code that github/github-ui depends on. If you are GitHub staff, test these changes with github/github-ui using the integration workflow. Check the integration testing docs for step-by-step instructions. Or, apply the integration-tests: skipped manually label to skip these checks.

To publish a canary release for integration testing, apply the Canary Release label to this PR.

[primer]

🤖 Lint issues have been automatically fixed and committed to this PR.

[primer]

🤖 Lint issues have been automatically fixed and committed to this PR.

[primer]

🤖 Lint issues have been automatically fixed and committed to this PR.