Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Add AlphaSpinner component #2237

Merged
merged 8 commits into from
May 29, 2024
Merged

Conversation

yangwooseong
Copy link
Collaborator

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

Summary

  • AlphaSpinner 컴포넌트를 구현합니다.

Details

  • 기존의 Spinner 컴포넌트와 다르게 곡선의 끝부분이 둥글게 디자인되어 있어서 border속성을 이용해서 구현하기가 어려웠습니다. 그래서 circle 엘리먼트를 2개 만들고 Indicator에 해당하는 곡선의 stroke-dasharray 속성을 조절하는 것으로 구현했습니다.
  • 버튼 컴포넌트 안에서 AlphaSpinner를 사용해야 하는데, 버튼의 아이콘 크기에 맞게 크기를 조절을 해야합니다. 약간 고민이 필요해보여 후속 pr로 작업하겠습니다.

Breaking change? (Yes/No)

  • No

References

@yangwooseong yangwooseong added the feat:component Issue or PR related to a new component label May 23, 2024
@yangwooseong yangwooseong self-assigned this May 23, 2024
Copy link

changeset-bot bot commented May 23, 2024

🦋 Changeset detected

Latest commit: 4682f95

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

Copy link

channeltalk bot commented May 23, 2024

Copy link

codecov bot commented May 23, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 84.61%. Comparing base (a282c2f) to head (4682f95).

Additional details and impacted files
@@            Coverage Diff             @@
##             main    #2237      +/-   ##
==========================================
+ Coverage   84.57%   84.61%   +0.04%     
==========================================
  Files         134      135       +1     
  Lines        2878     2886       +8     
  Branches      860      871      +11     
==========================================
+ Hits         2434     2442       +8     
+ Misses        439      415      -24     
- Partials        5       29      +24     

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

Copy link
Contributor

github-actions bot commented May 23, 2024

Chromatic Report

🚀 Congratulations! Your build was successful!

@yangwooseong yangwooseong force-pushed the WEB-1411/spinner branch 2 times, most recently from 52ed1f8 to 3822b7b Compare May 24, 2024 00:41
}
}

.Spinner {
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

깔끔하네요 👍

Comment on lines 17 to 21
it('should render as a div by default', () => {
const { getByTestId } = renderSpinner()
const renderedSpinner = getByTestId(SPINNER_TEST_ID)
expect(renderedSpinner.tagName).toBe('SPAN')
})
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

테스트 이름과 수행하는 로직이 다릅니다.

Suggested change
it('should render as a div by default', () => {
const { getByTestId } = renderSpinner()
const renderedSpinner = getByTestId(SPINNER_TEST_ID)
expect(renderedSpinner.tagName).toBe('SPAN')
})
it('should render as a span by default', () => {
const { getByTestId } = renderSpinner()
const renderedSpinner = getByTestId(SPINNER_TEST_ID)
expect(renderedSpinner.tagName).toBe('SPAN')
})

@yangwooseong yangwooseong merged commit 0947af5 into channel-io:main May 29, 2024
9 checks passed
@yangwooseong yangwooseong deleted the WEB-1411/spinner branch May 29, 2024 01:19
yangwooseong pushed a commit that referenced this pull request May 29, 2024
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/bezier-react@2.0.7

### Patch Changes

- Change `position` property of `ToastContainer` to `fixed`
([#2245](#2245)) by
@yangwooseong

- Fix typo in `IconProps` jsdoc
([#2232](#2232)) by
@yangwooseong

- - Fix ReactJS console warnings.
([#2238](#2238)) by
@nabi-chan
- Introduce `useIsomorphicLayoutEffect` hook to use `useLayoutEffect` in
SSR environment.

- Add `AlphaSpinner` component
([#2237](#2237)) by
@yangwooseong

## bezier-figma-plugin@0.5.7

### Patch Changes

-   Updated dependencies
    -   @channel.io/bezier-react@2.0.7

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feat:component Issue or PR related to a new component
Projects
No open projects
Archived in project
Development

Successfully merging this pull request may close these issues.

Spinner
2 participants