From 7820ac75fb0f69ff53552da447c49550508f20c0 Mon Sep 17 00:00:00 2001
From: Valentin Palkovic <valentin@chromatic.com>
Date: Mon, 6 Feb 2023 16:36:39 +0100
Subject: [PATCH] Change default behaviour of Tooltip trigger to 'click'

---
 code/addons/a11y/src/components/VisionSimulator.tsx       | 1 -
 .../backgrounds/src/containers/BackgroundSelector.tsx     | 1 -
 code/addons/toolbars/src/components/ToolbarMenuList.tsx   | 1 -
 code/addons/viewport/src/Tool.tsx                         | 1 -
 code/ui/blocks/src/components/ArgsTable/ArgValue.tsx      | 1 -
 code/ui/blocks/src/controls/Color.tsx                     | 1 -
 code/ui/components/src/tabs/tabs.stories.tsx              | 2 +-
 code/ui/components/src/tooltip/Tooltip.tsx                | 2 +-
 .../ui/components/src/tooltip/TooltipLinkList.stories.tsx | 2 +-
 code/ui/components/src/tooltip/TooltipMessage.stories.tsx | 2 +-
 code/ui/components/src/tooltip/TooltipNote.stories.tsx    | 8 +-------
 code/ui/components/src/tooltip/WithTooltip.stories.tsx    | 4 ----
 code/ui/components/src/tooltip/WithTooltip.tsx            | 2 +-
 code/ui/manager/src/components/sidebar/Menu.tsx           | 2 --
 code/ui/manager/src/components/sidebar/RefBlocks.tsx      | 1 -
 code/ui/manager/src/components/sidebar/RefIndicator.tsx   | 2 --
 code/ui/manager/src/containers/Menu.stories.tsx           | 2 +-
 code/ui/manager/src/containers/menu.tsx                   | 1 +
 18 files changed, 8 insertions(+), 28 deletions(-)

diff --git a/code/addons/a11y/src/components/VisionSimulator.tsx b/code/addons/a11y/src/components/VisionSimulator.tsx
index 4b528802dd76..b66f8eef297d 100644
--- 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);
diff --git a/code/addons/backgrounds/src/containers/BackgroundSelector.tsx b/code/addons/backgrounds/src/containers/BackgroundSelector.tsx
index 71b33e7821f4..2d531964812d 100644
--- 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 (
diff --git a/code/addons/toolbars/src/components/ToolbarMenuList.tsx b/code/addons/toolbars/src/components/ToolbarMenuList.tsx
index b3db9112af82..3b7056a217c0 100644
--- 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
diff --git a/code/addons/viewport/src/Tool.tsx b/code/addons/viewport/src/Tool.tsx
index 75eec71d656e..dd321b637cf9 100644
--- 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)} />
           )}
diff --git a/code/ui/blocks/src/components/ArgsTable/ArgValue.tsx b/code/ui/blocks/src/components/ArgsTable/ArgValue.tsx
index e2961973c9fa..131aab285a1b 100644
--- 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) => {
diff --git a/code/ui/blocks/src/controls/Color.tsx b/code/ui/blocks/src/controls/Color.tsx
index 0ced85cb271e..b126c80e3b2d 100644
--- 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)}
diff --git a/code/ui/components/src/tabs/tabs.stories.tsx b/code/ui/components/src/tabs/tabs.stories.tsx
index 02a2927d5373..67c561a26e83 100644
--- a/code/ui/components/src/tabs/tabs.stories.tsx
+++ b/code/ui/components/src/tabs/tabs.stories.tsx
@@ -220,7 +220,7 @@ export const StatefulDynamicWithOpenTooltip = {
     const addonsTab = await canvas.findByRole('tab', { name: /Addons/ });
 
     await waitFor(async () => {
-      await fireEvent(addonsTab, new MouseEvent('mouseenter', { bubbles: true }));
+      await fireEvent(addonsTab, new MouseEvent('click', { bubbles: true }));
       const tooltip = await screen.getByTestId('tooltip');
       await expect(tooltip).toBeInTheDocument();
     });
diff --git a/code/ui/components/src/tooltip/Tooltip.tsx b/code/ui/components/src/tooltip/Tooltip.tsx
index 7c748773b6ea..d4ccde5e41df 100644
--- 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,
         }
       : {}
diff --git a/code/ui/components/src/tooltip/TooltipLinkList.stories.tsx b/code/ui/components/src/tooltip/TooltipLinkList.stories.tsx
index e3006e96766b..3691e91239af 100644
--- 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>
diff --git a/code/ui/components/src/tooltip/TooltipMessage.stories.tsx b/code/ui/components/src/tooltip/TooltipMessage.stories.tsx
index 4b5a4714c5c3..9c210eb90bab 100644
--- 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>
diff --git a/code/ui/components/src/tooltip/TooltipNote.stories.tsx b/code/ui/components/src/tooltip/TooltipNote.stories.tsx
index f21030c62b75..6c1e533edc77 100644
--- 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>
diff --git a/code/ui/components/src/tooltip/WithTooltip.stories.tsx b/code/ui/components/src/tooltip/WithTooltip.stories.tsx
index f2f7c9e0f6da..76eab8d7c113 100644
--- 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) => (
diff --git a/code/ui/components/src/tooltip/WithTooltip.tsx b/code/ui/components/src/tooltip/WithTooltip.tsx
index b60443a76124..70dadd67dc16 100644
--- 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: [
diff --git a/code/ui/manager/src/components/sidebar/Menu.tsx b/code/ui/manager/src/components/sidebar/Menu.tsx
index 209d4c3e3fe1..fb553512efd8 100644
--- 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={[
         {
diff --git a/code/ui/manager/src/components/sidebar/RefBlocks.tsx b/code/ui/manager/src/components/sidebar/RefBlocks.tsx
index d92d6f26dacc..ddc0c64886d4 100644
--- 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} />
diff --git a/code/ui/manager/src/components/sidebar/RefIndicator.tsx b/code/ui/manager/src/components/sidebar/RefIndicator.tsx
index 9c469e741026..6dd822de9ec2 100644
--- 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]) => ({
diff --git a/code/ui/manager/src/containers/Menu.stories.tsx b/code/ui/manager/src/containers/Menu.stories.tsx
index 0865f8709748..5db85f26f163 100644
--- 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>
diff --git a/code/ui/manager/src/containers/menu.tsx b/code/ui/manager/src/containers/menu.tsx
index 23408c86f77a..dba70ddb950c 100644
--- 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;