Input

[froggy1014]

컴포넌트 기능 정의

• 공통으로 사용할 인풋 컴포넌트입니다.
• InputNumber, TextArea, Radio.. 등 과 같은 인풋 컴포넌트들이 있기때문에 해당 type들과 안겹치는 Text 관련 입력을 받도록 설계
• Input이 children을 받아 action button으로 사용할 수 있도록했습니다. default로 버튼이며 asChild로 다형성 고려해봤습니다.

디자인 요구사항

- Label | ErrorText
사이프 디자인 시스템에 맞게 사이즈는 받되, asChild를 통해 다형성 고려

• Input
  사이프 디자인 시스템에 Radius - text: 8px 이라고 작성되어있는데 이해가 안가서 일단 Input은 기본적으로 border-radius : 8px로 맞추겠습니다.

컴포넌트 스펙

// default
<Input {...inputAttr} />

// with action button
<Input {...inputAttr}>
    <Action onClick={() => setValue('')}>
       <Icon style={{ width: '24px' height: '24px' }} />
    </Action>
</Input>

기술적 고려사항

- Label , ErrorText
사이프 디자인 시스템에 따르면 Typography랑 프롭스가 겹칠것 같은데, asChild로 다형성은 유지하되, default로 Typography를 디펜던시로 갖고 있는거 어떻게 생각하시나요?

• 기술적 고려사항은 아니고... 에러 색상같은건 알잘딱깔센하게 하려고하는데 괜찮겠쥬..

참고 자료

• Radix - Composition
• Radix - TextField
• Atlassian - TextField
• ARK - Field
• LINE - DesignSystem

추가 논의사항

[noahluftyang]

• 넵 글자류는 모두 Typography 의존하면 됩니다!
• 에러는 red 색상이면 될 것 같은데 요것도 임의의 컬러토큰 하나 정하고 나중에 공통화해보시죠!