Skip to content

Commit 51d4980

Browse files
forestreamforestream
committed
Add color values
1 parent 6bec0a1 commit 51d4980

File tree

2 files changed

+66
-75
lines changed

2 files changed

+66
-75
lines changed

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

Lines changed: 2 additions & 59 deletions
Original file line numberDiff line numberDiff line change
@@ -41,6 +41,7 @@ export const Disabled: Story = {
4141
export const WithIcon: Story = {
4242
args: {
4343
placeholder: 'Input text',
44+
allowClear: true,
4445
icon: (
4546
<svg
4647
fill="none"
@@ -52,70 +53,12 @@ export const WithIcon: Story = {
5253
<path
5354
clipRule="evenodd"
5455
d="M14.5006 15.9949C13.445 16.6754 12.1959 17.069 10.8571 17.069C7.07005 17.069 4 13.9195 4 10.0345C4 6.14945 7.07005 3 10.8571 3C14.6442 3 17.7143 6.14945 17.7143 10.0345C17.7143 11.7044 17.1471 13.2384 16.1995 14.4448C16.2121 14.4567 16.2245 14.4688 16.2367 14.4813L19.6653 17.9986C20.1116 18.4564 20.1116 19.1988 19.6653 19.6566C19.2189 20.1145 18.4953 20.1145 18.049 19.6566L14.6204 16.1394C14.5761 16.0938 14.5361 16.0455 14.5006 15.9949ZM16.2143 10.0345C16.2143 13.1274 13.7799 15.569 10.8571 15.569C7.93435 15.569 5.5 13.1274 5.5 10.0345C5.5 6.94154 7.93435 4.5 10.8571 4.5C13.7799 4.5 16.2143 6.94154 16.2143 10.0345Z"
55-
fill="#8D8C9A"
56+
fill="currentColor"
5657
fillRule="evenodd"
5758
/>
5859
</svg>
5960
),
6061
},
6162
}
6263

63-
// export const WithForm: Story = {
64-
// args: {
65-
// children: 'Input text',
66-
// type: 'submit',
67-
// },
68-
// decorators: [
69-
// (Story, { args }: { args: Story['args'] }) => {
70-
// const [submitted, setSubmitted] = useState<{ text?: string }>({})
71-
// const [value, setValue] = useState('')
72-
// const [error, setError] = useState('')
73-
74-
// return (
75-
// <>
76-
// <div>{submitted.text}</div>
77-
// <form
78-
// onSubmit={(e) => {
79-
// e.preventDefault()
80-
// const formData = new FormData(e.target as HTMLFormElement)
81-
// const data = Object.fromEntries(formData)
82-
83-
// setSubmitted({
84-
// text: data.text as string,
85-
// })
86-
// }}
87-
// >
88-
// <input
89-
// className={css({
90-
// display: 'block',
91-
// mb: '10px',
92-
// })}
93-
// minLength={3}
94-
// name="text"
95-
// onChange={(e) => {
96-
// setValue(e.target.value)
97-
// setError(
98-
// !/[0-9]/.test(e.target.value) && e.target.value.length >= 3
99-
// ? 'Include one or more numbers.'
100-
// : '',
101-
// )
102-
// }}
103-
// placeholder="Include one or more numbers."
104-
// required
105-
// type="text"
106-
// />
107-
// <Story
108-
// args={{
109-
// ...args,
110-
// disabled: value.length < 3,
111-
// danger: !!error,
112-
// }}
113-
// />
114-
// </form>
115-
// </>
116-
// )
117-
// },
118-
// ],
119-
// }
120-
12164
export default meta

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

Lines changed: 64 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -7,14 +7,31 @@ import {
77
css,
88
DevupThemeTypography,
99
Input as DevupInput,
10+
Text,
1011
} from '@devup-ui/react'
1112
import { ComponentProps, useState } from 'react'
1213

13-
interface InputProps extends ComponentProps<'input'> {
14+
interface InputProps extends Omit<ComponentProps<'input'>, 'className'> {
1415
typography?: keyof DevupThemeTypography
1516
error?: boolean
1617
errorMessage?: string
1718
allowClear?: boolean
19+
classNames?: {
20+
input?: string
21+
icon?: string
22+
errorMessage?: string
23+
}
24+
colors?: {
25+
primary?: string
26+
error?: string
27+
text?: string
28+
base?: string
29+
iconBold?: string
30+
border?: string
31+
inputBackground?: string
32+
primaryFocus?: string
33+
negative20?: string
34+
}
1835
icon?: React.ReactNode
1936
}
2037

@@ -27,6 +44,9 @@ export function Input({
2744
errorMessage,
2845
allowClear = false,
2946
icon,
47+
colors,
48+
disabled,
49+
classNames,
3050
...props
3151
}: InputProps) {
3252
const [value, setValue] = useState(defaultValue ?? '')
@@ -36,7 +56,7 @@ export function Input({
3656
const handleClear = () => {
3757
setValue('')
3858
}
39-
const clearButtonVisible = value && !props.disabled
59+
const clearButtonVisible = value && !disabled
4060

4161
return (
4262
<Box
@@ -47,9 +67,15 @@ export function Input({
4767
{icon && (
4868
<Center
4969
boxSize="24px"
50-
color="$base"
70+
className={classNames?.icon}
71+
color={
72+
disabled
73+
? 'var(--inputDisabledText, light-dark(#D6D7DE, #373737))'
74+
: 'var(--iconBold, light-dark(#8D8C9A, #666577))'
75+
}
5176
left="12px"
5277
pos="absolute"
78+
styleOrder={1}
5379
top="50%"
5480
transform="translateY(-50%)"
5581
>
@@ -60,38 +86,46 @@ export function Input({
6086
_disabled={{
6187
selectors: {
6288
'&::placeholder': {
63-
color: '$inputDisabledText',
89+
color: 'var(--inputDisabledText, light-dark(#D6D7DE, #373737))',
6490
},
6591
},
66-
bg: '$inputDisabledBg',
67-
border: '1px solid $border',
68-
color: '$inputDisabledText',
92+
bg: 'var(--inputDisabledBg, light-dark(#F0F0F3, #414244))',
93+
border: '1px solid var(--border, light-dark(#E4E4E4, #434343))',
94+
color: 'var(--inputDisabledText, light-dark(#D6D7DE, #373737))',
6995
}}
7096
_focus={{
71-
bg: '$primaryBg',
72-
border: '1px solid $primary',
97+
bg: 'var(--primaryBg, light-dark(#F4F3FA, #F4F3FA0D))',
98+
border: '1px solid var(--primary, light-dark(#674DC7, #8163E1))',
7399
outline: 'none',
74100
}}
75101
_hover={{
76-
border: '1px solid $primary',
102+
border: '1px solid var(--primary, light-dark(red, blue))',
77103
}}
78-
bg="$inputBg"
79-
border={error ? '1px solid $error' : '1px solid $border'}
104+
bg="var(--inputBg, light-dark(#FFFFFF, #2E2E2E))"
105+
borderColor={
106+
error
107+
? 'var(--error, light-dark(#D52B2E, #FF5B5E))'
108+
: 'var(--border, light-dark(#E4E4E4, #434343))'
109+
}
80110
borderRadius="8px"
111+
borderStyle="solid"
112+
borderWidth="1px"
113+
className={classNames?.input}
114+
disabled={disabled}
81115
onChange={onChangeProp ?? handleChange}
82116
pl={icon ? '36px' : '12px'}
83117
pr={['36px', null, allowClear ? '36px' : '12px']}
84118
py="12px"
85119
selectors={{
86120
'&::placeholder': {
87-
color: '$inputPlaceholder',
121+
color: 'var(--inputPlaceholder, light-dark(#A9A8AB, #CBCBCB))',
88122
},
89123
}}
90124
styleOrder={1}
125+
styleVars={Object.assign({}, colors)}
91126
transition="all 0.1s ease-in-out"
92127
typography={typography}
93128
value={valueProp ?? value}
94-
w="200px"
95129
{...props}
96130
/>
97131
{clearButtonVisible && (
@@ -102,6 +136,20 @@ export function Input({
102136
onClick={handleClear}
103137
/>
104138
)}
139+
{errorMessage && (
140+
<Text
141+
bottom="-8px"
142+
className={classNames?.errorMessage}
143+
color="var(--error, light-dark(#D52B2E, #FF5B5E))"
144+
left="0"
145+
pos="absolute"
146+
styleOrder={1}
147+
transform="translateY(100%)"
148+
typography="inputPlaceholder"
149+
>
150+
{errorMessage}
151+
</Text>
152+
)}
105153
</Box>
106154
)
107155
}
@@ -110,11 +158,11 @@ export function ClearButton(props: ComponentProps<'button'>) {
110158
return (
111159
<Button
112160
alignItems="center"
113-
bg="$negative20"
161+
bg="var(--negative20, light-dark(#00000033, #FFFFFF66))"
114162
border="none"
115163
borderRadius="50%"
116164
boxSize="20px"
117-
color="$base"
165+
color="var(--base, light-dark(#FFF, #000))"
118166
cursor="pointer"
119167
display="flex"
120168
justifyContent="center"

0 commit comments

Comments
 (0)