Merge 502d9b8 into 359213b

.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, css and rails

src/Tooltip/Tooltip.features.stories.tsx

@@ -1,6 +1,6 @@
 import React from 'react'
 import {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 = () => (
+  <Box sx={{padding: 5, display: 'flex', gap: '8px'}}>
+    <Tooltip direction="n" aria-label="Supplementary text">
+      <Button>North</Button>
+    </Tooltip>
+    <Tooltip direction="s" aria-label="Supplementary text">
+      <Button>South</Button>
+    </Tooltip>
+    <Tooltip direction="e" aria-label="Supplementary text">
+      <Button>East</Button>
+    </Tooltip>
+    <Tooltip direction="w" aria-label="Supplementary text">
+      <Button>West</Button>
+    </Tooltip>
+    <Tooltip direction="ne" aria-label="Supplementary text">
+      <Button>North East</Button>
+    </Tooltip>
+    <Tooltip direction="nw" aria-label="Supplementary text">
+      <Button>North West</Button>
+    </Tooltip>
+    <Tooltip direction="se" aria-label="Supplementary text">
+      <Button>Southeast</Button>
+    </Tooltip>
+    <Tooltip direction="sw" aria-label="Supplementary text">
+      <Button>Southwest</Button>
+    </Tooltip>
+  </Box>
+)
+
 export const IconButtonTooltip = () => (
   <Box sx={{p: 5}}>
     <Tooltip aria-label="Search">

src/Tooltip/Tooltip.tsx

@@ -11,19 +11,6 @@ const TooltipBase = styled.span<SxProp>`
   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;
@@ -42,7 +29,7 @@ const TooltipBase = styled.span<SxProp>`
     pointer-events: none;
     content: attr(aria-label);
     background: ${get('colors.neutral.emphasisPlus')};
-    border-radius: ${get('radii.1')};
+    border-radius: ${get('radii.2')};
     opacity: 0;
   }
 
@@ -61,23 +48,21 @@ const TooltipBase = styled.span<SxProp>`
   &:active,
   &:focus,
   &:focus-within {
-    &::before,
     &::after {
       display: inline-block;
       text-decoration: none;
       animation-name: tooltip-appear;
       animation-duration: 0.1s;
       animation-fill-mode: forwards;
       animation-timing-function: ease-in;
-      animation-delay: 0.4s;
+      animation-delay: 0s;
     }
   }
 
   &.tooltipped-no-delay:hover,
   &.tooltipped-no-delay:active,
   &.tooltipped-no-delay:focus,
   &.tooltipped-no-delay:focus-within {
-    &::before,
     &::after {
       animation-delay: 0s;
     }
@@ -101,14 +86,6 @@ const TooltipBase = styled.span<SxProp>`
       right: 50%;
       margin-top: 6px;
     }
-
-    &::before {
-      top: auto;
-      right: 50%;
-      bottom: -7px;
-      margin-right: -6px;
-      border-bottom-color: ${get('colors.neutral.emphasisPlus')};
-    }
   }
 
   &.tooltipped-se {
@@ -132,14 +109,6 @@ const TooltipBase = styled.span<SxProp>`
       bottom: 100%;
       margin-bottom: 6px;
     }
-
-    &::before {
-      top: -7px;
-      right: 50%;
-      bottom: auto;
-      margin-right: -6px;
-      border-top-color: ${get('colors.neutral.emphasisPlus')};
-    }
   }
 
   &.tooltipped-ne {
@@ -168,14 +137,6 @@ const TooltipBase = styled.span<SxProp>`
       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
@@ -186,14 +147,6 @@ const TooltipBase = styled.span<SxProp>`
       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 {
@@ -223,19 +176,11 @@ const TooltipBase = styled.span<SxProp>`
     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};
 `
 

src/Tooltip/__snapshots__/Tooltip.test.tsx.snap

@@ -6,19 +6,6 @@ exports[`Tooltip renders consistently 1`] = `
   display: inline-block;
 }
 
-.c0::before {
-  position: absolute;
-  z-index: 1000001;
-  display: none;
-  width: 0px;
-  height: 0px;
-  color: #24292f;
-  pointer-events: none;
-  content: '';
-  border: 6px solid transparent;
-  opacity: 0;
-}
-
 .c0::after {
   position: absolute;
   z-index: 1000000;
@@ -41,14 +28,10 @@ exports[`Tooltip renders consistently 1`] = `
   pointer-events: none;
   content: attr(aria-label);
   background: #24292f;
-  border-radius: 3px;
+  border-radius: 6px;
   opacity: 0;
 }
 
-.c0:hover::before,
-.c0:active::before,
-.c0:focus::before,
-.c0:focus-within::before,
 .c0:hover::after,
 .c0:active::after,
 .c0:focus::after,
@@ -68,10 +51,6 @@ exports[`Tooltip renders consistently 1`] = `
   animation-delay: 0.4s;
 }
 
-.c0.tooltipped-no-delay:hover::before,
-.c0.tooltipped-no-delay:active::before,
-.c0.tooltipped-no-delay:focus::before,
-.c0.tooltipped-no-delay:focus-within::before,
 .c0.tooltipped-no-delay:hover::after,
 .c0.tooltipped-no-delay:active::after,
 .c0.tooltipped-no-delay:focus::after,
@@ -95,16 +74,6 @@ exports[`Tooltip renders consistently 1`] = `
   margin-top: 6px;
 }
 
-.c0.tooltipped-s::before,
-.c0.tooltipped-se::before,
-.c0.tooltipped-sw::before {
-  top: auto;
-  right: 50%;
-  bottom: -7px;
-  margin-right: -6px;
-  border-bottom-color: #24292f;
-}
-
 .c0.tooltipped-se::after {
   right: auto;
   left: 50%;
@@ -123,16 +92,6 @@ exports[`Tooltip renders consistently 1`] = `
   margin-bottom: 6px;
 }
 
-.c0.tooltipped-n::before,
-.c0.tooltipped-ne::before,
-.c0.tooltipped-nw::before {
-  top: -7px;
-  right: 50%;
-  bottom: auto;
-  margin-right: -6px;
-  border-top-color: #24292f;
-}
-
 .c0.tooltipped-ne::after {
   right: auto;
   left: 50%;
@@ -159,14 +118,6 @@ exports[`Tooltip renders consistently 1`] = `
   transform: translateY(50%);
 }
 
-.c0.tooltipped-w::before {
-  top: 50%;
-  bottom: 50%;
-  left: -7px;
-  margin-top: -6px;
-  border-left-color: #24292f;
-}
-
 .c0.tooltipped-e::after {
   bottom: 50%;
   left: 100%;
@@ -176,14 +127,6 @@ exports[`Tooltip renders consistently 1`] = `
   transform: translateY(50%);
 }
 
-.c0.tooltipped-e::before {
-  top: 50%;
-  right: -7px;
-  bottom: 50%;
-  margin-top: -6px;
-  border-right-color: #24292f;
-}
-
 .c0.tooltipped-multiline::after {
   width: -webkit-max-content;
   width: -moz-max-content;
@@ -213,19 +156,11 @@ exports[`Tooltip renders consistently 1`] = `
   margin-right: 0;
 }
 
-.c0.tooltipped-align-right-2::before {
-  right: 15px;
-}
-
 .c0.tooltipped-align-left-2::after {
   left: 0;
   margin-left: 0;
 }
 
-.c0.tooltipped-align-left-2::before {
-  left: 10px;
-}
-
 <span
   className="c0 tooltipped-n"
   role="tooltip"