Skip to content

Apply hovered color token for AlphaButton, AlphaFloatingButton, AlphaFloatingIconButton #2471

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

Merged
merged 15 commits into from
Nov 6, 2024

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

  • None

Summary

  • global/color/green/300-0 토큰 값을 수정합니다.
  • hovered color 계산하는 로직을 수정하고 버튼의 호버 효과에 hovered color 를 적용합니다.

Details

  • 계산 로직은 노션을 참고해주세요. 기존 로직으로 하면 무채색일 때 눈에 너무 띄게 변하거나 눈에 안띄게 변하는 구간이 있어서 분기를 추가했습니다. 확정된 버전이라서, 이전에 언급했던 것처럼 hovered color를 foundation 에 추가해서 스토리로 만들고, 유저가 입력하는 색깔을 hovered color 로 바꿔서 보여주는 스토리도 추가해서 디자이너나 모바일 개발자가 참고할 수 있게 하면 좋을 것 같습니다.
  • 버튼에 hovered color를 적용할 때 FloatingButton/secondary 인 경우는 배경색을 그대로 하고 텍스트 색깔과 shadow 효과만 다르게 하기로 했습니다.
  • 프리뷰 용도로 색깔별로 버튼을 모아놓은 Hovered 스토리를 만들었습니다. 이건 리뷰 후에 없애도 좋을 것 같습니다.

Breaking change? (Yes/No)

  • No

References

@yangwooseong yangwooseong added enhancement Issues or PR related to making existing features better bezier-tokens Issue or PR related to bezier-tokens labels Oct 31, 2024
@yangwooseong yangwooseong self-assigned this Oct 31, 2024
Copy link

channeltalk bot commented Oct 31, 2024

Copy link

changeset-bot bot commented Oct 31, 2024

🦋 Changeset detected

Latest commit: 96bbba3

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 4 packages
Name Type
@channel.io/bezier-tokens Patch
@channel.io/bezier-react Patch
@channel.io/stylelint-bezier 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

codecov bot commented Oct 31, 2024

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 83.28%. Comparing base (3a10b33) to head (96bbba3).
Report is 1 commits behind head on main.

Additional details and impacted files
@@           Coverage Diff           @@
##             main    #2471   +/-   ##
=======================================
  Coverage   83.28%   83.28%           
=======================================
  Files         141      141           
  Lines        2943     2943           
  Branches      912      912           
=======================================
  Hits         2451     2451           
  Misses        487      487           
  Partials        5        5           

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

Copy link
Contributor

github-actions bot commented Oct 31, 2024

Chromatic Report

🚀 Congratulations! Your build was successful!

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.

👍

@yangwooseong yangwooseong force-pushed the WEB-5155/apply-hovered branch from 4201e96 to 96bbba3 Compare November 6, 2024 00:58
@yangwooseong yangwooseong merged commit 8e6fb64 into channel-io:main Nov 6, 2024
7 checks passed
@yangwooseong yangwooseong deleted the WEB-5155/apply-hovered branch November 6, 2024 01:01
yangwooseong pushed a commit that referenced this pull request Nov 6, 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/[email protected]

### Minor Changes

- The use client directive has been added at the top of all components
inside @channel.io/bezier-react.
([#2468](#2468)) by
@nayounsang

### Patch Changes

- Remove 1px gap between icon and text in `s` size `AlphaButton`,
`AlphaFloatingButton`.
([#2484](#2484)) by
@yangwooseong

- Apply hovered color token for `AlphaButton`, `AlphaFloatingButton`,
and `AlphaFloatingIconButton`.
([#2471](#2471)) by
@yangwooseong

- Add `ToggleEmojiButtonGroup` and `ToggleEmojiButtonSource` component.
([#2301](#2301)) by
@yangwooseong

-   Updated dependencies
    -   @channel.io/[email protected]

## @channel.io/[email protected]

### Patch Changes

- Change `alpha-color-green-300-0` alpha token.
([#2471](#2471)) by
@yangwooseong
Modify hovered color generating formula so that they are more visible in
dark theme.

## @channel.io/[email protected]

### Patch Changes

-   Updated dependencies
    -   @channel.io/[email protected]

## [email protected]

### Patch Changes

-   Updated dependencies
    -   @channel.io/[email protected]

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
bezier-tokens Issue or PR related to bezier-tokens enhancement Issues or PR related to making existing features better
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants