Change default behaviour of Tooltip trigger to 'click'

storybookjs · Feb 6, 2023 · e6b9c0f · e6b9c0f
1 parent e5668ff
commit e6b9c0f
Show file tree

Hide file tree

Showing 16 changed files with 6 additions and 27 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>