Revert "AnchoredOverlay: Add support for CSS anchor positioning (#7604)" by francinelucca · Pull Request #7657 · primer/react

francinelucca · 2026-03-12T15:28:39Z

This reverts commit 61ae74c.

Saw some visual regressions during release testing, reverting

This reverts commit 61ae74c.

changeset-bot · 2026-03-12T15:28:48Z

⚠️ No Changeset found

Latest commit: 654ff80

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 · 2026-03-12T15:32:04Z

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

primer-integration · 2026-03-12T15:40:12Z

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

primer-integration · 2026-03-12T16:05:54Z

Integration test results from github/github-ui:

CI Passed
VRT Failed
Projects Passed

VRT check ensures that when visual differences are detected, the PR cannot proceed until someone acknowledges the changes by adding the "visual difference acknowledged" label.

Need help? If you believe this failure is unrelated to your changes, please reach out to the Primer team for assistance.

Copilot

Pull request overview

This PR reverts the previously-added CSS anchor positioning support for AnchoredOverlay, removing the feature-flagged implementation and its related dependency/configuration so AnchoredOverlay/Overlay return to portal-based positioning.

Changes:

Removed the primer_react_css_anchor_positioning feature flag and all related code paths (polyfill loading, data attributes, wrapper/anchor CSS).
Restored Overlay to always render via Portal and simplified associated CSS positioning rules.
Cleaned up tests/stories/dependencies to remove the feature-flag-specific behavior and dependency (@oddbird/css-anchor-positioning).

Reviewed changes

Copilot reviewed 11 out of 18 changed files in this pull request and generated 4 comments.

Show a summary per file

File	Description
packages/react/src/Overlay/Overlay.tsx	Removes CSS anchor positioning feature-flag branching; always portals overlays.
packages/react/src/Overlay/Overlay.module.css	Removes anchor-position gating selectors; applies positioning vars unconditionally.
packages/react/src/FeatureFlags/DefaultFeatureFlags.ts	Removes the CSS anchor positioning flag from defaults.
packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx	Removes CSS anchor positioning code path and polyfill behavior.
packages/react/src/AnchoredOverlay/AnchoredOverlay.test.tsx	Drops feature-flag parameterized tests and related assertions.
packages/react/src/AnchoredOverlay/AnchoredOverlay.module.css	Removes CSS anchor positioning classes (`Wrapper`, `Anchor`, `AnchoredOverlay`).
packages/react/src/ActionMenu/ActionMenu.tsx	Removes className merging logic in anchor cloning/handler merging paths.
packages/react/src/ActionMenu/ActionMenu.test.tsx	Removes feature-flag-based coverage for CSS anchor positioning behavior.
packages/react/src/ActionMenu/ActionMenu.examples.stories.tsx	Removes example stories added for CSS anchor positioning demo scenarios.
packages/react/package.json	Removes `@oddbird/css-anchor-positioning` dependency.
package-lock.json	Updates lockfile to reflect dependency removal and resulting tree changes.
.playwright/snapshots/components/AnchoredOverlay.test.ts-snapshots/css-anchor-positioning	Updates VRT snapshots for the CSS-anchor-positioning variant.
.changeset/nine-buttons-lose.md	Removes the changeset associated with the reverted feature.

You can also share your feedback on Copilot code review. Take the survey.

Copilot · 2026-03-12T16:50:42Z

packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx

+          top={position?.top || 0}
+          left={position?.left || 0}
          responsiveVariant={variant.narrow === 'fullscreen' ? 'fullscreen' : undefined}
-          anchorSide={cssAnchorPositioning ? undefined : position?.anchorSide}
-          className={clsx(className, overlayClassName, cssAnchorPositioning ? classes.AnchoredOverlay : undefined)}
+          anchorSide={position?.anchorSide}
+          className={className}
          preventOverflow={preventOverflow}
          data-component="AnchoredOverlay"
-          {...restOverlayProps}
+          {...overlayProps}
          ref={node => {


AnchoredOverlay sets className={className} but then spreads ...overlayProps afterward, so overlayProps.className will override (not merge with) the className prop. This makes it impossible to reliably add a class via className when consumers also provide overlayProps.className (which is used widely in stories). Consider merging the two class names explicitly (and avoid overriding either).

See below for a potential fix:

preventOverflow={preventOverflow} data-component="AnchoredOverlay" {...overlayProps} className={clsx(className, overlayProps?.className)}

Copilot · 2026-03-12T16:50:43Z

packages/react/src/ActionMenu/ActionMenu.tsx

      {React.cloneElement(child, {
        ...anchorProps,
        ref: anchorRef,
-        className: clsx(anchorProps.className, child.props.className),
        onClick: onButtonClick,
        onKeyDown: onButtonKeyDown,
      })}


ActionMenu.Anchor clones its child with ...anchorProps but no longer merges className with child.props.className. If the wrapped element already has a className (common for custom triggers), it will be overwritten by ActionMenu.Anchor's className prop, causing styling regressions. Consider merging the two class names when cloning.

Copilot · 2026-03-12T16:50:43Z

packages/react/src/FeatureFlags/DefaultFeatureFlags.ts

 export const DefaultFeatureFlags = FeatureFlagScope.create({
  primer_react_breadcrumbs_overflow_menu: false,
-  primer_react_css_anchor_positioning: false,
  primer_react_css_has_selector_perf: false,


This PR removes the primer_react_css_anchor_positioning flag from defaults, but the Playwright VRT still runs each AnchoredOverlay story twice (with and without that flag) and maintains a second set of *-css-anchor-positioning-* snapshots. If the feature is fully reverted, the VRT parameterization and snapshots should also be removed/updated to avoid redundant coverage and future confusion.

Suggested change

primer_react_css_has_selector_perf: false,

primer_react_css_has_selector_perf: false,

primer_react_css_anchor_positioning: false,

Copilot · 2026-03-12T16:50:44Z

packages/react/src/ActionMenu/ActionMenu.test.tsx

+                  Github
+                </ActionList.LinkItem>


Brand spelling: "Github" should be "GitHub".

Revert "AnchoredOverlay: Add support for CSS anchor positioning (#7604)"

654ff80

This reverts commit 61ae74c.

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 Mar 12, 2026

francinelucca deployed to github-pages March 12, 2026 15:40 — with GitHub Actions View deployment

github-actions bot deployed to storybook-preview-7657 March 12, 2026 15:40 View deployment

francinelucca marked this pull request as ready for review March 12, 2026 16:45

francinelucca requested a review from a team as a code owner March 12, 2026 16:45

francinelucca requested review from TylerJDev and Copilot March 12, 2026 16:45

francinelucca added the integration-tests: skipped manually Changes in this PR do not require an integration test label Mar 12, 2026

Copilot started reviewing on behalf of francinelucca March 12, 2026 16:46 View session

francinelucca enabled auto-merge March 12, 2026 16:50

Copilot AI reviewed Mar 12, 2026

View reviewed changes

siddharthkp approved these changes Mar 12, 2026

View reviewed changes

francinelucca added this pull request to the merge queue Mar 12, 2026

Merged via the queue into main with commit e4de5d8 Mar 12, 2026
66 checks passed

francinelucca deleted the chore/revert-test branch March 12, 2026 17:07

TylerJDev mentioned this pull request Mar 13, 2026

AnchoredOverlay: Add support for CSS anchor positioning PR (Reverted) #7661

Merged

13 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Revert "AnchoredOverlay: Add support for CSS anchor positioning (#7604)"#7657

Revert "AnchoredOverlay: Add support for CSS anchor positioning (#7604)"#7657
francinelucca merged 1 commit intomainfrom
chore/revert-test

francinelucca commented Mar 12, 2026 •

edited

Loading

Uh oh!

changeset-bot bot commented Mar 12, 2026

Uh oh!

github-actions bot commented Mar 12, 2026

Uh oh!

primer-integration bot commented Mar 12, 2026

Uh oh!

primer-integration bot commented Mar 12, 2026

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Mar 12, 2026

Uh oh!

Copilot AI Mar 12, 2026

Uh oh!

Copilot AI Mar 12, 2026

Uh oh!

Copilot AI Mar 12, 2026

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

	primer_react_css_has_selector_perf: false,
	primer_react_css_has_selector_perf: false,
	primer_react_css_anchor_positioning: false,

Conversation

francinelucca commented Mar 12, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

changeset-bot bot commented Mar 12, 2026

⚠️ No Changeset found

Uh oh!

github-actions bot commented Mar 12, 2026

⚠️ Action required

Uh oh!

primer-integration bot commented Mar 12, 2026

Uh oh!

primer-integration bot commented Mar 12, 2026

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Reviewed changes

Uh oh!

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Copilot AI Mar 12, 2026

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

francinelucca commented Mar 12, 2026 •

edited

Loading