Position AnchoredOverlay directly on style property (#1381)

* Position AnchoredOverlay directly on style property * changeset
primer · Aug 18, 2021 · b31f085 · b31f085
1 parent 557f839
commit b31f085
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 8 deletions.
diff --git a/.changeset/yellow-rice-compete.md 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
@@ -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
@@ -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
@@ -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'}}