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`] = `