feat: add tailwind version of Button component

This commit is contained in:
doprz
2024-03-06 12:52:56 -06:00
parent 863521fb3b
commit 28d93b3c25
7 changed files with 65 additions and 34 deletions

View File

@@ -5,18 +5,18 @@ import styles from './Button.module.scss';
interface Props {
className?: string;
style?: React.CSSProperties;
type?: 'filled' | 'outline' | 'single';
variant?: 'filled' | 'outline' | 'single';
onClick?: () => void;
iconOnly?: boolean;
showSymbol?: boolean;
symbol?: React.ReactNode;
icon?: React.ReactNode;
disabled?: boolean;
title?: string;
testId?: string;
primaryColor?: string;
secondaryColor?: string;
useScss?: boolean;
}
const BUTTON_BASE_CLASS =
'm-2.5 h-10 w-auto flex cursor-pointer content-center items-center gap-2 rounded-1 px-4 py-0 text-4.5 font-500 leading-normal font-sans btn-transition';
/**
* A reusable button component that follows the design system of the extension.
* @returns
@@ -24,25 +24,22 @@ interface Props {
export function Button({
className,
style,
type,
variant,
onClick,
iconOnly,
showSymbol,
symbol,
icon,
disabled,
title,
testId,
primaryColor,
secondaryColor,
children,
useScss = false,
}: React.PropsWithChildren<Props>): JSX.Element {
return (
<button
style={
{
...style,
'--color-primary': primaryColor ?? '#333F48',
'--color-secondary': secondaryColor ?? '#FFFFFF',
'--color-primary': '#333F48',
'--color-secondary': '#FFFFFF',
} as React.CSSProperties
}
data-testid={testId}
@@ -50,9 +47,11 @@ export function Button({
[styles.disabled]: disabled,
})}
title={title}
disabled={disabled}
onClick={disabled ? undefined : onClick}
>
{!iconOnly && children}
{icon}
{children}
</button>
);
}

View File

@@ -3,6 +3,7 @@ import styles from './ExtensionRoot.module.scss';
import '@unocss/reset/tailwind-compat.css';
import 'uno.css';
import '@unocss/reset/tailwind-compat.css';
interface Props {
testId?: string;