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

Icon Button #2199

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

Icon Button #2199

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

Comments

@yangwooseong
Copy link
Collaborator

No description provided.

@yangwooseong yangwooseong converted this from a draft issue May 7, 2024
Copy link

channeltalk bot commented May 7, 2024

@yangwooseong yangwooseong self-assigned this May 7, 2024
yangwooseong added a commit that referenced this issue May 13, 2024
<!--
  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 #2199

## Summary

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

- 아이콘만 있는 `AlphaIconButton` 컴포넌트를 구현합니다. 

## Details

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

- 스타일은 버튼 컴포넌트에서 거의 그대로 가져왔습니다.#2180 까지는 복붙으로 구현한 후에 후속작업에서 버튼 컴포넌트의
스타일을 background-color, color, hover effect 별로 믹스인으로 분리하고 이를 재사용하는 형태로
리팩토링할 예정입니다.
- 아이콘만 있는 경우 접근성을 위해 적절히 라벨을 주는 것이 필요합니다. 이를 위해서 (i) hidden text 를 주는 방법
(ii) aria-label 을 주는 방법 등이 있는데, hidden text 를 주면 문제가 발생한 경우가 있기도 하고
aria-label 을 주는 것이 간편해보여서 이 방법으로 하려고 합니다.
([#](#1310)). 다만
aria-label을 required로 해야할 지는 의문입니다. 다른 라이브러리를 찾아보니 라이브러리마다 다른 부분이기도 하고,
베지어에서는 접근성 관련 속성을 required로 한 적이 없어서 optional이 좋겠다는 생각입니다.
- `IconButtonStyleVariant`, `IconButtonColor` 타입을 export 할 필요는 없는 것 같아서
하지 않았습니다. 이전에는 enum으로 사용하고 있어서 export 해야만 했는데 현재는 그렇지 않아서
`IconButtonProps['variant']` 처럼 사용하는 것이 가능합니다. 이거는 V2 컴포넌트 전반적으로 컨벤션이
맞춰지면 좋을 것 같아서 의견 부탁드립니다. (@sungik-choi)

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

- https://www.sarasoueidan.com/blog/accessible-icon-buttons/
- https://v2.chakra-ui.com/docs/components/icon-button#usage
- https://primer.style/components/icon-button/react/alpha#iconbutton
@github-project-automation github-project-automation bot moved this from 📌 Backlog to ✅ Done in Bezier React May 13, 2024
@yangwooseong yangwooseong added the feat:component Issue or PR related to a new component label May 22, 2024
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 a pull request may close this issue.

1 participant