Fix position of Dialog's close button

priceline · Nov 7, 2023 · c551e3f · c551e3f
1 parent 52ab608
commit c551e3f
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 13 deletions.
diff --git a/packages/core/src/Dialog/Dialog.stories.tsx b/packages/core/src/Dialog/Dialog.stories.tsx
@@ -7,6 +7,7 @@ import React, { useState } from 'react'
 
 import { Box, Breadcrumbs, Button, Dialog, Grid, Text } from '..'
 import { argTypes, defaultArgs } from './Dialog.stories.args'
+import { userEvent, within } from '@storybook/testing-library'
 
 type DialogStory = StoryObj<IDialogProps>
 
@@ -19,6 +20,11 @@ const exampleHeaderProps: Partial<IDialogProps> = {
 
 export const Playground: DialogStory = {
   render: (args) => <Dialog {...args} headerIcon={args.headerIcon && exampleHeaderProps.headerIcon} />,
+  play: async ({ args, canvasElement }) => {
+    const canvas = within(canvasElement)
+    const openButton = canvas.getByText('Open Dialog')
+    await userEvent.click(openButton)
+  },
 }
 
 export const WithHug: DialogStory = {

diff --git a/packages/core/src/Dialog/Dialog.styled.tsx b/packages/core/src/Dialog/Dialog.styled.tsx
@@ -53,6 +53,7 @@ const FloatingCloseButton: (
   right: ${(props) => -((props.dialogSize === 'full' || props.fullWidth ? 0 : 16) + 10)}px;
   margin: ${(props) => themeGet('space.3')(props)};
   padding: ${(props) => themeGet('space.2')(props)};
+  z-index: ${(props) => themeGet('zIndices.absolute')(props)};
   &:hover {
     background-color: ${(props) => themeGet('palette.background.lightest')(props)};
   }
@@ -168,6 +169,19 @@ export const DialogContent = ({
         borderRadius={borderRadius}
         {...(sheet ? animationStyles.sheet : animationStyles.default)}
       >
+        {showCloseButton && (
+          <Dialog.Close asChild>
+            <FloatingCloseButton
+              color='primary.base'
+              bgColor='background.lightest'
+              boxShadowSize='sm'
+              dialogSize={size}
+              sheet={sheet}
+              fullWidth={fullWidth}
+            />
+          </Dialog.Close>
+        )}
+
         <VisuallyHidden asChild>
           <Dialog.Title>{ariaTitle}</Dialog.Title>
         </VisuallyHidden>
@@ -192,19 +206,6 @@ export const DialogContent = ({
           )}
           {children}
         </DialogInnerContentWrapper>
-
-        {showCloseButton && (
-          <Dialog.Close asChild>
-            <FloatingCloseButton
-              color='primary.base'
-              bgColor='background.lightest'
-              boxShadowSize='sm'
-              dialogSize={size}
-              sheet={sheet}
-              fullWidth={fullWidth}
-            />
-          </Dialog.Close>
-        )}
       </DialogContentWrapper>
     </Dialog.Content>
   )