From e4a155f63db8641678b97537f7d6b4a03d00ecb3 Mon Sep 17 00:00:00 2001
From: "ildiko.gera" <ildiko.gera@instructure.com>
Date: Thu, 28 Nov 2024 14:58:24 +0100
Subject: [PATCH] feat(tooltip): make tooltip border color overridable

---
 packages/shared-types/src/ComponentThemeVariables.ts | 1 +
 packages/ui-tooltip/src/Tooltip/index.tsx            | 1 +
 packages/ui-tooltip/src/Tooltip/props.ts             | 2 +-
 packages/ui-tooltip/src/Tooltip/styles.ts            | 3 ++-
 packages/ui-tooltip/src/Tooltip/theme.ts             | 5 +++--
 5 files changed, 8 insertions(+), 4 deletions(-)

diff --git a/packages/shared-types/src/ComponentThemeVariables.ts b/packages/shared-types/src/ComponentThemeVariables.ts
index 3a9f07ae4e..e102456c72 100644
--- a/packages/shared-types/src/ComponentThemeVariables.ts
+++ b/packages/shared-types/src/ComponentThemeVariables.ts
@@ -1445,6 +1445,7 @@ export type TooltipTheme = {
   fontWeight: Typography['fontWeightNormal']
   fontSize: Typography['fontSizeSmall']
   padding: Spacing['small']
+  borderColor: Colors['contrasts']['grey3045']
 }
 
 export type TopNavBarActionItemsTheme = {
diff --git a/packages/ui-tooltip/src/Tooltip/index.tsx b/packages/ui-tooltip/src/Tooltip/index.tsx
index f3a3c44a17..bebb47c71f 100644
--- a/packages/ui-tooltip/src/Tooltip/index.tsx
+++ b/packages/ui-tooltip/src/Tooltip/index.tsx
@@ -176,6 +176,7 @@ class Tooltip extends Component<TooltipProps, TooltipState> {
         elementRef={this.handleRef}
         shouldCloseOnDocumentClick={false}
         shouldCloseOnEscape
+        themeOverride={{ borderColor: styles?.borderColor as string }}
       >
         <span id={this._id} css={styles?.tooltip} role="tooltip">
           {/* TODO: figure out how to add a ref to this */}
diff --git a/packages/ui-tooltip/src/Tooltip/props.ts b/packages/ui-tooltip/src/Tooltip/props.ts
index 4d9c10daa0..c0c2282134 100644
--- a/packages/ui-tooltip/src/Tooltip/props.ts
+++ b/packages/ui-tooltip/src/Tooltip/props.ts
@@ -186,7 +186,7 @@ type TooltipProps = PropsPassableToPopover &
   OtherHTMLAttributes<TooltipOwnProps> &
   WithDeterministicIdProps
 
-type TooltipStyle = ComponentStyle<'tooltip'>
+type TooltipStyle = ComponentStyle<'tooltip' | 'borderColor'>
 
 type TooltipState = {
   hasFocus: boolean
diff --git a/packages/ui-tooltip/src/Tooltip/styles.ts b/packages/ui-tooltip/src/Tooltip/styles.ts
index b73374f335..9714451486 100644
--- a/packages/ui-tooltip/src/Tooltip/styles.ts
+++ b/packages/ui-tooltip/src/Tooltip/styles.ts
@@ -45,7 +45,8 @@ const generateStyle = (componentTheme: TooltipTheme): TooltipStyle => {
       display: 'block',
       fontSize: componentTheme.fontSize,
       padding: componentTheme.padding
-    }
+    },
+    borderColor: componentTheme.borderColor
   }
 }
 
diff --git a/packages/ui-tooltip/src/Tooltip/theme.ts b/packages/ui-tooltip/src/Tooltip/theme.ts
index 9c01e49616..06ef2df59c 100644
--- a/packages/ui-tooltip/src/Tooltip/theme.ts
+++ b/packages/ui-tooltip/src/Tooltip/theme.ts
@@ -31,13 +31,14 @@ import { TooltipTheme } from '@instructure/shared-types'
  * @return {Object} The final theme object with the overrides and component variables
  */
 const generateComponentTheme = (theme: Theme): TooltipTheme => {
-  const { typography, spacing } = theme
+  const { typography, spacing, colors } = theme
 
   const componentVariables: TooltipTheme = {
     fontFamily: typography?.fontFamily,
     fontWeight: typography?.fontWeightNormal,
     fontSize: typography?.fontSizeSmall,
-    padding: spacing?.small
+    padding: spacing?.small,
+    borderColor: colors?.contrasts?.grey3045
   }
 
   return {