Update hover card delays and add arrow height and spacing.- Set open …

…delay to 100 and close delay to 200
rad-ui · Nov 30, 2024 · 1440811 · 1440811
1 parent aef2255
commit 1440811
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 13 deletions.
diff --git a/src/components/ui/HoverCard/fragments/HoverCardRoot.tsx b/src/components/ui/HoverCard/fragments/HoverCardRoot.tsx
@@ -16,28 +16,23 @@ type HoverCardRootProps = {
     props: React.HTMLAttributes<HTMLElement>
 }
 
-const HoverCardRoot = ({ children, open: controlledOpen = undefined, onOpenChange, customRootClass = '', openDelay = 300, closeDelay = 750, ...props }: HoverCardRootProps) => {
+const HoverCardRoot = ({ children, open: controlledOpen = undefined, onOpenChange, customRootClass = '', openDelay = 100, closeDelay = 200, ...props }: HoverCardRootProps) => {
     const rootClass = customClassSwitcher(customRootClass, COMPONENT_NAME);
     const arrowRef = useRef(null);
+    const ARROW_HEIGHT = 8;
+    const SPACING_GAP = 2;
+
     const { refs: floatingRefs, floatingStyles, context: floatingContext } = Floater.useFloating({
         placement: 'bottom',
         strategy: 'fixed',
         middleware: [
             Floater.arrow({
                 element: arrowRef
             }),
-            Floater.offset(7),
+            Floater.offset(ARROW_HEIGHT + SPACING_GAP),
             Floater.flip({
                 mainAxis: true
-                // fallbackStrategy: 'initialPlacement'
-            }
-            )
-            // Floater.shift({
-            //     crossAxis: true
-            // })
-            // Floater.hide({
-            //     strategy: 'referenceHidden' // 'referenceHidden' by default
-            // })
+            })
         ]
     });
 

diff --git a/src/components/ui/HoverCard/fragments/HoverCardTrigger.tsx b/src/components/ui/HoverCard/fragments/HoverCardTrigger.tsx
@@ -12,7 +12,8 @@ const HoverCardTrigger = ({ children, ...props }) => {
             onClick={() => {}}
             onMouseEnter={openWithDelay} onMouseLeave={closeWithDelay}
             ref={floatingRefs.setReference}
-            asChild>{children}</Primitive.span>
+            {...props}
+        >{children}</Primitive.span>
     </>;
 };
 

diff --git a/src/components/ui/HoverCard/stories/HoverCard.stories.js b/src/components/ui/HoverCard/stories/HoverCard.stories.js
@@ -1,5 +1,6 @@
 import HoverCard from '../HoverCard';
 import SandboxEditor from '~/components/tools/SandboxEditor/SandboxEditor';
+import Button from '~/components/ui/Button/Button';
 
 // More on how to set up stories at: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
 export default {
@@ -15,7 +16,7 @@ export default {
         };
         return <SandboxEditor className='bg-gray-200 h-[400px] flex items-center justify-center'>
             <HoverCard className='text-gray-900 text-center' content={<Content />} {...args} >
-                <span>Hover me</span>
+                <div className="p-10 bg-gray-100 rounded-md shadow">Hover me</div>
             </HoverCard>
         </SandboxEditor>;
     }