refactor(tooltipcondensed): add hasInvertedStyle prop to the TooltipC…

…ondensed component
chanzuckerberg · Nov 26, 2024 · 4d9f259 · 4d9f259
1 parent 9f43e33
commit 4d9f259
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 2 deletions.
diff --git a/packages/components/src/core/TooltipCondensed/__storybook__/index.stories.tsx b/packages/components/src/core/TooltipCondensed/__storybook__/index.stories.tsx
@@ -5,6 +5,9 @@ import { TOOLTIP_CONDENSED_EXCLUDED_CONTROLS } from "./constants";
 
 export default {
   argTypes: {
+    hasInvertedStyle: {
+      control: { type: "boolean" },
+    },
     indicator: {
       control: { type: "boolean" },
     },
@@ -23,6 +26,7 @@ export default {
 
 export const Default = {
   args: {
+    hasInvertedStyle: false,
     title: "Label",
   },
 };

diff --git a/packages/components/src/core/TooltipCondensed/index.tsx b/packages/components/src/core/TooltipCondensed/index.tsx
@@ -16,7 +16,7 @@ const TooltipCondensed = forwardRef(function TooltipCondensed(
   props: TooltipCondensedProps,
   ref
 ): JSX.Element {
-  const { children, title, indicator, indicatorColor } = props;
+  const { children, title, indicator, indicatorColor, ...rest } = props;
 
   const theme = useTheme();
 
@@ -36,6 +36,10 @@ const TooltipCondensed = forwardRef(function TooltipCondensed(
 
   return (
     <Tooltip
+      {...rest}
+      // (masoudmanson): The following props must be passed to the Tooltip component
+      // exactly as defined below. To ensure they aren't overridden by the spread operator,
+      // we pass them after the spread operator.
       followCursor
       placement="right-end"
       enterDelay={50}
@@ -44,7 +48,6 @@ const TooltipCondensed = forwardRef(function TooltipCondensed(
       ref={ref}
       classes={{ tooltip }}
       arrow={false}
-      hasInvertedStyle={false}
     >
       {children}
     </Tooltip>