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 AlphaAvatarGroup component #2177

Merged
merged 16 commits into from
Apr 25, 2024

Conversation

yangwooseong
Copy link
Collaborator

@yangwooseong yangwooseong commented Apr 24, 2024

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

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

Details

  • AvatarGroup 에서 새로운 디자인 토큰을 사용하고 있지 않아서 토큰을 갈아끼울 필요는 없었습니다.
  • 아바타 사이즈에 따라서 border 두께를 다르게 주도록 디자인이 변경된 부분이 있어서 AvatarGroup에서 사이즈를 컨텍스트를 내려주도록 했습니다.
  • 불필요하게 열어주는 속성을 제거했습니다. ellipsisStyle, ellipsisClassName, onMouseEnterEllipsis, onMouseLeaveEllipsis속성이 없어졌습니다.

Breaking change? (Yes/No)

  • No

References

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

changeset-bot bot commented Apr 24, 2024

🦋 Changeset detected

Latest commit: 4d2a295

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
Contributor

github-actions bot commented Apr 24, 2024

Chromatic Report

🚀 Congratulations! Your build was successful!

@channel-io channel-io deleted a comment from channeltalk bot Apr 24, 2024
Copy link

codecov bot commented Apr 24, 2024

Codecov Report

Attention: Patch coverage is 90.66667% with 7 lines in your changes are missing coverage. Please review.

Project coverage is 86.83%. Comparing base (59787c2) to head (4d2a295).
Report is 1 commits behind head on main.

Files Patch % Lines
...ct/src/components/AlphaAvatarGroup/AvatarGroup.tsx 90.56% 5 Missing ⚠️
...bezier-react/src/components/AlphaAvatar/Avatar.tsx 90.90% 2 Missing ⚠️
Additional details and impacted files
@@            Coverage Diff             @@
##             main    #2177      +/-   ##
==========================================
+ Coverage   86.80%   86.83%   +0.03%     
==========================================
  Files         128      130       +2     
  Lines        2735     2803      +68     
  Branches      815      828      +13     
==========================================
+ Hits         2374     2434      +60     
- Misses        332      340       +8     
  Partials       29       29              

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

Copy link
Contributor

@sungik-choi sungik-choi left a comment

Choose a reason for hiding this comment

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

불필요하게 열어주는 속성을 제거했습니다. ellipsisStyle, ellipsisClassName, onMouseEnterEllipsis, onMouseLeaveEllipsis속성이 없어졌습니다.

구현할 당시 ellipsis에 Tooltip 등을 보여주는 케이스를 고려했던건데, 현재 데스크 기준 사용처가 없으므로 일단 제거해도 무방할 거 같습니다 👍

}
}

function getSpreadRadius(size: AvatarSize) {
Copy link
Contributor

Choose a reason for hiding this comment

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

마이너) getShadow 함수 내부로 인라인해도 될 거 같아요.

Comment on lines +88 to +89
const avatarGroupContext = useAvatarGroupContext()
const size = avatarGroupContext?.size ?? sizeProps
Copy link
Contributor

Choose a reason for hiding this comment

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

👍

Copy link

channeltalk bot commented Apr 25, 2024

@yangwooseong yangwooseong merged commit 61752bf into channel-io:main Apr 25, 2024
6 checks passed
@yangwooseong yangwooseong deleted the web-445/avatar-group branch April 25, 2024 04:15
sungik-choi pushed a commit that referenced this pull request Apr 26, 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.3

### Patch Changes

- Implement `AlphaAvatar` component.
([#2162](#2162)) by
@yangwooseong

- Add `AlphaAvatarGroup` component
([#2177](#2177)) by
@yangwooseong

-   Updated dependencies
    -   @channel.io/bezier-tokens@0.2.2

## @channel.io/bezier-tokens@0.2.2

### Patch Changes

- Add `opacity-disabled` to alpha token.
([#2162](#2162)) by
@yangwooseong

- Fix the value of alpha color.cobalt.300
([#2160](#2160)) by
@sungik-choi

## bezier-figma-plugin@0.5.3

### Patch Changes

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

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>
yangwooseong pushed a commit to yangwooseong/bezier-react that referenced this pull request May 2, 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.3

### Patch Changes

- Implement `AlphaAvatar` component.
([channel-io#2162](channel-io#2162)) by
@yangwooseong

- Add `AlphaAvatarGroup` component
([channel-io#2177](channel-io#2177)) by
@yangwooseong

-   Updated dependencies
    -   @channel.io/bezier-tokens@0.2.2

## @channel.io/bezier-tokens@0.2.2

### Patch Changes

- Add `opacity-disabled` to alpha token.
([channel-io#2162](channel-io#2162)) by
@yangwooseong

- Fix the value of alpha color.cobalt.300
([channel-io#2160](channel-io#2160)) by
@sungik-choi

## bezier-figma-plugin@0.5.3

### Patch Changes

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

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
Archived in project
Development

Successfully merging this pull request may close these issues.

AvatarGroup
2 participants