[FX-5954] Add pointer cursor to Link when onClick is provided (#4565)

toptal · Sep 19, 2024 · 78656d5 · 78656d5
1 parent 1de0649
commit 78656d5
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 6 deletions.
diff --git a/.changeset/red-wasps-taste.md b/.changeset/red-wasps-taste.md
@@ -0,0 +1,6 @@
+---
+'@toptal/picasso-link': patch
+'@toptal/picasso': patch
+---
+
+- add pointer cursor to Link when only onClick is provided
diff --git a/packages/base/AccountSelect/src/AccountSelect/__snapshots__/test.tsx.snap b/packages/base/AccountSelect/src/AccountSelect/__snapshots__/test.tsx.snap
@@ -26,7 +26,7 @@ exports[`AccountSelect renders 1`] = `
               class="flex items-center"
             >
               <a
-                class="m-0 font-inherit font-inherit focus:outline-none hover:underline leading-[inherit] text-blue visited:text-purple no-underline !no-underline flex-1"
+                class="m-0 font-inherit font-inherit focus:outline-none hover:underline leading-[inherit] text-blue visited:text-purple no-underline !no-underline cursor-pointer flex-1"
               >
                 <div
                   class="p-6 items-center justify-between flex"
@@ -103,7 +103,7 @@ exports[`AccountSelect renders 1`] = `
               class="flex items-center"
             >
               <a
-                class="m-0 font-inherit font-inherit focus:outline-none hover:underline leading-[inherit] text-blue visited:text-purple no-underline !no-underline flex-1"
+                class="m-0 font-inherit font-inherit focus:outline-none hover:underline leading-[inherit] text-blue visited:text-purple no-underline !no-underline cursor-pointer flex-1"
                 href="#"
               >
                 <div
@@ -181,7 +181,7 @@ exports[`AccountSelect renders 1`] = `
               class="flex items-center"
             >
               <a
-                class="m-0 font-inherit font-inherit focus:outline-none hover:underline leading-[inherit] text-blue visited:text-purple no-underline !no-underline flex-1"
+                class="m-0 font-inherit font-inherit focus:outline-none hover:underline leading-[inherit] text-blue visited:text-purple no-underline !no-underline cursor-pointer flex-1"
                 href="#"
               >
                 <div

diff --git a/packages/base/Link/src/Link/Link.tsx b/packages/base/Link/src/Link/Link.tsx
@@ -136,6 +136,7 @@ export const Link: OverridableComponent<Props> = forwardRef<
             ? 'visited text-purple-500'
             : 'visited text-gray-500'
           : '',
+        onClick || href ? 'cursor-pointer' : '',
         className
       )}
       style={style}

diff --git a/packages/base/Link/src/Link/__snapshots__/test.tsx.snap b/packages/base/Link/src/Link/__snapshots__/test.tsx.snap
@@ -38,7 +38,7 @@ exports[`Link renders disabled link 1`] = `
   >
     <a
       aria-disabled="true"
-      class="m-0 font-inherit font-inherit focus:outline-none hover:underline leading-[inherit] text-gray underline cursor-not"
+      class="m-0 font-inherit font-inherit focus:outline-none hover:underline leading-[inherit] text-gray underline cursor-pointer"
       download="filename"
       rel="noopener"
     >
@@ -54,7 +54,7 @@ exports[`Link renders native attributes 1`] = `
     class="Picasso-root"
   >
     <a
-      class="m-0 font-inherit font-inherit focus:outline-none hover:underline leading-[inherit] text-blue visited:text-purple no-underline"
+      class="m-0 font-inherit font-inherit focus:outline-none hover:underline leading-[inherit] text-blue visited:text-purple no-underline cursor-pointer"
       download="filename"
       href="https://toptal.com/filename.txt"
       rel="noopener"

diff --git a/packages/base/Page/src/PageTopBar/__snapshots__/test.tsx.snap b/packages/base/Page/src/PageTopBar/__snapshots__/test.tsx.snap
@@ -168,7 +168,7 @@ exports[`Page.TopBar render with link 1`] = `
                 </div>
               </div>
               <a
-                class="m-0 font-inherit font-inherit focus:outline-none hover:underline leading-[inherit] text-blue visited:text-purple no-underline"
+                class="m-0 font-inherit font-inherit focus:outline-none hover:underline leading-[inherit] text-blue visited:text-purple no-underline cursor-pointer"
                 href="https://www.toptal.com"
               >
                 <svg