fix: make ping clickable

FrigadeHQ · Sep 12, 2024 · 9bb79e0 · 9bb79e0
1 parent 53e8b42
commit 9bb79e0
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 2 deletions.
diff --git a/packages/react/src/components/Hint/index.tsx b/packages/react/src/components/Hint/index.tsx
@@ -91,6 +91,7 @@ export function Hint({
           {...referenceProps}
           position="absolute"
           style={getPingPosition({ align: finalAlign, side: finalSide })}
+          clickable={defaultOpen === false}
         />
       </Box>
     </>

diff --git a/packages/react/src/components/Ping/index.tsx b/packages/react/src/components/Ping/index.tsx
@@ -17,16 +17,19 @@ const pulse = keyframes({
   },
 })
 
-export interface PingProps extends BoxProps {}
+export interface PingProps extends BoxProps {
+  clickable?: boolean
+}
 
-export function Ping({ part = '', ...props }: PingProps) {
+export function Ping({ clickable = false, part = '', ...props }: PingProps) {
   return (
     <Box
       borderRadius="24px"
       height="24px"
       part={`ping-wrapper ${part}`}
       position="relative"
       width="24px"
+      cursor={clickable ? 'pointer' : undefined}
       {...props}
     >
       <Box
@@ -51,6 +54,7 @@ export function Ping({ part = '', ...props }: PingProps) {
         position="absolute"
         top="0"
         width="24px"
+        backgroundColor:hover={clickable ? 'primary.hover.surface' : undefined}
       />
     </Box>
   )