Re-implement Tabs component using Radix

[yangwooseong]

Self Checklist

• I wrote a PR title in English.
• I added an appropriate label to the PR.
• I wrote a commit message in English.
• I wrote a commit message according to the Conventional Commits specification.
• I added the appropriate changeset for the changes.
• [Component] I wrote a unit test about the implementation.
• [Component] I wrote a storybook document about the implementation.
• [Component] I tested the implementation in various browsers.
  • Windows: Chrome, Edge, (Optional) Firefox
  • macOS: Chrome, Edge, Safari, (Optional) Firefox
  • macOS Chrome, Edge, Firefox 에서 정상 동작확인하였으나, Safari 에서는 키보드 navigation 이 제대로 되지 않았습니다.
• [New Component] I added my username to the correct directory in the CODEOWNERS file.

Related Issue

• Re-implement Tabs, TabItem component using Tabs in Radix UI #982

Summary

• Radix 를 활용하여 Tabs component 를 구현합니다.

Details

• Tabs 컴포넌트의 사용법이 달라지게 됩니다. Radix 에서 value 기반으로 Tabs.Trigger와 Tabs.Content를 매칭시키다보니, 기존에 Tabs에 number type 의 index 를 주던 것을 string type의 value 를 주는 것으로 변경하였습니다. 이렇게 하면서 TabItem에 다소 불필요하게 optionKey prop 을 열어주던 것을 제거하고, handler 에서는 value 만 인자로 가지도록 했습니다. (아래 코드 참고)

As-is

<Tabs
  selectedOptionIndex={selectedIndex}
  onChangeOption={handleTabChange} // handleTabChange: (optionIndex, optionKey) => void
>
  <TabItem optionKey="One" />
  <TabItem optionKey="Two" />

  <TabAction />
</Tabs>

<SomeTabPanel>
  // selectedIndex 를 가지고 적절한 컴포넌트를 그림
</SomeTabPanel>

To-be

<Tabs
  value={selectedValue}
  onValueChange={handleTabChange} // handleTabChange: (value) => void
>
  <TabList>
    <TabItems>
      <TabItem value="One" />
      <TabItem value="Two" />
    </TabItems>

    <TabActions>
      <TabAction />
    </TabActions>
  </TabList>

  <TabContent value="One" />
  <TabContent value="Two" />
</Tabs>

• controlled 와 uncontrolled 두 형태로 모두 사용가능하게 되었습니다. controlled 형태로 사용하려면 value 와 onValueChange 에 state와 setter를 넣고, uncontrolled 형태로 사용하려면 defaultValue 에 값을 넣으면 됩니다.

• test code 를 개선하였습니다. testing library 의 query priority 에 따르면 element 의 role과 accessible name 에 의해 query 하는 것이 권장되기 때문에 그러한 query 방식을 사용하여 test code 를 작성하였습니다.

• keyboard navigation 이 가능해집니다. TabItem 을 클릭하고 화살표로 좌우 이동하게 되면 다른 TabItem 과 TabContent를 활성화 시킬수 있고, 탭 키로 포커싱되는 element 를 변경할 수 있습니다. 다만 데스크 코드에서는 탭을 클릭했을 때 다른 url 로 이동하는 식으로 작성된 부분이 있는데, 이 경우는 TabContent에 해당하는 컴포넌트가 Routes 에 모여져 있어서 탭 키에 의한 TabContent 포커싱은 어려울 것으로 생각됩니다.

• 피그마 시안에서 베지어 버튼으로 구성된 TabItem 을 베지어 버튼으로 구현했습니다. TabAction은 베지어 버튼과 미묘하게 다른 부분이 있어서 Text 와 LinkIcon을 활용한 기존 구현을 그대로 두었습니다.

• 하나 아쉬운 부분이 있는데, 다른 TabItem이 활성화될 때 underline 이 올라오는 애니메이션을 그대로 옮기지 못했습니다. 기존에는 TabItem 바로 아래에 overflow:hidden 속성을 가지는 Wrapper를 두고 활성화 되었을 때 ::after 로 구현된 underline 이 위로 올라오는 애니메이션이 있었는데, 새로 구현된 TabItem 같은 경우 Tabs.Trigger의 접근성 관련 속성을 베지어 버튼으로 바로 전달해주기 위해 Wrapper를 주기가 곤란했습니다. 그런데 이렇게 하면 버튼 밖에 있는 underline 을 보여줘야 해서 overflow:hidden 을 주지 못하게 되서 애니메이션 역시 보여줄 수 없게 됩니다. 혹시 workaround 가 떠오르는 분이 있다면 의견 부탁드립니다.

ToDos

• Tab 에 대한 Docs 작성

Breaking change or not (Yes/No)

• Yes. index 대신 value 기반으로 TabItem을 선택하게 되고, 선택되는 탭에 매칭되는 content 는 TabContent 으로 래핑해야 합니다.

References

• https://www.radix-ui.com/docs/primitives/components/tabs
• https://testing-library.com/docs/queries/byrole
• https://www.w3.org/WAI/ARIA/apg/patterns/tabpanel/

[changeset-bot]

🦋 Changeset detected

Latest commit: 5a8520a

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@channel.io/bezier-react	Minor
bezier-figma-plugin	Patch

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

[github-actions]

Chromatic Report

🚀 Congratulations! Your build was successful!

• Storybook Preview
• Chromatic Build

[codecov]

Codecov Report

Base: 72.37% // Head: 72.61% // Increases project coverage by +0.23% 🎉

Coverage data is based on head (5a8520a) compared to base (e1550c5).
Patch coverage: 74.62% of modified lines in pull request are covered.

Additional details and impacted files

@@             Coverage Diff             @@
##           next-v1    #1061      +/-   ##
===========================================
+ Coverage    72.37%   72.61%   +0.23%     
===========================================
  Files          223      237      +14     
  Lines         3070     3137      +67     
  Branches       844      853       +9     
===========================================
+ Hits          2222     2278      +56     
- Misses         722      728       +6     
- Partials       126      131       +5     

Impacted Files	Coverage Δ
...ents/Tabs/LegacyTabs/TabAction/TabAction.styled.ts	30.00% <ø> (ø)
...components/Tabs/LegacyTabs/TabAction/TabAction.tsx	13.79% <ø> (ø)
...mponents/Tabs/LegacyTabs/TabItem/TabItem.styled.ts	88.88% <ø> (ø)
...src/components/Tabs/LegacyTabs/TabItem/TabItem.tsx	62.50% <ø> (ø)
...src/components/Tabs/LegacyTabs/Tabs/Tabs.styled.ts	100.00% <ø> (ø)
...react/src/components/Tabs/LegacyTabs/Tabs/Tabs.tsx	40.62% <ø> (ø)
...kages/bezier-react/src/components/Tabs/TabItem.tsx	50.00% <50.00%> (ø)
...zier-react/src/components/Tabs/TabAction.styled.ts	64.28% <64.28%> (ø)
...ges/bezier-react/src/components/Tabs/TabAction.tsx	66.66% <66.66%> (ø)
...kages/bezier-react/src/components/Tabs/TabList.tsx	66.66% <66.66%> (ø)
... and 12 more

Help us with your feedback. Take ten seconds to tell us how you rate us. Have a feature suggestion? Share it here.

☔ View full report at Codecov.
📢 Do you have feedback about the report comment? Let us know in this issue.

[sungik-choi]

컴포넌트 전반적으로 default export를 named export로 변경 부탁드립니다! (#931 참고)

[Dogdriip]

🚀

[sungik-choi]

👍 마이너한 코멘트들 남겼습니다.

• #1086 머지 이후에 배포 후 데스크 어플리케이션에 적용할 예정이라, 이후에 머지해주시면 좋을 거 같습니다.
• 마이그레이션도 함께 챙겨주시고, 마무리 이후 레거시 컴포넌트도 정리해주시면 👍

[sungik-choi]

케이스가 3개만 정해져있어서 유의미하진 않지만, className 재생성을 막기 위해 CSS Variable로 스타일링할 수도 있습니다.

[sungik-choi]

Warning: will-change is intended to be used as a last resort, in order to try to deal with existing performance problems. It should not be used to anticipate performance problems. (#)

정확한 측정은 필요하겠지만, 성능상 문제가 없을거로 예상되는데 굳이 필요한가? 라는 생각입니다.