AnchoredOverlay: Add support for CSS anchor positioning

[TylerJDev]

• Closes https://github.com/github/primer/issues/6446
• Companion PR in github/github-ui merged before this PR: https://github.com/github/github-ui/pull/15790

The first batch of work to add CSS anchor positioning to overlay components.

Example of CSS anchor positioning:

Screen.Recording.2026-03-04.at.7.33.32.AM.mov

Video description

In the video, we show the `AnchoredOverlay` opening and being positioned directly under the trigger. We then show off the overlay repositioning when there's lack of space.

Changelog

New

• Added support for CSS Anchor Positioning in AnchoredOverlay, gated by the primer_react_css_anchor_positioning feature flag.
• Updated ActionMenu to ensure that the anchor button receives the correct anchor class for CSS anchor positioning, and improved merging of class names between anchor and button props.
• Added new stories to AnchoredOverlay.features.stories.tsx to demonstrate anchor positioning in various layouts, including centered overlays, grid layouts, within dialogs (including nested and overflowing dialogs), scroll containers, and sticky headers.

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

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: 1364a4d

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. Or, apply the integration-tests: skipped manually label to skip these checks.

[primer]

🤖 Lint and formatting 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.

[primer]

🤖 Lint and formatting 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.

[siddharthkp]

I added e2e tests to compare this PR against: diff.

The diffs are only present with the feature flag ON. So that's good! Even though this feature isn't perfect yet, we can merge and continue to iterate on it.

Regressed:

AnchoredOverlay-Anchor-Alignment: default is not centered anymore.

 

AnchoredOverlay-Scroll-With-Anchor: default is not centered anymore

 

AnchoredOverlay-Fullscreen-Variant: Not fullscreen anymore

 

AnchoredOverlay-Offset-Alignment-From-Anchor: offset not respected

 

AnchoredOverlay-Offset-Position-From-Anchor: offset not respected

 

[primer-integration]

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

[primer-integration]

Integration test results from github/github-ui:

  CI Passed
  VRT Passed
  Projects Waiting

[siddharthkp]

Added integration-tests: skipped manually because tests are passing in the integration branch, but it wasn't reported fully: https://github.com/github/github-ui/pull/15793#issuecomment-4042824514