fix: ensure focus outlines match button/link size on click (#453)

.changeset/cool-adults-laugh.md

@@ -0,0 +1,5 @@
+---
+'@rainbow-me/rainbowkit': patch
+---
+
+Fix visual bug where focus outlines were out of sync with buttons/links on click when toggling between keyboard and mouse usage

packages/rainbowkit/package.json

@@ -49,6 +49,7 @@
     "@ethersproject/providers": "^5.5.1",
     "@types/qrcode": "^1.4.2",
     "@vanilla-extract/private": "^1.0.2",
+    "@vanilla-extract/css-utils": "0.1.2",
     "autoprefixer": "^10.4.0",
     "ethers": "^5.0.0",
     "nock": "^13.2.4",

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

@@ -1,5 +1,5 @@
 import React from 'react';
-import { increaseHitAreaForHoverTransform } from '../../css/increaseHitAreaForHoverTransform.css';
+import { touchableStyles } from '../../css/touchableStyles';
 import { isMobile } from '../../utils/isMobile';
 import { Box, BoxProps } from '../Box/Box';
 import { Text, TextProps } from '../Text/Text';
@@ -65,40 +65,35 @@ export function ActionButton({
       {...(href
         ? { as: 'a', href, rel, target }
         : { as: 'button', type: 'button' })}
-      borderRadius="actionButton"
-      className={increaseHitAreaForHoverTransform.grow}
-      display="flex"
       onClick={onClick}
+      {...(hasBorder
+        ? {
+            borderColor:
+              mobile && !isNotLarge && !isPrimary
+                ? 'actionButtonBorderMobile'
+                : 'actionButtonBorder',
+            borderStyle: 'solid',
+            borderWidth: '1',
+          }
+        : {})}
+      borderRadius="actionButton"
+      className={touchableStyles({ active: 'shrinkSm', hover: 'grow' })}
+      display="block"
+      paddingX={paddingX}
+      paddingY={paddingY}
+      style={{ willChange: 'transform' }}
+      textAlign="center"
+      transition="default"
+      {...(background ? { background } : {})}
+      {...(height ? { height } : {})}
     >
-      <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 } : {})}
+      <Text
+        color={isPrimary ? 'accentColorForeground' : 'accentColor'}
+        size={fontSize}
+        weight="bold"
       >
-        <Text
-          color={isPrimary ? 'accentColorForeground' : 'accentColor'}
-          size={fontSize}
-          weight="bold"
-        >
-          {label}
-        </Text>
-      </Box>
+        {label}
+      </Text>
     </Box>
   );
 }

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

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