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

BrunoQuaresma · web-flow · commit cd484db8727a · 2025-06-24T13:28:58.000-03:00
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" />
diff --git a/site/src/components/Button/Button.tsx b/site/src/components/Button/Button.tsx
@@ -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: {
