Replace polyfill with `useAnchoredPosition` by TylerJDev · Pull Request #7725 · primer/react

TylerJDev · 2026-04-02T18:30:00Z

Part of https://github.com/github/primer/issues/6321

Closes https://github.com/github/primer/issues/6511, https://github.com/github/primer/issues/6538

Replaces the polyfill with our own JS-based anchoring as a fallback on browsers that do not support CSS anchor positioning.

Changelog

New

Adds additional CSS anchor positioning fallbacks for side='outside-right' and side='outside-left'.
Adds function to calculate offset if there's no remaining space for CSS anchor positioning to reposition to.

Changed

Replaces CSS anchor positioning polyfill with useAnchoredPosition hook.

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 · 2026-04-02T18:30:08Z

🦋 Changeset detected

Latest commit: b92d59f

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 · 2026-04-02T18:30:32Z

⚠️ 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 · 2026-04-06T20:03:14Z

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

primer · 2026-04-06T21:43:08Z

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

TylerJDev · 2026-04-08T14:35:42Z

packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx

+    if (anchorElement) {
+      const overlayWidth = width ? parseInt(widthMap[width]) : null
+      const result = getDefaultPosition(anchorElement, overlayWidth)
+
+      if (result) {
+        currentOverlay.setAttribute('data-align', result.horizontal)
+        currentOverlay.style.setProperty('--anchored-overlay-anchor-offset-left', `${result.offset}px`)
+      }


This was added as a solution for https://github.com/github/primer/issues/6511. We calculate the required offset for the overlay to be where it can have the most space within the viewport.

This does mean we rely on JS + CSS, but this is a pretty lightweight way to do it. We'll only use JS when there isn't enough space for the overlay to exist, otherwise we rely fully on CSS anchor positioning

primer-integration · 2026-04-13T16:58:16Z

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

primer-integration · 2026-04-13T17:06:50Z

Integration test results from github/github-ui:

CI Passed
VRT Running
Projects Passed

liuliu-dev

I like the idea here :sparkle (the emoji selector issue here)

the offset approach to handle overflow is a smart fix!

liuliu-dev · 2026-04-13T23:44:04Z

packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx

+  const leftOffset = Math.max(0, overlayWidth - rect.right + viewportMargin)
+  const rightOffset = Math.max(0, rect.left + overlayWidth - vw + viewportMargin)


I took a second to understand these 😅

Is leftOffset from ensuring overlayLeft >= viewportMargin, so viewportMargin - (rect.right - overlayWidth)>=0

and rightOffset from overlayRight <= vw - viewportMargin?

Could we add a short comment here explaining the formulas?

You're right, it can be a bit confusing 😅 I added a comment to clarify! Thanks for the suggestion too!

primer · 2026-04-14T01:37:51Z

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

packages/react/src/Overlay/Overlay.module.css

Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com>

TylerJDev · 2026-04-14T01:43:41Z

Can we make sure every new change is feature flagged as well?

Yup! We should be good to go!

github-actions bot added staff Author is a staff member integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm labels Apr 2, 2026

TylerJDev deployed to github-pages April 2, 2026 18:40 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7725 April 2, 2026 18:41 Inactive

TylerJDev deployed to github-pages April 2, 2026 23:54 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7725 April 2, 2026 23:55 Inactive

TylerJDev added the Canary Release Apply this label when you want CI to create a canary release of the current PR label Apr 3, 2026

TylerJDev deployed to github-pages April 6, 2026 16:05 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7725 April 6, 2026 16:06 Inactive

github-actions bot temporarily deployed to storybook-preview-7725 April 6, 2026 20:05 Inactive

primer bot deployed to github-pages April 6, 2026 20:16 View deployment

github-actions bot temporarily deployed to storybook-preview-7725 April 6, 2026 20:16 Inactive

TylerJDev added 6 commits April 6, 2026 17:35

Replace polyfill with useAnchoredPosition

7d19757

Adjust CSS

2515e42

Add some JS

7dee64b

Try more lightweight solution

8125f08

Improve logic

1841ecc

Add story to dev

848c19c

TylerJDev force-pushed the tylerjdev/replace-css-anchor-positioning-polyfill branch from 1aab292 to 848c19c Compare April 6, 2026 21:35

chore: auto-fix lint and formatting issues

cc8c862

github-actions bot temporarily deployed to storybook-preview-7725 April 6, 2026 21:46 Inactive

primer bot deployed to github-pages April 6, 2026 21:56 View deployment

github-actions bot temporarily deployed to storybook-preview-7725 April 6, 2026 21:56 Inactive

TylerJDev commented Apr 8, 2026

View reviewed changes

TylerJDev added 2 commits April 9, 2026 09:29

Remove max-height

8a5fedf

Remove max-height from popopover

1162d6c

github-actions bot temporarily deployed to storybook-preview-7725 April 13, 2026 14:34 Inactive

Update based on size width, not viewport

c88c994

TylerJDev deployed to github-pages April 13, 2026 15:19 — with GitHub Actions View deployment

github-actions bot temporarily deployed to storybook-preview-7725 April 13, 2026 15:20 Inactive

TylerJDev added update snapshots 🤖 Command that updates VRT snapshots on the pull request labels Apr 13, 2026

test(vrt): update snapshots

621ccab

github-actions bot removed the update snapshots 🤖 Command that updates VRT snapshots on the pull request label Apr 13, 2026

primer bot deployed to github-pages April 13, 2026 15:58 View deployment

github-actions bot temporarily deployed to storybook-preview-7725 April 13, 2026 15:58 Inactive

TylerJDev requested a review from liuliu-dev April 13, 2026 20:05

liuliu-dev approved these changes Apr 13, 2026

View reviewed changes

TylerJDev and others added 2 commits April 13, 2026 21:31

Address feedback

6d98342

chore: auto-fix lint and formatting issues

9763d3b

TylerJDev commented Apr 14, 2026

View reviewed changes

packages/react/src/Overlay/Overlay.module.css Outdated Show resolved Hide resolved

TylerJDev and others added 2 commits April 13, 2026 21:41

Update packages/react/src/Overlay/Overlay.module.css

5e712d0

Update .changeset/eight-eagles-deny.md

b92d59f

Co-authored-by: Siddharth Kshetrapal <siddharthkp@github.com>

github-actions bot temporarily deployed to storybook-preview-7725 April 14, 2026 01:42 Inactive

TylerJDev added the integration-tests: skipped manually Changes in this PR do not require an integration test label Apr 14, 2026

TylerJDev deployed to github-pages April 14, 2026 01:51 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-7725 April 14, 2026 01:52 View deployment

TylerJDev added this pull request to the merge queue Apr 14, 2026

Merged via the queue into main with commit d7b9313 Apr 14, 2026
60 checks passed

TylerJDev deleted the tylerjdev/replace-css-anchor-positioning-polyfill branch April 14, 2026 01:59

primer bot mentioned this pull request Apr 13, 2026

Release tracking 38.20.0 #7740

Open

		const leftOffset = Math.max(0, overlayWidth - rect.right + viewportMargin)
		const rightOffset = Math.max(0, rect.left + overlayWidth - vw + viewportMargin)

Conversation

TylerJDev commented Apr 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Changelog

New

Changed

Rollout strategy

Testing & Reviewing

Merge checklist

Uh oh!

changeset-bot bot commented Apr 2, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions bot commented Apr 2, 2026

⚠️ Action required

Uh oh!

primer bot commented Apr 6, 2026

Uh oh!

primer bot commented Apr 6, 2026

Uh oh!

TylerJDev Apr 8, 2026

Choose a reason for hiding this comment

Uh oh!

primer-integration bot commented Apr 13, 2026

Uh oh!

primer-integration bot commented Apr 13, 2026

Uh oh!

liuliu-dev left a comment

Choose a reason for hiding this comment

Uh oh!

liuliu-dev Apr 13, 2026

Choose a reason for hiding this comment

Uh oh!

TylerJDev Apr 14, 2026

Choose a reason for hiding this comment

Uh oh!

primer bot commented Apr 14, 2026

Uh oh!

Uh oh!

TylerJDev commented Apr 14, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

TylerJDev commented Apr 2, 2026 •

edited

Loading

changeset-bot bot commented Apr 2, 2026 •

edited

Loading