Skip to content

Commit 02b3277

Browse files
AitemAitem
committed
Buttons final
1 parent 4a5e1b2 commit 02b3277

2 files changed

Lines changed: 47 additions & 106 deletions

File tree

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

Lines changed: 10 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -9,17 +9,17 @@ const buttonVariants = cva(
99
{
1010
variants: {
1111
size: {
12-
regular: "py-2 px-4 typo-label",
13-
small: "px-2 py-1 typo-button-label-xs gap-1",
12+
regular: "h-9 px-4 typo-label",
13+
small: "h-6 px-2 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:
19-
"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",
19+
"border border-border-primary bg-bg-primary text-text-tertiary shadow-xs hover:text-fg-primary disabled:text-fg-disabled disabled:border-border-disabled hover:bg-bg-secondary active:bg-bg-primary active:text-text-tertiary disabled:hover:bg-bg-primary",
2020
link: "text-text-secondary hover:text-text-primary disabled:text-text-disabled",
2121
ghost:
22-
"text-text-secondary hover:text-text-primary disabled:text-text-disabled",
22+
"text-text-secondary hover:text-text-primary disabled:text-text-disabled hover:bg-bg-secondary active:bg-bg-tertiary disabled:hover:bg-bg-primary",
2323
},
2424
danger: {
2525
true: "",
@@ -36,13 +36,18 @@ const buttonVariants = cva(
3636
{
3737
variant: "outline",
3838
danger: true,
39-
class: "border-border-error text-text-error-primary",
39+
class: "border-border-error text-text-error-primary hover:text-text-error-primary_hover hover:bg-bg-error-secondary active:bg-bg-primary active:text-text-error-primary_on-brand",
4040
},
4141
{
4242
variant: "link",
4343
danger: true,
4444
class: "text-text-error-secondary hover:text-text-error-primary",
4545
},
46+
{
47+
variant: "ghost",
48+
danger: true,
49+
class: "text-text-error-secondary hover:text-text-error-primary hover:bg-bg-error-secondary active:bg-bg-error-tertiary",
50+
},
4651
],
4752
defaultVariants: {
4853
variant: "primary",

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

Lines changed: 37 additions & 101 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import type { Meta, StoryObj } from "@storybook/react-vite";
22
import { Button } from "@/components/ui/button";
3-
import { Trash2 } from "lucide-react";
3+
import { Trash2, Play } from "lucide-react";
4+
import { Badge } from "@/components/ui/badge";
45

56
const meta = {
67
title: "Components/Button",
@@ -18,7 +19,7 @@ const meta = {
1819
},
1920
variant: {
2021
control: "select",
21-
options: ["primary", "outline", "link"],
22+
options: ["primary", "outline", "link", "ghost"],
2223
},
2324

2425
size: {
@@ -53,115 +54,50 @@ export const Default: Story = {
5354

5455
export const AllVariants: Story = {
5556
render: () => (
56-
<div className="p-6 min-h-screen">
57-
<div className=" rounded-lg p-6 shadow-sm">
57+
<div className="p-6 min-h-screen flex justify-center items-center">
58+
<div className=" rounded-lg p-6 shadow-sm w-280">
5859
{/* Header */}
59-
<div className="flex items-center gap-3 py-3 border-b border-gray-200 mb-4">
60-
<div className="w-30">Variant</div>
61-
<div className="min-w-100 text-sm font-medium text-gray-600">
62-
{" "}
63-
Without icon{" "}
64-
</div>
65-
<div className="min-w-100 text-sm font-medium text-gray-600">
66-
With icon
67-
</div>
68-
</div>
6960

70-
{/* normal variants */}
71-
{(["primary", "outline", "link"] as const).map((variant) => (
72-
<div className="flex gap-3 items-center py-3 ">
73-
<div className="w-30"> {variant} </div>
74-
<div key={variant} className="flex gap-3 items-center w-100">
75-
<Button variant={variant}> Button </Button>
76-
<Button variant={variant} disabled>
77-
{" "}
78-
Button{" "}
79-
</Button>
80-
<Button variant={variant} size="small">
81-
{" "}
82-
Button{" "}
83-
</Button>
84-
<Button variant={variant} size="small" disabled>
85-
{" "}
86-
Button{" "}
87-
</Button>
88-
</div>
61+
<div className="flex items-center mb-4 justify-between">
62+
<div className="w-40 text-center" >Variants</div>
63+
<div className="w-70 text-center text-sm text-text-secondary" >Danger: <Badge variant="outline" className="text-xs">false</Badge></div>
64+
<div className="w-70 text-center text-sm text-text-secondary" >Danger: <Badge variant="outline" className="text-xs">true</Badge></div>
65+
<div className="w-70 text-center text-sm text-text-secondary" >Disabled: <Badge variant="outline" className="text-xs">true</Badge></div>
66+
</div>
8967

90-
<div key={variant} className="flex gap-3 items-center w-100">
91-
<Button variant={variant}>
92-
{" "}
93-
<Trash2 /> Button{" "}
94-
</Button>
95-
<Button variant={variant} disabled>
96-
{" "}
97-
<Trash2 /> Button{" "}
98-
</Button>
99-
<Button variant={variant} size="small">
100-
{" "}
101-
<Trash2 /> Button{" "}
102-
</Button>
103-
<Button variant={variant} size="small" disabled>
104-
{" "}
105-
<Trash2 /> Button{" "}
106-
</Button>
107-
</div>
68+
{(["regular", "small"] as const).map((size) => (
69+
<div className=" items-center gap-3 py-3 border-gray-l00 border-t border-border-separator" key={size}>
70+
{(["primary", "outline", "ghost", "link"] as const).map((variant) => (
71+
<div key={variant} className="flex gap-3 items-center py-2 justify-between">
72+
<div className="w-40 text-sm text-text-secondary" >
73+
<div className="flex mb-1"> <div className="w-15">Variant:</div> <Badge variant="outline" className="text-xs">{variant}</Badge> </div>
74+
<div className="flex"> <div className="w-15">Size:</div> <Badge variant="outline" className="text-xs">{size}</Badge> </div>
75+
</div>
76+
<div className="w-70 flex gap-3 justify-center">
77+
<Button size={size} variant={variant}> Button </Button>
78+
<Button size={size} variant={variant}> <Play /> Button </Button>
79+
<Button size={size} variant={variant}> <Play /> </Button>
80+
</div>
81+
<div className="w-70 flex gap-3 justify-center">
82+
<Button size={size} variant={variant} danger> Button </Button>
83+
<Button size={size} variant={variant} danger> <Play /> Button </Button>
84+
<Button size={size} variant={variant} danger> <Play /> </Button>
85+
</div>
86+
<div className="w-70 flex gap-3 justify-center">
87+
<Button size={size} variant={variant} disabled> Button </Button>
88+
<Button size={size} variant={variant} disabled> <Play /> Button </Button>
89+
<Button size={size} variant={variant} disabled> <Play /> </Button>
90+
</div>
91+
</div>
92+
))}
10893
</div>
10994
))}
11095

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>
14196

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-
))}
16197
</div>
16298
</div>
16399
),
164100
parameters: {
165-
layout: "fullscreen",
101+
layout: "centered",
166102
},
167103
};

0 commit comments

Comments
 (0)