AnchoredOverlay: Add settings for CSS anchor positioning

[TylerJDev]

Overview

Adds a cssAnchorPositioningSettings prop to AnchoredOverlay with a disable option that opts an individual overlay out of native CSS anchor positioning. We use this for SelectPanel, specifically to disable CSS anchor positioning for the modal variant so it stays manually centered.

There may be cases where CSS anchored positioning is not wanted, so this allows users to disable that behavior. This would remain even when we deprecate (and remove) JS-based anchored positioning.

Changelog

New

• Added a cssAnchorPositioningSettings?: {disable?: boolean} prop to AnchoredOverlay. Setting disable: true opts the overlay out of native CSS anchor positioning even when the primer_react_css_anchor_positioning feature flag is enabled and the browser supports it.

Changed

• SelectPanel now passes cssAnchorPositioningSettings={{disable: variant === 'modal'}} so the modal variant remains manually centered instead of being repositioned by CSS anchor positioning.

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

The new prop is additive and optional, and the SelectPanel change is scoped to the modal variant, so this is backwards compatible. Matches the changeset (@primer/react minor).

Testing & Reviewing

• Enable the primer_react_css_anchor_positioning feature flag in a browser that supports native CSS anchor positioning (e.g. recent Chrome).
• Open a SelectPanel with variant="modal" and confirm it stays centered on screen instead of being repositioned next to its trigger.
• Confirm anchored SelectPanel usages and other AnchoredOverlay consumers still position correctly — they don't set disable, so behavior is unchanged.

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 (Learn more about how to run integration tests)

[changeset-bot]

🦋 Changeset detected

Latest commit: e55eba7

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.

[Copilot]

Pull request overview

Adds an opt-out mechanism for native CSS anchor positioning in AnchoredOverlay, and applies it to keep SelectPanel’s modal variant manually centered even when the CSS-anchor feature flag is enabled.

Changes:

• Added cssAnchorPositioningSettings?: {disable?: boolean} to AnchoredOverlay to allow opting out of native CSS anchor positioning.
• Updated SelectPanel to disable native CSS anchor positioning for variant="modal".
• Added a changeset for an @primer/react minor release.

Show a summary per file

File	Description
packages/react/src/SelectPanel/SelectPanel.tsx	Passes cssAnchorPositioningSettings.disable for modal variant to preserve manual centering.
packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx	Adds new prop and gates native CSS anchor positioning behavior on disable.
.changeset/select-panel-modal-css-anchor-positioning.md	Declares a minor bump and summarizes the new prop + SelectPanel behavior change.

Copilot's findings

• Files reviewed: 3/3 changed files
• Comments generated: 4

[primer-integration]

Integration test results from github/github-ui PR:

CI Passed
VRT Running
Projects Waiting