From 356ac2b197b55319590e4df865d008a1320500cf Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Fri, 12 May 2023 18:35:10 +0900 Subject: [PATCH 1/2] fix(segmented-control): fix passing a number to the width prop to work correctly --- .../components/Forms/SegmentedControl/SegmentedControl.tsx | 4 +++- 1 file changed, 3 insertions(+), 1 deletion(-) diff --git a/packages/bezier-react/src/components/Forms/SegmentedControl/SegmentedControl.tsx b/packages/bezier-react/src/components/Forms/SegmentedControl/SegmentedControl.tsx index db9e81a0a3..7f2ef73a4b 100644 --- a/packages/bezier-react/src/components/Forms/SegmentedControl/SegmentedControl.tsx +++ b/packages/bezier-react/src/components/Forms/SegmentedControl/SegmentedControl.tsx @@ -8,6 +8,8 @@ import * as RadioGroupPrimitive from '@radix-ui/react-radio-group' import * as TabsPrimitive from '@radix-ui/react-tabs' import classNames from 'classnames' +import { isNumber } from '~/src/utils/typeUtils' + import { Divider } from '~/src/components/Divider' import useFormFieldProps from '~/src/components/Forms/useFormFieldProps' @@ -61,7 +63,7 @@ function SegmentedControlItemListImpl< const style = useMemo(() => ({ ...styleProp, - '--bezier-react-segmented-control-width': width, + '--bezier-react-segmented-control-width': isNumber(width) ? `${width}px` : width, } as React.CSSProperties), [ styleProp, width, From e0ea8c1c177b2ec61e572f7f339cd65aa1fea3af Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Fri, 12 May 2023 18:36:04 +0900 Subject: [PATCH 2/2] chore(changeset): add changeset --- .changeset/ninety-books-behave.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/ninety-books-behave.md diff --git a/.changeset/ninety-books-behave.md b/.changeset/ninety-books-behave.md new file mode 100644 index 0000000000..d2a081cacd --- /dev/null +++ b/.changeset/ninety-books-behave.md @@ -0,0 +1,5 @@ +--- +"@channel.io/bezier-react": patch +--- + +Fix passing a number to the `width` prop of a `SegmentedControl` to work correctly.