Add `AlphaButton` component #2182

yangwooseong · 2024-04-29T02:45:11Z

Self Checklist

I wrote a PR title in English and added an appropriate label to the PR.
I wrote the commit message in English and to follow the Conventional Commits specification.
I added the changeset about the changes that needed to be released. (or didn't have to)
I wrote or updated documentation related to the changes. (or didn't have to)
I wrote or updated tests related to the changes. (or didn't have to)
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 Button #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

버튼(internal)

changeset-bot · 2024-04-29T02:45:15Z

🦋 Changeset detected

Latest commit: f58e049

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

yangwooseong · 2024-04-29T02:47:11Z

packages/bezier-react/src/components/AlphaButton/Button.tsx

+          active && styles.active,
+          className
+        )}
+        {...rest}


onClick 핸들러에 있었던 if (!disabled) 체크는 button 엘리먼트 자체적으로 처리해주고 있어서 생략 가능합니다

L73: 사용처가 없어서 rest prop 안에 포함해도 될 거 같아요

github-actions · 2024-04-29T02:48:31Z

Chromatic Report

🚀 Congratulations! Your build was successful!

codecov · 2024-04-29T02:53:34Z

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 ⚠️

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

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

sungik-choi · 2024-04-29T04:57:14Z

packages/bezier-react/src/components/AlphaButton/Button.tsx

+          active && styles.active,
+          className
+        )}
+        {...rest}


L73: 사용처가 없어서 rest prop 안에 포함해도 될 거 같아요

sungik-choi · 2024-04-29T05:01:05Z

packages/bezier-react/src/components/AlphaButton/Button.types.ts

+  /**
+   * The text content in the button.
+   * Do not pass `text` prop if it is an icon-only button.
+   */
+  text?: string


Do not pass text prop if it is an icon-only button. : IconButton이 별도로 만들어지므로 불필요한 주석이 됩니다

반대로 AlphaButton의 text prop은 required가 되어야할 거 같아요. 아이콘만 사용할 수는 없으니까요

마이너: prop 이름을 text 그대로 사용할지, 다른 컴포넌트에 맞게 content 를 사용할지, 아니면 children 으로 사용할지(HTML button element 처럼) 고민해보면 좋을 거 같습니다! Figma 스펙이랑도 맞춰보긴 해야할 거 같아요

피그마 상으로는 text 속성이 있어서 그대로 사용해도 될 것 같습니다!

sungik-choi · 2024-04-29T05:10:33Z

packages/bezier-react/src/components/Button/Button.module.scss

+  &:where(.style-primary.color-blue:focus-visible) {
+    outline: 3px solid var(--bgtxt-blue-light);
+  }
+


새롭게 디자인이 추가되었나보네요 👍

sungik-choi · 2024-04-29T05:15:49Z

packages/bezier-react/src/components/AlphaButton/Button.module.scss

+  /* color */
+  /* stylelint-disable-next-line no-duplicate-selectors */
+  &:where(.variant-primary) {
+    &:where(:not(.color-dark-grey, .color-light-grey)) {


not 선택자 없어도 되지 않을까요?

~~어차피 --alpha-color-fg-absolute-white-dark가 #FFF 라서 없어도 된다는 의미일까요? 토큰 value 가 달라질 경우를 생각하면 의미가 있을 것 같았습니다~~

아하 어차피 뒤에서 overide 되니까 없어도 된다는 의미였군요..! 없애도 될 것 같네요

sungik-choi · 2024-04-29T05:16:17Z

packages/bezier-react/src/components/AlphaButton/Button.module.scss

+  }
+
+  &:where(.variant-tertiary.color-white) {
+    :where(.ButtonIcon) {


Suggested change

:where(.ButtonIcon) {

&:where(.ButtonIcon) {

전반적으로 통일하는 게 일관성 있을 거 같아요

& :where(.ButtonIcon) {

로 하자는 말씀이시죠?? & 처럼 띄어쓰기가 있으면 child 를 선택하는 걸로 이해했습니다 (없는 것과 마찬가지)

아 그렇네요, 잘못 봤네요 😅

sungik-choi · 2024-04-29T05:19:35Z

packages/bezier-react/src/components/AlphaButton/Button.module.scss

+
+  /* background-color */
+  &:where(.variant-primary) {
+    $background-color-by-color: (


…1px gap in s Button

- remove duplicated active, hover selector - add hover style to tertiary&white button

…ed color property

…ctor

channeltalk · 2024-05-02T04:19:52Z

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

## 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**](https://www.conventionalcommits.org/en/v1.0.0/). - [x] I [added the **changeset**](https://github.com/changesets/changesets/blob/main/docs/adding-a-changeset.md) 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 channel-io#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  - [버튼(internal)](https://www.figma.com/file/8J76noM3T1Sp5cNPhnYQiG/Action?type=design&node-id=0%3A1&mode=design&t=L4yIeScuZnOADvDx-1)

@kimminkyung94

This PR was opened by the [Changesets release](https://github.com/changesets/action) GitHub action. When you're ready to do a release, you can merge this and the packages will be published to npm automatically. If you're not ready to do a release yet, that's fine, whenever you add more changesets to main, this PR will be updated. # Releases ## @channel.io/[email protected] ### Minor Changes - Update icons ([#2204](#2204)) by @kimminkyung94 Added - center-focus.svg - group-remove-filled.svg - shipping-filled.svg - snooze-filled.svg - star-circle-filled.svg - untag-filled.svg - workflow.svg Modified - chat-check-filled.svg - chat-check.svg - chat-progress-filled.svg - chat-progress.svg - check-circle-filled.svg - check-circle.svg - check-verification-filled.svg - clock-filled.svg - contract.svg - expand.svg - goal.svg - limit.svg - people.svg - tag.svg - untag.svg ## @channel.io/[email protected] ### Patch Changes - Change outline color of primary and blue `Button` component when focused. ([#2182](#2182)) by @yangwooseong - Add `AlphaButton` component. ([#2182](#2182)) by @yangwooseong - Add `AlphaFloatingButton` component. ([#2193](#2193)) by @yangwooseong - Updated dependencies - @channel.io/[email protected] ## @channel.io/[email protected] ### Patch Changes - Add the font-family format supported by Google Web Font ([#2209](#2209)) by @leejiwoo2002 ## [email protected] ### Patch Changes - Updated dependencies - @channel.io/[email protected] - @channel.io/[email protected] Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

yangwooseong added the feat:component Issue or PR related to a new component label Apr 29, 2024

yangwooseong self-assigned this Apr 29, 2024

yangwooseong requested a review from sungik-choi as a code owner April 29, 2024 02:45

yangwooseong commented Apr 29, 2024

View reviewed changes

channel-io deleted a comment from channeltalk bot Apr 29, 2024

yangwooseong force-pushed the WEB-597/button branch from de11f00 to 1059e80 Compare April 29, 2024 02:53

sungik-choi reviewed Apr 29, 2024

View reviewed changes

channel-io deleted a comment from channeltalk bot Apr 29, 2024

yangwooseong requested a review from sungik-choi April 29, 2024 07:34

channel-io deleted a comment from channeltalk bot Apr 30, 2024

yangwooseong force-pushed the WEB-597/button branch from 1be2c9b to 182b0c8 Compare April 30, 2024 01:19

channel-io deleted a comment from channeltalk bot Apr 30, 2024

sungik-choi approved these changes May 2, 2024

View reviewed changes

channel-io deleted a comment from channeltalk bot May 2, 2024

yangwooseong added 12 commits May 2, 2024 13:14

feat(alpha-button): add types

99d5483

feat(alpha-button): define style by color, variant, size

bfe1c7c

feat(alpha-button): add icon

e36c619

feat(alpha-button): add color for icon and text

5d42643

feat(alpha-button): add spinner

8f9fbc6

feat(alpha-button): fix ButtonContent gap to ButtonText padding, add …

3bf4d31

…1px gap in s Button

feat(alpha-=button): add typography

ca0eeff

feat(alpha-button): apply color to spinner as well

7f4ad74

feat(alpha-button): apply active, hover style

d387ea7

feat(alpha-button): export Button

1bf926d

feat(alpha-button): add simple storybook

cdb8bfd

chore(changeset): add

29280e0

yangwooseong added 13 commits May 2, 2024 13:14

refactor(alpha-button): move type props into rest

a7a63d8

feat(button,alpha-button): change focus-visible style

a2ddbcb

chore(changeset): add

5d95d90

feat(alpha-button): rm floating from variant props, etc

787c722

- remove duplicated active, hover selector - add hover style to tertiary&white button

feat(alpha-button): resolve typecheck, lint error and rename type

3c94977

chore(alpha-button): add comment

43e6a3c

feat(alpha-button): add missed transition property

484529a

fix(alpha-button): fix typo in transition property

a918a38

refactor(alpha-button): rm for loop, instead overide previously defin…

958f7c2

…ed color property

refactor(alpha-button): cover disabled in rest props

316a018

feat(alpha-button): fix bg color of secondary, rm redundant :not sele…

f61f019

…ctor

refactor(alpha-button): add &: to nested selector for consistence

96933f4

feat(alpha-button): make text props required

f58e049

yangwooseong force-pushed the WEB-597/button branch from 182b0c8 to f58e049 Compare May 2, 2024 04:14

channel-io deleted a comment from channeltalk bot May 2, 2024

yangwooseong merged commit 77ebd15 into channel-io:main May 2, 2024
7 of 9 checks passed

yangwooseong deleted the WEB-597/button branch May 2, 2024 04:19

github-actions bot mentioned this pull request May 2, 2024

ci(changesets): version packages #2188

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Add `AlphaButton` component #2182

Add `AlphaButton` component #2182

yangwooseong commented Apr 29, 2024 •

edited

Loading

changeset-bot bot commented Apr 29, 2024 •

edited

Loading

yangwooseong Apr 29, 2024

sungik-choi Apr 29, 2024

github-actions bot commented Apr 29, 2024 •

edited

Loading

codecov bot commented Apr 29, 2024 •

edited

Loading

sungik-choi Apr 29, 2024

sungik-choi Apr 29, 2024

yangwooseong Apr 29, 2024

sungik-choi Apr 29, 2024

sungik-choi Apr 29, 2024

yangwooseong Apr 29, 2024 •

edited

Loading

sungik-choi Apr 29, 2024

yangwooseong Apr 29, 2024

sungik-choi Apr 29, 2024

sungik-choi Apr 29, 2024

channeltalk bot commented May 2, 2024

Add AlphaButton component #2182

Add AlphaButton component #2182

Conversation

yangwooseong commented Apr 29, 2024 • edited Loading

Self Checklist

Related Issue

Summary

Details

Breaking change? (Yes/No)

References

changeset-bot bot commented Apr 29, 2024 • edited Loading

🦋 Changeset detected

Choose a reason for hiding this comment

Choose a reason for hiding this comment

github-actions bot commented Apr 29, 2024 • edited Loading

Chromatic Report

codecov bot commented Apr 29, 2024 • edited Loading

Codecov Report

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

yangwooseong Apr 29, 2024 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

channeltalk bot commented May 2, 2024

Add `AlphaButton` component #2182

Add `AlphaButton` component #2182

yangwooseong commented Apr 29, 2024 •

edited

Loading

changeset-bot bot commented Apr 29, 2024 •

edited

Loading

github-actions bot commented Apr 29, 2024 •

edited

Loading

codecov bot commented Apr 29, 2024 •

edited

Loading

yangwooseong Apr 29, 2024 •

edited

Loading