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.

Sign up for GitHub

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

Jump to bottom

Spinner #2236

Closed
Tracked by #2148
yangwooseong opened this issue May 22, 2024 · 1 comment · Fixed by #2237
Closed
Tracked by #2148

Spinner #2236

yangwooseong opened this issue May 22, 2024 · 1 comment · Fixed by #2237
Assignees
@yangwooseong
Labels
feat:component Issue or PR related to a new component

Comments

@yangwooseong
Copy link
Collaborator

No description provided.

@channeltalk ChannelTalk
Copy link

channeltalk bot commented May 22, 2024

https://desk.channel.io/#/channels/1/team_chats/groups/1237/664db3e26e8440b3c29d

@yangwooseong yangwooseong self-assigned this May 22, 2024
@yangwooseong yangwooseong added the feat:component Issue or PR related to a new component label May 22, 2024
This was referenced May 22, 2024
Open
Merged
yangwooseong added a commit that referenced this issue May 29, 2024
@yangwooseong
Add AlphaSpinner component (#2237)
0947af5 
<!--
  How to write a good PR title:
- Follow [the Conventional Commits
specification](https://www.conventionalcommits.org/en/v1.0.0/).
  - Give as much context as necessary and as little as possible
  - Prefix it with [WIP] while it’s a work in progress
-->

## 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

<!-- Please link to issue if one exists -->

<!-- Fixes #0000 -->

- Fixes #2236

## Summary

<!-- Please brief explanation of the changes made -->

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

## Details

<!-- Please elaborate description of the changes -->

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

### Breaking change? (Yes/No)

<!-- If Yes, please describe the impact and migration path for users -->

- No

## References

<!-- Please list any other resources or points the reviewer should be
aware of -->

-
[스펙(internal)](https://www.notion.so/Spinner-e1e30e3fdcb14a3ba94b900d24e0d58e?d=85604f3bca254e758c57c5949412d470&pvs=5#b887eb2d1ad843458f0ba2a90eee430e)
-
[디자인(internal)](https://www.figma.com/design/KyhPPZeeC0JBmTclJGe3nn/Status?node-id=6%3A69&t=eqYaVwNelOoBo1zv-1)
- 참고한 구현방식: https://atlassian.design/components/spinner/examples
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@yangwooseong yangwooseong

Labels
feat:component Issue or PR related to a new component
Projects
Bezier React
Archived in project
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

Add AlphaSpinner component yangwooseong/bezier-react
1 participant
@yangwooseong