Fix input

.changeset/rotten-bananas-send.md

@@ -0,0 +1,5 @@
+---
+"@devup-ui/components": patch
+---
+
+Fix Input, Select, Stepper

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

@@ -63,7 +63,7 @@ exports[`Input > should pass className prop to error message component 1`] = `
   >
     <input
       aria-label="input"
-      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 "
+      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 "
       value=""
     />
     <span

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

@@ -72,7 +72,7 @@ describe('Input', () => {
   })
 
   it('should be able to render with error message', () => {
-    const { container } = render(<Input errorMessage="Error message" />)
+    const { container } = render(<Input error errorMessage="Error message" />)
     expect(
       container.querySelector('[aria-label="error-message"]'),
     ).toBeInTheDocument()
@@ -110,6 +110,7 @@ describe('Input', () => {
         classNames={{
           errorMessage: 'error-message',
         }}
+        error
         errorMessage="Error message"
       />,
     )

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

@@ -146,7 +146,7 @@ export function Input({
         {...props}
       />
       {clearButtonVisible && <ClearButton onClick={handleClear} />}
-      {errorMessage && (
+      {error && errorMessage && (
         <Text
           aria-label="error-message"
           bottom="-8px"

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

@@ -3,7 +3,6 @@ import { ComponentProps } from 'react'
 export function IconCheck({ ...props }: ComponentProps<'svg'>) {
   return (
     <svg
-      color="white"
       fill="none"
       height="10"
       viewBox="0 0 12 10"

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

@@ -49,7 +49,7 @@ function DefaultComponent(
   props: Omit<ComponentProps<typeof Select>, 'children'>,
 ) {
   return (
-    <Select {...props} onValueChange={() => {}}>
+    <Select {...props} defaultValue={['Option 1']} onValueChange={() => {}}>
       <SelectTrigger>Select</SelectTrigger>
       <SelectContainer>
         <SelectOption disabled value="Option 1">

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

@@ -260,6 +260,25 @@ describe('Select', () => {
     })
   })
 
+  it('should have disabled check color when type is checkbox and the option is disabled', () => {
+    const { container } = render(
+      <Select defaultValue={['Option 1']} type="checkbox">
+        <SelectTrigger>Select</SelectTrigger>
+        <SelectContainer>
+          <SelectOption disabled value="Option 1">
+            Option 1
+          </SelectOption>
+        </SelectContainer>
+      </Select>,
+    )
+    const selectToggle = container.querySelector('[aria-label="Select toggle"]')
+    fireEvent.click(selectToggle!)
+    const option1 = container.querySelector('[data-value="Option 1"]')
+    expect(option1?.querySelector('svg')).toHaveClass(
+      'color-0-var(--inputDisabledText,light-dark(#E5E5E5,#373737))--255',
+    )
+  })
+
   it('should show confirm button when type is checkbox and showConfirmButton is true', () => {
     const { container } = render(
       <Select type="checkbox">

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

@@ -50,6 +50,8 @@ interface SelectProps extends ComponentProps<'div'> {
     primary?: string
     border?: string
     inputBackground?: string
+    inputDisabledBackground?: string
+    inputDisabledText?: string
     base10?: string
     title?: string
     selectDisabled?: string
@@ -134,6 +136,8 @@ export function Select({
           title: colors?.title,
           selectDisabled: colors?.selectDisabled,
           primaryBg: colors?.primaryBg,
+          inputDisabledBackground: colors?.inputDisabledBackground,
+          inputDisabledText: colors?.inputDisabledText,
         }}
         typography={typography}
         {...props}
@@ -193,10 +197,12 @@ export function SelectTrigger({
 
 interface SelectContainerProps extends ComponentProps<'div'> {
   showConfirmButton?: boolean
+  confirmButtonText?: string
 }
 export function SelectContainer({
   children,
   showConfirmButton,
+  confirmButtonText = '완료',
   ...props
 }: SelectContainerProps) {
   const { open, setOpen, type } = useSelect()
@@ -238,7 +244,7 @@ export function SelectContainer({
             onClick={() => setOpen(false)}
             variant="primary"
           >
-            완료
+            {confirmButtonText}
           </Button>
         </Flex>
       )}
@@ -300,7 +306,7 @@ export function SelectOption({
         }
       }
       alignItems="center"
-      borderRadius="8px"
+      borderRadius="6px"
       color={
         disabled
           ? 'var(--selectDisabled, light-dark(#C4C5D1, #45464D))'
@@ -330,9 +336,11 @@ export function SelectOption({
           checkbox: (
             <Box
               bg={
-                isSelected
-                  ? 'var(--primary, light-dark(#674DC7, #8163E1)'
-                  : 'var(--border, light-dark(#E4E4E4, #434343))'
+                disabled
+                  ? 'var(--inputDisabledBackground, light-dark(#F0F0F3, #414244))'
+                  : isSelected
+                    ? 'var(--primary, light-dark(#674DC7, #8163E1)'
+                    : 'var(--border, light-dark(#E4E4E4, #434343))'
               }
               borderRadius="4px"
               boxSize="18px"
@@ -342,6 +350,9 @@ export function SelectOption({
               {isSelected && (
                 <IconCheck
                   className={css({
+                    color: disabled
+                      ? 'var(--inputDisabledText, light-dark(#E5E5E5, #373737))'
+                      : '#FFF',
                     position: 'absolute',
                     top: '55%',
                     left: '50%',

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

@@ -29,7 +29,7 @@ export const Default: Story = {
     <Stepper {...args}>
       <StepperContainer>
         <StepperDecreaseButton />
-        <StepperInput editable={false} />
+        <StepperInput />
         <StepperIncreaseButton />
       </StepperContainer>
     </Stepper>

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

@@ -37,14 +37,15 @@ exports[`Stepper > should render 1`] = `
       </div>
     </button>
     <div
-      aria-label="Stepper value"
-      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"
-      data-value="0"
-      readonly=""
-      type="number"
-      value="0"
+      class=" display-0-inline-block--255 position-0-relative--255 box-sizing-0-border-box-1137980104803605758-255"
     >
-      0
+      <input
+        aria-label="Stepper value"
+        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 "
+        data-value="0"
+        type="number"
+        value="0"
+      />
     </div>
     <button
       aria-disabled="false"

packages/components/src/components/Stepper/__tests__/index.browser.test.tsx

@@ -51,6 +51,17 @@ describe('Stepper', () => {
     expect(input).toHaveAttribute('data-value', '10')
   })
 
+  it('should not change inner value by clicking the number when type is text', () => {
+    const { container } = render(
+      <Stepper type="text">
+        <StepperInput />
+      </Stepper>,
+    )
+    const input = container.querySelector('[aria-label="Stepper value"]')
+    expect(input?.nodeName).toBe('DIV')
+    expect(input).toHaveAttribute('data-value', '0')
+  })
+
   it('should have disabled decrease button when value is at min', () => {
     const { container } = render(
       <Stepper>

packages/components/src/components/Stepper/index.tsx

@@ -14,6 +14,7 @@ type StepperContextType = {
   setValue: (value: number) => void
   min: number
   max: number
+  type: 'input' | 'text'
 }
 
 const StepperContext = createContext<StepperContextType | null>(null)
@@ -33,6 +34,7 @@ type StepperProps = {
   onValueChange?: (value: number) => void
   min?: number
   max?: number
+  type?: 'input' | 'text'
 }
 
 function Stepper({
@@ -42,6 +44,7 @@ function Stepper({
   onValueChange,
   min = 0,
   max = 100,
+  type = 'input',
 }: StepperProps) {
   const [value, setValue] = useState(defaultValue ?? 0)
 
@@ -56,7 +59,13 @@ function Stepper({
 
   return (
     <StepperContext.Provider
-      value={{ value: valueProp ?? value, setValue: handleChange, min, max }}
+      value={{
+        value: valueProp ?? value,
+        setValue: handleChange,
+        min,
+        max,
+        type,
+      }}
     >
       {children}
     </StepperContext.Provider>
@@ -126,20 +135,16 @@ interface StepperInputProps extends ComponentProps<typeof Input> {
   editable?: boolean
 }
 
-function StepperInput({
-  editable = true,
-  className,
-  ...props
-}: StepperInputProps) {
-  const { value, setValue } = useStepper()
+function StepperInput({ className, ...props }: StepperInputProps) {
+  const { value, setValue, type } = useStepper()
   const notEditableClass = css({
     p: '0',
     border: 'none',
     w: 'fit-content',
     h: 'fit-content',
     styleOrder: 3,
   })
-
+  const editable = type === 'input'
   const Comp = editable ? Input : 'div'
 
   return (