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

ToggleEmojiButton #2293

Open
yangwooseong opened this issue Jun 18, 2024 · 1 comment
Open

ToggleEmojiButton #2293

yangwooseong opened this issue Jun 18, 2024 · 1 comment
Assignees
@yangwooseong
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 Jun 18, 2024
@yangwooseong yangwooseong self-assigned this Jun 18, 2024
@channeltalk ChannelTalk
Copy link

channeltalk bot commented Jun 18, 2024

https://desk.channel.io/#/channels/1/team_chats/groups/1237/6670db5bb3be4c46e019

@yangwooseong yangwooseong added the feat:component Issue or PR related to a new component label Jun 18, 2024
@yangwooseong yangwooseong mentioned this issue Jun 21, 2024
Merged
6 tasks
@yangwooseong yangwooseong changed the title ToggleIconButton ToggleEmojiButton Jun 21, 2024
yangwooseong added a commit that referenced this issue Nov 6, 2024
@yangwooseong
Add ToggleEmojiButtonGroup and ToggleEmojiButtonSource component (#…
26658dc 
…2301)

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

- #2293 

<!-- Fixes #0000 -->

## Summary

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

- `ToggleEmojiButtonGroup`과 `ToggleEmojiButtonSource` 컴포넌트를 구현합니다.

## Details

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

- fillDirection="all" 일 때 컨테이너에 넘치지 않을 만큼 가로 세로 1:1 비율로 늘어나는 스타일을 css 로
구현하는 것이 어려웠습니다. aspect-ration: 1/1, width: 100%, height: auto 로 시도해봤으나,
컨테이너가 100px * 50px 의 크기를 가질 때 버튼이 100px * 100px 로 되버리는 문제가 있었습니다. 어쩔 수
없이 js로 계산해서 resizeObserver까지 다는 방식으로 구현했습니다.
- `ToggleEmojiButtonSource`컴포넌트안에 이모지를 보여줄때, imageUrl를 props로 열여주는 것도
생각했지만 이렇게 하면 모바일에서 구현이 어려운 문제가 있어서 content속성을 그대로 활용했습니다.

### 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/channelio/Toggle-Icon-Button-Group-8b320d0c2dbe4d4b8d5731f95fece172)
-
[디자인(internal)](https://www.figma.com/design/fPXP9zfjZU9NyARnhTWL6o/Input?node-id=534-870&t=yVpw7vZQjCm6IsCK-0)
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
No open projects
Bezier React
Status: 📌 Backlog
Milestone
No milestone
Development

No branches or pull requests
1 participant
@yangwooseong