From 3b18f399c120d5bf2e5ede3b043b20271d65b31a Mon Sep 17 00:00:00 2001
From: Shahed Nasser <shahednasser@gmail.com>
Date: Mon, 26 Feb 2024 09:31:36 +0200
Subject: [PATCH] docs(ui): show icon tooltip on small devices (#6407)

---
 .changeset/green-geckos-pump.md               |  2 ++
 www/apps/ui/src/components/icon-search.tsx    |  2 +-
 .../src/components/CopyButton/index.tsx       | 30 +++++++++++++++++--
 3 files changed, 30 insertions(+), 4 deletions(-)
 create mode 100644 .changeset/green-geckos-pump.md

diff --git a/.changeset/green-geckos-pump.md b/.changeset/green-geckos-pump.md
new file mode 100644
index 0000000000..a845151cc8
--- /dev/null
+++ b/.changeset/green-geckos-pump.md
@@ -0,0 +1,2 @@
+---
+---
diff --git a/www/apps/ui/src/components/icon-search.tsx b/www/apps/ui/src/components/icon-search.tsx
index 20549099df..570881e4bc 100644
--- a/www/apps/ui/src/components/icon-search.tsx
+++ b/www/apps/ui/src/components/icon-search.tsx
@@ -57,7 +57,7 @@ const SearchResults = ({ query = "" }: { query?: string }) => {
             key={name}
             className="flex h-full w-full items-center justify-center"
           >
-            <CopyButton text={name} tooltipText={name}>
+            <CopyButton text={name} tooltipText={name} handleTouch>
               <div
                 className={clsx(
                   "border-medusa-border-base",
diff --git a/www/packages/docs-ui/src/components/CopyButton/index.tsx b/www/packages/docs-ui/src/components/CopyButton/index.tsx
index 39274b7f8c..bbd257b461 100644
--- a/www/packages/docs-ui/src/components/CopyButton/index.tsx
+++ b/www/packages/docs-ui/src/components/CopyButton/index.tsx
@@ -1,6 +1,6 @@
 "use client"
 
-import React from "react"
+import React, { useState } from "react"
 import clsx from "clsx"
 import { Tooltip } from "@/components"
 import { useCopy } from "../../hooks"
@@ -10,7 +10,12 @@ export type CopyButtonProps = {
   buttonClassName?: string
   tooltipClassName?: string
   tooltipText?: string
-  onCopy?: (e: React.MouseEvent<HTMLSpanElement, MouseEvent>) => void
+  onCopy?: (
+    e:
+      | React.MouseEvent<HTMLSpanElement, MouseEvent>
+      | React.TouchEvent<HTMLSpanElement>
+  ) => void
+  handleTouch?: boolean
 } & Omit<React.HTMLAttributes<HTMLDivElement>, "onCopy">
 
 export const CopyButton = ({
@@ -21,21 +26,40 @@ export const CopyButton = ({
   children,
   className,
   onCopy,
+  handleTouch,
 }: CopyButtonProps) => {
   const { isCopied, handleCopy } = useCopy(text)
+  const [touchCount, setTouchCount] = useState(0)
 
   return (
     <Tooltip
       text={isCopied ? `Copied!` : tooltipText}
-      tooltipClassName={tooltipClassName}
+      tooltipClassName={clsx(tooltipClassName, handleTouch && "!block")}
       className={className}
     >
       <span
         className={clsx("cursor-pointer", buttonClassName)}
         onClick={(e) => {
+          if (touchCount > 0) {
+            // prevent the on-click event from triggering if a touch event occurred.
+            return
+          }
           onCopy?.(e)
           handleCopy()
         }}
+        onTouchEnd={(e) => {
+          if (!handleTouch) {
+            return
+          }
+
+          if (touchCount === 0) {
+            setTouchCount(touchCount + 1)
+          } else {
+            onCopy?.(e)
+            handleCopy()
+            setTouchCount(0)
+          }
+        }}
       >
         {children}
       </span>