bezier-react icon indicating copy to clipboard operation
bezier-react copied to clipboard

Add `AlphaButton` component

Open yangwooseong opened this issue 1 year ago • 3 comments

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

yangwooseong avatar Apr 29 '24 02:04 yangwooseong

🦋 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

changeset-bot[bot] avatar Apr 29 '24 02:04 changeset-bot[bot]

Chromatic Report

🚀 Congratulations! Your build was successful!

github-actions[bot] avatar Apr 29 '24 02:04 github-actions[bot]

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.

codecov[bot] avatar Apr 29 '24 02:04 codecov[bot]

https://desk.channel.io/#/channels/1/team_chats/groups/1237/66331468305c8dce6842

channeltalk[bot] avatar May 02 '24 04:05 channeltalk[bot]