fix(FilteredActionList): prevent content-visibility from clipping item dividers

[francinelucca]

Summary

Item dividers in SelectPanel (and FilteredActionList) are invisible even when showItemDividers={true} is set. The divider pseudo-elements exist in the DOM with correct styles but are visually clipped.

Root Cause

The content-visibility: auto performance optimization in FilteredActionList.module.css implicitly applies contain: paint (MDN reference), which clips any content that overflows an element's box — similar to overflow: hidden.

Item dividers are rendered as ::before pseudo-elements on ActionListSubContent, positioned at top: -7px (absolutely positioned relative to the sub-content span). This places the 1px divider line just above the <li> element's boundary. With paint containment active, this overflow is clipped and the dividers become invisible.

The existing code already had a comment acknowledging this same issue for the active indicator ::after pseudo-element (which is why focused/active items are excluded from the content-visibility: auto rule), but dividers were not accounted for.

Fix

Added a CSS rule that resets content-visibility to visible for items inside lists with data-dividers="true":

& [data-dividers='true'] .ActionListItem {
  content-visibility: visible;
}

This disables paint containment only when dividers are enabled, preserving the rendering performance optimization for all other lists.

Verification

Tested in Storybook at Components / SelectPanel / Features / With Item Dividers — dividers now render correctly between items.

[changeset-bot]

🦋 Changeset detected

Latest commit: 94e4239

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	Patch

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.

[Copilot]

Pull request overview

Fixes a rendering bug in FilteredActionList/SelectPanel where item divider pseudo-elements are clipped when content-visibility: auto is applied to list items.

Changes:

• Adds a CSS override to disable content-visibility: auto for action list items when dividers are enabled (data-dividers="true").
• Documents why paint containment from content-visibility clips the divider ::before pseudo-element.

[primer-integration]

👋 Hi from github/github-ui! Your integration PR is ready: https://github.com/github/github-ui/pull/16766

[primer-integration]

Integration test results from github/github-ui:

  CI Failed
  VRT Passed
  Projects Passed

CI check runs linting, type checking, and unit tests. Check the workflow logs for specific failures.

Need help? If you believe this failure is unrelated to your changes, please reach out to the Primer team for assistance.

[hectahertz]

Looks good, nice find on the paint containment interaction. Worth keeping in mind that divider lists will lose the content-visibility optimization, but that's a fine tradeoff.