Change default behaviour of Tooltip trigger to 'click'

2025-03-20 05:02:37 +08:00 · 2023-02-06 16:36:39 +01:00 · 2023-02-06 16:36:39 +01:00 · 882330a424
commit 882330a424
parent e5668ffc8e
18 changed files with 26 additions and 31 deletions
--- a/code/addons/a11y/src/components/VisionSimulator.tsx
+++ b/code/addons/a11y/src/components/VisionSimulator.tsx
@ -133,7 +133,6 @@ export const VisionSimulator = () => {
      )}
      <WithTooltip
        placement="top"
-        trigger="click"
        tooltip={({ onHide }) => {
          const colorList = getColorList(filter, (i) => {
            setFilter(i);
--- a/code/addons/backgrounds/src/containers/BackgroundSelector.tsx
+++ b/code/addons/backgrounds/src/containers/BackgroundSelector.tsx
@ -116,7 +116,6 @@ export const BackgroundSelector: FC = memo(function BackgroundSelector() {
    <Fragment>
      <WithTooltip
        placement="top"
-        trigger="click"
        closeOnOutsideClick
        tooltip={({ onHide }) => {
          return (
--- a/code/addons/toolbars/src/components/ToolbarMenuList.tsx
+++ b/code/addons/toolbars/src/components/ToolbarMenuList.tsx
@ -57,7 +57,6 @@ export const ToolbarMenuList: FC<ToolbarMenuListProps> = withKeyboardCycle(
    return (
      <WithTooltip
        placement="top"
-        trigger="click"
        tooltip={({ onHide }) => {
          const links = items
            // Special case handling for various "type" variants
--- a/code/addons/viewport/src/Tool.tsx
+++ b/code/addons/viewport/src/Tool.tsx
@ -180,7 +180,6 @@ export const ViewportTool: FC = memo(
      <Fragment>
        <WithTooltip
          placement="top"
-          trigger="click"
          tooltip={({ onHide }) => (
            <TooltipLinkList links={toLinks(list, item, setState, state, onHide)} />
          )}
--- a/code/ui/blocks/src/components/ArgsTable/ArgValue.tsx
+++ b/code/ui/blocks/src/components/ArgsTable/ArgValue.tsx
@ -161,7 +161,6 @@ const ArgSummary: FC<ArgSummaryProps> = ({ value, initialExpandedArgs }) => {
  return (
    <WithTooltipPure
      closeOnOutsideClick
-      trigger="click"
      placement="bottom"
      visible={isOpen}
      onVisibleChange={(isVisible) => {
--- a/code/ui/blocks/src/controls/Color.tsx
+++ b/code/ui/blocks/src/controls/Color.tsx
@ -320,7 +320,6 @@ export const ColorControl: FC<ColorControlProps> = ({
  return (
    <Wrapper>
      <PickerTooltip
-        trigger="click"
        startOpen={startOpen}
        closeOnOutsideClick
        onVisibleChange={() => addPreset(color)}
--- a/code/ui/components/src/tabs/tabs.stories.tsx
+++ b/code/ui/components/src/tabs/tabs.stories.tsx
@ -4,7 +4,14 @@ import React, { Fragment } from 'react';
 import { action } from '@storybook/addon-actions';
 import { logger } from '@storybook/client-logger';
 import type { Meta, StoryObj } from '@storybook/react';
-import { within, fireEvent, waitFor, screen, getByText } from '@storybook/testing-library';
+import {
+  within,
+  fireEvent,
+  waitFor,
+  screen,
+  getByText,
+  userEvent,
+} from '@storybook/testing-library';
 import { Tabs, TabsState, TabWrapper } from './tabs';

 const colours = Array.from(new Array(15), (val, index) => index).map((i) =>
@ -220,10 +227,18 @@ export const StatefulDynamicWithOpenTooltip = {
    const addonsTab = await canvas.findByRole('tab', { name: /Addons/ });

    await waitFor(async () => {
-      await fireEvent(addonsTab, new MouseEvent('mouseenter', { bubbles: true }));
-      const tooltip = await screen.getByTestId('tooltip');
-      await expect(tooltip).toBeInTheDocument();
+      const tooltip = await screen.queryByTestId('tooltip');
+
+      if (!tooltip) {
+        await userEvent.click(addonsTab);
+      }
+
+      if (!tooltip) {
+        throw new Error('Tooltip not found');
+      }
    });
+
+    expect(screen.queryByTestId('tooltip')).toBeInTheDocument();
  },
  render: (args) => (
    <TabsState initial="test1" {...args}>
--- a/code/ui/components/src/tooltip/Tooltip.tsx
+++ b/code/ui/components/src/tooltip/Tooltip.tsx
@ -108,7 +108,7 @@ const Wrapper = styled.div<WrapperProps>(
            drop-shadow(0px 5px 5px rgba(0,0,0,0.05))
            drop-shadow(0 1px 3px rgba(0,0,0,0.1))
          `,
-          borderRadius: theme.appBorderRadius * 2,
+          borderRadius: theme.appBorderRadius,
          fontSize: theme.typography.size.s1,
        }
      : {}
--- a/code/ui/components/src/tooltip/TooltipLinkList.stories.tsx
+++ b/code/ui/components/src/tooltip/TooltipLinkList.stories.tsx
@ -38,7 +38,7 @@ export default {
          height: '300px',
        }}
      >
-        <WithTooltip placement="top" trigger="click" startOpen tooltip={storyFn()}>
+        <WithTooltip placement="top" startOpen tooltip={storyFn()}>
          <div>Tooltip</div>
        </WithTooltip>
      </div>
--- a/code/ui/components/src/tooltip/TooltipMessage.stories.tsx
+++ b/code/ui/components/src/tooltip/TooltipMessage.stories.tsx
@ -12,7 +12,7 @@ export default {
          height: '300px',
        }}
      >
-        <WithTooltip placement="top" trigger="click" startOpen tooltip={storyFn()}>
+        <WithTooltip placement="top" startOpen tooltip={storyFn()}>
          <div>Tooltip</div>
        </WithTooltip>
      </div>
--- a/code/ui/components/src/tooltip/TooltipNote.stories.tsx
+++ b/code/ui/components/src/tooltip/TooltipNote.stories.tsx
@ -11,13 +11,7 @@ export default {
          height: '300px',
        }}
      >
-        <WithTooltip
-          hasChrome={false}
-          placement="top"
-          trigger="click"
-          startOpen
-          tooltip={storyFn()}
-        >
+        <WithTooltip hasChrome={false} placement="top" startOpen tooltip={storyFn()}>
          <div>Tooltip</div>
        </WithTooltip>
      </div>
--- a/code/ui/components/src/tooltip/WithTooltip.stories.tsx
+++ b/code/ui/components/src/tooltip/WithTooltip.stories.tsx
@ -86,7 +86,6 @@ export const SimpleHoverFunctional: StoryObj<ComponentProps<typeof WithTooltip>>
 export const SimpleClick: StoryObj<ComponentProps<typeof WithTooltip>> = {
  args: {
    placement: 'top',
-    trigger: 'click',
  },
  render: (args) => (
    <WithTooltip tooltip={<Tooltip />} {...args}>
@ -98,7 +97,6 @@ export const SimpleClick: StoryObj<ComponentProps<typeof WithTooltip>> = {
 export const SimpleClickStartOpen: StoryObj<ComponentProps<typeof WithTooltip>> = {
  args: {
    placement: 'top',
-    trigger: 'click',
    startOpen: true,
  },
  render: (args) => (
@ -111,7 +109,6 @@ export const SimpleClickStartOpen: StoryObj<ComponentProps<typeof WithTooltip>>
 export const SimpleClickCloseOnClick: StoryObj<ComponentProps<typeof WithTooltip>> = {
  args: {
    placement: 'top',
-    trigger: 'click',
    closeOnOutsideClick: true,
  },
  render: (args) => (
@ -124,7 +121,6 @@ export const SimpleClickCloseOnClick: StoryObj<ComponentProps<typeof WithTooltip
 export const WithoutChrome: StoryObj<ComponentProps<typeof WithTooltip>> = {
  args: {
    placement: 'top',
-    trigger: 'click',
    hasChrome: false,
  },
  render: (args) => (
--- a/code/ui/components/src/tooltip/WithTooltip.tsx
+++ b/code/ui/components/src/tooltip/WithTooltip.tsx
@ -139,7 +139,7 @@ const WithTooltipPure: FC<WithTooltipPureProps> = ({

 WithTooltipPure.defaultProps = {
  svg: false,
-  trigger: 'hover',
+  trigger: 'click',
  closeOnOutsideClick: false,
  placement: 'top',
  modifiers: [
--- a/code/ui/manager/src/components/sidebar/Menu.tsx
+++ b/code/ui/manager/src/components/sidebar/Menu.tsx
@ -107,7 +107,6 @@ export const SidebarMenu: FC<{
  return (
    <WithTooltip
      placement="top"
-      trigger="click"
      closeOnOutsideClick
      tooltip={({ onHide }) => <SidebarMenuList onHide={onHide} menu={menu} />}
    >
@ -124,7 +123,6 @@ export const ToolbarMenu: FC<{
  return (
    <WithTooltip
      placement="bottom"
-      trigger="click"
      closeOnOutsideClick
      modifiers={[
        {
--- a/code/ui/manager/src/components/sidebar/RefBlocks.tsx
+++ b/code/ui/manager/src/components/sidebar/RefBlocks.tsx
@ -169,7 +169,6 @@ export const ErrorBlock: FC<{ error: Error }> = ({ error }) => (
        Oh no! Something went wrong loading this Storybook.
        <br />
        <WithTooltip
-          trigger="click"
          tooltip={
            <ErrorDisplay>
              <ErrorFormatter error={error} />
--- a/code/ui/manager/src/components/sidebar/RefIndicator.tsx
+++ b/code/ui/manager/src/components/sidebar/RefIndicator.tsx
@ -190,7 +190,6 @@ export const RefIndicator = React.memo(
        <IndicatorPlacement ref={forwardedRef}>
          <WithTooltip
            placement="bottom-start"
-            trigger="click"
            tooltip={
              <MessageWrapper>
                <Spaced row={0}>
@ -218,7 +217,6 @@ export const RefIndicator = React.memo(
          {ref.versions && Object.keys(ref.versions).length ? (
            <WithTooltip
              placement="bottom-start"
-              trigger="click"
              tooltip={
                <TooltipLinkList
                  links={Object.entries(ref.versions).map(([id, href]) => ({
--- a/code/ui/manager/src/containers/Menu.stories.tsx
+++ b/code/ui/manager/src/containers/Menu.stories.tsx
@ -36,7 +36,7 @@ export default {
          height: '300px',
        }}
      >
-        <WithTooltip placement="top" trigger="click" startOpen tooltip={storyFn()}>
+        <WithTooltip placement="top" startOpen tooltip={storyFn()}>
          <div>Tooltip</div>
        </WithTooltip>
      </div>
--- a/code/ui/manager/src/containers/menu.tsx
+++ b/code/ui/manager/src/containers/menu.tsx
@ -30,6 +30,7 @@ const Key = styled.span(({ theme }) => ({
 const KeyChild = styled.code(
  ({ theme }) => `
  padding: 0;
+  vertical-align: middle;

  & + & {
    margin-left: 6px;