Revert Tooltip caret removal (#2324)

Co-authored-by: langermank <langermank@users.noreply.github.com>
primer · Oct 23, 2023 · cc44952 · cc44952
1 parent 8270c06
commit cc44952
Show file tree

Hide file tree

Showing 14 changed files with 84 additions and 3 deletions.
diff --git a/.changeset/red-moles-tie.md b/.changeset/red-moles-tie.md
@@ -0,0 +1,8 @@
+---
+"@primer/view-components": patch
+---
+
+Revert Tooltip caret removal
+
+<!-- Changed components: Tooltip -->
+
diff --git a/...enshots/snapshots.test.ts-snapshots/primer/alpha/action_bar/default/focused.png b/...enshots/snapshots.test.ts-snapshots/primer/alpha/action_bar/default/focused.png
diff --git a/...snapshots.test.ts-snapshots/primer/alpha/banner/with_action_content/focused.png b/...snapshots.test.ts-snapshots/primer/alpha/banner/with_action_content/focused.png
diff --git a/...ts.test.ts-snapshots/primer/alpha/segmented_control/icon_only_large/focused.png b/...ts.test.ts-snapshots/primer/alpha/segmented_control/icon_only_large/focused.png
diff --git a/...s.test.ts-snapshots/primer/alpha/segmented_control/icon_only_medium/focused.png b/...s.test.ts-snapshots/primer/alpha/segmented_control/icon_only_medium/focused.png
diff --git a/...ts.test.ts-snapshots/primer/alpha/segmented_control/icon_only_small/focused.png b/...ts.test.ts-snapshots/primer/alpha/segmented_control/icon_only_small/focused.png
diff --git a/...est.ts-snapshots/primer/alpha/text_field/input_group_leading_button/focused.png b/...est.ts-snapshots/primer/alpha/text_field/input_group_leading_button/focused.png
diff --git a/...shots/snapshots.test.ts-snapshots/primer/beta/button_group/all_tags/focused.png b/...shots/snapshots.test.ts-snapshots/primer/beta/button_group/all_tags/focused.png
diff --git a/...s/snapshots.test.ts-snapshots/primer/beta/button_group/icon_buttons/focused.png b/...s/snapshots.test.ts-snapshots/primer/beta/button_group/icon_buttons/focused.png
diff --git a/...s/snapshots.test.ts-snapshots/primer/beta/flash/options_dismissible/focused.png b/...s/snapshots.test.ts-snapshots/primer/beta/flash/options_dismissible/focused.png
diff --git a/...eenshots/snapshots.test.ts-snapshots/primer/beta/icon_button/danger/focused.png b/...eenshots/snapshots.test.ts-snapshots/primer/beta/icon_button/danger/focused.png
diff --git a/...enshots/snapshots.test.ts-snapshots/primer/beta/icon_button/default/focused.png b/...enshots/snapshots.test.ts-snapshots/primer/beta/icon_button/default/focused.png
diff --git a/...shots/snapshots.test.ts-snapshots/primer/beta/icon_button/invisible/focused.png b/...shots/snapshots.test.ts-snapshots/primer/beta/icon_button/invisible/focused.png
diff --git a/app/components/primer/alpha/tool_tip.ts b/app/components/primer/alpha/tool_tip.ts
@@ -21,8 +21,9 @@ const isPopoverOpen = (() => {
   return (el: Element) => (selector ? el.matches(selector) : setSelector(el))
 })()
 
+const TOOLTIP_ARROW_EDGE_OFFSET = 6
 const TOOLTIP_SR_ONLY_CLASS = 'sr-only'
-const TOOLTIP_OFFSET = 4
+const TOOLTIP_OFFSET = 10
 
 type Direction = 'n' | 's' | 'e' | 'w' | 'ne' | 'se' | 'nw' | 'sw'
 
@@ -91,15 +92,33 @@ class ToolTipElement extends HTMLElement {
         text-wrap: balance;
       }
 
+      :host:before{
+        position: absolute;
+        z-index: 1000001;
+        color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
+        content: "";
+        border: 6px solid transparent;
+        opacity: 0;
+      }
+
       @keyframes tooltip-appear {
         from {
           opacity: 0;
         }
         to {
-          opacity: 1
+          opacity: 1;
         }
       }
 
+      :host:after{
+        position: absolute;
+        display: block;
+        right: 0;
+        left: 0;
+        height: 12px;
+        content: "";
+      }
+
       :host(:popover-open),
       :host(:popover-open):before {
         animation-name: tooltip-appear;
@@ -108,11 +127,65 @@ class ToolTipElement extends HTMLElement {
         animation-timing-function: ease-in;
       }
 
-      :host(.\\:popover-open) {
+      :host(.\\:popover-open),
+      :host(.\\:popover-open):before {
         animation-name: tooltip-appear;
         animation-duration: .1s;
         animation-fill-mode: forwards;
         animation-timing-function: ease-in;
+        animation-delay: .4s;
+      }
+
+      :host(.tooltip-s):before,
+      :host(.tooltip-n):before {
+        right: 50%;
+        margin-right: -${TOOLTIP_ARROW_EDGE_OFFSET}px;
+      }
+      :host(.tooltip-s):before,
+      :host(.tooltip-se):before,
+      :host(.tooltip-sw):before {
+        bottom: 100%;
+        border-bottom-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
+      }
+      :host(.tooltip-s):after,
+      :host(.tooltip-se):after,
+      :host(.tooltip-sw):after {
+        bottom: 100%
+      }
+      :host(.tooltip-n):before,
+      :host(.tooltip-ne):before,
+      :host(.tooltip-nw):before {
+        top: 100%;
+        border-top-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
+      }
+      :host(.tooltip-n):after,
+      :host(.tooltip-ne):after,
+      :host(.tooltip-nw):after {
+        top: 100%;
+      }
+      :host(.tooltip-se):before,
+      :host(.tooltip-ne):before {
+        left: 0;
+        margin-left: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
+      }
+      :host(.tooltip-sw):before,
+      :host(.tooltip-nw):before {
+        right: 0;
+        margin-right: ${TOOLTIP_ARROW_EDGE_OFFSET}px;
+      }
+      :host(.tooltip-w):before {
+        top: 50%;
+        bottom: 50%;
+        left: 100%;
+        margin-top: -6px;
+        border-left-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
+      }
+      :host(.tooltip-e):before {
+        top: 50%;
+        right: 100%;
+        bottom: 50%;
+        margin-top: -6px;
+        border-right-color: var(--bgColor-emphasis, var(--color-neutral-emphasis-plus));
       }
     `
   }