Tag

[sungik-choi]

Summary

V2 디자인 시스템의 Tag 컴포넌트를 구현합니다.

Goals & Requirements

• V2 디자인 토큰의 functional 컬러로 색상 변경이 가능해야 합니다.
• 텍스트 길이가 길어지면 ellipsis 되어야 합니다.

Design Details

• container 너비 기준으로 텍스트를 ellipsis 처리 합니다.

Use Cases

• 사용 목적이 정보 필터링 또는 검색이라면 태그를, 중요 알림 및 상태 표시라면 Badge 컴포넌트를 사용합니다.

interface TagProps {
  size?: 's' | 'm' | 'l'  // default: 's'
  color?:  'grey' | 'blue' | 'cobalt' | 'teal' | 'green' | 'olive' | 'pink' | 'navy' | 'yellow' | 'orange' | 'red' | 'purple' // default: 'grey'
  showCloseButton?: true | false // default: false
  showAvatar?: true | false // default: false
}

Accessibility

• close 아이콘의 role을 'button' 으로 지정합니다.

Test Plan

• close 아이콘의 handler, Tag 컴포넌트의 click handler 가 잘 동작하는지
• close 아이콘을 클릭했을 때 Tag 컴포넌트의 click handler 가 호출되지 않는지
• overflow 되었을 때 ellipsis 처리가 잘 되는지 (visual test)

Alternatives

• 생략

References

(internal)

• 디자인 스펙
• 컴포넌트 스펙 (WIP)

[channeltalk]

https://desk.channel.io/#/channels/1/team_chats/groups/1237/671b4face991d4206bc7