Skip to content

Replace polyfill with useAnchoredPosition#7725

Draft
TylerJDev wants to merge 7 commits intomainfrom
tylerjdev/replace-css-anchor-positioning-polyfill
Draft

Replace polyfill with useAnchoredPosition#7725
TylerJDev wants to merge 7 commits intomainfrom
tylerjdev/replace-css-anchor-positioning-polyfill

Conversation

@TylerJDev
Copy link
Copy Markdown
Member

@TylerJDev TylerJDev commented Apr 2, 2026

Closes #

Changelog

New

Changed

Removed

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

@changeset-bot
Copy link
Copy Markdown

changeset-bot bot commented Apr 2, 2026 •
edited
Loading

⚠️ No Changeset found

Latest commit: cc8c862

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

@github-actions 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
@github-actions
Copy link
Copy Markdown
Contributor

github-actions bot commented Apr 2, 2026

⚠️ 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.

@github-actions github-actions bot temporarily deployed to storybook-preview-7725 April 2, 2026 18:41 Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-7725 April 2, 2026 23:55 Inactive
@TylerJDev 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
@github-actions github-actions bot temporarily deployed to storybook-preview-7725 April 6, 2026 16:06 Inactive
@primer
Copy link
Copy Markdown
Contributor

primer bot commented Apr 6, 2026

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

@github-actions github-actions bot temporarily deployed to storybook-preview-7725 April 6, 2026 20:05 Inactive
@github-actions github-actions bot temporarily deployed to storybook-preview-7725 April 6, 2026 20:16 Inactive
@TylerJDev TylerJDev force-pushed the tylerjdev/replace-css-anchor-positioning-polyfill branch from 1aab292 to 848c19c Compare April 6, 2026 21:35
@primer
Copy link
Copy Markdown
Contributor

primer bot commented Apr 6, 2026

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

@github-actions github-actions bot temporarily deployed to storybook-preview-7725 April 6, 2026 21:46 Inactive
@primer-integration
Copy link
Copy Markdown

primer-integration bot commented Apr 8, 2026

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

@primer-integration
Copy link
Copy Markdown

primer-integration bot commented Apr 8, 2026

Integration test results from github/github-ui:

Passed  CI   Passed
Passed  VRT   Passed
Passed  Projects   Passed

All checks passed!

TylerJDev
TylerJDev commented Apr 8, 2026
View reviewed changes
packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx
Comment on lines +274 to +281
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`)
}
Copy link
Copy Markdown
Member Author

@TylerJDev TylerJDev Apr 8, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

Copilot code review Copilot Awaiting requested review from Copilot Copilot will automatically review once the pull request is marked ready for review

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

Canary Release Apply this label when you want CI to create a canary release of the current PR integration-tests: recommended This change needs to be tested for breaking changes. See https://arc.net/l/quote/tdmpakpm staff Author is a staff member

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

1 participant

@TylerJDev