Movatterモバイル変換

[0]ホーム
URL:

Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly

 Sign up
Appearance settings

Commitcd484db

Browse files
fix: only override img size for direct button children (#18540)
The issue was causing the select menu, that uses an avatar inside of thebutton, 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"/>
1 parentdc24922 commitcd484db

File tree

1 file changed

+8
-6
lines changed

1 file changed

+8
-6
lines changed

‎site/src/components/Button/Button.tsx

Lines changed: 8 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,8 @@ import { type VariantProps, cva } from "class-variance-authority";
77
import{forwardRef}from"react";
88
import{cn}from"utils/cn";
99

10+
// Be careful when changing the child styles from the button such as images
11+
// because they can override the styles from other components like Avatar.
1012
constbuttonVariants=cva(
1113
`
1214
inline-flex items-center justify-center gap-1 whitespace-nowrap font-sans
@@ -15,8 +17,8 @@ const buttonVariants = cva(
1517
focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-content-link
1618
disabled:pointer-events-none disabled:text-content-disabled
1719
[&:is(a):not([href])]:pointer-events-none [&:is(a):not([href])]:text-content-disabled
18-
[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg]:p-0.5
19-
[&_img]:pointer-events-none [&_img]:shrink-0 [&_img]:p-0.5
20+
[&>svg]:pointer-events-none [&>svg]:shrink-0 [&>svg]:p-0.5
21+
[&>img]:pointer-events-none [&>img]:shrink-0 [&>img]:p-0.5
2022
`,
2123
{
2224
variants:{
@@ -42,11 +44,11 @@ const buttonVariants = cva(
4244
},
4345

4446
size:{
45-
lg:"min-w-20 h-10 px-3 py-2 [&_svg]:size-icon-lg [&_img]:size-icon-lg",
46-
sm:"min-w-20 h-8 px-2 py-1.5 text-xs [&_svg]:size-icon-sm [&_img]:size-icon-sm",
47+
lg:"min-w-20 h-10 px-3 py-2 [&>svg]:size-icon-lg [&>img]:size-icon-lg",
48+
sm:"min-w-20 h-8 px-2 py-1.5 text-xs [&>svg]:size-icon-sm [&>img]:size-icon-sm",
4749
xs:"min-w-8 py-1 px-2 text-2xs rounded-md",
48-
icon:"size-8 px-1.5 [&_svg]:size-icon-sm [&_img]:size-icon-sm",
49-
"icon-lg":"size-10 px-2 [&_svg]:size-icon-lg [&_img]:size-icon-lg",
50+
icon:"size-8 px-1.5 [&>svg]:size-icon-sm [&>img]:size-icon-sm",
51+
"icon-lg":"size-10 px-2 [&>svg]:size-icon-lg [&>img]:size-icon-lg",
5052
},
5153
},
5254
defaultVariants:{

0 commit comments

Comments
 (0)
[8]ページ先頭
©2009-2025 Movatter.jp