Skip to content

Commit e1de67c

Browse files
forestreamforestream
committed
Update button component
1 parent e42cfa1 commit e1de67c

File tree

4 files changed

+158
-68
lines changed

4 files changed

+158
-68
lines changed

‎packages/components/package.json‎

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@
4949
},
5050
"devDependencies": {
5151
"@chromatic-com/storybook": "^3.2",
52-
"@devup-ui/react": "^0.1",
52+
"@devup-ui/react": "^1.0.5",
5353
"rollup-plugin-preserve-directives": "^0.4.0",
5454
"vite": "^7.0.0",
5555
"vite-plugin-dts": "^4.5.4",
@@ -63,7 +63,8 @@
6363
"@storybook/blocks": "^8.6",
6464
"@storybook/react": "^8.6",
6565
"@storybook/react-vite": "^8.6",
66-
"storybook": "^8.6"
66+
"storybook": "^8.6",
67+
"@devup-ui/vite-plugin": "^0.1"
6768
},
6869
"peerDependencies": {
6970
"react": "*",

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

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,5 +12,11 @@ export const Default = {
1212
children: 'Button Text',
1313
variant: 'default',
1414
disabled: false,
15+
colors: {
16+
primary: 'var(--primary)',
17+
error: 'var(--error)',
18+
},
19+
isError: false,
20+
size: 'm',
1521
},
1622
}

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

Lines changed: 126 additions & 62 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,13 @@
1-
import { Button as DevupButton } from '@devup-ui/react'
1+
import { Box, Button as DevupButton } from '@devup-ui/react'
22

33
type ButtonProps = React.ButtonHTMLAttributes<HTMLButtonElement> & {
44
variant?: 'primary' | 'default'
5+
colors?: {
6+
primary?: string
7+
error?: string
8+
}
9+
isError?: boolean
10+
size?: 's' | 'm'
511
}
612

713
/**
@@ -21,72 +27,130 @@ export function Button({
2127
variant = 'default',
2228
className = '',
2329
type = 'button',
30+
colors = {
31+
primary: 'var(--primary)',
32+
error: 'var(--error)',
33+
},
34+
isError = false,
35+
children,
36+
size = 'm',
2437
...props
2538
}: ButtonProps): React.ReactElement {
2639
const isPrimary = variant === 'primary'
40+
2741
return (
28-
<DevupButton
29-
_active={{
30-
bg: isPrimary
31-
? 'color-mix(in srgb, $primary 100%, #000 30%);'
32-
: 'color-mix(in srgb, $primary 20%, #FFF 80%); ',
33-
border: isPrimary ? undefined : '1px solid $primary',
34-
}}
35-
_disabled={{
36-
color: '#D6D7DE',
37-
bgColor: '#F0F0F3',
38-
cursor: 'not-allowed',
39-
borderColor: '$border',
40-
}}
41-
_focusVisible={{
42-
outline: '2px solid',
43-
outlineColor: isPrimary
44-
? 'color-mix(in srgb, $primary 80%, #000 20%)'
45-
: '$primary',
46-
}}
47-
_hover={{
48-
borderColor: '$primary',
49-
bg: isPrimary
50-
? 'color-mix(in srgb, $primary 100%, #000 15%);'
51-
: 'color-mix(in srgb, $primary 10%, #FFF 90%);',
52-
}}
53-
_themeDark={{
54-
_disabled: {
55-
color: '#555',
56-
bgColor: '#414244',
57-
cursor: 'not-allowed',
58-
borderColor: '$border',
59-
},
60-
_active: {
42+
<Box p="10px">
43+
<DevupButton
44+
_active={{
6145
bg: isPrimary
62-
? 'color-mix(in srgb, $primary 100%, #FFF 30%);'
63-
: 'color-mix(in srgb, $primary 30%, #000 70%);',
64-
border: isPrimary ? undefined : '1px solid $primary',
65-
},
66-
_hover: {
46+
? `color-mix(in srgb, var(--p, var(--primary, --fallback-white)) 100%, #000 30%);`
47+
: isError
48+
? 'var(--e, var(--error, --fallback-black))'
49+
: `color-mix(in srgb, var(--p, var(--primary, --fallback-black)) 20%, #FFF 80%);`,
50+
border:
51+
!isPrimary &&
52+
(isError
53+
? '1px solid var(--e, var(--error, --fallback-black))'
54+
: `1px solid var(--p, var(--primary, --fallback-black))`),
55+
color: !isPrimary && isError && '#000',
56+
}}
57+
_disabled={{
58+
color: '#D6D7DE',
59+
bgColor: '#F0F0F3',
60+
cursor: 'not-allowed',
61+
borderColor: isPrimary ? 'transparent' : '$border',
62+
}}
63+
_focusVisible={{
64+
outline: '2px solid',
65+
outlineColor:
66+
!isPrimary && isError
67+
? 'var(--e, var(--error, --fallback-black))'
68+
: '$primaryFocus',
69+
}}
70+
_hover={{
71+
borderColor: isError
72+
? 'var(--e, var(--error, --fallback-black))'
73+
: `var(--p, var(--primary, --fallback-black))`,
6774
bg: isPrimary
68-
? 'color-mix(in srgb, $primary 100%, #FFF 15%);'
69-
: 'color-mix(in srgb, $primary 20%, #000 80%);',
70-
},
71-
_focusVisible: {
72-
outlineColor: isPrimary
73-
? 'color-mix(in srgb, color-mix(in srgb, $primary 50%, #fff 50%) 90%, #fff 90%)'
74-
: '$primary',
75-
},
76-
}}
77-
bg={variant === 'primary' ? '$primary' : '$inputBg'}
78-
border="1px solid var(--border, #EEE)"
79-
borderRadius="8px"
80-
className={className}
81-
color={variant === 'primary' ? '#FFF' : '$text'}
82-
cursor="pointer"
83-
outlineOffset="2px"
84-
px="40px"
85-
py="12px"
86-
styleOrder={1}
87-
transition=".25s"
88-
type={type}
89-
{...props}
90-
/>
75+
? `color-mix(in srgb, var(--p, var(--primary, --fallback-white)) 100%, #000 15%)`
76+
: isError
77+
? '1px solid var(--e, var(--error, --fallback-black))'
78+
: `color-mix(in srgb, var(--p, var(--primary, --fallback-black)) 10%, #FFF 90%)`,
79+
}}
80+
_themeDark={{
81+
_disabled: {
82+
color: '#373737',
83+
bgColor: '#47474A',
84+
cursor: 'not-allowed',
85+
borderColor: 'transparent',
86+
},
87+
_active: {
88+
bg: isPrimary
89+
? `color-mix(in srgb, var(--p, var(--primary, --fallback-black)) 100%, #FFF 30%);`
90+
: isError
91+
? 'var(--e, var(--error, --fallback-black))'
92+
: 'var(--p, var(--primary, --fallback-white))',
93+
border:
94+
!isPrimary &&
95+
(isError
96+
? '1px solid var(--e, var(--error, --fallback-black))'
97+
: `1px solid var(--p, var(--primary, --fallback-white))`),
98+
color: !isPrimary && isError && '#FFF',
99+
},
100+
_hover: {
101+
bg: isPrimary
102+
? `color-mix(in srgb, var(--p, var(--primary, --fallback-black)) 100%, #FFF 15%);`
103+
: isError
104+
? '$inputBg'
105+
: `color-mix(in srgb, var(--p, var(--primary, --fallback-white)) 20%, #000 80%);`,
106+
},
107+
_focusVisible: {
108+
outlineColor: isPrimary
109+
? `var(--p, var(--primary, --fallback-white))`
110+
: isError
111+
? 'var(--e, var(--error, --fallback-black))'
112+
: '$primaryFocus',
113+
},
114+
}}
115+
bg={
116+
isPrimary ? 'var(--p, var(--primary, --fallback-black))' : '$inputBg'
117+
}
118+
border={isPrimary ? 'none' : '1px solid $border'}
119+
borderRadius={isPrimary ? '8px' : '10px'}
120+
className={className}
121+
color={
122+
isPrimary
123+
? '#FFF'
124+
: isError
125+
? 'var(--e, var(--error, --fallback-black))'
126+
: '$text'
127+
}
128+
cursor="pointer"
129+
outlineOffset="2px"
130+
px="40px"
131+
py="12px"
132+
styleOrder={1}
133+
styleVars={{
134+
'--p': colors.primary ?? 'var(--primary)',
135+
'--e': colors.error ?? 'var(--error)',
136+
'--fallback-white': '#FFF',
137+
'--fallback-black': '#000',
138+
}}
139+
transition=".25s"
140+
type={type}
141+
typography={
142+
isPrimary
143+
? size === 's'
144+
? 'buttonS'
145+
: 'buttonM'
146+
: isError
147+
? 'inputBold'
148+
: 'buttonxs'
149+
}
150+
{...props}
151+
>
152+
{children}
153+
</DevupButton>
154+
</Box>
91155
)
92156
}

‎pnpm-lock.yaml‎

Lines changed: 23 additions & 4 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)