From b31f08533e9fd41ebc5dc0e109d09facd975287c Mon Sep 17 00:00:00 2001
From: Jonathan Fuchs <jfuchs@github.com>
Date: Wed, 18 Aug 2021 12:56:09 -0700
Subject: [PATCH] Position AnchoredOverlay directly on style property (#1381)

* Position AnchoredOverlay directly on style property

* changeset
---
 .changeset/yellow-rice-compete.md                    | 5 +++++
 src/AnchoredOverlay/AnchoredOverlay.tsx              | 2 +-
 src/__tests__/__snapshots__/AnchoredOverlay.tsx.snap | 8 +++-----
 src/stories/useAnchoredPosition.stories.tsx          | 3 +--
 4 files changed, 10 insertions(+), 8 deletions(-)
 create mode 100644 .changeset/yellow-rice-compete.md

diff --git a/.changeset/yellow-rice-compete.md b/.changeset/yellow-rice-compete.md
new file mode 100644
index 00000000000..8633ac02f86
--- /dev/null
+++ b/.changeset/yellow-rice-compete.md
@@ -0,0 +1,5 @@
+---
+'@primer/components': minor
+---
+
+AnchoredOverlay positions are set directly on style property
diff --git a/src/AnchoredOverlay/AnchoredOverlay.tsx b/src/AnchoredOverlay/AnchoredOverlay.tsx
index 5d5e1d9851f..3ced5ed844f 100644
--- a/src/AnchoredOverlay/AnchoredOverlay.tsx
+++ b/src/AnchoredOverlay/AnchoredOverlay.tsx
@@ -128,7 +128,7 @@ export const AnchoredOverlay: React.FC<AnchoredOverlayProps> = ({
     [overlayRef.current]
   )
   const overlayPosition = useMemo(() => {
-    return position && {top: `${position.top}px`, left: `${position.left}px`, anchorSide: position.anchorSide}
+    return position && {style: {top: `${position.top}px`, left: `${position.left}px`}, anchorSide: position.anchorSide}
   }, [position])
 
   useEffect(() => {
diff --git a/src/__tests__/__snapshots__/AnchoredOverlay.tsx.snap b/src/__tests__/__snapshots__/AnchoredOverlay.tsx.snap
index cb33f0eedb4..0d3fed86f1d 100644
--- a/src/__tests__/__snapshots__/AnchoredOverlay.tsx.snap
+++ b/src/__tests__/__snapshots__/AnchoredOverlay.tsx.snap
@@ -181,8 +181,6 @@ Object {
   -webkit-animation: overlay-appear 200ms cubic-bezier(0.33,1,0.68,1);
   animation: overlay-appear 200ms cubic-bezier(0.33,1,0.68,1);
   visibility: var(--styled-overlay-visibility);
-  top: 4px;
-  left: 0px;
 }
 
 .c2:focus {
@@ -217,7 +215,7 @@ Object {
               data-focus-trap="active"
               height="auto"
               role="none"
-              style="--styled-overlay-visibility: visible;"
+              style="--styled-overlay-visibility: visible; top: 4px; left: 0px;"
               width="auto"
             >
               <button
@@ -257,11 +255,11 @@ Object {
           style="position: relative; z-index: 1;"
         >
           <div
-            class="Overlay__StyledOverlay-jhwkzw-0 leFwDU"
+            class="Overlay__StyledOverlay-jhwkzw-0 kVoHwu"
             data-focus-trap="active"
             height="auto"
             role="none"
-            style="--styled-overlay-visibility: visible;"
+            style="--styled-overlay-visibility: visible; top: 4px; left: 0px;"
             width="auto"
           >
             <button
diff --git a/src/stories/useAnchoredPosition.stories.tsx b/src/stories/useAnchoredPosition.stories.tsx
index cba3c1d630a..5c75edfdf85 100644
--- a/src/stories/useAnchoredPosition.stories.tsx
+++ b/src/stories/useAnchoredPosition.stories.tsx
@@ -298,8 +298,7 @@ export const WithPortal = () => {
             <Portal>
               <Float
                 ref={floatingElementRef as React.RefObject<HTMLDivElement>}
-                top={position?.top ?? 0}
-                left={position?.left ?? 0}
+                style={{top: `${position?.top ?? 0}px`, left: `${position?.left ?? 0}px`}}
                 width={250}
                 height={400}
                 sx={{visibility: position ? 'visible' : 'hidden'}}