fix: prevent buttons from looking active when interacting with parent divs (#25431)
This commit is contained in:
@@ -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] "
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user