Merge pull request #528 from element-hq/dbkr/iconbutton_tooltipopenchange

Add onTooltipOpenChange handler to IconButton

Author: dbkr

src/components/Button/IconButton/IconButton.test.tsx

@@ -5,12 +5,16 @@ SPDX-License-Identifier: AGPL-3.0-only OR LicenseRef-Element-Commercial
 Please see LICENSE files in the repository root for full details.
 */
 
-import { describe, it, expect } from "vitest";
-import { render } from "@testing-library/react";
+import { describe, it, expect, vi } from "vitest";
+import { render, screen } from "@testing-library/react";
 import React from "react";
 import { composeStories } from "@storybook/react";
+import userEvent from "@testing-library/user-event";
 
 import * as stories from "./IconButton.stories";
+import { IconButton } from "./IconButton";
+import { TooltipProvider } from "../../Tooltip/TooltipProvider";
+import { UserIcon } from "@vector-im/compound-design-tokens/assets/web/icons";
 
 const {
   Default,
@@ -56,4 +60,30 @@ describe("IconButton", () => {
     const { container } = render(<WithSecondaryKindAndNoBackground />);
     expect(container).toMatchSnapshot();
   });
+  it("calls onTooltipOpenChange when the tooltip opens and closes", async () => {
+    const user = userEvent.setup();
+    const onTooltipOpenChange = vi.fn();
+    render(
+      <TooltipProvider>
+        <IconButton tooltip="Profile" onTooltipOpenChange={onTooltipOpenChange}>
+          <UserIcon />
+        </IconButton>
+      </TooltipProvider>,
+    );
+
+    await user.tab();
+    expect(screen.getByRole("button")).toHaveFocus();
+    expect(onTooltipOpenChange).toHaveBeenLastCalledWith(
+      true,
+      expect.anything(),
+      expect.anything(),
+    );
+
+    await user.tab();
+    expect(onTooltipOpenChange).toHaveBeenLastCalledWith(
+      false,
+      expect.anything(),
+      expect.anything(),
+    );
+  });
 });

src/components/Button/IconButton/IconButton.tsx

@@ -12,6 +12,7 @@ import styles from "./IconButton.module.css";
 import { UnstyledButton, type UnstyledButtonPropsFor } from "../UnstyledButton";
 import { IndicatorIcon } from "../../Icon/IndicatorIcon/IndicatorIcon";
 import { Tooltip } from "../../Tooltip/Tooltip";
+import type { OpenChangeReason } from "@floating-ui/react";
 
 type IconButtonProps = UnstyledButtonPropsFor<"button"> & {
   /**
@@ -51,6 +52,11 @@ type IconButtonProps = UnstyledButtonPropsFor<"button"> & {
    * The placement of the tooltip, if `tooltip` is provided.
    */
   tooltipPlacement?: React.ComponentProps<typeof Tooltip>["placement"];
+  onTooltipOpenChange?: (
+    open: boolean,
+    event?: Event | undefined,
+    reason?: OpenChangeReason | undefined,
+  ) => void;
   /**
    * Hide the background when the button is not active or hovered.
    * @default false
@@ -77,6 +83,7 @@ export const IconButton = forwardRef<
     tooltip,
     tooltipPlacement,
     noBackground = false,
+    onTooltipOpenChange,
     ...props
   },
   ref,
@@ -112,7 +119,11 @@ export const IconButton = forwardRef<
   );
 
   return tooltip ? (
-    <Tooltip label={tooltip} placement={tooltipPlacement}>
+    <Tooltip
+      label={tooltip}
+      placement={tooltipPlacement}
+      onOpenChange={onTooltipOpenChange}
+    >
       {button}
     </Tooltip>
   ) : (