Button component style variants and sizes added
This commit is contained in:
adilallo
@@ -17,6 +17,7 @@ export default function Button({
|
||||
"px-[var(--spacing-scale-006)] py-[var(--spacing-scale-004)] gap-[var(--spacing-scale-001)]",
|
||||
small:
|
||||
"px-[var(--spacing-measures-spacing-008)] py-[var(--spacing-measures-spacing-008)] gap-[var(--spacing-scale-004)]",
|
||||
medium: "p-[var(--spacing-scale-010)] gap-[var(--spacing-scale-004)]",
|
||||
large:
|
||||
"px-[var(--spacing-scale-012)] py-[var(--spacing-scale-010)] gap-[var(--spacing-scale-004)]",
|
||||
xlarge:
|
||||
@@ -28,6 +29,8 @@ export default function Button({
|
||||
"font-['Inter'] text-[10px] leading-[12px] font-medium tracking-[0%]",
|
||||
small:
|
||||
"font-['Inter'] text-[12px] leading-[14px] font-medium tracking-[0%]",
|
||||
medium:
|
||||
"font-['Inter'] text-[14px] leading-[16px] font-medium tracking-[0%]",
|
||||
large:
|
||||
"font-['Inter'] text-[16px] leading-[20px] font-medium tracking-[0%]",
|
||||
xlarge:
|
||||
@@ -36,22 +39,36 @@ export default function Button({
|
||||
|
||||
const variantStyles = {
|
||||
default:
|
||||
"bg-[var(--color-surface-inverse-primary)] text-[var(--color-content-inverse-primary)] hover:bg-[var(--color-surface-inverse-primary)] hover:text-[var(--color-content-inverse-brand-primary)] hover:outline-[var(--border-color-default-brandprimary)] hover:outline-inset hover:scale-[1.02] hover:shadow-lg active:bg-[var(--color-surface-inverse-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:outline-[var(--border-color-default-brandprimary)] active:outline-offset-1 active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100 disabled:hover:shadow-none",
|
||||
"bg-[var(--color-surface-inverse-primary)] text-[var(--color-content-inverse-primary)] hover:bg-[var(--color-surface-inverse-primary)] hover:text-[var(--color-content-inverse-brand-primary)] hover:outline-[var(--border-color-default-brandprimary)] hover:outline-inset hover:scale-[1.02] hover:shadow-lg focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:outline-none focus:ring-1 focus:ring-[var(--color-content-default-brand-primary)] focus:ring-offset-1 focus:scale-[1.02] active:bg-[var(--color-surface-inverse-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:outline-[var(--border-color-default-brandprimary)] active:outline-offset-1 active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100 disabled:hover:shadow-none disabled:hover:outline-none",
|
||||
secondary:
|
||||
"bg-transparent text-[var(--color-content-default-brand-primary)] hover:text-[var(--color-content-default-primary)] hover:scale-[1.02] hover:bg-[var(--color-surface-default-tertiary)] focus:outline-1 focus:outline-inset focus:outline-[var(--border-color-default-tertiary)] focus:shadow-[0_0_10px_1px_#FFFDD2] focus:blur-[0px] active:outline-[1.5px] active:outline-inset active:outline-[var(--color-content-default-brand-primary)] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
|
||||
"bg-transparent text-[var(--color-content-default-brand-primary)] hover:text-[var(--color-content-default-primary)] hover:scale-[1.02] hover:bg-transparent hover:outline-none focus:outline-1 focus:outline-inset focus:outline-[var(--border-color-default-tertiary)] focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:blur-[0px] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
|
||||
primary:
|
||||
"bg-[var(--color-surface-default-primary)] text-[var(--color-content-default-primary)] hover:bg-[var(--color-surface-default-primary)] hover:text-[var(--color-content-default-brand-primary)] hover:scale-[1.02] focus:bg-[var(--color-surface-default-primary)] focus:text-[var(--color-content-default-brand-primary)] focus:outline-none focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:blur-[0px] focus:scale-[1.02] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-inverse-secondary)] disabled:text-[var(--color-content-default-primary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
|
||||
outlined:
|
||||
"bg-transparent text-[var(--color-content-default-primary)] border-[1.5px] border-[var(--color-content-default-primary)] hover:bg-transparent hover:text-[var(--color-content-default-brand-primary)] hover:border-[1.5px] hover:border-[var(--color-content-default-brand-primary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-default-primary)] focus:outline-none focus:border-[1.5px] focus:border-[var(--color-content-default-primary)] focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:blur-[0px] focus:scale-[1.02] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:border-transparent active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-default-secondary)] disabled:text-[var(--color-content-inverse-tertiary)] disabled:border-[1.5px] disabled:border-[var(--color-surface-default-secondary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
|
||||
dark: "bg-transparent text-[var(--color-content-inverse-primary)] border border-[var(--border-color-default-primary)] hover:bg-transparent hover:text-[var(--color-content-inverse-brand-primary)] hover:border hover:border-[var(--border-color-inverse-brandprimary)] hover:scale-[1.02] focus:bg-transparent focus:text-[var(--color-content-inverse-primary)] focus:outline-none focus:border focus:border-[var(--border-color-default-primary)] focus:shadow-[0_0_10px_1px_var(--color-surface-default-brand-primary)] focus:blur-[0px] focus:scale-[1.02] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:border-transparent active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-inverse-secondary)] disabled:text-[var(--color-content-default-primary)] disabled:border-transparent disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
|
||||
inverse:
|
||||
"bg-transparent text-[var(--color-content-inverse-primary)] hover:text-[var(--color-content-inverse-brand-primary)] hover:scale-[1.02] hover:bg-transparent hover:outline-none focus:outline-1 focus:outline-inset focus:outline-[var(--border-color-default-tertiary)] focus:shadow-[0_0_10px_1px_var(--color-surface-default-tertiary)] focus:blur-[0px] active:bg-[var(--color-surface-default-brand-primary)] active:text-[var(--color-content-inverse-primary)] active:shadow-none active:scale-[0.98] disabled:bg-[var(--color-surface-inverse-secondary)] disabled:text-[var(--color-content-default-primary)] disabled:cursor-not-allowed disabled:opacity-50 disabled:hover:scale-100 disabled:active:scale-100",
|
||||
};
|
||||
|
||||
const hoverOutlineStyles = {
|
||||
xsmall: "hover:outline-1",
|
||||
small: "hover:outline-1",
|
||||
medium: "hover:outline-1",
|
||||
large: "hover:outline-2",
|
||||
xlarge: "hover:outline-[2.5px]",
|
||||
};
|
||||
|
||||
const focusStyles =
|
||||
"focus:shadow-[0_0_10px_1px_#FFFDD2] focus:outline-none focus:ring-1 focus:ring-[var(--color-content-default-brand-primary)] focus:ring-offset-1 focus:scale-[1.02]";
|
||||
// Only apply outline styles to default and secondary variants, not primary, outlined, dark, or inverse
|
||||
const outlineStyles =
|
||||
variant === "primary" ||
|
||||
variant === "outlined" ||
|
||||
variant === "dark" ||
|
||||
variant === "inverse"
|
||||
? ""
|
||||
: hoverOutlineStyles[size];
|
||||
|
||||
const baseStyles = `inline-flex items-center justify-start box-border ${sizeStyles[size]} rounded-[var(--radius-measures-radius-full)] ${fontStyles[size]} transition-all duration-200 ease-in-out cursor-pointer ${variantStyles[variant]} ${hoverOutlineStyles[size]} ${focusStyles}`;
|
||||
const baseStyles = `inline-flex items-center justify-start box-border ${sizeStyles[size]} rounded-[var(--radius-measures-radius-full)] ${fontStyles[size]} transition-all duration-500 ease-in-out cursor-pointer ${variantStyles[variant]} ${outlineStyles}`;
|
||||
|
||||
let finalVariant = variant;
|
||||
if (disabled) {
|
||||
|
||||
+124
-2
@@ -15,12 +15,19 @@ export default {
|
||||
argTypes: {
|
||||
variant: {
|
||||
control: { type: "select" },
|
||||
options: ["default", "secondary"],
|
||||
options: [
|
||||
"default",
|
||||
"secondary",
|
||||
"primary",
|
||||
"outlined",
|
||||
"dark",
|
||||
"inverse",
|
||||
],
|
||||
description: "The visual style variant of the button",
|
||||
},
|
||||
size: {
|
||||
control: { type: "select" },
|
||||
options: ["xsmall", "small", "large", "xlarge"],
|
||||
options: ["xsmall", "small", "medium", "large", "xlarge"],
|
||||
description: "The size of the button",
|
||||
},
|
||||
disabled: {
|
||||
@@ -56,6 +63,18 @@ export const Variants = {
|
||||
<Button {...args} variant="secondary">
|
||||
Secondary
|
||||
</Button>
|
||||
<Button {...args} variant="primary">
|
||||
Primary
|
||||
</Button>
|
||||
<Button {...args} variant="outlined">
|
||||
Outlined
|
||||
</Button>
|
||||
<Button {...args} variant="dark">
|
||||
Dark
|
||||
</Button>
|
||||
<Button {...args} variant="inverse">
|
||||
Inverse
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
),
|
||||
@@ -82,6 +101,9 @@ export const Sizes = {
|
||||
<Button {...args} size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button {...args} size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button {...args} size="large">
|
||||
Large
|
||||
</Button>
|
||||
@@ -134,6 +156,7 @@ export const AllVariants = {
|
||||
<div className="space-x-4">
|
||||
<Button size="xsmall">XSmall</Button>
|
||||
<Button size="small">Small</Button>
|
||||
<Button size="medium">Medium</Button>
|
||||
<Button size="large">Large</Button>
|
||||
<Button size="xlarge">XLarge</Button>
|
||||
</div>
|
||||
@@ -148,6 +171,9 @@ export const AllVariants = {
|
||||
<Button variant="secondary" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="secondary" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="secondary" size="large">
|
||||
Large
|
||||
</Button>
|
||||
@@ -157,6 +183,90 @@ export const AllVariants = {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Primary Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="primary" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="primary" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="primary" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="primary" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="primary" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Outlined Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="outlined" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="outlined" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="outlined" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="outlined" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="outlined" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Dark Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="dark" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="dark" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="dark" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="dark" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="dark" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Inverse Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="inverse" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="inverse" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="inverse" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="inverse" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="inverse" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Disabled States</h3>
|
||||
<div className="space-x-4">
|
||||
@@ -166,6 +276,18 @@ export const AllVariants = {
|
||||
<Button variant="secondary" size="large" disabled>
|
||||
Secondary Disabled
|
||||
</Button>
|
||||
<Button variant="primary" size="large" disabled>
|
||||
Primary Disabled
|
||||
</Button>
|
||||
<Button variant="outlined" size="large" disabled>
|
||||
Outlined Disabled
|
||||
</Button>
|
||||
<Button variant="dark" size="large" disabled>
|
||||
Dark Disabled
|
||||
</Button>
|
||||
<Button variant="inverse" size="large" disabled>
|
||||
Inverse Disabled
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user