hold title before release

Author: Jojoliu66

app/components/button.jsx

@@ -43,26 +43,28 @@ function Button(props) {
     }
 
     useEffect(() => {
-        return () => {
-            if (timeRef.current) {
-                clearTimeout(timeRef.current);
-            }
-        };
-    }, []);
+        if (isPortalOpen) {
+            const displayTime = Math.min(8, 0.1 * title.length) * 1000;
+            const timeout = setTimeout(() => {
+                setIsPortalOpen(false);
+            }, displayTime);
+            return () => clearTimeout(timeout);
+        }
+    }, [isPortalOpen, title.length]);
 
 
     return (
-        <div 
+        <span 
             onMouseDown={handleMouseDown}
             onMouseUp={handleMouseUp}
             onMouseLeave={handleMouseUp}
         >
             <PositioningPortal
                 isOpen={isPortalOpen}
                 portalContent={
-                    <div>
+                    <span>
                         {title}
-                    </div>
+                    </span>
             }>
                 <button
                     className={combinedClassName}
@@ -78,7 +80,7 @@ function Button(props) {
                 </button>
             </PositioningPortal>
 
-        </div>
+        </span>
 
     )
 }

stories/button.stories.jsx

@@ -63,4 +63,13 @@ HoverTest.args = {
     disabled: false,
     disableOnClick: false,
     children: "Hover State Button"
+};
+
+export const LongPressTest = Template(SecondaryButton).bind({});
+LongPressTest.args = {
+    onDone: null,
+    title: "Press me fdsaf fdasfds  ewfavdszvwea dafd adfgew vdfgreat fsdgaew",
+    disabled: false,
+    disableOnClick: false,
+    children: "Hover State Button"
 };