feat(SegmentedControl): adjusted text size and remove side paddings #2623

dohyun-ko · 2025-04-15T06:54:53Z

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

Resized SegmentedControlItem's size according to the design spec changes

Details

Adjust the spacing between items from 2 to 4
Update the font size of text(s and m size) from 14 to 13
Remove the horizontal padding of the text (formerly 4px)

Breaking change? (Yes/No)

References

changeset-bot · 2025-04-15T06:54:57Z

🦋 Changeset detected

Latest commit: 45de2b9

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

channeltalk · 2025-04-15T06:54:57Z

https://desk.channel.io/#/channels/1/team_chats/groups/1237/67fe02c183d8df6b0938

codecov · 2025-04-15T06:57:16Z

Codecov Report

All modified and coverable lines are covered by tests ✅

Project coverage is 81.88%. Comparing base (d29278e) to head (45de2b9).
Report is 1 commits behind head on main.

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #2623   +/-   ##
=======================================
  Coverage   81.87%   81.88%           
=======================================
  Files         145      145           
  Lines        2891     2892    +1     
  Branches      915      920    +5     
=======================================
+ Hits         2367     2368    +1     
- Misses        494      520   +26     
+ Partials       30        4   -26

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

🚀 New features to boost your workflow:

❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

github-actions · 2025-04-15T07:00:09Z

Chromatic Report

🚀 Congratulations! Your build was successful!

dohyun-ko · 2025-04-15T07:02:11Z

스토리북 SegmentedControl에 leftContent, rightContent도 추가할까요?

yangwooseong · 2025-04-15T09:20:25Z

이번에 바뀌는 디자인 스펙이 SegmentControl 의 모든 사이즈에 적용되는 것인가요?

dohyun-ko · 2025-04-15T09:24:51Z

@yangwooseong 넵! 요 스레드에서 리버께서 그렇게 말씀하셨습니다!

yangwooseong · 2025-04-17T05:33:37Z

packages/bezier-react/src/components/SegmentedControl/SegmentedControl.tsx

+            />
+          ) : (
+            leftContent
+          )}


베지어에서 인터페이스를 바꾸기 보다 사용처에서 xs 사이즈의 아이콘으로 넣는 것은 어떨까요? 지금 스펙상으로는 SegmentedControl이 s, xs 사이즈 에 대한 아이콘 사이즈는 정해지지 않은 것 같아서 이걸 스펙으로 가져가기는 애매한 것 같기도 합니다.

yangwooseong · 2025-04-17T05:34:25Z

@yangwooseong 넵! 요 스레드에서 리버께서 그렇게 말씀하셨습니다!

m 사이즈 한정이라고 하셔서 다시 확인 부탁드립니다!

Revert adding BezierIcon to SideContentProps of SegmentedControl

.changeset/unlucky-knives-sit.md

packages/bezier-react/src/components/SegmentedControl/SegmentedControl.types.ts

.changeset/spicy-cows-enjoy.md

packages/bezier-react/src/components/SegmentedControl/SegmentedControl.tsx

Co-authored-by: Yang Wooseong (Andrew) <[email protected]>

…dControl.tsx Co-authored-by: Yang Wooseong (Andrew) <[email protected]>

sungik-choi

PR 설명 업데이트 부탁드립니다!

dohyun-ko · 2025-05-02T10:51:21Z

연휴 끝나고 오전에 다시 체크한 뒤 리뷰 재요청 드리겠습니다!
지금 보기에는 변경된 스펙과 동일하게 맞춘 것 같긴 합니다

dohyun-ko · 2025-05-07T05:28:51Z

피그마 상에는 tab별 사이드 패딩이 있으나 어차피 overflow 가능하고 & 기존에도 베지어상에는 패딩이 존재하지 않았기에 추가하지 않았습니다.
@sungik-choi 께 제가 대면으로 여쭤봤을 때, hover 시 동작 때문에 sudo selector 등을 써서 구현해야 한다고 해주셨던 것 같은데 지금은 그 문제가 발생하지 않는 것 같습니다 (제가 재현하지 못하고 있을 수도 있습니다)
한 번 확인해주시면 감사하겠습니다

@dohyun-ko

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] ### Patch Changes - Disable truncation of SegmentedControl Item ([#2623](#2623)) by @dohyun-ko - Adjusted SegmentedControl's typo, padding, and gap as design spec changes ([#2623](#2623)) by @dohyun-ko ## [email protected] ### Patch Changes - Updated dependencies - @channel.io/[email protected] Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>

dohyun-ko added 2 commits April 15, 2025 15:42

fix(SegmentedControl): make default icon and text size smaller

a25a108

chore: add a changeset

bd6b7bc

dohyun-ko requested review from sungik-choi and yangwooseong as code owners April 15, 2025 06:54

channeltalk bot assigned dohyun-ko Apr 15, 2025

dohyun-ko added the fix PR related to bug fix label Apr 15, 2025

dohyun-ko force-pushed the web-7937 branch from 4e83f6d to bd6b7bc Compare April 15, 2025 06:59

yangwooseong reviewed Apr 17, 2025

View reviewed changes

dohyun-ko added 2 commits April 23, 2025 16:07

fix: adjust typo and padding as the design spec changes

6d9c7e1

Revert adding BezierIcon to SideContentProps of SegmentedControl

chore: add a changeset

2b3fb35

dohyun-ko requested a review from yangwooseong April 23, 2025 07:12

yangwooseong reviewed Apr 23, 2025

View reviewed changes

.changeset/unlucky-knives-sit.md Outdated Show resolved Hide resolved

yangwooseong reviewed Apr 23, 2025

View reviewed changes

packages/bezier-react/src/components/SegmentedControl/SegmentedControl.types.ts Outdated Show resolved Hide resolved

chore: remove useless chageset & imports

6cd0a39

yangwooseong self-requested a review April 28, 2025 05:23

yangwooseong reviewed Apr 28, 2025

View reviewed changes

.changeset/spicy-cows-enjoy.md Outdated Show resolved Hide resolved

yangwooseong reviewed Apr 28, 2025

View reviewed changes

packages/bezier-react/src/components/SegmentedControl/SegmentedControl.tsx Outdated Show resolved Hide resolved

dohyun-ko and others added 2 commits April 28, 2025 17:52

Update .changeset/spicy-cows-enjoy.md

412ce61

Co-authored-by: Yang Wooseong (Andrew) <[email protected]>

Update packages/bezier-react/src/components/SegmentedControl/Segmente…

67f6952

…dControl.tsx Co-authored-by: Yang Wooseong (Andrew) <[email protected]>

sungik-choi reviewed Apr 29, 2025

View reviewed changes

dohyun-ko added 2 commits May 2, 2025 19:40

fix(SegmentedControl.Item): remove side paddings & do not truncate text

824e282

chore: add a changeset

c359b20

dohyun-ko changed the title ~~feat(SegmentedControl): make default text and icon size smaller~~ feat(SegmentedControl): adjusted text size and remove side paddings May 2, 2025

chore: change the changeset content

41a815c

dohyun-ko requested review from yangwooseong and sungik-choi May 7, 2025 05:28

sungik-choi approved these changes May 7, 2025

View reviewed changes

yangwooseong approved these changes May 8, 2025

View reviewed changes

Merge branch 'main' into web-7937

45de2b9

yangwooseong merged commit b4163ce into channel-io:main May 8, 2025
9 checks passed

ch-builder mentioned this pull request May 8, 2025

ci(changesets): version packages #2637

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat(SegmentedControl): adjusted text size and remove side paddings #2623

feat(SegmentedControl): adjusted text size and remove side paddings #2623

Uh oh!

dohyun-ko commented Apr 15, 2025 •

edited

Loading

Uh oh!

changeset-bot bot commented Apr 15, 2025 •

edited

Loading

Uh oh!

channeltalk bot commented Apr 15, 2025

Uh oh!

codecov bot commented Apr 15, 2025 •

edited

Loading

Uh oh!

github-actions bot commented Apr 15, 2025 •

edited

Loading

Uh oh!

dohyun-ko commented Apr 15, 2025

Uh oh!

yangwooseong commented Apr 15, 2025

Uh oh!

dohyun-ko commented Apr 15, 2025

Uh oh!

yangwooseong Apr 17, 2025

Uh oh!

yangwooseong commented Apr 17, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sungik-choi left a comment

Uh oh!

dohyun-ko commented May 2, 2025 •

edited

Loading

Uh oh!

dohyun-ko commented May 7, 2025

Uh oh!

Uh oh!

Uh oh!

feat(SegmentedControl): adjusted text size and remove side paddings #2623

feat(SegmentedControl): adjusted text size and remove side paddings #2623

Uh oh!

Conversation

dohyun-ko commented Apr 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Self Checklist

Related Issue

Summary

Details

Breaking change? (Yes/No)

References

Uh oh!

changeset-bot bot commented Apr 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

channeltalk bot commented Apr 15, 2025

Uh oh!

codecov bot commented Apr 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Codecov Report

Uh oh!

github-actions bot commented Apr 15, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Chromatic Report

Uh oh!

dohyun-ko commented Apr 15, 2025

Uh oh!

yangwooseong commented Apr 15, 2025

Uh oh!

dohyun-ko commented Apr 15, 2025

Uh oh!

yangwooseong Apr 17, 2025

Choose a reason for hiding this comment

Uh oh!

yangwooseong commented Apr 17, 2025

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

sungik-choi left a comment

Choose a reason for hiding this comment

Uh oh!

dohyun-ko commented May 2, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

dohyun-ko commented May 7, 2025

Uh oh!

Uh oh!

Uh oh!

dohyun-ko commented Apr 15, 2025 •

edited

Loading

changeset-bot bot commented Apr 15, 2025 •

edited

Loading

codecov bot commented Apr 15, 2025 •

edited

Loading

github-actions bot commented Apr 15, 2025 •

edited

Loading

dohyun-ko commented May 2, 2025 •

edited

Loading