feat: add tooltip props (#1901)

mondaycom · Jan 18, 2024 · 436550b · 436550b
1 parent 9c1bb47
commit 436550b
Show file tree

Hide file tree

Showing 2 changed files with 8 additions and 2 deletions.
diff --git a/src/components/Menu/MenuItem/MenuItem.tsx b/src/components/Menu/MenuItem/MenuItem.tsx
@@ -5,7 +5,7 @@ import { isFunction } from "lodash-es";
 import { ComponentDefaultTestId, getTestId } from "../../../tests/test-ids-utils";
 import { DialogPosition } from "../../../constants/positions";
 import Text from "../../Text/Text";
-import Tooltip from "../../../components/Tooltip/Tooltip";
+import Tooltip, { TooltipProps } from "../../../components/Tooltip/Tooltip";
 import Icon from "../../../components/Icon/Icon";
 import DialogContentContainer from "../../../components/DialogContentContainer/DialogContentContainer";
 import useMergeRef from "../../../hooks/useMergeRef";
@@ -48,6 +48,7 @@ export interface MenuItemProps extends VibeComponentProps {
   tooltipContent?: string;
   tooltipPosition?: TooltipPosition;
   tooltipShowDelay?: number;
+  tooltipProps?: TooltipProps;
   onMouseLeave?: (event: React.MouseEvent) => void;
   onMouseEnter?: (event: React.MouseEvent) => void;
   /**
@@ -108,6 +109,7 @@ const MenuItem: VibeComponent<MenuItemProps> & {
       tooltipContent,
       tooltipPosition = MenuItem.tooltipPositions.RIGHT,
       tooltipShowDelay = 300,
+      tooltipProps,
       isInitialSelectedState,
       onMouseEnter,
       onMouseLeave,
@@ -334,6 +336,7 @@ const MenuItem: VibeComponent<MenuItemProps> & {
           showDelay={tooltipShowDelay}
           // Tooltip should be on a whole MenuItem, but it's a breaking change - should be fixed in the next major and then this can be removed
           moveBy={icon && tooltipPosition === Tooltip.positions.LEFT ? { main: 30 } : undefined}
+          {...tooltipProps}
         >
           <div ref={titleRef} className={styles.title}>
             {title}

diff --git a/src/components/MenuButton/MenuButton.tsx b/src/components/MenuButton/MenuButton.tsx
@@ -4,7 +4,7 @@ import { camelCase } from "lodash-es";
 import { isForwardRef } from "react-is";
 import Dialog, { DialogEvent } from "../Dialog/Dialog";
 import DialogContentContainer from "../DialogContentContainer/DialogContentContainer";
-import Tooltip from "../Tooltip/Tooltip";
+import Tooltip, { TooltipProps } from "../Tooltip/Tooltip";
 import { backwardCompatibilityForProperties } from "../../helpers/backwardCompatibilityForProperties";
 import useMergeRef from "../../hooks/useMergeRef";
 import { BUTTON_ICON_SIZE } from "../Button/ButtonConstants";
@@ -101,6 +101,7 @@ interface MenuButtonProps extends VibeComponentProps {
    * Tooltip Element Wrapper ClassName
    */
   tooltipReferenceClassName?: string;
+  tooltipProps?: TooltipProps;
   /**
    * When the MenuButton is hidden hide the dialog and tooltip as well
    */
@@ -154,6 +155,7 @@ const MenuButton: VibeComponent<MenuButtonProps> & {
       disabled = false,
       text,
       tooltipContent,
+      tooltipProps,
       // Backward compatibility for props naming
       disabledReason,
       tooltipTriggers = [MenuButton.hideTriggers.MOUSE_LEAVE],
@@ -309,6 +311,7 @@ const MenuButton: VibeComponent<MenuButtonProps> & {
         hideTrigger={tooltipTriggers}
         referenceWrapperClassName={tooltipReferenceClassName}
         hideWhenReferenceHidden={hideWhenReferenceHidden}
+        {...tooltipProps}
       >
         <Dialog
           wrapperClassName={dialogClassName}