fix: ensure click events are triggered on button edges (#349)

.changeset/slow-clocks-marry.md

@@ -0,0 +1,5 @@
+---
+'@rainbow-me/rainbowkit': patch
+---
+
+Fix bug where click events were ignored on the edges of links/buttons due to scale transforms during hover/active states

packages/rainbowkit/src/components/Button/ActionButton.tsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { increaseHitAreaForHoverTransform } from '../../css/increaseHitAreaForHoverTransform.css';
 import { isMobile } from '../../utils/isMobile';
 import { Box, BoxProps } from '../Box/Box';
 import { Text, TextProps } from '../Text/Text';
@@ -36,13 +37,15 @@ export function ActionButton({
   href,
   label,
   onClick,
+  rel = 'noreferrer noopener',
   size = 'medium',
   target = '_blank',
   type = 'primary',
 }: {
   href?: string;
   label: string;
   onClick?: () => void;
+  rel?: string;
   size?: Size;
   target?: string;
   type?: 'primary' | 'secondary';
@@ -60,37 +63,42 @@ export function ActionButton({
   return (
     <Box
       {...(href
-        ? { as: 'a', href, rel: 'noreferrer noopener', target }
+        ? { as: 'a', href, rel, target }
         : { as: 'button', type: 'button' })}
-      {...(hasBorder
-        ? {
-            borderColor:
-              mobile && !isNotLarge && !isPrimary
-                ? 'actionButtonBorderMobile'
-                : 'actionButtonBorder',
-            borderStyle: 'solid',
-            borderWidth: '1',
-          }
-        : {})}
       borderRadius="actionButton"
-      display="block"
+      className={increaseHitAreaForHoverTransform.grow}
+      display="flex"
       onClick={onClick}
-      paddingX={paddingX}
-      paddingY={paddingY}
-      style={{ willChange: 'transform' }}
-      textAlign="center"
-      transform={{ active: 'shrinkSm', hover: 'grow' }}
-      transition="default"
-      {...(background ? { background } : {})}
-      {...(height ? { height } : {})}
     >
-      <Text
-        color={isPrimary ? 'accentColorForeground' : 'accentColor'}
-        size={fontSize}
-        weight="bold"
+      <Box
+        {...(hasBorder
+          ? {
+              borderColor:
+                mobile && !isNotLarge && !isPrimary
+                  ? 'actionButtonBorderMobile'
+                  : 'actionButtonBorder',
+              borderStyle: 'solid',
+              borderWidth: '1',
+            }
+          : {})}
+        borderRadius="actionButton"
+        paddingX={paddingX}
+        paddingY={paddingY}
+        style={{ willChange: 'transform' }}
+        textAlign="center"
+        transform={{ active: 'shrinkSm', hover: 'grow' }}
+        transition="default"
+        {...(background ? { background } : {})}
+        {...(height ? { height } : {})}
       >
-        {label}
-      </Text>
+        <Text
+          color={isPrimary ? 'accentColorForeground' : 'accentColor'}
+          size={fontSize}
+          weight="bold"
+        >
+          {label}
+        </Text>
+      </Box>
     </Box>
   );
 }

packages/rainbowkit/src/components/CloseButton/CloseButton.tsx

@@ -1,36 +1,40 @@
 import React from 'react';
+import { increaseHitAreaForHoverTransform } from '../../css/increaseHitAreaForHoverTransform.css';
 import { isMobile } from '../../utils/isMobile';
 import { Box } from '../Box/Box';
 import { CloseIcon } from '../Icons/Close';
 
-export const CloseButton = ({
-  onClose,
-  style,
-}: {
-  onClose: () => void;
-  style?: React.CSSProperties;
-}) => {
+export const CloseButton = ({ onClose }: { onClose: () => void }) => {
   const mobile = isMobile();
   return (
     <Box
-      alignItems="center"
       as="button"
-      background="closeButtonBackground"
-      borderColor="actionButtonBorder"
       borderRadius="full"
-      borderStyle="solid"
-      borderWidth={mobile ? '0' : '1'}
-      color="closeButton"
+      className={increaseHitAreaForHoverTransform.growLg}
       display="flex"
       height={mobile ? '30' : '28'}
-      justifyContent="center"
       onClick={onClose}
-      style={{ willChange: 'transform', ...(style ?? {}) }}
-      transform={{ active: 'shrinkSm', hover: 'growLg' }}
-      transition="default"
+      type="button"
       width={mobile ? '30' : '28'}
     >
-      <CloseIcon />
+      <Box
+        alignItems="center"
+        background="closeButtonBackground"
+        borderColor="actionButtonBorder"
+        borderRadius="full"
+        borderStyle="solid"
+        borderWidth={mobile ? '0' : '1'}
+        color="closeButton"
+        display="flex"
+        height="full"
+        justifyContent="center"
+        style={{ willChange: 'transform' }}
+        transform={{ active: 'shrinkSm', hover: 'growLg' }}
+        transition="default"
+        width="full"
+      >
+        <CloseIcon />
+      </Box>
     </Box>
   );
 };