Skip to content

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

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 11 commits into from
May 8, 2025
Merged
5 changes: 5 additions & 0 deletions .changeset/fifty-olives-beg.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@channel.io/bezier-react': patch
---

Disable truncation of SegmentedControl Item
5 changes: 5 additions & 0 deletions .changeset/spicy-cows-enjoy.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@channel.io/bezier-react': patch
---

Adjusted SegmentedControl's typo, padding, and gap as design spec changes
Original file line number Diff line number Diff line change
Expand Up @@ -184,5 +184,5 @@
}

.SegmentedControlItemLabel {
padding: 1px 4px;
padding: 1px 0;
}
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,7 @@ import {
type SegmentedControlItemProps,
type SegmentedControlProps,
type SegmentedControlRadioGroupProps,
type SegmentedControlSize,
type SegmentedControlTabContentProps,
type SegmentedControlTabListProps,
type SegmentedControlTabsProps,
Expand Down Expand Up @@ -289,6 +290,17 @@ type ItemProps<Type extends SegmentedControlType> = (Type extends 'radiogroup'
React.HTMLAttributes<HTMLButtonElement> &
Partial<SegmentedControlItemProps<Type>>

function getTypography(size: SegmentedControlSize) {
return (
{
xs: '13',
s: '13',
m: '13',
l: '14',
} as const
)[size]
}

const Item = forwardRef<HTMLButtonElement, ItemProps<SegmentedControlType>>(
function Item(
{ children, leftContent, rightContent, className, ...rest },
Expand Down Expand Up @@ -324,17 +336,18 @@ const Item = forwardRef<HTMLButtonElement, ItemProps<SegmentedControlType>>(
<HStack
className={styles.SegmentedControlItemContainer}
align="center"
spacing={2}
spacing={4}
>
{leftContent}

<Text
className={styles.SegmentedControlItemLabel}
bold
truncated
typo={size === 'xs' ? '13' : '14'}
typo={getTypography(size)}
>
{children}
</Text>

{rightContent}
</HStack>
</BaseButton>
Expand Down
Loading