Dialog: Show Tooltip on "close" button

.changeset/chilled-walls-cheer.md

@@ -0,0 +1,5 @@
+---
+"@primer/react": patch
+---
+
+Show `Tooltip` on close button in `Dialog`

packages/react/.storybook/storybook.css

@@ -74,6 +74,10 @@
   border: var(--borderWidth-thin) solid var(--borderColor-sponsors-emphasis) !important;
 }
 
+.testCustomAnimation {
+  animation: none !important;
+}
+
 .testCustomClassnameMono {
   font-family: var(--fontStack-monospace) !important;
 }

packages/react/src/Dialog/Dialog.dev.stories.tsx

@@ -83,7 +83,7 @@ export const WithCss = ({width, height, subtitle}: DialogStoryProps) => {
             {buttonType: 'danger', content: 'Delete the universe', onClick: onDialogClose},
             {buttonType: 'primary', content: 'Proceed'},
           ]}
-          className="testCustomClassnameBorder"
+          className="testCustomClassnameBorder testCustomAnimation"
         >
           {lipsum}
         </Dialog>
@@ -137,7 +137,7 @@ export const WithSx = ({width, height, subtitle}: DialogStoryProps) => {
             {buttonType: 'danger', content: 'Delete the universe', onClick: onDialogClose},
             {buttonType: 'primary', content: 'Proceed'},
           ]}
-          sx={{borderColor: 'accent.emphasis', borderWidth: '1px', borderStyle: 'solid'}}
+          sx={{borderColor: 'accent.emphasis', borderWidth: '1px', borderStyle: 'solid', animation: 'none !important'}}
         >
           {lipsum}
         </Dialog>
@@ -199,7 +199,7 @@ export const WithSxAndCss = ({width, height, subtitle}: DialogStoryProps) => {
             {buttonType: 'danger', content: 'Delete the universe', onClick: onDialogClose},
             {buttonType: 'primary', content: 'Proceed'},
           ]}
-          sx={{borderColor: 'border.accent', borderWidth: '1px', borderStyle: 'solid'}}
+          sx={{borderColor: 'border.accent', borderWidth: '1px', borderStyle: 'solid', animation: 'none !important'}}
           className="testCustomClassnameBorder"
         >
           {lipsum}

packages/react/src/Dialog/Dialog.module.css

@@ -119,14 +119,14 @@
   }
 
   @media screen and (prefers-reduced-motion: no-preference) {
-    animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running;
+    animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;
   }
 
   &[data-position-regular='center'] {
     border-radius: var(--borderRadius-large, var(--borderRadius-large));
 
     @media screen and (prefers-reduced-motion: no-preference) {
-      animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running;
+      animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;
     }
   }
 
@@ -138,7 +138,7 @@
     border-bottom-left-radius: 0;
 
     @media screen and (prefers-reduced-motion: no-preference) {
-      animation: Overlay--motion-slideInRight 0.25s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running;
+      animation: Overlay--motion-slideInRight 0.25s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;
     }
   }
 
@@ -193,7 +193,7 @@
       border-bottom-left-radius: 0;
 
       @media screen and (prefers-reduced-motion: no-preference) {
-        animation: Overlay--motion-slideUp 0.25s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running;
+        animation: Overlay--motion-slideUp 0.25s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;
       }
     }
 
@@ -206,7 +206,7 @@
       flex-grow: 1;
 
       @media screen and (prefers-reduced-motion: no-preference) {
-        animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running;
+        animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;
       }
     }
   }

packages/react/src/Dialog/Dialog.tsx

@@ -271,14 +271,14 @@ const StyledDialog = toggleStyledComponent(
     opacity: 1;
 
     @media screen and (prefers-reduced-motion: no-preference) {
-      animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running;
+      animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;
     }
 
     &[data-position-regular='center'] {
       border-radius: var(--borderRadius-large, 0.75rem);
 
       @media screen and (prefers-reduced-motion: no-preference) {
-        animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running;
+        animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;
       }
     }
 
@@ -290,7 +290,7 @@ const StyledDialog = toggleStyledComponent(
       border-bottom-left-radius: 0;
 
       @media screen and (prefers-reduced-motion: no-preference) {
-        animation: Overlay--motion-slideInRight 0.25s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running;
+        animation: Overlay--motion-slideInRight 0.25s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;
       }
     }
 
@@ -323,7 +323,7 @@ const StyledDialog = toggleStyledComponent(
         border-bottom-left-radius: 0;
 
         @media screen and (prefers-reduced-motion: no-preference) {
-          animation: Overlay--motion-slideUp 0.25s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running;
+          animation: Overlay--motion-slideUp 0.25s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;
         }
       }
 
@@ -336,7 +336,7 @@ const StyledDialog = toggleStyledComponent(
         flex-grow: 1;
 
         @media screen and (prefers-reduced-motion: no-preference) {
-          animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 0s 1 normal none running;
+          animation: Overlay--motion-scaleFade 0.2s cubic-bezier(0.33, 1, 0.68, 1) 1ms 1 normal none running;
         }
       }
     }
@@ -677,10 +677,7 @@ const Buttons: React.FC<React.PropsWithChildren<{buttons: DialogButtonProps[]}>>
 }
 
 const CloseButton: React.FC<React.PropsWithChildren<{onClose: () => void}>> = ({onClose}) => {
-  return (
-    // eslint-disable-next-line primer-react/a11y-remove-disable-tooltip
-    <IconButton unsafeDisableTooltip={true} icon={XIcon} aria-label="Close" onClick={onClose} variant="invisible" />
-  )
+  return <IconButton icon={XIcon} aria-label="Close" onClick={onClose} variant="invisible" />
 }
 
 /**