Skip to content

Commit b10abf8

Browse files
forestreamforestream
committed
Fix button comp
1 parent 709ac9a commit b10abf8

File tree

2 files changed

+173
-158
lines changed

2 files changed

+173
-158
lines changed

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -22,6 +22,7 @@ const meta: Meta<typeof Button> = {
2222
export const Default: Story = {
2323
args: {
2424
children: 'Button Text',
25+
disabled: false,
2526
},
2627
}
2728

‎packages/components/src/components/Button/index.tsx‎

Lines changed: 172 additions & 158 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,11 @@
1-
import { Box, Button as DevupButton, Center, css } from '@devup-ui/react'
2-
import clsx from 'clsx'
1+
import {
2+
Box,
3+
Button as DevupButton,
4+
Center,
5+
css,
6+
type DevupThemeTypography,
7+
} from '@devup-ui/react'
8+
import { clsx } from 'clsx'
39

410
type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
511
variant?: 'primary' | 'default'
@@ -8,134 +14,16 @@ type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
814
error?: string
915
text?: string
1016
border?: string
11-
inputBg?: string
17+
inputBackground?: string
1218
primaryFocus?: string
13-
white?: string
1419
}
20+
typography?: keyof DevupThemeTypography
1521
isError?: boolean
16-
size?: 'sm' | 'md'
22+
size?: 'sm' | 'md' | 'lg'
1723
icon?: React.ReactNode
1824
ellipsis?: boolean
1925
}
2026

21-
const variants = {
22-
primary: css({
23-
styleOrder: 2,
24-
_active: {
25-
bg: `color-mix(in srgb, var(--primary, #674DC7) 100%, #000 30%)`,
26-
},
27-
_disabled: {
28-
color: '#D6D7DE',
29-
bgColor: '#F0F0F3',
30-
cursor: 'not-allowed',
31-
},
32-
_hover: {
33-
bg: `color-mix(in srgb, var(--primary, #674DC7) 100%, #000 15%)`,
34-
},
35-
_themeDark: {
36-
_active: {
37-
bg: `color-mix(in srgb, var(--primary, #8163E1) 100%, #FFF 30%);`,
38-
},
39-
_disabled: {
40-
color: '#373737',
41-
bgColor: '#47474A',
42-
cursor: 'not-allowed',
43-
borderColor: 'transparent',
44-
},
45-
_hover: {
46-
bg: `color-mix(in srgb, var(--primary, #8163E1) 100%, #FFF 15%);`,
47-
outlineColor: `var(--primary, #674DC7)`,
48-
},
49-
},
50-
border: 'none',
51-
borderRadius: '8px',
52-
bg: 'var(--primary, #8163E1)',
53-
color: 'var(--white, #FFF)',
54-
}),
55-
default: css({
56-
styleOrder: 2,
57-
_active: {
58-
bg: `color-mix(in srgb, var(--primary, #8163E1) 20%, #FFF 80%)`,
59-
border: `1px solid var(--primary, #8163E1)`,
60-
color: '#000',
61-
},
62-
_hover: {
63-
borderColor: `var(--primary, #8163E1)`,
64-
bg: `color-mix(in srgb, var(--primary, #8163E1) 10%, #FFF 90%)`,
65-
},
66-
_disabled: {
67-
color: '#D6D7DE',
68-
bgColor: '#F0F0F3',
69-
cursor: 'not-allowed',
70-
borderColor: 'var(--border, #E4E4E4)',
71-
},
72-
bg: 'var(--inputBg, #FFF)',
73-
border: '1px solid var(--border, #E4E4E4)',
74-
typography: 'buttonxs',
75-
borderRadius: '10px',
76-
_themeDark: {
77-
_disabled: {
78-
color: '#373737',
79-
bgColor: '#47474A',
80-
cursor: 'not-allowed',
81-
borderColor: 'transparent',
82-
},
83-
_hover: {
84-
borderColor: `var(--primary, #8163E1)`,
85-
bg: `color-mix(in srgb, var(--primary, #674DC7) 10%, var(--inputBg, #2E2E2E) 90%)`,
86-
},
87-
_active: {
88-
bg: 'var(--primary, #8163E1)',
89-
color: 'var(--text, #F6F6F6)',
90-
},
91-
},
92-
}),
93-
}
94-
95-
const errorClassNames = css({
96-
styleOrder: 3,
97-
color: 'var(--error, #D52B2E)',
98-
_active: {
99-
bg: 'var(--error, #D52B2E)',
100-
border: '1px solid var(--error, #D52B2E)',
101-
color: '#000',
102-
},
103-
_focusVisible: {
104-
outlineColor: 'var(--error, #D52B2E)',
105-
},
106-
_hover: {
107-
bg: 'inherit',
108-
border: '1px solid var(--error, #D52B2E)',
109-
},
110-
_disabled: {
111-
color: '#D6D7DE',
112-
bgColor: '#F0F0F3',
113-
cursor: 'not-allowed',
114-
borderColor: 'var(--border, #E4E4E4)',
115-
},
116-
_themeDark: {
117-
_disabled: {
118-
color: '#373737',
119-
bgColor: '#47474A',
120-
cursor: 'not-allowed',
121-
borderColor: 'transparent',
122-
},
123-
_active: {
124-
bg: 'var(--error, #FF5B5E)',
125-
border: '1px solid var(--error, #FF5B5E)',
126-
color: '#FFF',
127-
},
128-
_hover: {
129-
bg: 'var(--inputBg, #2E2E2E)',
130-
borderColor: 'var(--error, #FF5B5E)',
131-
},
132-
_focusVisible: {
133-
outlineColor: 'var(--error, #FF5B5E)',
134-
},
135-
},
136-
typography: 'inputBold',
137-
})
138-
13927
const buttonTextEllipsis = css({
14028
overflow: 'hidden',
14129
textOverflow: 'ellipsis',
@@ -152,66 +40,192 @@ export function Button({
15240
className,
15341
icon,
15442
ellipsis = false,
43+
typography,
44+
disabled,
15545
...props
15646
}: ButtonProps): React.ReactElement {
157-
const isPrimary = variant === 'primary'
158-
15947
return (
16048
<DevupButton
161-
_disabled={{
162-
color: '#D6D7DE',
163-
bgColor: '#F0F0F3',
164-
cursor: 'not-allowed',
165-
}}
49+
_active={
50+
{
51+
primary: {
52+
bg: `color-mix(in srgb, var(--primary, #674DC7) 100%, #000 30%)`,
53+
},
54+
default: {
55+
bg: {
56+
true: 'var(--error, #D52B2E)',
57+
false: `color-mix(in srgb, var(--primary, #8163E1) 20%, #FFF 80%)`,
58+
}[isError.toString()],
59+
border: {
60+
true: '1px solid var(--error, #D52B2E)',
61+
false: '1px solid var(--primary, #8163E1)',
62+
}[isError.toString()],
63+
color: '#000',
64+
},
65+
}[variant]
66+
}
67+
_disabled={
68+
{
69+
primary: {
70+
color: '#D6D7DE',
71+
bgColor: '#F0F0F3',
72+
cursor: 'not-allowed',
73+
},
74+
default: {
75+
color: '#D6D7DE',
76+
bgColor: '#F0F0F3',
77+
cursor: 'not-allowed',
78+
borderColor: 'var(--border, #E4E4E4)',
79+
},
80+
}[variant]
81+
}
16682
_focusVisible={{
16783
outline: '2px solid',
168-
outlineColor: 'var(--primaryFocus, #9385D3)',
84+
outlineColor: {
85+
primary: 'var(--primaryFocus, #9385D3)',
86+
default: {
87+
true: 'var(--error, #FF5B5E)',
88+
false: 'var(--primaryFocus, #9385D3)',
89+
}[isError.toString()],
90+
}[variant],
16991
}}
92+
_hover={
93+
{
94+
primary: {
95+
bg: `color-mix(in srgb, var(--primary, #674DC7) 100%, #000 15%)`,
96+
},
97+
default: {
98+
borderColor: {
99+
true: 'var(--error, #D52B2E)',
100+
false: 'var(--primary, #8163E1)',
101+
}[isError.toString()],
102+
bg:
103+
!isError &&
104+
`color-mix(in srgb, var(--primary, #8163E1) 10%, #FFF 90%)`,
105+
},
106+
}[variant]
107+
}
170108
_themeDark={{
109+
_active: {
110+
primary: {
111+
bg: `color-mix(in srgb, var(--primary, #8163E1) 100%, #FFF 30%);`,
112+
},
113+
default: {
114+
bg: {
115+
true: 'var(--error, #FF5B5E)',
116+
false: 'var(--primary, #8163E1)',
117+
}[isError.toString()],
118+
color: 'var(--text, #F6F6F6)',
119+
},
120+
}[variant],
171121
_disabled: {
172-
color: '#373737',
173-
bgColor: '#47474A',
174-
cursor: 'not-allowed',
175-
borderColor: 'transparent',
176-
},
122+
primary: {
123+
color: '#373737',
124+
bgColor: '#47474A',
125+
borderColor: 'transparent',
126+
},
127+
default: {
128+
color: '#373737',
129+
bgColor: '#47474A',
130+
borderColor: 'transparent',
131+
},
132+
}[variant],
133+
_hover: {
134+
primary: {
135+
bg: `color-mix(in srgb, var(--primary, #8163E1) 100%, #FFF 15%);`,
136+
outlineColor: `var(--primary, #674DC7)`,
137+
},
138+
default: {
139+
borderColor: {
140+
true: 'var(--error, #FF5B5E)',
141+
false: 'var(--primary, #8163E1)',
142+
}[isError.toString()],
143+
bg:
144+
!isError &&
145+
`color-mix(in srgb, var(--primary, #674DC7) 10%, var(--inputBackground, #2E2E2E) 90%)`,
146+
},
147+
}[variant],
177148
_focusVisible: {
178-
outlineColor: 'var(--primaryFocus, #927CE4)',
149+
outlineColor: {
150+
primary: 'var(--primaryFocus, #927CE4)',
151+
default: {
152+
true: 'var(--error, #D52B2E)',
153+
false: 'var(--primaryFocus, #927CE4)',
154+
}[isError.toString()],
155+
}[variant],
179156
},
157+
bg: {
158+
primary: 'var(--primary, #8163E1)',
159+
default: 'var(--inputBackground, #2E2E2E)',
160+
}[variant],
180161
}}
181-
aria-disabled={props.disabled}
162+
aria-disabled={disabled}
182163
aria-label="button"
164+
bg={
165+
{
166+
primary: 'var(--primary, #8163E1)',
167+
default: 'var(--inputBackground, #FFF)',
168+
}[variant]
169+
}
170+
border={
171+
{
172+
primary: 'none',
173+
default: '1px solid var(--border, #E4E4E4)',
174+
}[variant]
175+
}
176+
borderRadius={
177+
{
178+
primary: '8px',
179+
default: '10px',
180+
}[variant]
181+
}
183182
boxSizing="border-box"
184-
className={clsx(
185-
variants[variant],
186-
isError && variant === 'default' && errorClassNames,
187-
className,
188-
)}
189-
color="var(--text, #272727)"
183+
className={className}
184+
color={
185+
{
186+
primary: '#FFF',
187+
default: {
188+
true: 'var(--error, #D52B2E)',
189+
false: 'var(--text, #272727)',
190+
}[isError.toString()],
191+
}[variant]
192+
}
190193
cursor="pointer"
194+
disabled={disabled}
195+
fontSize={
196+
{
197+
default: ['14px', null, null, null, '15px'],
198+
primary: ['15px', null, null, null, '16px'],
199+
}[variant]
200+
}
201+
fontWeight={700}
202+
letterSpacing={
203+
{
204+
default: ['-0.02em', null, null, null, '-0.03em'],
205+
primary: ['0px', null, null, null, '-0.01em'],
206+
}[variant]
207+
}
191208
outlineOffset="2px"
192209
pos="relative"
193-
px="40px"
194-
py="12px"
210+
px={
211+
{
212+
false: { sm: '12px', md: '16px', lg: '20px' }[size],
213+
true: { sm: '24px', md: '28px', lg: '32px' }[size],
214+
}[(!!icon).toString()]
215+
}
216+
py={{ sm: '8px', md: '10px', lg: '12px' }[size]}
195217
styleOrder={1}
196218
styleVars={{
197219
primary: colors?.primary,
198220
error: colors?.error,
199221
text: colors?.text,
200222
border: colors?.border,
201-
inputBg: colors?.inputBg,
223+
inputBackground: colors?.inputBackground,
202224
primaryFocus: colors?.primaryFocus,
203-
white: colors?.white,
204225
}}
205226
transition=".25s"
206227
type={type}
207-
typography={
208-
isPrimary
209-
? {
210-
sm: 'buttonS',
211-
md: 'buttonM',
212-
}[size]
213-
: undefined
214-
}
228+
typography={typography}
215229
{...props}
216230
>
217231
<Box maxW="100%" mx="auto" pos="relative" w="fit-content">
@@ -234,8 +248,8 @@ export function Button({
234248
)}
235249
<Box
236250
className={clsx(ellipsis && buttonTextEllipsis)}
237-
lineHeight="1em"
238-
minH="1em"
251+
lineHeight="1.2"
252+
minH="1.2em"
239253
transform={!!icon && 'translateX(8px)'}
240254
>
241255
{children}

0 commit comments

Comments
 (0)