diff --git a/.changeset/chilled-walls-cheer.md b/.changeset/chilled-walls-cheer.md new file mode 100644 index 00000000000..f8fd4924215 --- /dev/null +++ b/.changeset/chilled-walls-cheer.md @@ -0,0 +1,5 @@ +--- +"@primer/react": patch +--- + +Show `Tooltip` on close button in `Dialog` diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Css-light-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Css-light-colorblind-linux.png index ffc1019a844..2272a1571c2 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Css-light-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Dev-With-Css-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-colorblind-linux.png index e9df71e78bf..75cd2967d4a 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-dimmed-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-dimmed-linux.png index 898c4156a07..db0b0a67c96 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-dimmed-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-high-contrast-linux.png index fb174f1d6f7..21294f14b09 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-linux.png index e9df71e78bf..75cd2967d4a 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-tritanopia-linux.png index e9df71e78bf..75cd2967d4a 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-colorblind-linux.png index 455bbb65e9f..3089b75210f 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-high-contrast-linux.png index 7b798c5100b..a5ac05340ae 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-linux.png index 455bbb65e9f..3089b75210f 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-tritanopia-linux.png index 455bbb65e9f..3089b75210f 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-bottom-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-colorblind-linux.png index e9df71e78bf..75cd2967d4a 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-dimmed-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-dimmed-linux.png index 898c4156a07..db0b0a67c96 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-dimmed-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-high-contrast-linux.png index fb174f1d6f7..21294f14b09 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-linux.png index e9df71e78bf..75cd2967d4a 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-tritanopia-linux.png index e9df71e78bf..75cd2967d4a 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-colorblind-linux.png index 455bbb65e9f..3089b75210f 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-high-contrast-linux.png index 7b798c5100b..a5ac05340ae 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-linux.png index 455bbb65e9f..3089b75210f 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-tritanopia-linux.png index 455bbb65e9f..3089b75210f 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-fullscreen-light-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-colorblind-linux.png index fb63a4b582d..51e05aab9f1 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-dimmed-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-dimmed-linux.png index d2137b3496b..c2ba103a253 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-dimmed-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-dimmed-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-high-contrast-linux.png index a83b9bc0f3e..946fb2ea738 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-linux.png index fb63a4b582d..51e05aab9f1 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-tritanopia-linux.png index fb63a4b582d..51e05aab9f1 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-dark-tritanopia-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-colorblind-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-colorblind-linux.png index 1d70c59b77c..2a1ae390420 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-colorblind-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-colorblind-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-high-contrast-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-high-contrast-linux.png index b35f1b4204e..78b6ba5294e 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-high-contrast-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-high-contrast-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-linux.png index 1d70c59b77c..2a1ae390420 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-linux.png differ diff --git a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-tritanopia-linux.png b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-tritanopia-linux.png index 1d70c59b77c..2a1ae390420 100644 Binary files a/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-tritanopia-linux.png and b/.playwright/snapshots/components/Dialog.test.ts-snapshots/Dialog-Position-sidesheet-light-tritanopia-linux.png differ diff --git a/packages/react/.storybook/storybook.css b/packages/react/.storybook/storybook.css index fd26ca2d071..d0f4ca72f5a 100644 --- a/packages/react/.storybook/storybook.css +++ b/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; } diff --git a/packages/react/src/Dialog/Dialog.dev.stories.tsx b/packages/react/src/Dialog/Dialog.dev.stories.tsx index 13060b3f0d9..6248c6c7c60 100644 --- a/packages/react/src/Dialog/Dialog.dev.stories.tsx +++ b/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} @@ -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} @@ -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} diff --git a/packages/react/src/Dialog/Dialog.module.css b/packages/react/src/Dialog/Dialog.module.css index 444df0b3510..89085c7110a 100644 --- a/packages/react/src/Dialog/Dialog.module.css +++ b/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; } } } diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx index f359932bf8b..25d04a75b8b 100644 --- a/packages/react/src/Dialog/Dialog.tsx +++ b/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> } const CloseButton: React.FC void}>> = ({onClose}) => { - return ( - // eslint-disable-next-line primer-react/a11y-remove-disable-tooltip - - ) + return } /**