From 01fb1e7c102e0d1e276aefcca79a61db49e53975 Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Fri, 10 Feb 2023 17:43:49 +0900 Subject: [PATCH 1/7] refactor(radio-group): apply generic value type to component props --- .../src/components/Forms/RadioGroup/Radio.tsx | 18 +++++---- .../Forms/RadioGroup/RadioGroup.tsx | 40 ++++++++++--------- .../Forms/RadioGroup/RadioGroup.types.ts | 24 +++++------ 3 files changed, 45 insertions(+), 37 deletions(-) diff --git a/packages/bezier-react/src/components/Forms/RadioGroup/Radio.tsx b/packages/bezier-react/src/components/Forms/RadioGroup/Radio.tsx index 7bf678c3fc..033ced85e4 100644 --- a/packages/bezier-react/src/components/Forms/RadioGroup/Radio.tsx +++ b/packages/bezier-react/src/components/Forms/RadioGroup/Radio.tsx @@ -6,15 +6,11 @@ import useId from 'Hooks/useId' import { RadioProps } from './RadioGroup.types' import * as Styled from './RadioGroup.styled' -/** - * `Radio` is a checkable button, known as a radio button. - * It is must be a child of `RadioGroup`. - */ -export const Radio = forwardRef(function Radio({ +function RadioImpl({ children, id: idProp, ...rest -}: RadioProps, forwardedRef: React.Ref) { +}: RadioProps, forwardedRef: React.Ref) { const id = useId(idProp, 'bezier-radio') return ( @@ -29,4 +25,12 @@ export const Radio = forwardRef(function Radio({ ) -}) +} + +/** + * `Radio` is a checkable button, known as a radio button. + * It is must be a child of `RadioGroup`. + */ +export const Radio = forwardRef(RadioImpl) as ( + props: RadioProps & { ref?: React.ForwardedRef } +) => ReturnType> diff --git a/packages/bezier-react/src/components/Forms/RadioGroup/RadioGroup.tsx b/packages/bezier-react/src/components/Forms/RadioGroup/RadioGroup.tsx index 277f54f212..717b469d79 100644 --- a/packages/bezier-react/src/components/Forms/RadioGroup/RadioGroup.tsx +++ b/packages/bezier-react/src/components/Forms/RadioGroup/RadioGroup.tsx @@ -7,27 +7,12 @@ import { Stack, StackItem } from 'Components/Stack' import useFormFieldProps from 'Components/Forms/useFormFieldProps' import { RadioGroupProps } from './RadioGroup.types' -/** - * `RadioGroup` is a set of checkable buttons, known as radio buttons. - * - * `RadioGroup` is a context of the `Radio` components. also, it renders an element which has the 'radiogroup' role. - * It controls all the parts of a radio group. - * - * @example - * - * ```tsx - * // Anatomy of the RadioGroup - * - * - * - * ``` - */ -export const RadioGroup = forwardRef(function RadioGroup({ +function RadioGroupImpl({ children, spacing = 0, direction = 'vertical', ...rest -}: RadioGroupProps, forwardedRef: React.Ref) { +}: RadioGroupProps, forwardedRef: React.Ref) { const formFieldProps = useFormFieldProps(rest) return ( @@ -50,4 +35,23 @@ export const RadioGroup = forwardRef(function RadioGroup({ ) -}) +} + +/** + * `RadioGroup` is a set of checkable buttons, known as radio buttons. + * + * `RadioGroup` is a context of the `Radio` components. also, it renders an element which has the 'radiogroup' role. + * It controls all the parts of a radio group. + * + * @example + * + * ```tsx + * // Anatomy of the RadioGroup + * + * + * + * ``` + */ +export const RadioGroup = forwardRef(RadioGroupImpl) as ( + props: RadioGroupProps & { ref?: React.ForwardedRef } +) => ReturnType> diff --git a/packages/bezier-react/src/components/Forms/RadioGroup/RadioGroup.types.ts b/packages/bezier-react/src/components/Forms/RadioGroup/RadioGroup.types.ts index d1fc0cfd77..575a3fe6c5 100644 --- a/packages/bezier-react/src/components/Forms/RadioGroup/RadioGroup.types.ts +++ b/packages/bezier-react/src/components/Forms/RadioGroup/RadioGroup.types.ts @@ -6,17 +6,17 @@ import { BezierComponentProps, ChildrenProps } from 'Types/ComponentProps' import { FormComponentProps } from 'Components/Forms' import { StackProps } from 'Components/Stack' -interface RadioGroupOptions { +interface RadioGroupOptions { /** * The controlled value of the radio item to check. * Should be used in conjunction with `onValueChange`. */ - value?: string + value?: Value /** * The value of the radio item that should be checked when initially rendered. * Use when you do not need to control the state of the radio items. */ - defaultValue?: string + defaultValue?: Value /** * The name of the group. * Submitted with its owning form as part of a name/value pair. @@ -35,14 +35,14 @@ interface RadioGroupOptions { /** * Event handler called when the value changes. */ - onValueChange?: (value: string) => void + onValueChange?: (value: Value) => void } -interface RadioOptions { +interface RadioOptions { /** * The value given as data when submitted with a `RadioGroupProps.name`. */ - value: string + value: Value /** * The unique id of the radio item. It is created automatically by default. * It used by the label element in the radio item. @@ -52,16 +52,16 @@ interface RadioOptions { type RadioFormComponentProps = Pick -export interface RadioGroupProps extends +export interface RadioGroupProps extends BezierComponentProps, ChildrenProps, RadioFormComponentProps, - Omit, keyof RadioGroupOptions | keyof RadioGroupPrimitive.RadioGroupProps>, - RadioGroupOptions {} + Omit, keyof RadioGroupOptions | keyof RadioGroupPrimitive.RadioGroupProps>, + RadioGroupOptions {} -export interface RadioProps extends +export interface RadioProps extends BezierComponentProps, ChildrenProps, RadioFormComponentProps, - Omit, keyof RadioOptions>, - RadioOptions {} + Omit, keyof RadioOptions>, + RadioOptions {} From 48efeba8799242ae871ea88137dd432a5c4c03c5 Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Fri, 10 Feb 2023 17:57:13 +0900 Subject: [PATCH 2/7] chore(legacy-radio): add deprecated comment --- packages/bezier-react/src/components/Forms/Radio/Radio.tsx | 6 ++++++ .../bezier-react/src/components/Forms/Radio/Radio.types.ts | 3 +++ 2 files changed, 9 insertions(+) diff --git a/packages/bezier-react/src/components/Forms/Radio/Radio.tsx b/packages/bezier-react/src/components/Forms/Radio/Radio.tsx index 60c15c4a0b..e9584e3c1d 100644 --- a/packages/bezier-react/src/components/Forms/Radio/Radio.tsx +++ b/packages/bezier-react/src/components/Forms/Radio/Radio.tsx @@ -19,6 +19,9 @@ import RadioProps from './Radio.types' export const RADIO_TEST_ID = 'bezier-react-radio' export const RADIO_HANDLE_TEST_ID = 'bezier-react-radio-handle' +/** + * @deprecated Use `RadioGroup` instead. + */ function Radio( { as, @@ -85,4 +88,7 @@ function Radio( ) } +/** + * @deprecated Use `RadioGroup` instead. + */ export default forwardRef(Radio) diff --git a/packages/bezier-react/src/components/Forms/Radio/Radio.types.ts b/packages/bezier-react/src/components/Forms/Radio/Radio.types.ts index 21708343bb..52de22abfc 100644 --- a/packages/bezier-react/src/components/Forms/Radio/Radio.types.ts +++ b/packages/bezier-react/src/components/Forms/Radio/Radio.types.ts @@ -17,6 +17,9 @@ interface RadioOptions { onClick?: (value: any, e: MouseEvent) => void } +/** + * @deprecated Use `RadioGroup` instead. + */ export default interface RadioProps extends BezierComponentProps, ChildrenProps, From 82c004fe81e8df0f9a7841175bd52d8458522568 Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Sun, 12 Feb 2023 19:51:04 +0900 Subject: [PATCH 3/7] fix(radio-group): change children prop type to React.Node to support List type --- .../bezier-react/src/components/Forms/RadioGroup/RadioGroup.tsx | 2 +- .../src/components/Forms/RadioGroup/RadioGroup.types.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/bezier-react/src/components/Forms/RadioGroup/RadioGroup.tsx b/packages/bezier-react/src/components/Forms/RadioGroup/RadioGroup.tsx index 717b469d79..a07bd2ba3e 100644 --- a/packages/bezier-react/src/components/Forms/RadioGroup/RadioGroup.tsx +++ b/packages/bezier-react/src/components/Forms/RadioGroup/RadioGroup.tsx @@ -28,7 +28,7 @@ function RadioGroupImpl({ direction={direction} > { React.Children.map(children, (child, index) => ( - + { child } )) } diff --git a/packages/bezier-react/src/components/Forms/RadioGroup/RadioGroup.types.ts b/packages/bezier-react/src/components/Forms/RadioGroup/RadioGroup.types.ts index 575a3fe6c5..2399b5b099 100644 --- a/packages/bezier-react/src/components/Forms/RadioGroup/RadioGroup.types.ts +++ b/packages/bezier-react/src/components/Forms/RadioGroup/RadioGroup.types.ts @@ -54,7 +54,7 @@ type RadioFormComponentProps = Pick export interface RadioGroupProps extends BezierComponentProps, - ChildrenProps, + ChildrenProps, RadioFormComponentProps, Omit, keyof RadioGroupOptions | keyof RadioGroupPrimitive.RadioGroupProps>, RadioGroupOptions {} From ee4c1ae63ac38fe7b4f4e048b16eecaf63d78547 Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Sun, 12 Feb 2023 20:32:13 +0900 Subject: [PATCH 4/7] feat(radio): change to render children when their value is evaluated as true --- .../src/components/Forms/RadioGroup/Radio.tsx | 10 ++++++---- 1 file changed, 6 insertions(+), 4 deletions(-) diff --git a/packages/bezier-react/src/components/Forms/RadioGroup/Radio.tsx b/packages/bezier-react/src/components/Forms/RadioGroup/Radio.tsx index 033ced85e4..7c42fdde79 100644 --- a/packages/bezier-react/src/components/Forms/RadioGroup/Radio.tsx +++ b/packages/bezier-react/src/components/Forms/RadioGroup/Radio.tsx @@ -19,10 +19,12 @@ function RadioImpl({ id={id} {...rest} > - { /* @ts-ignore FIXME(@ed): Delete after applying polymorphic props */ } - - { children } - + { children && ( + /* @ts-ignore FIXME(@ed): Delete after applying polymorphic props */ + + { children } + + ) } ) } From 50337366f1fb18b6a9d3227f1fe982ba7ff2c376 Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Sun, 12 Feb 2023 22:25:30 +0900 Subject: [PATCH 5/7] chore(changeset): add changeset --- .changeset/grumpy-islands-sit.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/grumpy-islands-sit.md diff --git a/.changeset/grumpy-islands-sit.md b/.changeset/grumpy-islands-sit.md new file mode 100644 index 0000000000..55759e8208 --- /dev/null +++ b/.changeset/grumpy-islands-sit.md @@ -0,0 +1,5 @@ +--- +"@channel.io/bezier-react": patch +--- + +Enhance the interface of `Radio` and `RadioGroup` components. Change `Radio` to render children when their value is evaluated as true. From ab28e507570832809ca0706074303209b65b4b2c Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Mon, 13 Feb 2023 14:31:20 +0900 Subject: [PATCH 6/7] chore(radio-group): fix jsdoc of Radio --- packages/bezier-react/src/components/Forms/RadioGroup/Radio.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/bezier-react/src/components/Forms/RadioGroup/Radio.tsx b/packages/bezier-react/src/components/Forms/RadioGroup/Radio.tsx index 7c42fdde79..396c00de73 100644 --- a/packages/bezier-react/src/components/Forms/RadioGroup/Radio.tsx +++ b/packages/bezier-react/src/components/Forms/RadioGroup/Radio.tsx @@ -31,7 +31,7 @@ function RadioImpl({ /** * `Radio` is a checkable button, known as a radio button. - * It is must be a child of `RadioGroup`. + * It should be a child of `RadioGroup`. */ export const Radio = forwardRef(RadioImpl) as ( props: RadioProps & { ref?: React.ForwardedRef } From 50bfcf5c5b2f2e8009edaeae0d060a1e8068561b Mon Sep 17 00:00:00 2001 From: Ed Sungik Choi Date: Mon, 13 Feb 2023 14:33:08 +0900 Subject: [PATCH 7/7] refactor(components): use isValidElement function instead of type assertion --- .../bezier-react/src/components/Forms/FormGroup/FormGroup.tsx | 4 ++-- .../src/components/Forms/RadioGroup/RadioGroup.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/packages/bezier-react/src/components/Forms/FormGroup/FormGroup.tsx b/packages/bezier-react/src/components/Forms/FormGroup/FormGroup.tsx index 8f2db5d988..107c3a189b 100644 --- a/packages/bezier-react/src/components/Forms/FormGroup/FormGroup.tsx +++ b/packages/bezier-react/src/components/Forms/FormGroup/FormGroup.tsx @@ -1,5 +1,5 @@ /* External dependencies */ -import React, { forwardRef, useEffect } from 'react' +import React, { forwardRef, useEffect, isValidElement } from 'react' /* Internal dependencies */ import { StackItem } from 'Components/Stack' @@ -48,7 +48,7 @@ forwardedRef: React.Ref, role={role} > { React.Children.map(children, (child, index) => ( - + { child } )) } diff --git a/packages/bezier-react/src/components/Forms/RadioGroup/RadioGroup.tsx b/packages/bezier-react/src/components/Forms/RadioGroup/RadioGroup.tsx index a07bd2ba3e..4c416f1cca 100644 --- a/packages/bezier-react/src/components/Forms/RadioGroup/RadioGroup.tsx +++ b/packages/bezier-react/src/components/Forms/RadioGroup/RadioGroup.tsx @@ -1,5 +1,5 @@ /* External dependencies */ -import React, { forwardRef } from 'react' +import React, { forwardRef, isValidElement } from 'react' import * as RadioGroupPrimitive from '@radix-ui/react-radio-group' /* Internal dependencies */ @@ -28,7 +28,7 @@ function RadioGroupImpl({ direction={direction} > { React.Children.map(children, (child, index) => ( - + { child } )) }