Skip to content

Commit ffc4535

Browse files
belltalionbelltalion
authored
Merge pull request #302 from forestream/fix-input
Fix input
2 parents 541be39 + 0ef7821 commit ffc4535

File tree

12 files changed

+78
-26
lines changed

12 files changed

+78
-26
lines changed

‎.changeset/rotten-bananas-send.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
"@devup-ui/components": patch
3+
---
4+
5+
Fix Input, Select, Stepper

‎packages/components/src/components/Input/__tests__/__snapshots__/index.browser.test.tsx.snap‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -63,7 +63,7 @@ exports[`Input > should pass className prop to error message component 1`] = `
6363
>
6464
<input
6565
aria-label="input"
66-
class=" color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-7704306251139592248-1 background-0-var(--inputDisabledBg,light-dark(#F0F0F3,#414244))-14172363753176421546-1 border-0-1px solid var(--border,light-dark(#E4E4E4,#434343))-14172363753176421546-1 color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-14172363753176421546-1 background-0-var(--primaryBg,light-dark(#F4F3FA,#F4F3FA0D))-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(#674DC7,#8163E1))-16231282139879731451-1 outline-0-none-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(#674DC7,#8163E1))-8380715471663921674-1 color-0-var(--inputPlaceholder,light-dark(#A9A8AB,#CBCBCB))-15878565022192187906-1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-radius-0-8px--1 border-style-0-solid--1 border-width-0-1px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 transition-0-all .1s ease-in-out--1 border-color-0-var(--border,light-dark(#E4E4E4,#434343))--1 padding-left-0-12px--1 padding-right-0-36px--1 "
66+
class=" color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-7704306251139592248-1 background-0-var(--inputDisabledBg,light-dark(#F0F0F3,#414244))-14172363753176421546-1 border-0-1px solid var(--border,light-dark(#E4E4E4,#434343))-14172363753176421546-1 color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-14172363753176421546-1 background-0-var(--primaryBg,light-dark(#F4F3FA,#F4F3FA0D))-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(#674DC7,#8163E1))-16231282139879731451-1 outline-0-none-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(#674DC7,#8163E1))-8380715471663921674-1 color-0-var(--inputPlaceholder,light-dark(#A9A8AB,#CBCBCB))-15878565022192187906-1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-radius-0-8px--1 border-style-0-solid--1 border-width-0-1px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 transition-0-all .1s ease-in-out--1 border-color-0-var(--error,light-dark(#D52B2E,#FF5B5E))--1 padding-left-0-12px--1 padding-right-0-36px--1 "
6767
value=""
6868
/>
6969
<span

‎packages/components/src/components/Input/__tests__/index.browser.test.tsx‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -72,7 +72,7 @@ describe('Input', () => {
7272
})
7373

7474
it('should be able to render with error message', () => {
75-
const { container } = render(<Input errorMessage="Error message" />)
75+
const { container } = render(<Input error errorMessage="Error message" />)
7676
expect(
7777
container.querySelector('[aria-label="error-message"]'),
7878
).toBeInTheDocument()
@@ -110,6 +110,7 @@ describe('Input', () => {
110110
classNames={{
111111
errorMessage: 'error-message',
112112
}}
113+
error
113114
errorMessage="Error message"
114115
/>,
115116
)

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -146,7 +146,7 @@ export function Input({
146146
{...props}
147147
/>
148148
{clearButtonVisible && <ClearButton onClick={handleClear} />}
149-
{errorMessage && (
149+
{error && errorMessage && (
150150
<Text
151151
aria-label="error-message"
152152
bottom="-8px"

‎packages/components/src/components/Select/IconCheck.tsx‎

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,6 @@ import { ComponentProps } from 'react'
33
export function IconCheck({ ...props }: ComponentProps<'svg'>) {
44
return (
55
<svg
6-
color="white"
76
fill="none"
87
height="10"
98
viewBox="0 0 12 10"

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -49,7 +49,7 @@ function DefaultComponent(
4949
props: Omit<ComponentProps<typeof Select>, 'children'>,
5050
) {
5151
return (
52-
<Select {...props} onValueChange={() => {}}>
52+
<Select {...props} defaultValue={['Option 1']} onValueChange={() => {}}>
5353
<SelectTrigger>Select</SelectTrigger>
5454
<SelectContainer>
5555
<SelectOption disabled value="Option 1">

‎packages/components/src/components/Select/__tests__/index.browser.test.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -260,6 +260,25 @@ describe('Select', () => {
260260
})
261261
})
262262

263+
it('should have disabled check color when type is checkbox and the option is disabled', () => {
264+
const { container } = render(
265+
<Select defaultValue={['Option 1']} type="checkbox">
266+
<SelectTrigger>Select</SelectTrigger>
267+
<SelectContainer>
268+
<SelectOption disabled value="Option 1">
269+
Option 1
270+
</SelectOption>
271+
</SelectContainer>
272+
</Select>,
273+
)
274+
const selectToggle = container.querySelector('[aria-label="Select toggle"]')
275+
fireEvent.click(selectToggle!)
276+
const option1 = container.querySelector('[data-value="Option 1"]')
277+
expect(option1?.querySelector('svg')).toHaveClass(
278+
'color-0-var(--inputDisabledText,light-dark(#E5E5E5,#373737))--255',
279+
)
280+
})
281+
263282
it('should show confirm button when type is checkbox and showConfirmButton is true', () => {
264283
const { container } = render(
265284
<Select type="checkbox">

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

Lines changed: 16 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -50,6 +50,8 @@ interface SelectProps extends ComponentProps<'div'> {
5050
primary?: string
5151
border?: string
5252
inputBackground?: string
53+
inputDisabledBackground?: string
54+
inputDisabledText?: string
5355
base10?: string
5456
title?: string
5557
selectDisabled?: string
@@ -134,6 +136,8 @@ export function Select({
134136
title: colors?.title,
135137
selectDisabled: colors?.selectDisabled,
136138
primaryBg: colors?.primaryBg,
139+
inputDisabledBackground: colors?.inputDisabledBackground,
140+
inputDisabledText: colors?.inputDisabledText,
137141
}}
138142
typography={typography}
139143
{...props}
@@ -193,10 +197,12 @@ export function SelectTrigger({
193197

194198
interface SelectContainerProps extends ComponentProps<'div'> {
195199
showConfirmButton?: boolean
200+
confirmButtonText?: string
196201
}
197202
export function SelectContainer({
198203
children,
199204
showConfirmButton,
205+
confirmButtonText = '완료',
200206
...props
201207
}: SelectContainerProps) {
202208
const { open, setOpen, type } = useSelect()
@@ -238,7 +244,7 @@ export function SelectContainer({
238244
onClick={() => setOpen(false)}
239245
variant="primary"
240246
>
241-
완료
247+
{confirmButtonText}
242248
</Button>
243249
</Flex>
244250
)}
@@ -300,7 +306,7 @@ export function SelectOption({
300306
}
301307
}
302308
alignItems="center"
303-
borderRadius="8px"
309+
borderRadius="6px"
304310
color={
305311
disabled
306312
? 'var(--selectDisabled, light-dark(#C4C5D1, #45464D))'
@@ -330,9 +336,11 @@ export function SelectOption({
330336
checkbox: (
331337
<Box
332338
bg={
333-
isSelected
334-
? 'var(--primary, light-dark(#674DC7, #8163E1)'
335-
: 'var(--border, light-dark(#E4E4E4, #434343))'
339+
disabled
340+
? 'var(--inputDisabledBackground, light-dark(#F0F0F3, #414244))'
341+
: isSelected
342+
? 'var(--primary, light-dark(#674DC7, #8163E1)'
343+
: 'var(--border, light-dark(#E4E4E4, #434343))'
336344
}
337345
borderRadius="4px"
338346
boxSize="18px"
@@ -342,6 +350,9 @@ export function SelectOption({
342350
{isSelected && (
343351
<IconCheck
344352
className={css({
353+
color: disabled
354+
? 'var(--inputDisabledText, light-dark(#E5E5E5, #373737))'
355+
: '#FFF',
345356
position: 'absolute',
346357
top: '55%',
347358
left: '50%',

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -29,7 +29,7 @@ export const Default: Story = {
2929
<Stepper {...args}>
3030
<StepperContainer>
3131
<StepperDecreaseButton />
32-
<StepperInput editable={false} />
32+
<StepperInput />
3333
<StepperIncreaseButton />
3434
</StepperContainer>
3535
</Stepper>

‎packages/components/src/components/Stepper/__tests__/__snapshots__/index.browser.test.tsx.snap‎

Lines changed: 8 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -37,14 +37,15 @@ exports[`Stepper > should render 1`] = `
3737
</div>
3838
</button>
3939
<div
40-
aria-label="Stepper value"
41-
class="width-0-80px--2 height-0-50px--2 text-align-0-center--2 padding-bottom-0-10px--2 padding-top-0-10px--2 padding-right-0-12px--2 padding-left-0-12px--2 border-radius-0-6px--2 display-0-none-1599573265477977541-2 padding-0-0--3 border-0-none--3 width-0-fit-content--3 height-0-fit-content--3"
42-
data-value="0"
43-
readonly=""
44-
type="number"
45-
value="0"
40+
class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
4641
>
47-
0
42+
<input
43+
aria-label="Stepper value"
44+
class="width-0-80px--2 height-0-50px--2 text-align-0-center--2 padding-bottom-0-10px--2 padding-top-0-10px--2 padding-right-0-12px--2 padding-left-0-12px--2 border-radius-0-6px--2 display-0-none-1599573265477977541-2 color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-7704306251139592248-1 background-0-var(--inputDisabledBg,light-dark(#F0F0F3,#414244))-14172363753176421546-1 border-0-1px solid var(--border,light-dark(#E4E4E4,#434343))-14172363753176421546-1 color-0-var(--inputDisabledText,light-dark(#D6D7DE,#373737))-14172363753176421546-1 background-0-var(--primaryBg,light-dark(#F4F3FA,#F4F3FA0D))-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(#674DC7,#8163E1))-16231282139879731451-1 outline-0-none-16231282139879731451-1 border-0-1px solid var(--primary,light-dark(#674DC7,#8163E1))-8380715471663921674-1 color-0-var(--inputPlaceholder,light-dark(#A9A8AB,#CBCBCB))-15878565022192187906-1 background-0-var(--inputBg,light-dark(#FFF,#2E2E2E))--1 border-radius-0-8px--1 border-style-0-solid--1 border-width-0-1px--1 padding-bottom-0-12px--1 padding-top-0-12px--1 transition-0-all .1s ease-in-out--1 border-color-0-var(--border,light-dark(#E4E4E4,#434343))--1 padding-left-0-12px--1 padding-right-0-12px--1 "
45+
data-value="0"
46+
type="number"
47+
value="0"
48+
/>
4849
</div>
4950
<button
5051
aria-disabled="false"

0 commit comments

Comments
 (0)