chore(MenuButton): remove showTooltipOnlyOnTriggerElement

mondaycom · Aug 29, 2024 · a7c4c14 · a7c4c14
1 parent a1409c9
commit a7c4c14
Show file tree

Hide file tree

Showing 6 changed files with 273 additions and 256 deletions.
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
@@ -9,109 +9,219 @@ function prependImport(source: string): string {
 }
 
 describe("Tooltip component migration", () => {
-  defineInlineTest(
-    transform,
-    {},
-    prependImport(`<Tooltip withMaxWidth />`),
-    prependImport(`<Tooltip />`),
-    "should remove 'withMaxWidth' prop"
-  );
-
-  defineInlineTest(
-    transform,
-    {},
-    prependImport(`<Tooltip withMaxWidth={true} />`),
-    prependImport(`<Tooltip />`),
-    "should remove 'withMaxWidth' prop"
-  );
-
-  defineInlineTest(
-    transform,
-    {},
-    prependImport(
-      `
+  describe("withMaxWidth prop", () => {
+    defineInlineTest(
+      transform,
+      {},
+      prependImport(`<Tooltip withMaxWidth />`),
+      prependImport(`<Tooltip />`),
+      "should remove 'withMaxWidth' prop"
+    );
+
+    defineInlineTest(
+      transform,
+      {},
+      prependImport(`<Tooltip withMaxWidth={true} />`),
+      prependImport(`<Tooltip />`),
+      "should remove 'withMaxWidth' prop"
+    );
+
+    defineInlineTest(
+      transform,
+      {},
+      prependImport(
+        `
       <>
         <Tooltip withMaxWidth data-testid="tab1" />
         <Tooltip withMaxWidth data-testid="tab2" />
       </>`
-    ),
-    prependImport(`
+      ),
+      prependImport(`
       <>
         <Tooltip data-testid="tab1" />
         <Tooltip data-testid="tab2" />
       </>`),
-    "should handle multiple instances of Tooltip each with 'withMaxWidth'"
-  );
-
-  defineInlineTest(
-    transform,
-    {},
-    `<Tooltip withMaxWidth />`,
-    `<Tooltip withMaxWidth />`,
-    "should not change when no import even if 'withMaxWidth' prop exists"
-  );
-
-  defineInlineTest(
-    transform,
-    {},
-    prependImport(`<OtherComponent withMaxWidth />`),
-    prependImport(`<OtherComponent withMaxWidth />`),
-    "should not affect other components with 'withMaxWidth'"
-  );
-
-  defineInlineTest(
-    transform,
-    {},
-    `
+      "should handle multiple instances of Tooltip each with 'withMaxWidth'"
+    );
+
+    defineInlineTest(
+      transform,
+      {},
+      `<Tooltip withMaxWidth />`,
+      `<Tooltip withMaxWidth />`,
+      "should not change when no import even if 'withMaxWidth' prop exists"
+    );
+
+    defineInlineTest(
+      transform,
+      {},
+      prependImport(`<OtherComponent withMaxWidth />`),
+      prependImport(`<OtherComponent withMaxWidth />`),
+      "should not affect other components with 'withMaxWidth'"
+    );
+
+    defineInlineTest(
+      transform,
+      {},
+      `
       import { Tooltip } from "other-library";
       <Tooltip withMaxWidth />
     `,
-    `
+      `
       import { Tooltip } from "other-library";
       <Tooltip withMaxWidth />
     `,
-    "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";
       <Tooltip withMaxWidth />
     `,
-    `
+      `
       import { OtherComponent as Tooltip } from "other-library";
       <Tooltip withMaxWidth />
     `,
-    "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";
       <Tooltip withMaxWidth />
     `,
-    `
+      `
       import { OtherComponent as Tooltip } from "monday-ui-react-core";
       <Tooltip withMaxWidth />
     `,
-    "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";
       <VibeComponent withMaxWidth />
     `,
-    `
+      `
+      import { Tooltip as VibeComponent } from "monday-ui-react-core";
+      <VibeComponent />
+    `,
+      "should change when 'Tooltip' is imported with alias from vibe"
+    );
+  });
+
+  describe("showTooltipOnlyOnTriggerElement prop", () => {
+    defineInlineTest(
+      transform,
+      {},
+      prependImport(`<Tooltip showTooltipOnlyOnTriggerElement />`),
+      prependImport(`<Tooltip />`),
+      "should remove 'showTooltipOnlyOnTriggerElement' prop"
+    );
+
+    defineInlineTest(
+      transform,
+      {},
+      prependImport(`<Tooltip showTooltipOnlyOnTriggerElement={true} />`),
+      prependImport(`<Tooltip />`),
+      "should remove 'showTooltipOnlyOnTriggerElement' prop"
+    );
+
+    defineInlineTest(
+      transform,
+      {},
+      prependImport(
+        `
+      <>
+        <Tooltip showTooltipOnlyOnTriggerElement data-testid="tab1" />
+        <Tooltip showTooltipOnlyOnTriggerElement data-testid="tab2" />
+      </>`
+      ),
+      prependImport(`
+      <>
+        <Tooltip data-testid="tab1" />
+        <Tooltip data-testid="tab2" />
+      </>`),
+      "should handle multiple instances of Tooltip each with 'showTooltipOnlyOnTriggerElement'"
+    );
+
+    defineInlineTest(
+      transform,
+      {},
+      `<Tooltip showTooltipOnlyOnTriggerElement />`,
+      `<Tooltip showTooltipOnlyOnTriggerElement />`,
+      "should not change when no import even if 'showTooltipOnlyOnTriggerElement' prop exists"
+    );
+
+    defineInlineTest(
+      transform,
+      {},
+      prependImport(`<OtherComponent showTooltipOnlyOnTriggerElement />`),
+      prependImport(`<OtherComponent showTooltipOnlyOnTriggerElement />`),
+      "should not affect other components with 'showTooltipOnlyOnTriggerElement'"
+    );
+
+    defineInlineTest(
+      transform,
+      {},
+      `
+      import { Tooltip } from "other-library";
+      <Tooltip showTooltipOnlyOnTriggerElement />
+    `,
+      `
+      import { Tooltip } from "other-library";
+      <Tooltip showTooltipOnlyOnTriggerElement />
+    `,
+      "should not change when 'Tooltip' is not imported from vibe"
+    );
+
+    defineInlineTest(
+      transform,
+      {},
+      `
+      import { OtherComponent as Tooltip } from "other-library";
+      <Tooltip showTooltipOnlyOnTriggerElement />
+    `,
+      `
+      import { OtherComponent as Tooltip } from "other-library";
+      <Tooltip showTooltipOnlyOnTriggerElement />
+    `,
+      "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";
+      <Tooltip showTooltipOnlyOnTriggerElement />
+    `,
+      `
+      import { OtherComponent as Tooltip } from "monday-ui-react-core";
+      <Tooltip showTooltipOnlyOnTriggerElement />
+    `,
+      "should not change when 'Tooltip' is an alias for another component from vibe"
+    );
+
+    defineInlineTest(
+      transform,
+      {},
+      `
+      import { Tooltip as VibeComponent } from "monday-ui-react-core";
+      <VibeComponent showTooltipOnlyOnTriggerElement />
+    `,
+      `
       import { Tooltip as VibeComponent } from "monday-ui-react-core";
       <VibeComponent />
     `,
-    "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
@@ -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
@@ -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
@@ -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<MenuButtonProps> & {
@@ -166,7 +162,6 @@ const MenuButton: VibeComponent<MenuButtonProps> & {
       dialogContainerSelector,
       active,
       triggerElement: TriggerElement = "button",
-      showTooltipOnlyOnTriggerElement,
       "data-testid": dataTestId
     }: MenuButtonProps,
     ref
@@ -366,10 +361,7 @@ const MenuButton: VibeComponent<MenuButtonProps> & {
       </Tooltip>
     );
 
-    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
@@ -64,28 +64,6 @@ describe("MenuButton", () => {
     expect(tree).toMatchSnapshot();
   });
 
-  it("renders correctly with showTooltipOnlyOnTriggerElement and tooltip content", () => {
-    const tree = renderer
-      .create(
-        <MenuButton showTooltipOnlyOnTriggerElement tooltipContent="tooltip content">
-          <div>Menu</div>
-        </MenuButton>
-      )
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it("renders correctly with showTooltipOnlyOnTriggerElement and without tooltip content", () => {
-    const tree = renderer
-      .create(
-        <MenuButton showTooltipOnlyOnTriggerElement>
-          <div>Menu</div>
-        </MenuButton>
-      )
-      .toJSON();
-    expect(tree).toMatchSnapshot();
-  });
-
   it("renders correctly with a default Menu icon at the end", () => {
     const tree = renderer
       .create(