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;