Use `AlphaSpinner` in `AlphaButton` component set #2252

yangwooseong · 2024-05-30T07:29:41Z

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

None

Summary

AlphaButton안에 있는 로더 컴포넌트를 새로 만든 AlphaSpinner로 교체합니다.

Details

디자인 스펙에 의하면, 버튼안에 있는 AlphaSpinner의 사이즈는 아이콘 사이즈와 일치해야합니다. 따라서 버튼의 스타일 코드가 아이콘의 사이즈 맵(e.g. s - 20, m -24, ...) 을 알 필요가 있습니다. 이런 비슷한 경우가 SegmentedControl - Divider 컴포넌트에서 variables classname을 사용한 경우가 있었는데, 이 PR에서는 스타일 코드를 직접 @include로 가져와서 그 안에 있는 변수에 접근하는 방향으로 해결해봤습니다. 내보내는 쪽과 사용하는 쪽에서 불필요하게 variables classname을 사용하지 않아도 되는 장점이 있어서 이렇게 시도해봤습니다.
이에 따라 아이콘 사이즈를 js로 결정하던 것에서 scss 안에서 맵을 들고 있는 형태로 변경했습니다.
Spinner 쪽에서는 vectorEffect="non-scaling-stroke"를 지웠습니다. vectorEffect="non-scaling-stroke"가 없으면, stroke-width=2px로 고정해도 svg 사이즈에 맞게 바뀌기 때문에 사이즈마다 4px, 6px로 지정했던 의도였습니다. 그런데 버튼아래에서 사용하게 되면, 버튼의 아이콘 사이즈마다 다른 storke-width 를 지정하는 것보다 고정된 storke-width로 해놓는 게 자연스러워서 vectorEffect 속성을 지우고, width 를 s,m 사이즈에 따라 (실제 디자인상 stroke-width) / (svg 사이즈 / viewport 사이즈) 으로 계산했습니다.

Breaking change? (Yes/No)

No

References

changeset-bot · 2024-05-30T07:29:45Z

🦋 Changeset detected

Latest commit: 3bf61ef

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

channeltalk · 2024-05-30T07:29:46Z

https://desk.channel.io/#/channels/1/team_chats/groups/1237/66582ae9f109952276ea

codecov · 2024-05-30T07:32:19Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 84.87%. Comparing base (aee96f6) to head (3bf61ef).

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #2252      +/-   ##
==========================================
+ Coverage   84.65%   84.87%   +0.22%     
==========================================
  Files         136      136              
  Lines        2893     2883      -10     
  Branches      863      872       +9     
==========================================
- Hits         2449     2447       -2     
+ Misses        439      407      -32     
- Partials        5       29      +24

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

github-actions · 2024-05-30T07:33:00Z

Chromatic Report

🚀 Congratulations! Your build was successful!

yangwooseong · 2024-05-30T07:34:16Z

packages/bezier-react/src/components/AlphaSpinner/Spinner.module.scss

@@ -39,14 +41,12 @@

  &:where(.size-s) {
    --b-spinner-size: 28px;
-    --b-spinner-stroke-width: 4px;
-    --b-spinner-stroke-dasharray: 40 9999;
+    --b-spinner-stroke-width: calc(16 * 4px / 28);


/ 뒤에 있는 수치는 단위가 없는 값이어야 해서 --b-spinner-size를 그대로 사용하지 못했습니다

scss 변수를 하나 더 두는 건 어떤가요?

단위 없이 값만 같은 --b-spinner-size-value: 28 같은 값을 두는 걸 의미하신건가요?

--b-spinner-size: #{SIZE_S}px; 같은 식으로 변수를 하나 두고 재사용할 수 있지 않을까 했어요

calc(1px * number) 를 사용하면 되네요! (311a11d)

- add missed classname - change vector effect to default and fix storke property to constant

…e-thickness

yangwooseong · 2024-05-31T07:48:38Z

packages/bezier-react/src/components/AlphaSpinner/Spinner.tsx

@@ -32,14 +32,14 @@ export const Spinner = forwardRef<HTMLSpanElement, SpinnerProps>(
          <circle
            cx="8"
            cy="8"
-            r="7"
+            r="6.5"


r="7"일 때 약간 찌그러지는 현상이 있어서 줄였습니다

yangwooseong · 2024-05-31T07:49:43Z

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

@@ -124,8 +124,6 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
            <AlphaSpinner
              className={styles.Spinner}
              variant="on-overlay"
-              // NOTE: Spinner size will be overridden by Icon size
-              size="s"


이걸 없애야 --b-spinner-stroke-width: 2px; 로 고정한 게 잘 적용됩니다. 참고로 AlphaSpinner는 디폴트값이 없습니다.

@yangwooseong

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 ([#2256](#2256)) by @yangwooseong Added - fast-forward-filled.svg - fast-rewind-filled.svg - paused.svg - play-filled.svg - skip-filled.svg - split-left-filled.svg - split-right-filled.svg Modified - fast-forward.svg - fast-rewind.svg - play.svg - skip.svg - split-left.svg - split-right.svg - view-off.svg Renamed - pause.svg -> paused-filled.svg ## @channel.io/[email protected] ### Patch Changes - Changes in `Button` component set ([#2252](#2252)) by @yangwooseong - use `AlphaSpinner` instead of `Spinner` component for loading state. - set size of `AlphaSpinner` to be `Icon` size. - Change `white-absolute` to `white` in `AlphaButton` and `AlphaIconButton` color. ([#2278](#2278)) by @yangwooseong - Changes with `Button` component ([#2253](#2253)) by @yangwooseong - Change `white` to `white-absolute` in `color` props. - Apply `white-alpha/transparent` token for `tertiary` button. - Updated dependencies - @channel.io/[email protected] ## @channel.io/[email protected] ### Patch Changes - Add `white-alpha/transparent` token. ([#2253](#2253)) by @yangwooseong - Change `innerShadow` value of `alpha-shadow-input-default` token to reference `color.shadow.medium` ([#2274](#2274)) by @yangwooseong ## [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 May 30, 2024

yangwooseong self-assigned this May 30, 2024

yangwooseong requested a review from sungik-choi as a code owner May 30, 2024 07:29

yangwooseong commented May 30, 2024

View reviewed changes

yangwooseong force-pushed the WEB-1577/spinner-in-button branch 3 times, most recently from 1f7ce3c to 6e62741 Compare May 31, 2024 07:42

yangwooseong added 12 commits May 31, 2024 16:43

refactor(icon): move icon size map into scss

509c22d

feat(spinner): minor changes in spinner

6729da4

- add missed classname - change vector effect to default and fix storke property to constant

feat(button): change spinner size to icon size

29e9444

feat(button): change spinner size to icon size in extra buttons

f6b0af1

chore(changeset): add

39b3283

chore(button): add where selector, reorder classname props

87c52cc

chore(icon): update snapshot

0f02afb

style(button): resolve lint error

f790ef6

feat(spinner): reflect design spec for stroke-width

809fb8f

feat(spinner): use css variable for stroke-width, spinner-size, strok…

311a11d

…e-thickness

feat(spinner): rm default spinner size in button

1499e14

feat(spinner): resize spinner radius to be smooth

3bf61ef

yangwooseong force-pushed the WEB-1577/spinner-in-button branch from 6e62741 to 3bf61ef Compare May 31, 2024 07:43

yangwooseong commented May 31, 2024

View reviewed changes

sungik-choi approved these changes Jun 3, 2024

View reviewed changes

yangwooseong merged commit 01db263 into channel-io:main Jun 3, 2024
9 checks passed

ch-builder mentioned this pull request Jun 3, 2024

ci(changesets): version packages #2257

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Use `AlphaSpinner` in `AlphaButton` component set #2252

Use `AlphaSpinner` in `AlphaButton` component set #2252

yangwooseong commented May 30, 2024 •

edited

Loading

changeset-bot bot commented May 30, 2024 •

edited

Loading

channeltalk bot commented May 30, 2024

codecov bot commented May 30, 2024 •

edited

Loading

github-actions bot commented May 30, 2024 •

edited

Loading

yangwooseong May 30, 2024

sungik-choi May 30, 2024

yangwooseong May 31, 2024 •

edited

Loading

sungik-choi May 31, 2024

yangwooseong May 31, 2024

yangwooseong May 31, 2024

yangwooseong May 31, 2024

Use AlphaSpinner in AlphaButton component set #2252

Use AlphaSpinner in AlphaButton component set #2252

Conversation

yangwooseong commented May 30, 2024 • edited Loading

Self Checklist

Related Issue

Summary

Details

Breaking change? (Yes/No)

References

changeset-bot bot commented May 30, 2024 • edited Loading

🦋 Changeset detected

channeltalk bot commented May 30, 2024

codecov bot commented May 30, 2024 • edited Loading

Codecov Report

github-actions bot commented May 30, 2024 • edited Loading

Chromatic Report

yangwooseong May 30, 2024

Choose a reason for hiding this comment

sungik-choi May 30, 2024

Choose a reason for hiding this comment

yangwooseong May 31, 2024 • edited Loading

Choose a reason for hiding this comment

sungik-choi May 31, 2024

Choose a reason for hiding this comment

yangwooseong May 31, 2024

Choose a reason for hiding this comment

yangwooseong May 31, 2024

Choose a reason for hiding this comment

yangwooseong May 31, 2024

Choose a reason for hiding this comment

Use `AlphaSpinner` in `AlphaButton` component set #2252

Use `AlphaSpinner` in `AlphaButton` component set #2252

yangwooseong commented May 30, 2024 •

edited

Loading

changeset-bot bot commented May 30, 2024 •

edited

Loading

codecov bot commented May 30, 2024 •

edited

Loading

github-actions bot commented May 30, 2024 •

edited

Loading

yangwooseong May 31, 2024 •

edited

Loading