Remove backwards compatibility
This commit is contained in:
adilallo
@@ -13,19 +13,15 @@ export default {
|
||||
},
|
||||
},
|
||||
argTypes: {
|
||||
variant: {
|
||||
buttonType: {
|
||||
control: { type: "select" },
|
||||
options: [
|
||||
"filled",
|
||||
"filled-inverse",
|
||||
"outline",
|
||||
"outline-inverse",
|
||||
"ghost",
|
||||
"ghost-inverse",
|
||||
"danger",
|
||||
"danger-inverse",
|
||||
],
|
||||
description: "The visual style variant of the button",
|
||||
options: ["filled", "outline", "ghost", "danger"],
|
||||
description: "The button type (Figma prop)",
|
||||
},
|
||||
palette: {
|
||||
control: { type: "select" },
|
||||
options: ["default", "inverse"],
|
||||
description: "The button palette (Figma prop)",
|
||||
},
|
||||
size: {
|
||||
control: { type: "select" },
|
||||
@@ -59,28 +55,28 @@ export const Variants = {
|
||||
render: (_args) => (
|
||||
<div className="space-y-4">
|
||||
<div className="space-x-4">
|
||||
<Button {..._args} variant="filled">
|
||||
<Button {..._args} buttonType="filled" palette="default">
|
||||
Filled
|
||||
</Button>
|
||||
<Button {..._args} variant="filled-inverse">
|
||||
<Button {..._args} buttonType="filled" palette="inverse">
|
||||
Filled Inverse
|
||||
</Button>
|
||||
<Button {..._args} variant="outline">
|
||||
<Button {..._args} buttonType="outline" palette="default">
|
||||
Outline
|
||||
</Button>
|
||||
<Button {..._args} variant="outline-inverse">
|
||||
<Button {..._args} buttonType="outline" palette="inverse">
|
||||
Outline Inverse
|
||||
</Button>
|
||||
<Button {..._args} variant="ghost">
|
||||
<Button {..._args} buttonType="ghost" palette="default">
|
||||
Ghost
|
||||
</Button>
|
||||
<Button {..._args} variant="ghost-inverse">
|
||||
<Button {..._args} buttonType="ghost" palette="inverse">
|
||||
Ghost Inverse
|
||||
</Button>
|
||||
<Button {..._args} variant="danger">
|
||||
<Button {..._args} buttonType="danger" palette="default">
|
||||
Danger
|
||||
</Button>
|
||||
<Button {..._args} variant="danger-inverse">
|
||||
<Button {..._args} buttonType="danger" palette="inverse">
|
||||
Danger Inverse
|
||||
</Button>
|
||||
</div>
|
||||
@@ -98,7 +94,8 @@ export const Variants = {
|
||||
export const Sizes = {
|
||||
args: {
|
||||
children: "Button",
|
||||
variant: "filled",
|
||||
buttonType: "filled",
|
||||
palette: "default",
|
||||
},
|
||||
render: (_args) => (
|
||||
<div className="space-y-4">
|
||||
@@ -134,7 +131,8 @@ export const States = {
|
||||
args: {
|
||||
children: "Button",
|
||||
size: "large",
|
||||
variant: "filled",
|
||||
buttonType: "filled",
|
||||
palette: "default",
|
||||
},
|
||||
render: (_args) => (
|
||||
<div className="space-y-4">
|
||||
@@ -162,19 +160,19 @@ export const AllVariants = {
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Filled Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="filled" size="xsmall">
|
||||
<Button buttonType="filled" palette="default" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="filled" size="small">
|
||||
<Button buttonType="filled" palette="default" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="filled" size="medium">
|
||||
<Button buttonType="filled" palette="default" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="filled" size="large">
|
||||
<Button buttonType="filled" palette="default" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="filled" size="xlarge">
|
||||
<Button buttonType="filled" palette="default" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
@@ -183,19 +181,19 @@ export const AllVariants = {
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Filled Inverse Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="filled-inverse" size="xsmall">
|
||||
<Button buttonType="filled" palette="inverse" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="filled-inverse" size="small">
|
||||
<Button buttonType="filled" palette="inverse" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="filled-inverse" size="medium">
|
||||
<Button buttonType="filled" palette="inverse" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="filled-inverse" size="large">
|
||||
<Button buttonType="filled" palette="inverse" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="filled-inverse" size="xlarge">
|
||||
<Button buttonType="filled" palette="inverse" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
@@ -204,19 +202,19 @@ export const AllVariants = {
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Outline Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="outline" size="xsmall">
|
||||
<Button buttonType="outline" palette="default" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="outline" size="small">
|
||||
<Button buttonType="outline" palette="default" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="outline" size="medium">
|
||||
<Button buttonType="outline" palette="default" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="outline" size="large">
|
||||
<Button buttonType="outline" palette="default" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="outline" size="xlarge">
|
||||
<Button buttonType="outline" palette="default" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
@@ -225,19 +223,19 @@ export const AllVariants = {
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Outline Inverse Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="outline-inverse" size="xsmall">
|
||||
<Button buttonType="outline" palette="inverse" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="outline-inverse" size="small">
|
||||
<Button buttonType="outline" palette="inverse" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="outline-inverse" size="medium">
|
||||
<Button buttonType="outline" palette="inverse" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="outline-inverse" size="large">
|
||||
<Button buttonType="outline" palette="inverse" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="outline-inverse" size="xlarge">
|
||||
<Button buttonType="outline" palette="inverse" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
@@ -246,19 +244,19 @@ export const AllVariants = {
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Ghost Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="ghost" size="xsmall">
|
||||
<Button buttonType="ghost" palette="default" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="ghost" size="small">
|
||||
<Button buttonType="ghost" palette="default" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="ghost" size="medium">
|
||||
<Button buttonType="ghost" palette="default" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="ghost" size="large">
|
||||
<Button buttonType="ghost" palette="default" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="ghost" size="xlarge">
|
||||
<Button buttonType="ghost" palette="default" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
@@ -267,19 +265,19 @@ export const AllVariants = {
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Ghost Inverse Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="ghost-inverse" size="xsmall">
|
||||
<Button buttonType="ghost" palette="inverse" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="ghost-inverse" size="small">
|
||||
<Button buttonType="ghost" palette="inverse" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="ghost-inverse" size="medium">
|
||||
<Button buttonType="ghost" palette="inverse" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="ghost-inverse" size="large">
|
||||
<Button buttonType="ghost" palette="inverse" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="ghost-inverse" size="xlarge">
|
||||
<Button buttonType="ghost" palette="inverse" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
@@ -288,19 +286,19 @@ export const AllVariants = {
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Danger Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="danger" size="xsmall">
|
||||
<Button buttonType="danger" palette="default" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="danger" size="small">
|
||||
<Button buttonType="danger" palette="default" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="danger" size="medium">
|
||||
<Button buttonType="danger" palette="default" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="danger" size="large">
|
||||
<Button buttonType="danger" palette="default" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="danger" size="xlarge">
|
||||
<Button buttonType="danger" palette="default" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
@@ -309,19 +307,19 @@ export const AllVariants = {
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Danger Inverse Variant</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="danger-inverse" size="xsmall">
|
||||
<Button buttonType="danger" palette="inverse" size="xsmall">
|
||||
XSmall
|
||||
</Button>
|
||||
<Button variant="danger-inverse" size="small">
|
||||
<Button buttonType="danger" palette="inverse" size="small">
|
||||
Small
|
||||
</Button>
|
||||
<Button variant="danger-inverse" size="medium">
|
||||
<Button buttonType="danger" palette="inverse" size="medium">
|
||||
Medium
|
||||
</Button>
|
||||
<Button variant="danger-inverse" size="large">
|
||||
<Button buttonType="danger" palette="inverse" size="large">
|
||||
Large
|
||||
</Button>
|
||||
<Button variant="danger-inverse" size="xlarge">
|
||||
<Button buttonType="danger" palette="inverse" size="xlarge">
|
||||
XLarge
|
||||
</Button>
|
||||
</div>
|
||||
@@ -330,28 +328,28 @@ export const AllVariants = {
|
||||
<div>
|
||||
<h3 className="text-white font-semibold mb-3">Disabled States</h3>
|
||||
<div className="space-x-4">
|
||||
<Button variant="filled" size="large" disabled>
|
||||
<Button buttonType="filled" palette="default" size="large" disabled>
|
||||
Filled Disabled
|
||||
</Button>
|
||||
<Button variant="filled-inverse" size="large" disabled>
|
||||
<Button buttonType="filled" palette="inverse" size="large" disabled>
|
||||
Filled Inverse Disabled
|
||||
</Button>
|
||||
<Button variant="outline" size="large" disabled>
|
||||
<Button buttonType="outline" palette="default" size="large" disabled>
|
||||
Outline Disabled
|
||||
</Button>
|
||||
<Button variant="outline-inverse" size="large" disabled>
|
||||
<Button buttonType="outline" palette="inverse" size="large" disabled>
|
||||
Outline Inverse Disabled
|
||||
</Button>
|
||||
<Button variant="ghost" size="large" disabled>
|
||||
<Button buttonType="ghost" palette="default" size="large" disabled>
|
||||
Ghost Disabled
|
||||
</Button>
|
||||
<Button variant="ghost-inverse" size="large" disabled>
|
||||
<Button buttonType="ghost" palette="inverse" size="large" disabled>
|
||||
Ghost Inverse Disabled
|
||||
</Button>
|
||||
<Button variant="danger" size="large" disabled>
|
||||
<Button buttonType="danger" palette="default" size="large" disabled>
|
||||
Danger Disabled
|
||||
</Button>
|
||||
<Button variant="danger-inverse" size="large" disabled>
|
||||
<Button buttonType="danger" palette="inverse" size="large" disabled>
|
||||
Danger Inverse Disabled
|
||||
</Button>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user