diff --git a/packages/codemod/transformations/core/v2-to-v3/__tests__/tooltip-component-migration.test.ts b/packages/codemod/transformations/core/v2-to-v3/__tests__/tooltip-component-migration.test.ts index 54412d87df..7dadc3cb56 100644 --- a/packages/codemod/transformations/core/v2-to-v3/__tests__/tooltip-component-migration.test.ts +++ b/packages/codemod/transformations/core/v2-to-v3/__tests__/tooltip-component-migration.test.ts @@ -9,109 +9,219 @@ function prependImport(source: string): string { } describe("Tooltip component migration", () => { - defineInlineTest( - transform, - {}, - prependImport(``), - prependImport(``), - "should remove 'withMaxWidth' prop" - ); - - defineInlineTest( - transform, - {}, - prependImport(``), - prependImport(``), - "should remove 'withMaxWidth' prop" - ); - - defineInlineTest( - transform, - {}, - prependImport( - ` + describe("withMaxWidth prop", () => { + defineInlineTest( + transform, + {}, + prependImport(``), + prependImport(``), + "should remove 'withMaxWidth' prop" + ); + + defineInlineTest( + transform, + {}, + prependImport(``), + prependImport(``), + "should remove 'withMaxWidth' prop" + ); + + defineInlineTest( + transform, + {}, + prependImport( + ` <> ` - ), - prependImport(` + ), + prependImport(` <> `), - "should handle multiple instances of Tooltip each with 'withMaxWidth'" - ); - - defineInlineTest( - transform, - {}, - ``, - ``, - "should not change when no import even if 'withMaxWidth' prop exists" - ); - - defineInlineTest( - transform, - {}, - prependImport(``), - prependImport(``), - "should not affect other components with 'withMaxWidth'" - ); - - defineInlineTest( - transform, - {}, - ` + "should handle multiple instances of Tooltip each with 'withMaxWidth'" + ); + + defineInlineTest( + transform, + {}, + ``, + ``, + "should not change when no import even if 'withMaxWidth' prop exists" + ); + + defineInlineTest( + transform, + {}, + prependImport(``), + prependImport(``), + "should not affect other components with 'withMaxWidth'" + ); + + defineInlineTest( + transform, + {}, + ` import { Tooltip } from "other-library"; `, - ` + ` import { Tooltip } from "other-library"; `, - "should not change when 'Tooltip' is not imported from vibe" - ); + "should not change when 'Tooltip' is not imported from vibe" + ); - defineInlineTest( - transform, - {}, - ` + defineInlineTest( + transform, + {}, + ` import { OtherComponent as Tooltip } from "other-library"; `, - ` + ` import { OtherComponent as Tooltip } from "other-library"; `, - "should not change when 'Tooltip' is an alias for another component that is not from vibe" - ); + "should not change when 'Tooltip' is an alias for another component that is not from vibe" + ); - defineInlineTest( - transform, - {}, - ` + defineInlineTest( + transform, + {}, + ` import { OtherComponent as Tooltip } from "monday-ui-react-core"; `, - ` + ` import { OtherComponent as Tooltip } from "monday-ui-react-core"; `, - "should not change when 'Tooltip' is an alias for another component from vibe" - ); + "should not change when 'Tooltip' is an alias for another component from vibe" + ); - defineInlineTest( - transform, - {}, - ` + defineInlineTest( + transform, + {}, + ` import { Tooltip as VibeComponent } from "monday-ui-react-core"; `, - ` + ` + import { Tooltip as VibeComponent } from "monday-ui-react-core"; + + `, + "should change when 'Tooltip' is imported with alias from vibe" + ); + }); + + describe("showTooltipOnlyOnTriggerElement prop", () => { + defineInlineTest( + transform, + {}, + prependImport(``), + prependImport(``), + "should remove 'showTooltipOnlyOnTriggerElement' prop" + ); + + defineInlineTest( + transform, + {}, + prependImport(``), + prependImport(``), + "should remove 'showTooltipOnlyOnTriggerElement' prop" + ); + + defineInlineTest( + transform, + {}, + prependImport( + ` + <> + + + ` + ), + prependImport(` + <> + + + `), + "should handle multiple instances of Tooltip each with 'showTooltipOnlyOnTriggerElement'" + ); + + defineInlineTest( + transform, + {}, + ``, + ``, + "should not change when no import even if 'showTooltipOnlyOnTriggerElement' prop exists" + ); + + defineInlineTest( + transform, + {}, + prependImport(``), + prependImport(``), + "should not affect other components with 'showTooltipOnlyOnTriggerElement'" + ); + + defineInlineTest( + transform, + {}, + ` + import { Tooltip } from "other-library"; + + `, + ` + import { Tooltip } from "other-library"; + + `, + "should not change when 'Tooltip' is not imported from vibe" + ); + + defineInlineTest( + transform, + {}, + ` + import { OtherComponent as Tooltip } from "other-library"; + + `, + ` + import { OtherComponent as Tooltip } from "other-library"; + + `, + "should not change when 'Tooltip' is an alias for another component that is not from vibe" + ); + + defineInlineTest( + transform, + {}, + ` + import { OtherComponent as Tooltip } from "monday-ui-react-core"; + + `, + ` + import { OtherComponent as Tooltip } from "monday-ui-react-core"; + + `, + "should not change when 'Tooltip' is an alias for another component from vibe" + ); + + defineInlineTest( + transform, + {}, + ` + import { Tooltip as VibeComponent } from "monday-ui-react-core"; + + `, + ` import { Tooltip as VibeComponent } from "monday-ui-react-core"; `, - "should change when 'Tooltip' is imported with alias from vibe" - ); + "should change when 'Tooltip' is imported with alias from vibe" + ); + }); }); diff --git a/packages/codemod/transformations/core/v2-to-v3/tooltip-component-migration.ts b/packages/codemod/transformations/core/v2-to-v3/tooltip-component-migration.ts index 9f1b426977..1254c26881 100644 --- a/packages/codemod/transformations/core/v2-to-v3/tooltip-component-migration.ts +++ b/packages/codemod/transformations/core/v2-to-v3/tooltip-component-migration.ts @@ -9,6 +9,7 @@ import { TransformationContext } from "../../../types"; /** * 1. Remove the 'withMaxWidth' prop + * 2. Remove the `showTooltipOnlyOnTriggerElement` prop */ function transform({ j, root }: TransformationContext) { const imports = getCoreImportsForFile(root); @@ -20,6 +21,7 @@ function transform({ j, root }: TransformationContext) { elements.forEach(elementPath => { removeProp(j, elementPath, "withMaxWidth"); + removeProp(j, elementPath, "showTooltipOnlyOnTriggerElement"); }); } diff --git a/packages/core/docs/vibe-3-changelog.md b/packages/core/docs/vibe-3-changelog.md index df7a71930a..156d56f752 100644 --- a/packages/core/docs/vibe-3-changelog.md +++ b/packages/core/docs/vibe-3-changelog.md @@ -221,6 +221,7 @@ codemod: `menu-button-component-migration` - `componentClassName` -> `className` [codemod ✅] - `closeDialogOnContentClick` -> `closeMenuOnItemClick` [codemod ✅] - Removed `disabledReason`, use `tooltipContent` instead [codemod ✅] +- Removed `showTooltipOnlyOnTriggerElement` as it's now the default, and tooltip will appear only on the icon button itself and not on the menu dialog [codemod ✅] ### Modal diff --git a/packages/core/src/components/MenuButton/MenuButton.tsx b/packages/core/src/components/MenuButton/MenuButton.tsx index b38f3a4117..f68934ae37 100644 --- a/packages/core/src/components/MenuButton/MenuButton.tsx +++ b/packages/core/src/components/MenuButton/MenuButton.tsx @@ -118,10 +118,6 @@ export interface MenuButtonProps extends VibeComponentProps { * Close the menu when an item is clicked */ closeMenuOnItemClick?: boolean; - /** - * Whether tooltip should appear only when the trigger element is hovered and not the menu dialog - */ - showTooltipOnlyOnTriggerElement?: boolean; } const MenuButton: VibeComponent & { @@ -166,7 +162,6 @@ const MenuButton: VibeComponent & { dialogContainerSelector, active, triggerElement: TriggerElement = "button", - showTooltipOnlyOnTriggerElement, "data-testid": dataTestId }: MenuButtonProps, ref @@ -366,10 +361,7 @@ const MenuButton: VibeComponent & { ); - if (showTooltipOnlyOnTriggerElement) { - return dialogNode(tooltipNode(triggerElementNode)); - } - return tooltipNode(dialogNode(triggerElementNode)); + return dialogNode(tooltipNode(triggerElementNode)); } ); diff --git a/packages/core/src/components/MenuButton/__tests__/MenuButton.test.tsx b/packages/core/src/components/MenuButton/__tests__/MenuButton.test.tsx index fb68995608..19aee8751c 100644 --- a/packages/core/src/components/MenuButton/__tests__/MenuButton.test.tsx +++ b/packages/core/src/components/MenuButton/__tests__/MenuButton.test.tsx @@ -64,28 +64,6 @@ describe("MenuButton", () => { expect(tree).toMatchSnapshot(); }); - it("renders correctly with showTooltipOnlyOnTriggerElement and tooltip content", () => { - const tree = renderer - .create( - -
Menu
-
- ) - .toJSON(); - expect(tree).toMatchSnapshot(); - }); - - it("renders correctly with showTooltipOnlyOnTriggerElement and without tooltip content", () => { - const tree = renderer - .create( - -
Menu
-
- ) - .toJSON(); - expect(tree).toMatchSnapshot(); - }); - it("renders correctly with a default Menu icon at the end", () => { const tree = renderer .create( diff --git a/packages/core/src/components/MenuButton/__tests__/__snapshots__/MenuButton.test.tsx.snap b/packages/core/src/components/MenuButton/__tests__/__snapshots__/MenuButton.test.tsx.snap index fb00fe1b9b..86f961cba8 100644 --- a/packages/core/src/components/MenuButton/__tests__/__snapshots__/MenuButton.test.tsx.snap +++ b/packages/core/src/components/MenuButton/__tests__/__snapshots__/MenuButton.test.tsx.snap @@ -1,13 +1,8 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`MenuButton renders correctly with .dummy-class-name 1`] = ` - + height="20" + role="img" + viewBox="0 0 20 20" + width="20" + > + + + + `; exports[`MenuButton renders correctly with Bolt Icon 1`] = ` - + height="20" + role="img" + viewBox="0 0 20 20" + width="20" + > + + + + Hello + + + `; exports[`MenuButton renders correctly with Button triggerElement 1`] = ` @@ -95,13 +103,8 @@ exports[`MenuButton renders correctly with Button triggerElement 1`] = ` `; exports[`MenuButton renders correctly with a default Menu icon at the end 1`] = ` - + height="20" + role="img" + viewBox="0 0 20 20" + width="20" + > + + + + Hello + + + `; exports[`MenuButton renders correctly with empty props 1`] = ` - -`; - -exports[`MenuButton renders correctly with showTooltipOnlyOnTriggerElement and tooltip content 1`] = ` @@ -216,7 +185,7 @@ exports[`MenuButton renders correctly with showTooltipOnlyOnTriggerElement and t `; -exports[`MenuButton renders correctly with showTooltipOnlyOnTriggerElement and without tooltip content 1`] = ` +exports[`MenuButton renders correctly with size Large 1`] = ` `; -exports[`MenuButton renders correctly with size Large 1`] = ` - -`; - exports[`MenuButton renders correctly with tooltip content 1`] = `