fix(AnchoredOverlay): Remove use of useResponsiveValue (#7098)

Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>

Author: francinelucca

packages/react/src/AnchoredOverlay/AnchoredOverlay.tsx

@@ -9,7 +9,7 @@ import {useFocusZone} from '../hooks/useFocusZone'
 import {useAnchoredPosition, useProvidedRefOrCreate, useRenderForcingRef} from '../hooks'
 import {useId} from '../hooks/useId'
 import type {AnchorPosition, PositionSettings} from '@primer/behaviors'
-import {useResponsiveValue, type ResponsiveValue} from '../hooks/useResponsiveValue'
+import {type ResponsiveValue} from '../hooks/useResponsiveValue'
 import {IconButton, type IconButtonProps} from '../Button'
 import {XIcon} from '@primer/octicons-react'
 import classes from './AnchoredOverlay.module.css'
@@ -225,8 +225,6 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
   })
   useFocusTrap({containerRef: overlayRef, disabled: !open || !position, ...focusTrapSettings})
 
-  const currentResponsiveVariant = useResponsiveValue(variant, 'anchored')
-
   const showXIcon = onClose && variant.narrow === 'fullscreen' && displayCloseButton
   const XButtonAriaLabelledBy = closeButtonProps['aria-labelledby']
   const XButtonAriaLabel = closeButtonProps['aria-label']
@@ -253,13 +251,13 @@ export const AnchoredOverlay: React.FC<React.PropsWithChildren<AnchoredOverlayPr
           visibility={position ? 'visible' : 'hidden'}
           height={height}
           width={width}
-          top={currentResponsiveVariant === 'anchored' ? position?.top || 0 : undefined}
-          left={currentResponsiveVariant === 'anchored' ? position?.left || 0 : undefined}
+          top={position?.top || 0}
+          left={position?.left || 0}
           responsiveVariant={variant.narrow === 'fullscreen' ? 'fullscreen' : undefined}
-          data-variant={currentResponsiveVariant}
           anchorSide={position?.anchorSide}
           className={className}
           preventOverflow={preventOverflow}
+          data-component="AnchoredOverlay"
           {...overlayProps}
           ref={node => {
             if (overlayProps?.ref) {

packages/react/src/AnchoredOverlay/__snapshots__/AnchoredOverlay.test.tsx.snap

@@ -41,13 +41,13 @@ exports[`AnchoredOverlay > should render consistently when open 1`] = `
       >
         <div
           class="prc-Overlay-Overlay-ViJgm"
+          data-component="AnchoredOverlay"
           data-focus-trap="active"
           data-height-auto=""
-          data-variant="anchored"
           data-visibility-visible=""
           data-width-auto=""
           role="none"
-          style="left: 0px; top: 36px;"
+          style="--top: 36px; --left: 0px;"
         >
           <span
             aria-hidden="true"

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

@@ -19,6 +19,14 @@
   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);
 
   &:focus {
     outline: none;

packages/react/src/Overlay/Overlay.tsx

@@ -113,10 +113,10 @@ export const BaseOverlay = React.forwardRef(
         ref={forwardedRef}
         style={
           {
-            left,
-            right,
-            top,
-            bottom,
+            '--top': typeof top === 'number' ? `${top}px` : top,
+            '--left': typeof left === 'number' ? `${left}px` : left,
+            '--right': typeof right === 'number' ? `${right}px` : right,
+            '--bottom': typeof bottom === 'number' ? `${bottom}px` : bottom,
             position,
             ...styleFromProps,
           } as React.CSSProperties

packages/react/src/experimental/SelectPanel2/SelectPanel.module.css

@@ -25,6 +25,13 @@
     }
   }
 
+  &:where([data-variant='modal']) {
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+  }
+
   &:where([data-variant='modal'])::backdrop {
     background-color: var(--overlay-backdrop-bgColor);
   }