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}; `