LumeWeb
/
skynet-webportal
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(dashboard-v2): fix Button styles on Safari when used as polymorphic component

This commit is contained in:
Michał Leszczyk 2022-04-15 16:10:16 +02:00
parent 5a2a2b6508
commit 7e8d033bed
No known key found for this signature in database
GPG Key ID: FA123CA8BAA2FBF4
1 changed files with 19 additions and 9 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
packages/dashboard-v2/src/components/Button/Button.js
View File

@ -5,15 +5,25 @@ import styled from "styled-components";
/** /**
* Primary UI component for user interaction * Primary UI component for user interaction
*/ */
export const Button = styled.button.attrs(({ disabled, $primary, type }) => ({ export const Button = styled.button.attrs(({ as: polymorphicAs, disabled, $primary, type }) => {
type, // We want to default to type=button in most cases, but sometimes we use this component
className: cn("px-6 py-2.5 rounded-full font-sans uppercase text-xs tracking-wide transition-[opacity_filter]", { // as a polymorphic one (i.e. for links), and then we should avoid setting `type` property,
"bg-primary text-palette-600": $primary, // as it breaks styling in Safari.
"bg-white border-2 border-black text-palette-600": !$primary, const typeAttr = polymorphicAs && polymorphicAs !== "button" ? undefined : type;
"cursor-not-allowed opacity-60": disabled,
"hover:brightness-90": !disabled, return {
}), type: typeAttr,
}))``; className: cn(
"px-6 py-2.5 inline-block rounded-full font-sans uppercase text-xs tracking-wide transition-[opacity_filter]",
{
"bg-primary text-palette-600": $primary,
"bg-white border-2 border-black text-palette-600": !$primary,
"cursor-not-allowed opacity-60": disabled,
"hover:brightness-90": !disabled,
}
),
};
})``;
Button.propTypes = { Button.propTypes = {
/** /**