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: 1552634

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.

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

[primer-integration]

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

[primer-integration]

Integration test results from github/github-ui:

  CI Passed
  VRT Running
  Projects Passed