opensource/coder
3
0
Fork 0
mirror of https://github.com/coder/coder.git synced 2026-09-21 20:51:01 +08:00
Code Issues Packages Projects Releases Wiki Activity

fix: only override img size for direct button children (#18540)

Browse Source 
The issue was causing the select menu, that uses an avatar inside of the
button, to have a wrong size.

Before:
<img width="191" alt="Screenshot 2025-06-24 at 13 18 51"
src="https://github.com/user-attachments/assets/4cc20bbc-daa6-44b0-802c-a1846740beb5"
/>

After:
<img width="191" alt="Screenshot 2025-06-24 at 13 18 41"
src="https://github.com/user-attachments/assets/107083f9-ef51-4d7d-84c3-c5d3e82307c8"
/>
This commit is contained in:
Bruno Quaresma
2025-06-24 13:28:58 -03:00
committed by GitHub
parent dc24922039
commit cd484db872
1 changed files with 8 additions and 6 deletions
Download Patch File Download Diff File Expand all files Collapse all files
site/src/components/Button/Button.tsx
+8 -6
View File
@@ -7,6 +7,8 @@ import { type VariantProps, cva } from "class-variance-authority";
import { forwardRef } from "react";
import { cn } from "utils/cn";
// Be careful when changing the child styles from the button such as images
// because they can override the styles from other components like Avatar.
const buttonVariants = cva(
`
inline-flex items-center justify-center gap-1 whitespace-nowrap font-sans
@@ -15,8 +17,8 @@ const buttonVariants = cva(
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link
disabled:pointer-events-none disabled:text-content-disabled
[&:is(a):not([href])]:pointer-events-none [&:is(a):not([href])]:text-content-disabled
[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:p-0.5
[&_img]:pointer-events-none [&_img]:shrink-0 [&_img]:p-0.5
[&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg]:p-0.5
[&>img]:pointer-events-none [&>img]:shrink-0 [&>img]:p-0.5
`,
{
variants: {
@@ -42,11 +44,11 @@ const buttonVariants = cva(
},
size: {
lg: "min-w-20 h-10 px-3 py-2 [&_svg]:size-icon-lg [&_img]:size-icon-lg",
sm: "min-w-20 h-8 px-2 py-1.5 text-xs [&_svg]:size-icon-sm [&_img]:size-icon-sm",
lg: "min-w-20 h-10 px-3 py-2 [&>svg]:size-icon-lg [&>img]:size-icon-lg",
sm: "min-w-20 h-8 px-2 py-1.5 text-xs [&>svg]:size-icon-sm [&>img]:size-icon-sm",
xs: "min-w-8 py-1 px-2 text-2xs rounded-md",
icon: "size-8 px-1.5 [&_svg]:size-icon-sm [&_img]:size-icon-sm",
"icon-lg": "size-10 px-2 [&_svg]:size-icon-lg [&_img]:size-icon-lg",
icon: "size-8 px-1.5 [&>svg]:size-icon-sm [&>img]:size-icon-sm",
"icon-lg": "size-10 px-2 [&>svg]:size-icon-lg [&>img]:size-icon-lg",
},
},
defaultVariants: {