Skip to content

Commit

Permalink
fix: ensure focus outlines match button/link size on click (#453)
Browse files Browse the repository at this point in the history
  • Loading branch information
markdalgleish committed Jun 2, 2022
1 parent fe5cfc5 commit 0686c2f
Show file tree
Hide file tree
Showing 19 changed files with 464 additions and 508 deletions.
5 changes: 5 additions & 0 deletions .changeset/cool-adults-laugh.md
Original file line number Diff line number Diff line change
@@ -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
1 change: 1 addition & 0 deletions packages/rainbowkit/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
59 changes: 27 additions & 32 deletions packages/rainbowkit/src/components/Button/ActionButton.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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>
);
}
32 changes: 12 additions & 20 deletions packages/rainbowkit/src/components/CloseButton/CloseButton.tsx
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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>
);
};

2 comments on commit 0686c2f

@vercel
Copy link

@vercel vercel bot commented on 0686c2f Jun 2, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@vercel
Copy link

@vercel vercel bot commented on 0686c2f Jun 2, 2022

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please sign in to comment.