fix: match tooltip buttons to html5 specification

leather-io · Jan 25, 2024 · 68ce41e · 68ce41e
1 parent 063f210
commit 68ce41e
Show file tree

Hide file tree

Showing 5 changed files with 20 additions and 14 deletions.
diff --git a/src/app/features/collectibles/components/taproot-balance-displayer.tsx b/src/app/features/collectibles/components/taproot-balance-displayer.tsx
@@ -18,7 +18,7 @@ export function TaprootBalanceDisplayer({ onSelectRetrieveBalance }: TaprootBala
   if (!isRecoverFeatureEnabled) return null;
   if (balance.amount.isLessThanOrEqualTo(0)) return null;
   return (
-    <BasicTooltip label={taprootSpendNotSupportedYetMsg}>
+    <BasicTooltip label={taprootSpendNotSupportedYetMsg} asChild>
       <Link onClick={() => onSelectRetrieveBalance()} textStyle="caption.02" variant="text">
         {formatMoney(balance)}
       </Link>

diff --git a/...tcoin-contract-request/components/bitcoin-contract-offer/bitcoin-contract-lock-amount.tsx b/...tcoin-contract-request/components/bitcoin-contract-offer/bitcoin-contract-lock-amount.tsx
@@ -44,11 +44,14 @@ export function BitcoinContractLockAmount({
         </styled.span>
       </HStack>
       <HStack alignItems="center" justifyContent="space-between" mt="space.02">
+        {/** TODO: We need to persist the tooltip after it is clicked.
+             Current implementation of radix-ui tooltip doesn't allow that, ref: https://github.com/radix-ui/primitives/issues/2029 */}
         {subtitle ? (
           <BasicTooltip
             disabled={!hoverLabel}
             label={hasCopied ? 'Copied!' : hoverLabel}
             side="bottom"
+            asChild
           >
             <styled.button
               _hover={{ cursor: 'pointer' }}

diff --git a/...-crypto-asset-form/components/recipient-fields/components/recipient-address-displayer.tsx b/...-crypto-asset-form/components/recipient-fields/components/recipient-address-displayer.tsx
@@ -28,7 +28,9 @@ export function RecipientAddressDisplayer({ address }: RecipientAddressDisplayer
       >
         {address}
       </styled.span>
-      <BasicTooltip label={hasCopied ? 'Copied!' : 'Copy address'} side="right">
+      {/** TODO: We need to persist the tooltip after it is clicked.
+           Current implementation of radix-ui tooltip doesn't allow that, ref: https://github.com/radix-ui/primitives/issues/2029 */}
+      <BasicTooltip label={hasCopied ? 'Copied!' : 'Copy address'} side="right" asChild>
         <styled.button
           _hover={{ cursor: 'pointer' }}
           data-testid={SendCryptoAssetSelectors.RecipientBnsAddressCopyToClipboard}

diff --git a/...p/pages/send/send-crypto-asset-form/family/bitcoin/components/bitcoin-send-max-button.tsx b/...p/pages/send/send-crypto-asset-form/family/bitcoin/components/bitcoin-send-max-button.tsx
@@ -38,16 +38,14 @@ export function BitcoinSendMaxButton({
   if (sendMaxBalance === '0') return <Box height="32px" />;
 
   return (
-    <BasicTooltip label={sendMaxTooltipLabel} side="bottom">
-      <Box>
-        <Link
-          data-testid={SendCryptoAssetSelectors.SendMaxBtn}
-          onClick={() => onSendMax()}
-          {...props}
-        >
-          {isSendingMax ? 'Sending max' : 'Send max'}
-        </Link>
-      </Box>
+    <BasicTooltip label={sendMaxTooltipLabel} side="bottom" asChild>
+      <Link
+        data-testid={SendCryptoAssetSelectors.SendMaxBtn}
+        onClick={() => onSendMax()}
+        {...props}
+      >
+        {isSendingMax ? 'Sending max' : 'Send max'}
+      </Link>
     </BasicTooltip>
   );
 }
diff --git a/src/app/ui/components/link/link.tsx b/src/app/ui/components/link/link.tsx
@@ -1,3 +1,5 @@
+import { ForwardedRef, forwardRef } from 'react';
+
 import { styled } from 'leather-styles/jsx';
 import { type LinkVariantProps, link as linkRecipe } from 'leather-styles/recipes/link';
 
@@ -6,16 +8,17 @@ const StyledLink = styled('a');
 type LinkProps = Omit<React.ComponentProps<typeof StyledLink>, keyof LinkVariantProps> &
   LinkVariantProps;
 
-export function Link(props: LinkProps) {
+export const Link = forwardRef((props: LinkProps, ref: ForwardedRef<HTMLAnchorElement>) => {
   const { children, fullWidth, invert, size, variant, ...rest } = props;
 
   return (
     <StyledLink
+      ref={ref}
       className={linkRecipe({ fullWidth, invert, size, variant })}
       cursor="pointer"
       {...rest}
     >
       {children}
     </StyledLink>
   );
-}
+});