fix: prevent buttons from looking active when interacting with parent divs (#25431)

This commit is contained in:
Pasquale Vitiello
2025-11-27 14:18:35 +00:00
committed by GitHub
parent 33c3bf3558
commit a23400777a
+3 -3
View File
@@ -273,7 +273,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
name={StartIcon}
className={classNames(
loading ? "invisible" : "visible",
"button-icon group-active:translate-y-[0.5px]",
"button-icon group-[:not(div):active]:translate-y-[0.5px]",
variant === "icon" && "h-4 w-4",
variant === "button" && "h-4 w-4 stroke-[1.5px] "
)}
@@ -286,7 +286,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
"contents", // This makes the div behave like it doesn't exist in the layout
loading ? "invisible" : "visible",
variant === "fab" ? "hidden md:contents" : "",
"group-active:translate-y-[0.5px]"
"group-[:not(div):active]:translate-y-[0.5px]"
)}>
{props.children}
</div>
@@ -321,7 +321,7 @@ export const Button = forwardRef<HTMLAnchorElement | HTMLButtonElement, ButtonPr
name={EndIcon}
className={classNames(
loading ? "invisible" : "visible",
"group-active:translate-y-[0.5px]",
"group-[:not(div):active]:translate-y-[0.5px]",
variant === "icon" && "h-4 w-4",
variant === "button" && "h-4 w-4 stroke-[1.5px] "
)}