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

20
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,
// as it breaks styling in Safari.
const typeAttr = polymorphicAs && polymorphicAs !== "button" ? undefined : type;
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-primary text-palette-600": $primary,
"bg-white border-2 border-black text-palette-600": !$primary, "bg-white border-2 border-black text-palette-600": !$primary,
"cursor-not-allowed opacity-60": disabled, "cursor-not-allowed opacity-60": disabled,
"hover:brightness-90": !disabled, "hover:brightness-90": !disabled,
}), }
}))``; ),
};
})``;
Button.propTypes = { Button.propTypes = {
/** /**