Skip to content

Commit d2852ab

Browse files
RomanPogorovRomanPogorov
committed
Buttons updated
1 parent 3680241 commit d2852ab

2 files changed

Lines changed: 89 additions & 23 deletions

File tree

‎packages/react-components/src/components/ui/button.tsx‎

Lines changed: 29 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -9,26 +9,43 @@ const buttonVariants = cva(
99
{
1010
variants: {
1111
size: {
12-
regular: "py-2 px-6 typo-label",
13-
small: "py-1 px-2 text-xs gap-1",
12+
regular: "py-2 px-4 typo-label",
13+
small: "px-2 py-1 typo-button-label-xs gap-1",
1414
},
1515
variant: {
1616
primary:
1717
"bg-bg-link text-text-primary_on-brand shadow-xs hover:bg-bg-link_hover active:bg-bg-link disabled:bg-bg-disabled",
1818
outline:
1919
"border border-border-primary bg-bg-primary text-text-tertiary shadow-xs hover:bg-bg-tertiary hover:text-fg-primary disabled:text-fg-disabled disabled:border-border-disabled",
20-
critical:
21-
"bg-bg-error-primary_inverse text-text-primary_on-brand shadow-xs hover:bg-bg-error-primary_inverse_hover active:bg-bg-error-primary_inverse disabled:bg-bg-disabled",
22-
criticalInverse:
23-
"border typo-button-label-xs bg-transparent border-border-error_inverse text-text-primary_on-brand hover:border-border-error_inverse_hover disabled:text-text-error-secondary active:border-border-error_inverse disabled:bg-bg-error-primary_inverse",
24-
link: "text-text-tertiary hover:text-text-primary active:text-text-tertiary ",
25-
ghost:
26-
"hover:bg-accent hover:text-accent-foreground dark:hover:bg-accent/50",
20+
link: "text-text-secondary hover:text-text-primary disabled:text-text-disabled",
21+
},
22+
danger: {
23+
true: "",
24+
false: "",
2725
},
2826
},
27+
compoundVariants: [
28+
{
29+
variant: "primary",
30+
danger: true,
31+
class:
32+
"bg-bg-error-primary_inverse text-text-primary_on-brand hover:bg-bg-error-primary_inverse_hover active:bg-bg-error-primary_inverse disabled:bg-bg-disabled",
33+
},
34+
{
35+
variant: "outline",
36+
danger: true,
37+
class: "border-border-error text-text-error-primary",
38+
},
39+
{
40+
variant: "link",
41+
danger: true,
42+
class: "text-text-error-secondary hover:text-text-error-primary",
43+
},
44+
],
2945
defaultVariants: {
3046
variant: "primary",
3147
size: "regular",
48+
danger: false,
3249
},
3350
}
3451
);
@@ -37,19 +54,20 @@ function Button({
3754
className,
3855
variant,
3956
size,
40-
57+
danger = false,
4158
asChild = false,
4259
...props
4360
}: React.ComponentProps<"button"> &
4461
VariantProps<typeof buttonVariants> & {
4562
asChild?: boolean;
63+
danger?: boolean;
4664
}) {
4765
const Comp = asChild ? Slot : "button";
4866

4967
return (
5068
<Comp
5169
data-slot="button"
52-
className={cn(buttonVariants({ variant, size, className }))}
70+
className={cn(buttonVariants({ variant, size, danger, className }))}
5371
{...props}
5472
/>
5573
);

‎packages/react-components/src/stories/Button.stories.tsx‎

Lines changed: 60 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
import type { Meta, StoryObj } from "@storybook/react-vite";
22
import { Button } from "@/components/ui/button";
3-
import { ChevronRight, Trash, Trash2 } from "lucide-react";
4-
import * as React from "react";
3+
import { Trash2 } from "lucide-react";
54

65
const meta = {
76
title: "Components/Button",
@@ -14,16 +13,12 @@ const meta = {
1413
disabled: {
1514
control: "boolean",
1615
},
16+
danger: {
17+
control: "boolean",
18+
},
1719
variant: {
1820
control: "select",
19-
options: [
20-
"primary",
21-
"critical",
22-
"outline",
23-
"ghost",
24-
"link",
25-
"criticalInverse",
26-
],
21+
options: ["primary", "outline", "link"],
2722
},
2823

2924
size: {
@@ -41,10 +36,11 @@ export const Default: Story = {
4136
variant: "primary",
4237
size: "regular",
4338
disabled: false,
39+
danger: false,
4440
},
4541
render: (args) => (
4642
<div
47-
className={`p-6 ${args.variant === "criticalInverse" ? "bg-red-700" : "bg-white"} flex justify-center items-center rounded-lg p-10 shadow-sm gap-4`}
43+
className={`bg-white flex justify-center items-center rounded-lg p-10 shadow-sm gap-4`}
4844
>
4945
<Button {...args}>Save</Button>
5046
<Button {...args}>
@@ -71,7 +67,8 @@ export const AllVariants: Story = {
7167
</div>
7268
</div>
7369

74-
{["primary", "critical", "outline", "ghost"].map((variant) => (
70+
{/* normal variants */}
71+
{(["primary", "outline", "link"] as const).map((variant) => (
7572
<div className="flex gap-3 items-center py-3 ">
7673
<div className="w-30"> {variant} </div>
7774
<div key={variant} className="flex gap-3 items-center w-100">
@@ -110,6 +107,57 @@ export const AllVariants: Story = {
110107
</div>
111108
</div>
112109
))}
110+
111+
{/* danger variants */}
112+
<div className="flex items-center gap-3 py-3 border-b border-gray-200 mt-8 mb-4">
113+
<div className="w-30">Variant (danger)</div>
114+
<div className="min-w-100 text-sm font-medium text-gray-600">
115+
Without icon
116+
</div>
117+
<div className="min-w-100 text-sm font-medium text-gray-600">
118+
With icon
119+
</div>
120+
</div>
121+
{(["primary", "outline", "link"] as const).map((variant) => (
122+
<div className="flex gap-3 items-center py-3 ">
123+
<div className="w-30"> {variant} </div>
124+
<div
125+
key={`danger-${variant}`}
126+
className="flex gap-3 items-center w-100"
127+
>
128+
<Button variant={variant} danger>
129+
Button
130+
</Button>
131+
<Button variant={variant} danger disabled>
132+
Button
133+
</Button>
134+
<Button variant={variant} size="small" danger>
135+
Button
136+
</Button>
137+
<Button variant={variant} size="small" danger disabled>
138+
Button
139+
</Button>
140+
</div>
141+
142+
<div
143+
key={`danger-icons-${variant}`}
144+
className="flex gap-3 items-center w-100"
145+
>
146+
<Button variant={variant} danger>
147+
<Trash2 /> Button
148+
</Button>
149+
<Button variant={variant} danger disabled>
150+
<Trash2 /> Button
151+
</Button>
152+
<Button variant={variant} danger size="small">
153+
<Trash2 /> Button
154+
</Button>
155+
<Button variant={variant} danger size="small" disabled>
156+
<Trash2 /> Button
157+
</Button>
158+
</div>
159+
</div>
160+
))}
113161
</div>
114162
</div>
115163
),

0 commit comments

Comments
 (0)