fixup! fixup! fixup! Feat(web-react): Tooltip can be opened by hover

lmc-eu · Feb 13, 2024 · 1cebdc6 · 1cebdc6
1 parent ceae678
commit 1cebdc6
Show file tree

Hide file tree

Showing 7 changed files with 16 additions and 11 deletions.
diff --git a/packages/web-react/src/components/Tooltip/TooltipModern.tsx b/packages/web-react/src/components/Tooltip/TooltipModern.tsx
@@ -20,7 +20,7 @@ const TooltipModern = (props: TooltipModernProps) => {
     isOpen = false,
     onToggle,
     placement: tooltipPlacement,
-    triggers = ['click', 'hover'],
+    trigger = ['click', 'hover'],
     ...rest
   } = props;
 
@@ -65,7 +65,7 @@ const TooltipModern = (props: TooltipModernProps) => {
     tooltipArrowWidth,
     tooltipMaxWidth,
     tooltipPlacement,
-    triggers,
+    trigger,
   });
 
   useDeprecationMessage({

diff --git a/packages/web-react/src/components/Tooltip/useFloating.ts b/packages/web-react/src/components/Tooltip/useFloating.ts
@@ -32,7 +32,7 @@ type UseTooltipUIProps = {
   tooltipArrowWidth?: number;
   tooltipMaxWidth?: number;
   tooltipPlacement?: Placement;
-  triggers?: ('click' | 'hover')[];
+  trigger?: ('click' | 'hover')[];
 };
 
 // Convert a string or array of strings to an array of strings (for placements)
@@ -54,15 +54,15 @@ export const useFloating = (props: UseTooltipUIProps) => {
     sizeProp,
     tooltipArrowWidth = 0,
     tooltipPlacement,
-    triggers,
+    trigger,
   } = props;
 
   const [maxWidth, setMaxWidth] = useState<number | undefined>(undefined);
   const [isClicked, setIsClicked] = useState(false);
   const mainAxisOffset = cornerOffset + tooltipArrowWidth;
 
-  const isHoverEnabled = triggers?.includes('hover');
-  const isClickEnabled = triggers?.includes('click');
+  const isHoverEnabled = trigger?.includes('hover');
+  const isClickEnabled = trigger?.includes('click');
 
   // Floating UI library settings
   const { x, y, refs, context, placement, middlewareData } = useFloatingUI({

diff --git a/packages/web-react/src/components/TooltipModern/demo/TooltipDismissible.tsx b/packages/web-react/src/components/TooltipModern/demo/TooltipDismissible.tsx
@@ -13,7 +13,7 @@ const TooltipDismissible = () => {
         onToggle={setOpen}
         placement="right"
         isDismissible
-        triggers={['click']}
+        trigger={['click']}
       >
         <TooltipTrigger elementType={Button}>I have a tooltip 😎</TooltipTrigger>
         <TooltipPopover>Close me</TooltipPopover>

diff --git a/packages/web-react/src/components/TooltipModern/demo/TooltipDismissibleViaJS.tsx b/packages/web-react/src/components/TooltipModern/demo/TooltipDismissibleViaJS.tsx
@@ -13,7 +13,14 @@ const TooltipDismissibleViaJS = () => {
   return (
     <div className="docs-Stack docs-Stack-stretch spirit-feature-tooltip-enable-data-placement">
       <p>Saves data to local storage.</p>
-      <TooltipModern id="TooltipDismissibleViaJS" isOpen={open} onToggle={setOpen} placement="right" isDismissible>
+      <TooltipModern
+        id="TooltipDismissibleViaJS"
+        isOpen={open}
+        onToggle={setOpen}
+        placement="right"
+        isDismissible
+        trigger={['click']}
+      >
         <TooltipTrigger elementType={Button}>I have a tooltip 😎</TooltipTrigger>
         <TooltipPopover>Close me</TooltipPopover>
       </TooltipModern>

diff --git a/packages/web-react/src/components/TooltipModern/demo/TooltipHover.tsx b/packages/web-react/src/components/TooltipModern/demo/TooltipHover.tsx
@@ -12,7 +12,6 @@ const TooltipHover = () => {
         isOpen={open}
         onToggle={setOpen}
         placement="right"
-        triggers={['click', 'hover']}
         flipFallbackPlacements={['left', 'top-start', 'bottom-start']}
       >
         <TooltipTrigger elementType={Button}>I have a tooltip 😎</TooltipTrigger>

diff --git a/packages/web-react/src/components/TooltipModern/demo/TooltipWithFloatingUI.tsx b/packages/web-react/src/components/TooltipModern/demo/TooltipWithFloatingUI.tsx
@@ -129,7 +129,6 @@ const TooltipWithFloatingUI = () => {
             flipFallbackPlacements={suggestedFallbackPlacement}
             enableShifting={shift}
             enableSizing={size}
-            triggers={['click', 'hover']}
           >
             <TooltipTrigger elementType={Button}>I have a tooltip 😎</TooltipTrigger>
             <TooltipPopover>

diff --git a/packages/web-react/src/types/tooltip.ts b/packages/web-react/src/types/tooltip.ts
@@ -48,5 +48,5 @@ export interface SpiritTooltipModernProps extends TooltipModernProps, ChildrenPr
   enableSizing?: boolean;
   flipFallbackAxisSideDirection?: 'none' | 'start' | 'end';
   flipFallbackPlacements?: Placement | Placement[];
-  triggers?: ('click' | 'hover')[];
+  trigger?: ('click' | 'hover')[];
 }