feat(Tab): add tooltipProps prop (#2750)

packages/core/src/components/Tabs/Tab/Tab.tsx

@@ -9,6 +9,7 @@ import { IconType } from "../../Icon";
 import { ComponentDefaultTestId, getTestId } from "../../../tests/test-ids-utils";
 import styles from "./Tab.module.scss";
 import { SubIcon } from "../../../types/SubIcon";
+import Tooltip, { TooltipProps } from "../../Tooltip/Tooltip";
 
 export interface TabProps extends VibeComponentProps {
   /**
@@ -26,6 +27,7 @@ export interface TabProps extends VibeComponentProps {
   iconType?: IconType;
   iconSide?: string;
   onClick?: (value: number) => void;
+  tooltipProps?: Partial<TooltipProps>;
   /**
    * Tab link-name
    */
@@ -43,6 +45,7 @@ const Tab: FC<TabProps> = forwardRef(
       active = false,
       focus = false,
       onClick = NOOP,
+      tooltipProps = {} as TooltipProps,
       icon,
       iconType,
       iconSide = "left",
@@ -77,25 +80,27 @@ const Tab: FC<TabProps> = forwardRef(
       return [...childrenArray, iconElement];
     }
     return (
-      <li
-        ref={mergedRef}
-        key={id}
-        className={cx(styles.tabWrapper, className, {
-          [styles.active]: active,
-          [styles.disabled]: disabled,
-          [styles.tabFocusVisibleInset]: focus
-        })}
-        id={id}
-        role="tab"
-        aria-selected={active}
-        aria-disabled={disabled}
-        data-testid={dataTestId || getTestId(ComponentDefaultTestId.TAB, id)}
-      >
-        {/* eslint-disable-next-line jsx-a11y/anchor-is-valid,jsx-a11y/click-events-have-key-events */}
-        <a className={cx(styles.tabInner, tabInnerClassName)} onClick={() => !disabled && onClick(value)}>
-          {renderIconAndChildren()}
-        </a>
-      </li>
+      <Tooltip {...tooltipProps} content={tooltipProps.content}>
+        <li
+          ref={mergedRef}
+          key={id}
+          className={cx(styles.tabWrapper, className, {
+            [styles.active]: active,
+            [styles.disabled]: disabled,
+            [styles.tabFocusVisibleInset]: focus
+          })}
+          id={id}
+          role="tab"
+          aria-selected={active}
+          aria-disabled={disabled}
+          data-testid={dataTestId || getTestId(ComponentDefaultTestId.TAB, id)}
+        >
+          {/* eslint-disable-next-line jsx-a11y/anchor-is-valid,jsx-a11y/click-events-have-key-events */}
+          <a className={cx(styles.tabInner, tabInnerClassName)} onClick={() => !disabled && onClick(value)}>
+            {renderIconAndChildren()}
+          </a>
+        </li>
+      </Tooltip>
     );
   }
 );

packages/core/src/components/Tabs/Tab/__stories__/Tab.stories.tsx

@@ -22,7 +22,9 @@ export const States = {
   render: () => (
     <>
       <Tab>Normal</Tab>
-      <Tab disabled>Disabled</Tab>
+      <Tab disabled tooltipProps={{ content: "This tab is disabled" }}>
+        Disabled
+      </Tab>
       <Tab active>Active</Tab>
     </>
   ),

packages/core/src/components/Tabs/Tab/__tests__/Tab.test.tsx

@@ -1,17 +1,51 @@
 import React from "react";
-import { render, fireEvent, screen } from "@testing-library/react";
-import Tab from "../Tab";
+import { render, fireEvent, screen, cleanup } from "@testing-library/react";
+import { act } from "@testing-library/react-hooks";
+import Tab, { TabProps } from "../Tab";
+
+jest.useFakeTimers();
+
+const onClickMock = jest.fn();
+const text = "tab";
+
+const renderComponent = (props: TabProps = {}) => {
+  return render(
+    <Tab onClick={onClickMock} {...props}>
+      {text}
+    </Tab>
+  );
+};
 
 describe("Tab tests", () => {
-  const onClickMock = jest.fn();
-  const text = "tab";
+  afterEach(() => {
+    cleanup();
+  });
 
-  beforeEach(() => {
-    render(<Tab onClick={onClickMock}>{text}</Tab>);
+  describe("click", () => {
+    it("should call the click callback when clicked", () => {
+      renderComponent();
+      fireEvent.click(screen.getByText(text));
+      expect(onClickMock.mock.calls.length).toBe(1);
+    });
   });
 
-  it("should call the click callback when clicked", () => {
-    fireEvent.click(screen.getByText(text));
-    expect(onClickMock.mock.calls.length).toBe(1);
+  describe("Tooltips", () => {
+    it("should display tooltip content from tooltipProps", () => {
+      const tooltipContent = "My Text";
+      const tooltipProps = { content: tooltipContent };
+
+      renderComponent({ tooltipProps });
+      const component = screen.getByText(text);
+      act(() => {
+        fireEvent.mouseEnter(component);
+      });
+      jest.advanceTimersByTime(1000);
+      const content = screen.getByText(tooltipContent);
+      expect(content).toBeTruthy();
+      act(() => {
+        fireEvent.mouseLeave(component);
+      });
+      jest.advanceTimersByTime(1000);
+    });
   });
 });