Merge pull request #25440 from storybookjs/yann/remove-deprecated-wit…

…h-tooltip-props

UI: Remove deprecated WithTooltip props

MIGRATION.md

@@ -31,6 +31,7 @@
     - [--use-npm flag in storybook CLI](#--use-npm-flag-in-storybook-cli)
     - [`setGlobalConfig` from `@storybook/react`](#setglobalconfig-from-storybookreact)
     - [StorybookViteConfig type from @storybook/builder-vite](#storybookviteconfig-type-from-storybookbuilder-vite)
+    - [props from WithTooltipComponent from @storybook/components](#props-from-withtooltipcomponent-from-storybookcomponents)
 - [From version 7.5.0 to 7.6.0](#from-version-750-to-760)
     - [CommonJS with Vite is deprecated](#commonjs-with-vite-is-deprecated)
     - [Using implicit actions during rendering is deprecated](#using-implicit-actions-during-rendering-is-deprecated)
@@ -591,6 +592,20 @@ The `StorybookViteConfig` type is now removed in favor of `StorybookConfig`:
 import type { StorybookConfig } from '@storybook/react-vite';
 ```
 
+#### props from WithTooltipComponent from @storybook/components
+
+The deprecated properties `tooltipShown`, `closeOnClick`, and `onVisibilityChange` of `WithTooltipComponent` from `@storybook/components` are now removed. Please replace them:
+
+```tsx
+<WithTooltip
+  closeOnClick       // becomes closeOnOutsideClick
+  tooltipShown       // becomes defaultVisible
+  onVisibilityChange // becomes onVisibleChange
+>
+  ...
+</WithTooltip>
+```
+
 ## From version 7.5.0 to 7.6.0
 
 #### CommonJS with Vite is deprecated

code/addons/themes/src/theme-switcher.tsx

@@ -57,7 +57,7 @@ export const ThemeSwitcher = () => {
       <WithTooltip
         placement="top"
         trigger="click"
-        closeOnClick
+        closeOnOutsideClick
         tooltip={({ onHide }) => {
           return (
             <TooltipLinkList

code/ui/blocks/package.json

@@ -71,6 +71,7 @@
   },
   "devDependencies": {
     "@storybook/addon-actions": "workspace:*",
+    "@storybook/test": "workspace:*",
     "@types/color-convert": "^2.0.0"
   },
   "peerDependencies": {

code/ui/blocks/src/blocks/Story.stories.tsx

@@ -1,5 +1,6 @@
 import React from 'react';
 import type { Meta, StoryObj } from '@storybook/react';
+import { expect, waitFor } from '@storybook/test';
 
 import { Story as StoryBlock } from './Story';
 import * as ButtonStories from '../examples/Button.stories';
@@ -86,6 +87,24 @@ export const IFrameProps: Story = {
     of: StoryParametersStories.NoParameters,
     inline: false,
   },
+  parameters: {
+    chromatic: {
+      delay: 3000,
+    },
+  },
+  play: async ({ canvasElement }) => {
+    // this is mostly to fix flakiness in chromatic, specifically on Safari
+    // where the scrollbar appears inconsistently and causes the snapshot to be different
+    await waitFor(
+      async () => {
+        const iframeEl = canvasElement.querySelector('iframe');
+        await expect(
+          iframeEl!.contentDocument!.querySelector('[data-testid="sb-iframe-text"]')
+        ).toBeVisible();
+      },
+      { timeout: 10000 }
+    );
+  },
 };
 
 export const IFrameWithParameter: Story = {

code/ui/blocks/src/examples/SimpleSizeTest.tsx

@@ -12,7 +12,7 @@ export const SimpleSizeTest = () => {
         margin: '-4rem -20px',
       }}
     >
-      <p>
+      <p data-testid="sb-iframe-text">
         This story does nothing. Its only purpose is to show how its size renders in different
         conditions (inline/iframe/fixed height) when used in a <code>{'<Story />'}</code> block.
       </p>

code/ui/components/package.json

@@ -72,6 +72,7 @@
   "devDependencies": {
     "@popperjs/core": "^2.6.0",
     "@radix-ui/react-scroll-area": "^1.0.5",
+    "@storybook/test": "workspace:*",
     "@types/react-syntax-highlighter": "11.0.5",
     "@types/util-deprecate": "^1.0.0",
     "css": "^3.0.0",

code/ui/components/src/components/tooltip/WithTooltip.stories.tsx

@@ -1,6 +1,7 @@
 import type { FunctionComponent, ComponentProps } from 'react';
 import React from 'react';
 import type { StoryObj } from '@storybook/react';
+import { expect, screen } from '@storybook/test';
 import { styled } from '@storybook/theming';
 import { TooltipMessage } from './TooltipMessage';
 import { WithToolTipState as WithTooltip } from './WithTooltip';
@@ -104,6 +105,9 @@ export const SimpleClickStartOpen: StoryObj<ComponentProps<typeof WithTooltip>>
       <Trigger>Click me!</Trigger>
     </WithTooltip>
   ),
+  play: async () => {
+    await expect(await screen.findByText('Lorem ipsum dolor sit')).toBeInTheDocument();
+  },
 };
 
 export const SimpleClickCloseOnClick: StoryObj<ComponentProps<typeof WithTooltip>> = {

code/ui/components/src/components/tooltip/WithTooltip.tsx

@@ -36,18 +36,6 @@ export interface WithTooltipPureProps
   tooltip: ReactNode | ((p: WithHideFn) => ReactNode);
   children: ReactNode;
   onDoubleClick?: () => void;
-  /**
-   * @deprecated use `defaultVisible` property instead. This property will be removed in SB 8.0
-   */
-  tooltipShown?: boolean;
-  /**
-   * @deprecated use `closeOnOutsideClick` property instead. This property will be removed in SB 8.0
-   */
-  closeOnClick?: boolean;
-  /**
-   * @deprecated use `onVisibleChange` property instead. This property will be removed in SB 8.0
-   */
-  onVisibilityChange?: (visibility: boolean) => void | boolean;
   /**
    * If `true`, a click outside the trigger element closes the tooltip
    * @default false
@@ -68,9 +56,6 @@ const WithTooltipPure: FC<WithTooltipPureProps> = ({
   children,
   closeOnTriggerHidden,
   mutationObserverOptions,
-  closeOnClick,
-  tooltipShown,
-  onVisibilityChange,
   defaultVisible,
   delayHide,
   visible,
@@ -94,15 +79,12 @@ const WithTooltipPure: FC<WithTooltipPureProps> = ({
     {
       trigger,
       placement,
-      defaultVisible: defaultVisible ?? tooltipShown,
+      defaultVisible,
       delayHide,
       interactive,
-      closeOnOutsideClick: closeOnOutsideClick ?? closeOnClick,
+      closeOnOutsideClick,
       closeOnTriggerHidden,
-      onVisibleChange: (_isVisible) => {
-        onVisibilityChange?.(_isVisible);
-        onVisibleChange?.(_isVisible);
-      },
+      onVisibleChange,
       delayShow,
       followCursor,
       mutationObserverOptions,

code/yarn.lock

@@ -5070,6 +5070,7 @@ __metadata:
     "@storybook/icons": "npm:^1.2.1"
     "@storybook/manager-api": "workspace:*"
     "@storybook/preview-api": "workspace:*"
+    "@storybook/test": "workspace:*"
     "@storybook/theming": "workspace:*"
     "@storybook/types": "workspace:*"
     "@types/color-convert": "npm:^2.0.0"
@@ -5343,6 +5344,7 @@ __metadata:
     "@storybook/csf": "npm:^0.1.2"
     "@storybook/global": "npm:^5.0.0"
     "@storybook/icons": "npm:^1.2.1"
+    "@storybook/test": "workspace:*"
     "@storybook/theming": "workspace:*"
     "@storybook/types": "workspace:*"
     "@types/react-syntax-highlighter": "npm:11.0.5"