Add `AlphaButton` component
Self Checklist
- [x] I wrote a PR title in English and added an appropriate label to the PR.
- [x] I wrote the commit message in English and to follow the Conventional Commits specification.
- [x] I added the changeset about the changes that needed to be released. (or didn't have to)
- [x] I wrote or updated documentation related to the changes. (or didn't have to)
- [x] I wrote or updated tests related to the changes. (or didn't have to)
- [x] I tested the changes in various browsers. (or didn't have to)
- Windows: Chrome, Edge, (Optional) Firefox
- macOS: Chrome, Edge, Safari, (Optional) Firefox
Related Issue
- Fixes #2178
Summary
- V2 토큰을 사용하여 버튼 컴포넌트를 구현합니다.
Details
- 디자인 상으로 Icon 유무와 Floating 여부에 의해서 4가지로 컴포넌트가 나눠져 있어서 버튼 컴포넌트를 non-floating & not-icon-only 인 경우로 제한했습니다. 다만 (Floating)IconButton 처럼 아이콘만 있는 버튼을 분리하는게 좋을지는 아직 고민중입니다. 디자인 스펙에 맞추려면 분리하는게 좋을듯한데, 분리하게 되면 꽤나 겹치는 부분이 있어서 코드적으로 관리 포인트가 2가지 생기는게 우려됩니다.
- hover or active 상태인 경우에 대해서는 v2 토큰을 사용한 디자인이 나와있지 않아서 v1 토큰으로 구현하고 버튼 안에 있는 텍스트나 스피너도 기존의 컴포넌트를 사용했습니다. 그런데 기존의 hover 디자인을 확인하니 primary&blue 버튼인 경우에 디자인 스펙과 다른 부분이 있어서 Button 컴포넌트를 수정했습니다.
- 스토리북은 우선순위가 높지 않아 보여서 최대한 간단한 형태로 만들었습니다.
Breaking change? (Yes/No)
- No
References
🦋 Changeset detected
Latest commit: f58e04972a8d1f849ca62827ae58a3aa383429e1
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 | Patch |
| 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
Codecov Report
Attention: Patch coverage is 9.09091% with 20 lines in your changes are missing coverage. Please review.
Project coverage is 86.22%. Comparing base (
8334164) to head (f58e049).
| Files | Patch % | Lines |
|---|---|---|
| ...bezier-react/src/components/AlphaButton/Button.tsx | 0.00% | 20 Missing :warning: |
Additional details and impacted files
@@ Coverage Diff @@
## main #2182 +/- ##
==========================================
- Coverage 86.83% 86.22% -0.62%
==========================================
Files 130 131 +1
Lines 2803 2823 +20
Branches 832 843 +11
==========================================
Hits 2434 2434
- Misses 340 360 +20
Partials 29 29
:umbrella: View full report in Codecov by Sentry.
:loudspeaker: Have feedback on the report? Share it here.
https://desk.channel.io/#/channels/1/team_chats/groups/1237/66331468305c8dce6842