Icon

[sungik-choi]

Summary

다음 디자인 시스템의 Icon 컴포넌트 구현

Goals & Requirements

• 새로운 디자인 토큰에 간편하게 접근할 수 있도록 합니다
• 이전의 사용성은 유지합니다

Design Details

• 이제 아이콘 사이즈가 따로 존재하지 않고, Source size로 관리되어야 합니다.
• 색상은 Functional, Semantic 토큰이 모두 사용될 수 있어야합니다. 엄격하게 나누자면 Background/Foreground 에서도 Foreground 토큰만 사용할 수 있도록 나누어야하지만, 아직 실제 유즈케이스가 나오지 않아 우선 열어두는 방향으로 선택했습니다.

Use Cases

기존과 크게 다르지 않습니다. size 값만 새로운 디자인 토큰의 값으로 업데이트합니다.

interface IconProps {
  /* ... */
  size?: '10' | ...
}

<Icon
  source={FooIcon}
  color="fg-black-dark"
  size="24"
  marginLeft={8}
/>

Accessibility

• aria-label 여부에 따라 실제 이미지로 동작할 것인지, 장식 요소로 동작할 것인지 변경되어야 함
• 나아가선 IconButton 에서 이를 컨트롤할 수 있도록 해야합니다.
• 더 나아가면 컨텍스트를 통해 Tooltip 의 컨텐츠에 접근할 수 있도록 하는 것도 방법일 거 같단 생각이 드네요 🤔
  • 정확하지 않은 케이스가 있을 수 있지만, IconButton + Tooltip 의 조합에서 Tooltip content가 아이콘(버튼)의 설명과 동일함
  • Tooltip의 동작 자체로 설명은 충분한가 싶기도 함 (aria-describedby)

Test Plan

특별히 챙길 부분은 없겠으나, 접근성 관련 테스트는 추가할만 할 거 같음

Alternatives

생략

References

• 툴팁 관련: https://www.w3.org/WAI/ARIA/apg/patterns/tooltip/

[channeltalk]

https://desk.channel.io/#/channels/1/team_chats/groups/1237/67627fbcb258cce471f9