feat(tooltip): make tooltip border color overridable

instructure · Nov 28, 2024 · e4a155f · e4a155f
1 parent 304a29a
commit e4a155f
Show file tree

Hide file tree

Showing 5 changed files with 8 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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 {