fix(AnchoredOverlay): Remove use of useResponsiveValue

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']
@@ -254,10 +252,9 @@ 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}

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

@@ -43,11 +43,10 @@ exports[`AnchoredOverlay > should render consistently when open 1`] = `
           class="prc-Overlay-Overlay-ViJgm"
           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: 36; --left: 0;"
         >
           <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, csstools/value-no-unknown-custom-properties */
+  top: var(--top);
+  /* stylelint-disable-next-line primer/spacing, csstools/value-no-unknown-custom-properties */
+  left: var(--left);
+  /* stylelint-disable-next-line primer/spacing, csstools/value-no-unknown-custom-properties */
+  right: var(--right);
+  /* stylelint-disable-next-line primer/spacing, csstools/value-no-unknown-custom-properties */
+  bottom: var(--bottom);
 
   &: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': top,
+            '--left': left,
+            '--right': right,
+            '--bottom': bottom,
             position,
             ...styleFromProps,
           } as React.CSSProperties