Fix tooltip styling broken by a change to makeStyles (#18966)

Replace functions/constants that were shared between useTooltip/useTooltipStyles, with static values, and add comments where the values need to be kept in sync between the files.

change/@fluentui-react-tooltip-213f0794-f443-407a-8a93-c1470bb202a9.json

@@ -0,0 +1,7 @@
+{
+  "type": "prerelease",
+  "comment": "Fix tooltip styling broken by a change in makeStyles",
+  "packageName": "@fluentui/react-tooltip",
+  "email": "[email protected]",
+  "dependentChangeType": "patch"
+}

packages/react-tooltip/src/components/Tooltip/useTooltip.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { usePopper } from '@fluentui/react-positioning';
-import { TooltipContext, useFluent, useTheme } from '@fluentui/react-shared-contexts';
+import { TooltipContext, useFluent } from '@fluentui/react-shared-contexts';
 import {
   makeMergeProps,
   onlyChild,
@@ -11,7 +11,6 @@ import {
   useMergedRefs,
 } from '@fluentui/react-utilities';
 import { TooltipProps, TooltipShorthandProps, TooltipState, TooltipTriggerProps } from './Tooltip.types';
-import { arrowHeight, tooltipBorderRadius } from './useTooltipStyles';
 
 /**
  * Names of the shorthand properties in TooltipProps
@@ -21,6 +20,10 @@ export const tooltipShorthandProps: TooltipShorthandProps[] = ['content'];
 
 const mergeProps = makeMergeProps<TooltipState>({ deepMerge: tooltipShorthandProps });
 
+// Style values that are required for popper to properly position the tooltip
+const tooltipBorderRadius = 4; // Update the root's borderRadius in useTooltipStyles.ts if this changes
+const arrowHeight = 6; // Update the arrow's width/height in useTooltipStyles.ts if this changes
+
 /**
  * Create the state required to render Tooltip.
  *
@@ -63,13 +66,12 @@ export const useTooltip = (
     resolveShorthandProps(props, tooltipShorthandProps),
   );
 
-  const theme = useTheme();
   const popper = usePopper({
     enabled: visible,
     position: state.position,
     align: state.align,
     offset: [0, state.offset + (state.noArrow ? 0 : arrowHeight)],
-    arrowPadding: theme?.global ? 2 * parseInt(tooltipBorderRadius(theme), 10) : 0,
+    arrowPadding: 2 * tooltipBorderRadius,
   });
 
   state.ref = useMergedRefs(state.ref, popper.containerRef);

packages/react-tooltip/src/components/Tooltip/useTooltipStyles.ts

@@ -1,13 +1,5 @@
 import { makeStyles, mergeClasses } from '@fluentui/react-make-styles';
 import { TooltipState } from './Tooltip.types';
-import { Theme } from '@fluentui/react-theme';
-
-/**
- * The height of the triangle used for the arrow that points at the tooltip's target
- */
-export const arrowHeight = 6;
-
-export const tooltipBorderRadius = (theme: Theme) => theme.global.borderRadius.medium;
 
 /**
  * Styles for the tooltip
@@ -21,7 +13,7 @@ const useStyles = makeStyles({
     fontFamily: theme.global.type.fontFamilies.base,
     fontSize: theme.global.type.fontSizes.base[200],
     lineHeight: theme.global.type.lineHeights.base[200],
-    borderRadius: tooltipBorderRadius(theme),
+    borderRadius: theme.global.borderRadius.medium, // Update tooltipBorderRadius in useTooltip.tsx if this changes
 
     background: theme.alias.color.neutral.neutralForeground2, // TODO should be neutralBackgroundInverted
     color: theme.alias.color.neutral.neutralForegroundInverted,
@@ -43,8 +35,8 @@ const useStyles = makeStyles({
 
   arrow: theme => ({
     position: 'absolute',
-    width: `${Math.SQRT2 * arrowHeight}px`,
-    height: `${Math.SQRT2 * arrowHeight}px`,
+    width: '8.485px', //  width and height = arrowHeight * sqrt(2)
+    height: '8.485px', // Update arrowHeight in useTooltip.tsx if this changes
     background: 'inherit',
     visibility: 'hidden',
     zIndex: -1,