@@ -291,6 +309,12 @@ export const AnchoredOverlay: React.FC
)
+
+ if (cssAnchorPositioning) {
+ return
{innerContent}
+ }
+
+ return innerContent
}
function assignRef
(
diff --git a/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts b/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts
index 796448887e8..e3d5fd0d975 100644
--- a/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts
+++ b/packages/react/src/FeatureFlags/DefaultFeatureFlags.ts
@@ -2,6 +2,7 @@ import {FeatureFlagScope} from './FeatureFlagScope'
export const DefaultFeatureFlags = FeatureFlagScope.create({
primer_react_breadcrumbs_overflow_menu: false,
+ primer_react_css_anchor_positioning: false,
primer_react_css_has_selector_perf: false,
primer_react_select_panel_fullscreen_on_narrow: false,
primer_react_select_panel_order_selected_at_top: false,
diff --git a/packages/react/src/Overlay/Overlay.module.css b/packages/react/src/Overlay/Overlay.module.css
index 65a4d17df97..c8238414717 100644
--- a/packages/react/src/Overlay/Overlay.module.css
+++ b/packages/react/src/Overlay/Overlay.module.css
@@ -19,14 +19,29 @@
background-color: var(--overlay-bgColor);
border-radius: var(--borderRadius-large);
box-shadow: var(--shadow-floating-small);
- /* stylelint-disable-next-line primer/spacing */
- top: var(--top, auto);
- /* stylelint-disable-next-line primer/spacing */
- left: var(--left, auto);
- /* stylelint-disable-next-line primer/spacing */
- right: var(--right, auto);
- /* stylelint-disable-next-line primer/spacing */
- bottom: var(--bottom, auto);
+
+ &[data-anchor-position='false'],
+ &:not([data-anchor-position]):not([data-variant='modal']) {
+ /* stylelint-disable-next-line primer/spacing */
+ right: var(--right, auto);
+ /* stylelint-disable-next-line primer/spacing */
+ bottom: var(--bottom, auto);
+
+ /* stylelint-disable-next-line selector-max-specificity */
+ &[data-responsive='fullscreen']:not([data-variant]) {
+ @media screen and (--viewportRange-narrow) {
+ top: 0;
+ left: 0;
+ }
+ }
+
+ &:not([data-variant]) {
+ /* stylelint-disable-next-line primer/spacing */
+ top: var(--top, auto);
+ /* stylelint-disable-next-line primer/spacing */
+ left: var(--left, auto);
+ }
+ }
&:focus {
outline: none;
diff --git a/packages/react/src/Overlay/Overlay.tsx b/packages/react/src/Overlay/Overlay.tsx
index 362083945e2..6db7e9debac 100644
--- a/packages/react/src/Overlay/Overlay.tsx
+++ b/packages/react/src/Overlay/Overlay.tsx
@@ -10,6 +10,7 @@ import type {AnchorSide} from '@primer/behaviors'
import type {ForwardRefComponent as PolymorphicForwardRefComponent} from '../utils/polymorphic'
import classes from './Overlay.module.css'
import {clsx} from 'clsx'
+import {useFeatureFlag} from '../FeatureFlags'
type StyledOverlayProps = {
width?: keyof typeof widthMap
@@ -189,6 +190,7 @@ const Overlay = React.forwardRef(
forwardedRef,
// eslint-disable-next-line @typescript-eslint/no-explicit-any
): ReactElement => {
+ const cssAnchorPositioning = useFeatureFlag('primer_react_css_anchor_positioning')
const overlayRef = useRef(null)
useRefObjectAsForwardedRef(forwardedRef, overlayRef)
const slideAnimationDistance = 8 // var(--base-size-8), hardcoded to do some math
@@ -229,22 +231,26 @@ const Overlay = React.forwardRef(
// To be backwards compatible with the old Overlay, we need to set the left prop if x-position is not specified
const leftPosition = left === undefined && right === undefined ? 0 : left
- return (
-
-
-
+ const overlayContent = (
+
)
+
+ if (cssAnchorPositioning) {
+ return overlayContent
+ }
+
+ return {overlayContent}
},
) as PolymorphicForwardRefComponent<'div', internalOverlayProps>