From f726be2c64792f7670cc1c23bf03caa707b440fc Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Wed, 2 Oct 2024 11:32:03 -0400
Subject: [PATCH 1/7] fix(AnchoredOverlay): replace broken stories

---
 .../AnchoredOverlay.features.stories.tsx      | 70 ++++++++++++++-----
 .../AnchoredOverlay.stories.tsx               | 50 ++++++++++---
 2 files changed, 96 insertions(+), 24 deletions(-)

diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
index 78ff50b16c8..de84140b1fb 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
@@ -2,17 +2,55 @@ import React, {useEffect, useRef, useState} from 'react'
 import type {Args, Meta} from '@storybook/react'
 import {FocusKeys} from '@primer/behaviors'
 
-import {Box, Button} from '..'
+import {Avatar, Box, Button, Octicon, Text} from '..'
 import {AnchoredOverlay} from '../AnchoredOverlay'
 import Heading from '../Heading'
 import {registerPortalRoot} from '../Portal'
 import {Playground} from './AnchoredOverlay.stories'
+import {LocationIcon, RepoIcon} from '@primer/octicons-react'
 
 export default {
   title: 'Components/AnchoredOverlay/Features',
   component: AnchoredOverlay,
 } as Meta
 
+const hoverCard = (
+  <Box p={3} minWidth={320}>
+    <Box display="flex" flexDirection="column" sx={{position: 'relative'}}>
+      <Avatar src="https://avatars.githubusercontent.com/u/92997159?v=4" size={48} />
+      <Box display="flex">
+        <Text weight="medium">monalisa</Text>
+        <Text color={'var(--fgColor-muted)'} ml={1}>
+          Monalisa Octocat
+        </Text>
+      </Box>
+      <Text fontSize={14}>Former beach cat and champion swimmer. Now your friendly octapus with a normal face.</Text>
+      <Box display="flex" mt={1}>
+        <Octicon color={'var(--fgColor-muted)'} icon={LocationIcon} />
+        <Text fontSize={12} ml={1} color={'var(--fgColor-muted)'}>
+          Interwebs
+        </Text>
+      </Box>
+      <Box display="flex" mt={1}>
+        <Octicon color={'var(--fgColor-muted)'} icon={RepoIcon} />
+        <Text fontSize={12} ml={1} color={'var(--fgColor-muted)'}>
+          Owns this repository
+        </Text>
+      </Box>
+      <Button
+        size="small"
+        sx={{
+          position: 'absolute',
+          right: 0,
+          top: 0,
+        }}
+      >
+        Follow
+      </Button>
+    </Box>
+  </Box>
+)
+
 const HeaderAndLayout = ({children}: {children: JSX.Element}) => {
   const scrollingElementRef = useRef<HTMLDivElement>(null)
   useEffect(() => {
@@ -70,8 +108,8 @@ export const CustomAnchorId = () => {
       renderAnchor={props => <Button {...props}>Button</Button>}
       anchorId="my-custom-anchor-id"
     >
-      <Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
-        <img src={`//placekitten.com/200/300`} alt="kitten" />
+      <Box width="100%" height="100%" display="flex" flexDirection="column">
+        {hoverCard}
       </Box>
     </AnchoredOverlay>
   )
@@ -88,8 +126,8 @@ export const Height = () => {
       renderAnchor={props => <Button {...props}>Button</Button>}
       height="large"
     >
-      <Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
-        <img src={`//placekitten.com/200/300`} alt="kitten" />
+      <Box width="100%" height="100%" display="flex" flexDirection="column">
+        {hoverCard}
       </Box>
     </AnchoredOverlay>
   )
@@ -106,8 +144,8 @@ export const Width = () => {
       renderAnchor={props => <Button {...props}>Button</Button>}
       width="large"
     >
-      <Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
-        <img src={`//placekitten.com/200/300`} alt="kitten" />
+      <Box width="100%" height="100%" display="flex" flexDirection="column">
+        {hoverCard}
       </Box>
     </AnchoredOverlay>
   )
@@ -128,8 +166,8 @@ export const AnchorAlignment = () => {
       )}
       align="center"
     >
-      <Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
-        <img src={`//placekitten.com/200/300`} alt="kitten" />
+      <Box width="100%" height="100%" display="flex" flexDirection="column">
+        {hoverCard}
       </Box>
     </AnchoredOverlay>
   )
@@ -146,8 +184,8 @@ export const AnchorSide = () => {
       renderAnchor={props => <Button {...props}>Button</Button>}
       side="outside-right"
     >
-      <Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
-        <img src={`//placekitten.com/200/300`} alt="kitten" />
+      <Box width="100%" height="100%" display="flex" flexDirection="column">
+        {hoverCard}
       </Box>
     </AnchoredOverlay>
   )
@@ -165,7 +203,7 @@ export const OffsetPositionFromAnchor = () => {
       anchorOffset={100}
     >
       <Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
-        <img src={`//placekitten.com/200/300`} alt="kitten" />
+        {hoverCard}
       </Box>
     </AnchoredOverlay>
   )
@@ -182,8 +220,8 @@ export const OffsetAlignmentFromAnchor = () => {
       renderAnchor={props => <Button {...props}>Button</Button>}
       alignmentOffset={100}
     >
-      <Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
-        <img src={`//placekitten.com/200/300`} alt="kitten" />
+      <Box width="100%" height="100%" display="flex" flexDirection="column">
+        {hoverCard}
       </Box>
     </AnchoredOverlay>
   )
@@ -247,8 +285,8 @@ export const OverlayPropsOverrides = () => {
         <li>overflow: `auto`</li>
         <li>maxHeight: `xsmall`</li>
       </pre>
-      <Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
-        <img src={`//placekitten.com/200/300`} alt="kitten" />
+      <Box width="100%" height="100%" display="flex" flexDirection="column">
+        {hoverCard}
       </Box>
     </AnchoredOverlay>
   )
diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
index deba2266964..388a863e81c 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
@@ -1,7 +1,8 @@
 import React, {useState} from 'react'
 import type {Args, Meta} from '@storybook/react'
+import {LocationIcon, RepoIcon} from '@primer/octicons-react'
 
-import {Box} from '..'
+import {Avatar, Box, Octicon, Text} from '..'
 import {AnchoredOverlay} from '../AnchoredOverlay'
 import {Button} from '../Button'
 import {action} from '@storybook/addon-actions'
@@ -11,6 +12,43 @@ export default {
   component: AnchoredOverlay,
 } as Meta
 
+const hoverCard = (
+  <Box p={3} minWidth={320}>
+    <Box display="flex" flexDirection="column" sx={{position: 'relative'}}>
+      <Avatar src="https://avatars.githubusercontent.com/u/92997159?v=4" size={48} />
+      <Box display="flex">
+        <Text weight="medium">monalisa</Text>
+        <Text color={'var(--fgColor-muted)'} ml={1}>
+          Monalisa Octocat
+        </Text>
+      </Box>
+      <Text fontSize={14}>Former beach cat and champion swimmer. Now your friendly octapus with a normal face.</Text>
+      <Box display="flex" mt={1}>
+        <Octicon color={'var(--fgColor-muted)'} icon={LocationIcon} />
+        <Text fontSize={12} ml={1} color={'var(--fgColor-muted)'}>
+          Interwebs
+        </Text>
+      </Box>
+      <Box display="flex" mt={1}>
+        <Octicon color={'var(--fgColor-muted)'} icon={RepoIcon} />
+        <Text fontSize={12} ml={1} color={'var(--fgColor-muted)'}>
+          Owns this repository
+        </Text>
+      </Box>
+      <Button
+        size="small"
+        sx={{
+          position: 'absolute',
+          right: 0,
+          top: 0,
+        }}
+      >
+        Follow
+      </Button>
+    </Box>
+  </Box>
+)
+
 export const Default = () => {
   const [open, setOpen] = useState(false)
 
@@ -21,9 +59,7 @@ export const Default = () => {
       onClose={() => setOpen(false)}
       renderAnchor={props => <Button {...props}>Button</Button>}
     >
-      <Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
-        <img src={`//placekitten.com/200/300`} alt="kitten" />
-      </Box>
+      {hoverCard}
     </AnchoredOverlay>
   )
 }
@@ -48,14 +84,12 @@ export const Playground = (args: Args) => {
       overlayProps={args.portalContainerName}
       side={args.side}
     >
-      <Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
-        <img src={`//placekitten.com/200/300`} alt="kitten" />
-      </Box>
+      {hoverCard}
     </AnchoredOverlay>
   )
 }
 Playground.args = {
-  width: 'small',
+  width: 'auto',
   height: 'auto',
   portalContainerName: 'Portal name',
   side: 'outside-bottom',

From 9872da522fb79f8c78f6ad8ffc11cb3a51bc2890 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Wed, 2 Oct 2024 11:49:14 -0400
Subject: [PATCH 2/7] fix: storybook build failure

---
 .../src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx  | 4 +++-
 .../react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx     | 3 ++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
index de84140b1fb..0b01aa40dc3 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
@@ -2,9 +2,11 @@ import React, {useEffect, useRef, useState} from 'react'
 import type {Args, Meta} from '@storybook/react'
 import {FocusKeys} from '@primer/behaviors'
 
-import {Avatar, Box, Button, Octicon, Text} from '..'
+import {Avatar, Box, Text} from '..'
 import {AnchoredOverlay} from '../AnchoredOverlay'
 import Heading from '../Heading'
+import Octicon from '../Octicon'
+import {Button} from '../Button'
 import {registerPortalRoot} from '../Portal'
 import {Playground} from './AnchoredOverlay.stories'
 import {LocationIcon, RepoIcon} from '@primer/octicons-react'
diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
index 388a863e81c..37820943031 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
@@ -2,9 +2,10 @@ import React, {useState} from 'react'
 import type {Args, Meta} from '@storybook/react'
 import {LocationIcon, RepoIcon} from '@primer/octicons-react'
 
-import {Avatar, Box, Octicon, Text} from '..'
+import {Avatar, Box, Text} from '..'
 import {AnchoredOverlay} from '../AnchoredOverlay'
 import {Button} from '../Button'
+import Octicon from '../Octicon'
 import {action} from '@storybook/addon-actions'
 
 export default {

From 8d8cb5327dc143f2b1d690f00c703216401e17c0 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Thu, 3 Oct 2024 18:06:14 -0400
Subject: [PATCH 3/7] Docs(AnchoredOverlay): rewrite hovercard using stack

---
 .../AnchoredOverlay.features.stories.tsx      | 58 ++++++++-----------
 .../AnchoredOverlay.stories.tsx               | 58 ++++++++-----------
 2 files changed, 50 insertions(+), 66 deletions(-)

diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
index 0b01aa40dc3..71a3bc2f420 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
@@ -10,6 +10,7 @@ import {Button} from '../Button'
 import {registerPortalRoot} from '../Portal'
 import {Playground} from './AnchoredOverlay.stories'
 import {LocationIcon, RepoIcon} from '@primer/octicons-react'
+import {Stack} from '../Stack/Stack'
 
 export default {
   title: 'Components/AnchoredOverlay/Features',
@@ -17,40 +18,31 @@ export default {
 } as Meta
 
 const hoverCard = (
-  <Box p={3} minWidth={320}>
-    <Box display="flex" flexDirection="column" sx={{position: 'relative'}}>
+  <Stack gap="condensed" style={{minWidth: '320px', padding: '16px'}}>
+    <Stack direction="horizontal" gap="condensed" justify="space-between">
       <Avatar src="https://avatars.githubusercontent.com/u/92997159?v=4" size={48} />
-      <Box display="flex">
-        <Text weight="medium">monalisa</Text>
-        <Text color={'var(--fgColor-muted)'} ml={1}>
-          Monalisa Octocat
-        </Text>
-      </Box>
-      <Text fontSize={14}>Former beach cat and champion swimmer. Now your friendly octapus with a normal face.</Text>
-      <Box display="flex" mt={1}>
-        <Octicon color={'var(--fgColor-muted)'} icon={LocationIcon} />
-        <Text fontSize={12} ml={1} color={'var(--fgColor-muted)'}>
-          Interwebs
-        </Text>
-      </Box>
-      <Box display="flex" mt={1}>
-        <Octicon color={'var(--fgColor-muted)'} icon={RepoIcon} />
-        <Text fontSize={12} ml={1} color={'var(--fgColor-muted)'}>
-          Owns this repository
-        </Text>
-      </Box>
-      <Button
-        size="small"
-        sx={{
-          position: 'absolute',
-          right: 0,
-          top: 0,
-        }}
-      >
-        Follow
-      </Button>
-    </Box>
-  </Box>
+      <Button size="small">Follow</Button>
+    </Stack>
+    <Stack direction="horizontal" gap="none">
+      <Text weight="medium">monalisa</Text>
+      <Text color={'var(--fgColor-muted)'} ml={1}>
+        Monalisa Octocat
+      </Text>
+    </Stack>
+    <Text fontSize={14}>Former beach cat and champion swimmer. Now your friendly octapus with a normal face.</Text>
+    <Stack direction="horizontal" gap="none">
+      <Octicon color={'var(--fgColor-muted)'} icon={LocationIcon} />
+      <Text fontSize={12} color={'var(--fgColor-muted)'} ml={1}>
+        Interwebs
+      </Text>
+    </Stack>
+    <Stack direction="horizontal" gap="none">
+      <Octicon color={'var(--fgColor-muted)'} icon={RepoIcon} />
+      <Text fontSize={12} color={'var(--fgColor-muted)'} ml={1}>
+        Owns this repository
+      </Text>
+    </Stack>
+  </Stack>
 )
 
 const HeaderAndLayout = ({children}: {children: JSX.Element}) => {
diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
index 37820943031..f0e40b8a3c4 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
@@ -7,6 +7,7 @@ import {AnchoredOverlay} from '../AnchoredOverlay'
 import {Button} from '../Button'
 import Octicon from '../Octicon'
 import {action} from '@storybook/addon-actions'
+import {Stack} from '../Stack/Stack'
 
 export default {
   title: 'Components/AnchoredOverlay',
@@ -14,40 +15,31 @@ export default {
 } as Meta
 
 const hoverCard = (
-  <Box p={3} minWidth={320}>
-    <Box display="flex" flexDirection="column" sx={{position: 'relative'}}>
+  <Stack gap="condensed" style={{minWidth: '320px', padding: '16px'}}>
+    <Stack direction="horizontal" gap="condensed" justify="space-between">
       <Avatar src="https://avatars.githubusercontent.com/u/92997159?v=4" size={48} />
-      <Box display="flex">
-        <Text weight="medium">monalisa</Text>
-        <Text color={'var(--fgColor-muted)'} ml={1}>
-          Monalisa Octocat
-        </Text>
-      </Box>
-      <Text fontSize={14}>Former beach cat and champion swimmer. Now your friendly octapus with a normal face.</Text>
-      <Box display="flex" mt={1}>
-        <Octicon color={'var(--fgColor-muted)'} icon={LocationIcon} />
-        <Text fontSize={12} ml={1} color={'var(--fgColor-muted)'}>
-          Interwebs
-        </Text>
-      </Box>
-      <Box display="flex" mt={1}>
-        <Octicon color={'var(--fgColor-muted)'} icon={RepoIcon} />
-        <Text fontSize={12} ml={1} color={'var(--fgColor-muted)'}>
-          Owns this repository
-        </Text>
-      </Box>
-      <Button
-        size="small"
-        sx={{
-          position: 'absolute',
-          right: 0,
-          top: 0,
-        }}
-      >
-        Follow
-      </Button>
-    </Box>
-  </Box>
+      <Button size="small">Follow</Button>
+    </Stack>
+    <Stack direction="horizontal" gap="none">
+      <Text weight="medium">monalisa</Text>
+      <Text color={'var(--fgColor-muted)'} ml={1}>
+        Monalisa Octocat
+      </Text>
+    </Stack>
+    <Text fontSize={14}>Former beach cat and champion swimmer. Now your friendly octapus with a normal face.</Text>
+    <Stack direction="horizontal" gap="none">
+      <Octicon color={'var(--fgColor-muted)'} icon={LocationIcon} />
+      <Text fontSize={12} color={'var(--fgColor-muted)'} ml={1}>
+        Interwebs
+      </Text>
+    </Stack>
+    <Stack direction="horizontal" gap="none">
+      <Octicon color={'var(--fgColor-muted)'} icon={RepoIcon} />
+      <Text fontSize={12} color={'var(--fgColor-muted)'} ml={1}>
+        Owns this repository
+      </Text>
+    </Stack>
+  </Stack>
 )
 
 export const Default = () => {

From 9889b8f21f019978fa63c56c3f65cf5c845b1752 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Fri, 4 Oct 2024 09:49:25 -0400
Subject: [PATCH 4/7] Docs(AnchoredOverlay): remove unused variable

---
 packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
index f0e40b8a3c4..718615dcab8 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
@@ -2,7 +2,7 @@ import React, {useState} from 'react'
 import type {Args, Meta} from '@storybook/react'
 import {LocationIcon, RepoIcon} from '@primer/octicons-react'
 
-import {Avatar, Box, Text} from '..'
+import {Avatar, Text} from '..'
 import {AnchoredOverlay} from '../AnchoredOverlay'
 import {Button} from '../Button'
 import Octicon from '../Octicon'

From 1ac42cfd9aaa388db9d7cd38e739e6e842dee7e9 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Fri, 4 Oct 2024 15:17:29 -0400
Subject: [PATCH 5/7] Docs(AnchoredOverlay): use text size prop in stories
 instead of fontSize

---
 .../AnchoredOverlay/AnchoredOverlay.features.stories.tsx    | 6 +++---
 .../react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx   | 6 +++---
 2 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
index 71a3bc2f420..fa732c447b8 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
@@ -29,16 +29,16 @@ const hoverCard = (
         Monalisa Octocat
       </Text>
     </Stack>
-    <Text fontSize={14}>Former beach cat and champion swimmer. Now your friendly octapus with a normal face.</Text>
+    <Text size="medium">Former beach cat and champion swimmer. Now your friendly octapus with a normal face.</Text>
     <Stack direction="horizontal" gap="none">
       <Octicon color={'var(--fgColor-muted)'} icon={LocationIcon} />
-      <Text fontSize={12} color={'var(--fgColor-muted)'} ml={1}>
+      <Text size="small" color={'var(--fgColor-muted)'} ml={1}>
         Interwebs
       </Text>
     </Stack>
     <Stack direction="horizontal" gap="none">
       <Octicon color={'var(--fgColor-muted)'} icon={RepoIcon} />
-      <Text fontSize={12} color={'var(--fgColor-muted)'} ml={1}>
+      <Text size="small" color={'var(--fgColor-muted)'} ml={1}>
         Owns this repository
       </Text>
     </Stack>
diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
index 718615dcab8..5a7dcbf50da 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.stories.tsx
@@ -26,16 +26,16 @@ const hoverCard = (
         Monalisa Octocat
       </Text>
     </Stack>
-    <Text fontSize={14}>Former beach cat and champion swimmer. Now your friendly octapus with a normal face.</Text>
+    <Text size="medium">Former beach cat and champion swimmer. Now your friendly octapus with a normal face.</Text>
     <Stack direction="horizontal" gap="none">
       <Octicon color={'var(--fgColor-muted)'} icon={LocationIcon} />
-      <Text fontSize={12} color={'var(--fgColor-muted)'} ml={1}>
+      <Text size="small" color={'var(--fgColor-muted)'} ml={1}>
         Interwebs
       </Text>
     </Stack>
     <Stack direction="horizontal" gap="none">
       <Octicon color={'var(--fgColor-muted)'} icon={RepoIcon} />
-      <Text fontSize={12} color={'var(--fgColor-muted)'} ml={1}>
+      <Text size="small" color={'var(--fgColor-muted)'} ml={1}>
         Owns this repository
       </Text>
     </Stack>

From c2dd9048027f576c5fc749a81763020713a17b7b Mon Sep 17 00:00:00 2001
From: Marie Lucca <40550942+francinelucca@users.noreply.github.com>
Date: Tue, 8 Oct 2024 16:49:53 -0400
Subject: [PATCH 6/7] Update
 packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx

Co-authored-by: Mike Perrotti <mperrotti@github.com>
---
 .../src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
index fa732c447b8..7aa4ad18910 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
@@ -102,7 +102,7 @@ export const CustomAnchorId = () => {
       renderAnchor={props => <Button {...props}>Button</Button>}
       anchorId="my-custom-anchor-id"
     >
-      <Box width="100%" height="100%" display="flex" flexDirection="column">
+      <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}>
         {hoverCard}
       </Box>
     </AnchoredOverlay>

From 0102af9c967d4a21e5724279aba83bb473a4e0c1 Mon Sep 17 00:00:00 2001
From: Marie Lucca <francinelucca@github.com>
Date: Tue, 8 Oct 2024 17:01:47 -0400
Subject: [PATCH 7/7] Docs(AnchoredOverlay): use sx prop for styling instead of
 styled-system props

---
 .../AnchoredOverlay.features.stories.tsx      | 32 +++++--------------
 1 file changed, 8 insertions(+), 24 deletions(-)

diff --git a/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx b/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
index 7aa4ad18910..db336516af6 100644
--- a/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
+++ b/packages/react/src/AnchoredOverlay/AnchoredOverlay.features.stories.tsx
@@ -102,9 +102,7 @@ export const CustomAnchorId = () => {
       renderAnchor={props => <Button {...props}>Button</Button>}
       anchorId="my-custom-anchor-id"
     >
-      <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column' }}>
-        {hoverCard}
-      </Box>
+      <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
   )
 }
@@ -120,9 +118,7 @@ export const Height = () => {
       renderAnchor={props => <Button {...props}>Button</Button>}
       height="large"
     >
-      <Box width="100%" height="100%" display="flex" flexDirection="column">
-        {hoverCard}
-      </Box>
+      <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
   )
 }
@@ -138,9 +134,7 @@ export const Width = () => {
       renderAnchor={props => <Button {...props}>Button</Button>}
       width="large"
     >
-      <Box width="100%" height="100%" display="flex" flexDirection="column">
-        {hoverCard}
-      </Box>
+      <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
   )
 }
@@ -160,9 +154,7 @@ export const AnchorAlignment = () => {
       )}
       align="center"
     >
-      <Box width="100%" height="100%" display="flex" flexDirection="column">
-        {hoverCard}
-      </Box>
+      <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
   )
 }
@@ -178,9 +170,7 @@ export const AnchorSide = () => {
       renderAnchor={props => <Button {...props}>Button</Button>}
       side="outside-right"
     >
-      <Box width="100%" height="100%" display="flex" flexDirection="column">
-        {hoverCard}
-      </Box>
+      <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
   )
 }
@@ -196,9 +186,7 @@ export const OffsetPositionFromAnchor = () => {
       renderAnchor={props => <Button {...props}>Button</Button>}
       anchorOffset={100}
     >
-      <Box width="100%" height="100%" backgroundColor="thistle" display="flex" flexDirection="column">
-        {hoverCard}
-      </Box>
+      <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
   )
 }
@@ -214,9 +202,7 @@ export const OffsetAlignmentFromAnchor = () => {
       renderAnchor={props => <Button {...props}>Button</Button>}
       alignmentOffset={100}
     >
-      <Box width="100%" height="100%" display="flex" flexDirection="column">
-        {hoverCard}
-      </Box>
+      <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
   )
 }
@@ -279,9 +265,7 @@ export const OverlayPropsOverrides = () => {
         <li>overflow: `auto`</li>
         <li>maxHeight: `xsmall`</li>
       </pre>
-      <Box width="100%" height="100%" display="flex" flexDirection="column">
-        {hoverCard}
-      </Box>
+      <Box sx={{width: '100%', height: '100%', display: 'flex', flexDirection: 'column'}}>{hoverCard}</Box>
     </AnchoredOverlay>
   )
 }