diff --git a/.changeset/rotten-schools-whisper.md b/.changeset/rotten-schools-whisper.md new file mode 100644 index 00000000000..c64ad0276a9 --- /dev/null +++ b/.changeset/rotten-schools-whisper.md @@ -0,0 +1,5 @@ +--- +'@primer/react': minor +--- + +Tooltip v1: Remove the caret from the tooltip to make it consistent with the new tooltip design diff --git a/.playwright/snapshots/components/Tooltip.test.ts-snapshots/Tooltip-Default-dark-colorblind-open-linux.png b/.playwright/snapshots/components/Tooltip.test.ts-snapshots/Tooltip-Default-dark-colorblind-open-linux.png index 13c0f1fd200..2dd86a8cd1e 100644 Binary files a/.playwright/snapshots/components/Tooltip.test.ts-snapshots/Tooltip-Default-dark-colorblind-open-linux.png and b/.playwright/snapshots/components/Tooltip.test.ts-snapshots/Tooltip-Default-dark-colorblind-open-linux.png differ diff --git a/.playwright/snapshots/components/Tooltip.test.ts-snapshots/Tooltip-Default-dark-dimmed-open-linux.png b/.playwright/snapshots/components/Tooltip.test.ts-snapshots/Tooltip-Default-dark-dimmed-open-linux.png index 4cfb242f690..1351e2d7526 100644 Binary files a/.playwright/snapshots/components/Tooltip.test.ts-snapshots/Tooltip-Default-dark-dimmed-open-linux.png and b/.playwright/snapshots/components/Tooltip.test.ts-snapshots/Tooltip-Default-dark-dimmed-open-linux.png differ diff --git a/.playwright/snapshots/components/Tooltip.test.ts-snapshots/Tooltip-Default-dark-high-contrast-open-linux.png b/.playwright/snapshots/components/Tooltip.test.ts-snapshots/Tooltip-Default-dark-high-contrast-open-linux.png index 7b297cb3103..ed268e6cf27 100644 Binary files a/.playwright/snapshots/components/Tooltip.test.ts-snapshots/Tooltip-Default-dark-high-contrast-open-linux.png and b/.playwright/snapshots/components/Tooltip.test.ts-snapshots/Tooltip-Default-dark-high-contrast-open-linux.png differ diff --git a/.playwright/snapshots/components/Tooltip.test.ts-snapshots/Tooltip-Default-dark-open-linux.png b/.playwright/snapshots/components/Tooltip.test.ts-snapshots/Tooltip-Default-dark-open-linux.png index e254be8ae47..916bab6c482 100644 Binary files a/.playwright/snapshots/components/Tooltip.test.ts-snapshots/Tooltip-Default-dark-open-linux.png and b/.playwright/snapshots/components/Tooltip.test.ts-snapshots/Tooltip-Default-dark-open-linux.png differ diff --git a/.playwright/snapshots/components/Tooltip.test.ts-snapshots/Tooltip-Default-dark-tritanopia-open-linux.png b/.playwright/snapshots/components/Tooltip.test.ts-snapshots/Tooltip-Default-dark-tritanopia-open-linux.png index 13c0f1fd200..2dd86a8cd1e 100644 Binary files a/.playwright/snapshots/components/Tooltip.test.ts-snapshots/Tooltip-Default-dark-tritanopia-open-linux.png and b/.playwright/snapshots/components/Tooltip.test.ts-snapshots/Tooltip-Default-dark-tritanopia-open-linux.png differ diff --git a/.playwright/snapshots/components/Tooltip.test.ts-snapshots/Tooltip-Default-light-colorblind-open-linux.png b/.playwright/snapshots/components/Tooltip.test.ts-snapshots/Tooltip-Default-light-colorblind-open-linux.png index 72572185338..7d47f2f9443 100644 Binary files a/.playwright/snapshots/components/Tooltip.test.ts-snapshots/Tooltip-Default-light-colorblind-open-linux.png and b/.playwright/snapshots/components/Tooltip.test.ts-snapshots/Tooltip-Default-light-colorblind-open-linux.png differ diff --git a/.playwright/snapshots/components/Tooltip.test.ts-snapshots/Tooltip-Default-light-high-contrast-open-linux.png b/.playwright/snapshots/components/Tooltip.test.ts-snapshots/Tooltip-Default-light-high-contrast-open-linux.png index d520cb1eaf4..f4a46433262 100644 Binary files a/.playwright/snapshots/components/Tooltip.test.ts-snapshots/Tooltip-Default-light-high-contrast-open-linux.png and b/.playwright/snapshots/components/Tooltip.test.ts-snapshots/Tooltip-Default-light-high-contrast-open-linux.png differ diff --git a/.playwright/snapshots/components/Tooltip.test.ts-snapshots/Tooltip-Default-light-open-linux.png b/.playwright/snapshots/components/Tooltip.test.ts-snapshots/Tooltip-Default-light-open-linux.png index ab1d7dd970e..ed38c83b1fb 100644 Binary files a/.playwright/snapshots/components/Tooltip.test.ts-snapshots/Tooltip-Default-light-open-linux.png and b/.playwright/snapshots/components/Tooltip.test.ts-snapshots/Tooltip-Default-light-open-linux.png differ diff --git a/.playwright/snapshots/components/Tooltip.test.ts-snapshots/Tooltip-Default-light-tritanopia-open-linux.png b/.playwright/snapshots/components/Tooltip.test.ts-snapshots/Tooltip-Default-light-tritanopia-open-linux.png index 72572185338..7d47f2f9443 100644 Binary files a/.playwright/snapshots/components/Tooltip.test.ts-snapshots/Tooltip-Default-light-tritanopia-open-linux.png and b/.playwright/snapshots/components/Tooltip.test.ts-snapshots/Tooltip-Default-light-tritanopia-open-linux.png differ diff --git a/packages/react/src/Tooltip/Tooltip.features.stories.tsx b/packages/react/src/Tooltip/Tooltip.features.stories.tsx index 2d66a68c3f3..a977be340db 100644 --- a/packages/react/src/Tooltip/Tooltip.features.stories.tsx +++ b/packages/react/src/Tooltip/Tooltip.features.stories.tsx @@ -1,6 +1,6 @@ import React from 'react' import type {Meta} from '@storybook/react' -import {BaseStyles, ThemeProvider, IconButton} from '..' +import {BaseStyles, ThemeProvider, IconButton, Button} from '..' import Box from '../Box' import Tooltip from './Tooltip' import {SearchIcon} from '@primer/octicons-react' @@ -24,6 +24,35 @@ export default { ], } as Meta +export const AllDirections = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + +) + export const IconButtonTooltip = () => ( diff --git a/packages/react/src/Tooltip/Tooltip.tsx b/packages/react/src/Tooltip/Tooltip.tsx index a98700cd6bd..c499c77d72b 100644 --- a/packages/react/src/Tooltip/Tooltip.tsx +++ b/packages/react/src/Tooltip/Tooltip.tsx @@ -12,19 +12,6 @@ const TooltipBase = styled.span` position: relative; display: inline-block; - &::before { - position: absolute; - z-index: 1000001; - display: none; - width: 0px; - height: 0px; - color: ${get('colors.neutral.emphasisPlus')}; - pointer-events: none; - content: ''; - border: 6px solid transparent; - opacity: 0; - } - &::after { position: absolute; z-index: 1000000; @@ -62,7 +49,6 @@ const TooltipBase = styled.span` &:active, &:focus, &:focus-within { - &::before, &::after { display: inline-block; text-decoration: none; @@ -70,7 +56,7 @@ const TooltipBase = styled.span` animation-duration: 0.1s; animation-fill-mode: forwards; animation-timing-function: ease-in; - animation-delay: 0.4s; + animation-delay: 0s; } } @@ -78,7 +64,6 @@ const TooltipBase = styled.span` &.tooltipped-no-delay:active, &.tooltipped-no-delay:focus, &.tooltipped-no-delay:focus-within { - &::before, &::after { animation-delay: 0s; } @@ -102,14 +87,6 @@ const TooltipBase = styled.span` right: 50%; margin-top: 6px; } - - &::before { - top: auto; - right: 50%; - bottom: -7px; - margin-right: -6px; - border-bottom-color: ${get('colors.neutral.emphasisPlus')}; - } } &.tooltipped-se { @@ -133,14 +110,6 @@ const TooltipBase = styled.span` bottom: 100%; margin-bottom: 6px; } - - &::before { - top: -7px; - right: 50%; - bottom: auto; - margin-right: -6px; - border-top-color: ${get('colors.neutral.emphasisPlus')}; - } } &.tooltipped-ne { @@ -169,14 +138,6 @@ const TooltipBase = styled.span` margin-right: 6px; transform: translateY(50%); } - - &::before { - top: 50%; - bottom: 50%; - left: -7px; - margin-top: -6px; - border-left-color: ${get('colors.neutral.emphasisPlus')}; - } } // tooltipped to the right @@ -187,14 +148,6 @@ const TooltipBase = styled.span` margin-left: 6px; transform: translateY(50%); } - - &::before { - top: 50%; - right: -7px; - bottom: 50%; - margin-top: -6px; - border-right-color: ${get('colors.neutral.emphasisPlus')}; - } } &.tooltipped-multiline { @@ -224,19 +177,11 @@ const TooltipBase = styled.span` margin-right: 0; } - &.tooltipped-align-right-2::before { - right: 15px; - } - &.tooltipped-align-left-2::after { left: 0; margin-left: 0; } - &.tooltipped-align-left-2::before { - left: 10px; - } - ${sx}; ` diff --git a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap index e4fac86e3b1..8080b21ad6d 100644 --- a/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap +++ b/packages/react/src/__tests__/__snapshots__/TextInput.test.tsx.snap @@ -2012,19 +2012,6 @@ exports[`TextInput renders trailingAction icon button 1`] = ` display: inline-block; } -.c4::before { - position: absolute; - z-index: 1000001; - display: none; - width: 0px; - height: 0px; - color: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f)); - pointer-events: none; - content: ''; - border: 6px solid transparent; - opacity: 0; -} - .c4::after { position: absolute; z-index: 1000000; @@ -2051,10 +2038,6 @@ exports[`TextInput renders trailingAction icon button 1`] = ` opacity: 0; } -.c4:hover::before, -.c4:active::before, -.c4:focus::before, -.c4:focus-within::before, .c4:hover::after, .c4:active::after, .c4:focus::after, @@ -2070,14 +2053,10 @@ exports[`TextInput renders trailingAction icon button 1`] = ` animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; - -webkit-animation-delay: 0.4s; - animation-delay: 0.4s; + -webkit-animation-delay: 0s; + animation-delay: 0s; } -.c4.tooltipped-no-delay:hover::before, -.c4.tooltipped-no-delay:active::before, -.c4.tooltipped-no-delay:focus::before, -.c4.tooltipped-no-delay:focus-within::before, .c4.tooltipped-no-delay:hover::after, .c4.tooltipped-no-delay:active::after, .c4.tooltipped-no-delay:focus::after, @@ -2101,16 +2080,6 @@ exports[`TextInput renders trailingAction icon button 1`] = ` margin-top: 6px; } -.c4.tooltipped-s::before, -.c4.tooltipped-se::before, -.c4.tooltipped-sw::before { - top: auto; - right: 50%; - bottom: -7px; - margin-right: -6px; - border-bottom-color: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f)); -} - .c4.tooltipped-se::after { right: auto; left: 50%; @@ -2129,16 +2098,6 @@ exports[`TextInput renders trailingAction icon button 1`] = ` margin-bottom: 6px; } -.c4.tooltipped-n::before, -.c4.tooltipped-ne::before, -.c4.tooltipped-nw::before { - top: -7px; - right: 50%; - bottom: auto; - margin-right: -6px; - border-top-color: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f)); -} - .c4.tooltipped-ne::after { right: auto; left: 50%; @@ -2165,14 +2124,6 @@ exports[`TextInput renders trailingAction icon button 1`] = ` transform: translateY(50%); } -.c4.tooltipped-w::before { - top: 50%; - bottom: 50%; - left: -7px; - margin-top: -6px; - border-left-color: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f)); -} - .c4.tooltipped-e::after { bottom: 50%; left: 100%; @@ -2182,14 +2133,6 @@ exports[`TextInput renders trailingAction icon button 1`] = ` transform: translateY(50%); } -.c4.tooltipped-e::before { - top: 50%; - right: -7px; - bottom: 50%; - margin-top: -6px; - border-right-color: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f)); -} - .c4.tooltipped-multiline::after { width: -webkit-max-content; width: -moz-max-content; @@ -2219,19 +2162,11 @@ exports[`TextInput renders trailingAction icon button 1`] = ` margin-right: 0; } -.c4.tooltipped-align-right-2::before { - right: 15px; -} - .c4.tooltipped-align-left-2::after { left: 0; margin-left: 0; } -.c4.tooltipped-align-left-2::before { - left: 10px; -} - .c2 { border: 0; font-size: inherit; @@ -3112,19 +3047,6 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` display: inline-block; } -.c4::before { - position: absolute; - z-index: 1000001; - display: none; - width: 0px; - height: 0px; - color: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f)); - pointer-events: none; - content: ''; - border: 6px solid transparent; - opacity: 0; -} - .c4::after { position: absolute; z-index: 1000000; @@ -3151,10 +3073,6 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` opacity: 0; } -.c4:hover::before, -.c4:active::before, -.c4:focus::before, -.c4:focus-within::before, .c4:hover::after, .c4:active::after, .c4:focus::after, @@ -3170,14 +3088,10 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` animation-fill-mode: forwards; -webkit-animation-timing-function: ease-in; animation-timing-function: ease-in; - -webkit-animation-delay: 0.4s; - animation-delay: 0.4s; + -webkit-animation-delay: 0s; + animation-delay: 0s; } -.c4.tooltipped-no-delay:hover::before, -.c4.tooltipped-no-delay:active::before, -.c4.tooltipped-no-delay:focus::before, -.c4.tooltipped-no-delay:focus-within::before, .c4.tooltipped-no-delay:hover::after, .c4.tooltipped-no-delay:active::after, .c4.tooltipped-no-delay:focus::after, @@ -3201,16 +3115,6 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` margin-top: 6px; } -.c4.tooltipped-s::before, -.c4.tooltipped-se::before, -.c4.tooltipped-sw::before { - top: auto; - right: 50%; - bottom: -7px; - margin-right: -6px; - border-bottom-color: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f)); -} - .c4.tooltipped-se::after { right: auto; left: 50%; @@ -3229,16 +3133,6 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` margin-bottom: 6px; } -.c4.tooltipped-n::before, -.c4.tooltipped-ne::before, -.c4.tooltipped-nw::before { - top: -7px; - right: 50%; - bottom: auto; - margin-right: -6px; - border-top-color: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f)); -} - .c4.tooltipped-ne::after { right: auto; left: 50%; @@ -3265,14 +3159,6 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` transform: translateY(50%); } -.c4.tooltipped-w::before { - top: 50%; - bottom: 50%; - left: -7px; - margin-top: -6px; - border-left-color: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f)); -} - .c4.tooltipped-e::after { bottom: 50%; left: 100%; @@ -3282,14 +3168,6 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` transform: translateY(50%); } -.c4.tooltipped-e::before { - top: 50%; - right: -7px; - bottom: 50%; - margin-top: -6px; - border-right-color: var(--bgColor-emphasis,var(--color-neutral-emphasis-plus,#24292f)); -} - .c4.tooltipped-multiline::after { width: -webkit-max-content; width: -moz-max-content; @@ -3319,19 +3197,11 @@ exports[`TextInput renders trailingAction text button with a tooltip 1`] = ` margin-right: 0; } -.c4.tooltipped-align-right-2::before { - right: 15px; -} - .c4.tooltipped-align-left-2::after { left: 0; margin-left: 0; } -.c4.tooltipped-align-left-2::before { - left: 10px; -} - .c2 { border: 0; font-size: inherit;