From 3dc8369b65fb79e56bec8527d7d33fe21da3ed58 Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Tue, 28 Feb 2023 01:38:19 +0900 Subject: [PATCH 1/5] feat: implement radio button --- .../components/CSSBaseline/CSSBaseline.tsx | 2 + .../RadioButtonFilledIcon.tsx | 26 +++++++ .../Icons/RadioButtonFilledIcon/index.ts | 1 + .../Icons/RadioButtonIcon/RadioButtonIcon.tsx | 22 ++++++ .../components/Icons/RadioButtonIcon/index.ts | 1 + .../lsd-react/src/components/Icons/index.ts | 2 + .../RadioButton/RadioButton.classes.ts | 12 +++ .../RadioButton/RadioButton.stories.tsx | 27 +++++++ .../RadioButton/RadioButton.styles.ts | 58 +++++++++++++++ .../components/RadioButton/RadioButton.tsx | 74 +++++++++++++++++++ .../src/components/RadioButton/index.ts | 1 + packages/lsd-react/src/index.ts | 1 + 12 files changed, 227 insertions(+) create mode 100644 packages/lsd-react/src/components/Icons/RadioButtonFilledIcon/RadioButtonFilledIcon.tsx create mode 100644 packages/lsd-react/src/components/Icons/RadioButtonFilledIcon/index.ts create mode 100644 packages/lsd-react/src/components/Icons/RadioButtonIcon/RadioButtonIcon.tsx create mode 100644 packages/lsd-react/src/components/Icons/RadioButtonIcon/index.ts create mode 100644 packages/lsd-react/src/components/RadioButton/RadioButton.classes.ts create mode 100644 packages/lsd-react/src/components/RadioButton/RadioButton.stories.tsx create mode 100644 packages/lsd-react/src/components/RadioButton/RadioButton.styles.ts create mode 100644 packages/lsd-react/src/components/RadioButton/RadioButton.tsx create mode 100644 packages/lsd-react/src/components/RadioButton/index.ts diff --git a/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx b/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx index c5f38f5..91c0bf0 100644 --- a/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx +++ b/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx @@ -16,6 +16,7 @@ import { IconButtonStyles } from '../IconButton/IconButton.styles' import { LsdIconStyles } from '../Icons/LsdIcon/LsdIcon.styles' import { ListBoxStyles } from '../ListBox/ListBox.styles' import { QuoteStyles } from '../Quote/Quote.styles' +import { RadioButtonStyles } from '../RadioButton/RadioButton.styles' import { TabItemStyles } from '../TabItem/TabItem.styles' import { TabsStyles } from '../Tabs/Tabs.styles' import { TagStyles } from '../Tag/Tag.styles' @@ -46,6 +47,7 @@ const componentStyles: Array | SerializedStyles> = QuoteStyles, CollapseStyles, CollapseHeaderStyles, + RadioButtonStyles, ] export const CSSBaseline: React.FC<{ theme?: Theme }> = ({ diff --git a/packages/lsd-react/src/components/Icons/RadioButtonFilledIcon/RadioButtonFilledIcon.tsx b/packages/lsd-react/src/components/Icons/RadioButtonFilledIcon/RadioButtonFilledIcon.tsx new file mode 100644 index 0000000..9c78c51 --- /dev/null +++ b/packages/lsd-react/src/components/Icons/RadioButtonFilledIcon/RadioButtonFilledIcon.tsx @@ -0,0 +1,26 @@ +import { LsdIcon } from '../LsdIcon' + +export const RadioButtonFilledIcon = LsdIcon( + (props) => ( + + + + + ), + { + filled: true, + }, +) diff --git a/packages/lsd-react/src/components/Icons/RadioButtonFilledIcon/index.ts b/packages/lsd-react/src/components/Icons/RadioButtonFilledIcon/index.ts new file mode 100644 index 0000000..62143be --- /dev/null +++ b/packages/lsd-react/src/components/Icons/RadioButtonFilledIcon/index.ts @@ -0,0 +1 @@ +export * from './RadioButtonFilledIcon' diff --git a/packages/lsd-react/src/components/Icons/RadioButtonIcon/RadioButtonIcon.tsx b/packages/lsd-react/src/components/Icons/RadioButtonIcon/RadioButtonIcon.tsx new file mode 100644 index 0000000..b349332 --- /dev/null +++ b/packages/lsd-react/src/components/Icons/RadioButtonIcon/RadioButtonIcon.tsx @@ -0,0 +1,22 @@ +import { LsdIcon } from '../LsdIcon' + +export const RadioButtonIcon = LsdIcon( + (props) => ( + + + + ), + { + filled: true, + }, +) diff --git a/packages/lsd-react/src/components/Icons/RadioButtonIcon/index.ts b/packages/lsd-react/src/components/Icons/RadioButtonIcon/index.ts new file mode 100644 index 0000000..03275c3 --- /dev/null +++ b/packages/lsd-react/src/components/Icons/RadioButtonIcon/index.ts @@ -0,0 +1 @@ +export * from './RadioButtonIcon' diff --git a/packages/lsd-react/src/components/Icons/index.ts b/packages/lsd-react/src/components/Icons/index.ts index 40f1f7f..40d3d8f 100644 --- a/packages/lsd-react/src/components/Icons/index.ts +++ b/packages/lsd-react/src/components/Icons/index.ts @@ -17,3 +17,5 @@ export * from './NavigateNextIcon' export * from './NewPageIcon' export * from './SearchIcon' export * from './PickIcon' +export * from './RadioButtonIcon' +export * from './RadioButtonFilledIcon' diff --git a/packages/lsd-react/src/components/RadioButton/RadioButton.classes.ts b/packages/lsd-react/src/components/RadioButton/RadioButton.classes.ts new file mode 100644 index 0000000..6c88247 --- /dev/null +++ b/packages/lsd-react/src/components/RadioButton/RadioButton.classes.ts @@ -0,0 +1,12 @@ +export const radioButtonClasses = { + root: `lsd-radio-button`, + + input: `lsd-radio-button__input`, + label: `lsd-radio-button__label`, + + disabled: `lsd-radio-button--disabled`, + + large: `lsd-radio-button--large`, + medium: `lsd-radio-button--medium`, + small: 'lsd-radio-button--small', +} diff --git a/packages/lsd-react/src/components/RadioButton/RadioButton.stories.tsx b/packages/lsd-react/src/components/RadioButton/RadioButton.stories.tsx new file mode 100644 index 0000000..c27a36c --- /dev/null +++ b/packages/lsd-react/src/components/RadioButton/RadioButton.stories.tsx @@ -0,0 +1,27 @@ +import { Meta, Story } from '@storybook/react' +import { RadioButton, RadioButtonProps } from './RadioButton' + +export default { + title: 'RadioButton', + component: RadioButton, + argTypes: { + size: { + type: { + name: 'enum', + value: ['small', 'medium', 'large'], + }, + defaultValue: 'large', + }, + }, +} as Meta + +export const Root: Story = (args) => ( + RadioButton label +) + +Root.args = { + size: 'large', + disabled: false, + checked: undefined, + onChange: undefined, +} diff --git a/packages/lsd-react/src/components/RadioButton/RadioButton.styles.ts b/packages/lsd-react/src/components/RadioButton/RadioButton.styles.ts new file mode 100644 index 0000000..dc13696 --- /dev/null +++ b/packages/lsd-react/src/components/RadioButton/RadioButton.styles.ts @@ -0,0 +1,58 @@ +import { css } from '@emotion/react' +import { radioButtonClasses } from './RadioButton.classes' + +export const RadioButtonStyles = css` + .${radioButtonClasses.root} { + position: relative; + display: flex; + flex-direction: row; + align-items: center; + } + + .${radioButtonClasses.input} { + opacity: 0; + position: absolute; + left: 0; + top: 0; + padding: 0; + margin: 0; + width: 100%; + height: 100%; + } + + .${radioButtonClasses.root}:not(.${radioButtonClasses.disabled}) { + &:hover { + text-decoration: underline; + } + + .${radioButtonClasses.input} { + cursor: pointer; + } + } + + .${radioButtonClasses.disabled} { + opacity: 0.34; + } + + .${radioButtonClasses.label} { + margin-left: 18px; + } + + .${radioButtonClasses.large} { + .${radioButtonClasses.label} { + margin-left: 18px; + } + } + + .${radioButtonClasses.medium} { + .${radioButtonClasses.label} { + margin-left: 14px; + } + } + + .${radioButtonClasses.small} { + .${radioButtonClasses.label} { + margin-left: 12px; + } + } +` diff --git a/packages/lsd-react/src/components/RadioButton/RadioButton.tsx b/packages/lsd-react/src/components/RadioButton/RadioButton.tsx new file mode 100644 index 0000000..3e50b9b --- /dev/null +++ b/packages/lsd-react/src/components/RadioButton/RadioButton.tsx @@ -0,0 +1,74 @@ +import clsx from 'clsx' +import React, { useRef } from 'react' +import { useInput } from '../../utils/useInput' +import { RadioButtonFilledIcon, RadioButtonIcon } from '../Icons' +import { Typography } from '../Typography' +import { radioButtonClasses } from './RadioButton.classes' + +export type RadioButtonProps = Omit< + React.LabelHTMLAttributes, + 'onChange' | 'value' | 'color' +> & + Pick< + React.InputHTMLAttributes, + 'onChange' | 'checked' | 'defaultChecked' + > & { + disabled?: boolean + size?: 'small' | 'medium' | 'large' + inputProps?: React.InputHTMLAttributes + } + +export const RadioButton: React.FC & { + classes: typeof radioButtonClasses +} = ({ + size = 'large', + onChange, + checked, + defaultChecked, + disabled = false, + inputProps = {}, + children, + ...props +}) => { + const ref = useRef(null) + const input = useInput({ + value: checked, + defaultValue: defaultChecked ?? false, + onChange, + ref, + }) + + return ( + + + {input.value ? ( + + ) : ( + + )} + {children} + + ) +} + +RadioButton.classes = radioButtonClasses diff --git a/packages/lsd-react/src/components/RadioButton/index.ts b/packages/lsd-react/src/components/RadioButton/index.ts new file mode 100644 index 0000000..37d8240 --- /dev/null +++ b/packages/lsd-react/src/components/RadioButton/index.ts @@ -0,0 +1 @@ +export * from './RadioButton' diff --git a/packages/lsd-react/src/index.ts b/packages/lsd-react/src/index.ts index 36c389e..42bccf2 100644 --- a/packages/lsd-react/src/index.ts +++ b/packages/lsd-react/src/index.ts @@ -18,3 +18,4 @@ export * from './components/TabItem' export * from './components/Tabs' export * from './components/Tag' export * from './components/Theme' +export * from './components/RadioButton' From 929dc713e5150fc2c5472651903750a8d7abaeed Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Fri, 3 Mar 2023 02:55:29 +0900 Subject: [PATCH 2/5] feat: implement radio button group --- .../components/CSSBaseline/CSSBaseline.tsx | 2 + .../components/RadioButton/RadioButton.tsx | 23 +++++++-- .../RadioButtonGroup.classes.ts | 4 ++ .../RadioButtonGroup.context.ts | 18 +++++++ .../RadioButtonGroup.stories.tsx | 51 +++++++++++++++++++ .../RadioButtonGroup.styles.ts | 15 ++++++ .../RadioButtonGroup/RadioButtonGroup.tsx | 49 ++++++++++++++++++ .../src/components/RadioButtonGroup/index.ts | 1 + packages/lsd-react/src/index.ts | 1 + packages/lsd-react/src/utils/useInput.ts | 5 +- 10 files changed, 164 insertions(+), 5 deletions(-) create mode 100644 packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.classes.ts create mode 100644 packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.context.ts create mode 100644 packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.stories.tsx create mode 100644 packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.styles.ts create mode 100644 packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.tsx create mode 100644 packages/lsd-react/src/components/RadioButtonGroup/index.ts diff --git a/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx b/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx index 91c0bf0..2e3118b 100644 --- a/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx +++ b/packages/lsd-react/src/components/CSSBaseline/CSSBaseline.tsx @@ -17,6 +17,7 @@ import { LsdIconStyles } from '../Icons/LsdIcon/LsdIcon.styles' import { ListBoxStyles } from '../ListBox/ListBox.styles' import { QuoteStyles } from '../Quote/Quote.styles' import { RadioButtonStyles } from '../RadioButton/RadioButton.styles' +import { RadioButtonGroupStyles } from '../RadioButtonGroup/RadioButtonGroup.styles' import { TabItemStyles } from '../TabItem/TabItem.styles' import { TabsStyles } from '../Tabs/Tabs.styles' import { TagStyles } from '../Tag/Tag.styles' @@ -48,6 +49,7 @@ const componentStyles: Array | SerializedStyles> = CollapseStyles, CollapseHeaderStyles, RadioButtonStyles, + RadioButtonGroupStyles, ] export const CSSBaseline: React.FC<{ theme?: Theme }> = ({ diff --git a/packages/lsd-react/src/components/RadioButton/RadioButton.tsx b/packages/lsd-react/src/components/RadioButton/RadioButton.tsx index 3e50b9b..90ececf 100644 --- a/packages/lsd-react/src/components/RadioButton/RadioButton.tsx +++ b/packages/lsd-react/src/components/RadioButton/RadioButton.tsx @@ -2,6 +2,7 @@ import clsx from 'clsx' import React, { useRef } from 'react' import { useInput } from '../../utils/useInput' import { RadioButtonFilledIcon, RadioButtonIcon } from '../Icons' +import { useRadioButtonGroupContext } from '../RadioButtonGroup/RadioButtonGroup.context' import { Typography } from '../Typography' import { radioButtonClasses } from './RadioButton.classes' @@ -21,9 +22,9 @@ export type RadioButtonProps = Omit< export const RadioButton: React.FC & { classes: typeof radioButtonClasses } = ({ - size = 'large', + size: _size = 'large', onChange, - checked, + checked: _checked, defaultChecked, disabled = false, inputProps = {}, @@ -31,13 +32,27 @@ export const RadioButton: React.FC & { ...props }) => { const ref = useRef(null) + + const radioButtonGroup = useRadioButtonGroupContext() + const size = radioButtonGroup?.size ?? _size + const selected = radioButtonGroup + ? radioButtonGroup.activeRadioButton != null && + radioButtonGroup.activeRadioButton === inputProps?.value + : _checked + const input = useInput({ - value: checked, + value: selected, defaultValue: defaultChecked ?? false, onChange, ref, }) + const handleChange = (event: React.ChangeEvent) => { + onChange && onChange(event) + input.onChange(event) + inputProps.value && radioButtonGroup?.setActiveRadioButton(inputProps.value) + } + return ( & { ref={ref} type="radio" checked={input.value} - onChange={input.onChange} + onChange={handleChange} defaultChecked={defaultChecked} className={clsx(inputProps.className, radioButtonClasses.input)} {...inputProps} diff --git a/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.classes.ts b/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.classes.ts new file mode 100644 index 0000000..f5f4aac --- /dev/null +++ b/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.classes.ts @@ -0,0 +1,4 @@ +export const radioButtonGroupClasses = { + root: `lsd-radio-button-group`, + label: `lsd-radio-button-group__label`, +} diff --git a/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.context.ts b/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.context.ts new file mode 100644 index 0000000..28d6be6 --- /dev/null +++ b/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.context.ts @@ -0,0 +1,18 @@ +import React from 'react' +import { + ActiveRadioButtonType, + RadioButtonGroupProps, +} from './RadioButtonGroup' + +export type RadioButtonGroupContextType = { + activeRadioButton?: ActiveRadioButtonType | null + setActiveRadioButton: (value: ActiveRadioButtonType) => void + + size?: RadioButtonGroupProps['size'] +} + +export const RadioButtonGroupContext = + React.createContext(null as any) + +export const useRadioButtonGroupContext = () => + React.useContext(RadioButtonGroupContext) diff --git a/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.stories.tsx b/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.stories.tsx new file mode 100644 index 0000000..158286e --- /dev/null +++ b/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.stories.tsx @@ -0,0 +1,51 @@ +import { Meta, Story } from '@storybook/react' +import { RadioButton } from '../RadioButton' +import { RadioButtonGroup, RadioButtonGroupProps } from './RadioButtonGroup' + +export default { + title: 'RadioButtonGroup', + component: RadioButtonGroup, + argTypes: { + size: { + type: { + name: 'enum', + value: ['small', 'medium', 'large'], + }, + defaultValue: 'large', + }, + }, +} as Meta + +export const Root: Story = (args) => ( + + + RadioButton label + + + RadioButton label + + + RadioButton label + + + RadioButton label + + + RadioButton label + + + RadioButton label + + + RadioButton label + + + RadioButton label + + +) + +Root.args = { + size: 'large', + label: 'Label', +} diff --git a/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.styles.ts b/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.styles.ts new file mode 100644 index 0000000..b7d9bf1 --- /dev/null +++ b/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.styles.ts @@ -0,0 +1,15 @@ +import { css } from '@emotion/react' +import { radioButtonGroupClasses } from './RadioButtonGroup.classes' + +export const RadioButtonGroupStyles = css` + .${radioButtonGroupClasses.root} { + display: flex; + flex-direction: column; + gap: 6px; + width: fit-content; + } + + .${radioButtonGroupClasses.label} { + margin-bottom: 6px; + } +` diff --git a/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.tsx b/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.tsx new file mode 100644 index 0000000..e63a533 --- /dev/null +++ b/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.tsx @@ -0,0 +1,49 @@ +import clsx from 'clsx' +import React, { useEffect, useRef, useState } from 'react' +import { RadioButtonGroupContext } from './RadioButtonGroup.context' +import { radioButtonGroupClasses } from './RadioButtonGroup.classes' +import { Typography } from '../Typography' + +export type ActiveRadioButtonType = string | number | readonly string[] + +export type RadioButtonGroupProps = React.HTMLAttributes & { + activeRadioButton?: ActiveRadioButtonType | null + size?: 'small' | 'medium' | 'large' + label?: string +} + +export const RadioButtonGroup: React.FC & { + classes: typeof radioButtonGroupClasses +} = ({ size = 'large', label, activeRadioButton, children, ...props }) => { + const ref = useRef(null) + const [value, setValue] = useState(activeRadioButton) + + const setActiveRadioButton = (radioButton: ActiveRadioButtonType) => { + setValue(radioButton) + } + + useEffect(() => setValue(activeRadioButton), [activeRadioButton]) + + return ( + +
+ + {label && label} + + {children} +
+ + ) +} + +RadioButtonGroup.classes = radioButtonGroupClasses diff --git a/packages/lsd-react/src/components/RadioButtonGroup/index.ts b/packages/lsd-react/src/components/RadioButtonGroup/index.ts new file mode 100644 index 0000000..a9f5a07 --- /dev/null +++ b/packages/lsd-react/src/components/RadioButtonGroup/index.ts @@ -0,0 +1 @@ +export * from './RadioButtonGroup' diff --git a/packages/lsd-react/src/index.ts b/packages/lsd-react/src/index.ts index 42bccf2..1c4c165 100644 --- a/packages/lsd-react/src/index.ts +++ b/packages/lsd-react/src/index.ts @@ -19,3 +19,4 @@ export * from './components/Tabs' export * from './components/Tag' export * from './components/Theme' export * from './components/RadioButton' +export * from './components/RadioButtonGroup' diff --git a/packages/lsd-react/src/utils/useInput.ts b/packages/lsd-react/src/utils/useInput.ts index 8b2fd41..0e8f1d0 100644 --- a/packages/lsd-react/src/utils/useInput.ts +++ b/packages/lsd-react/src/utils/useInput.ts @@ -29,7 +29,10 @@ export const useInput = ( const onChange: InputOnChangeType = (event) => { const type = event.target.type - const value = event.target[type === 'checkbox' ? 'checked' : 'value'] + const value = + event.target[ + type === 'checkbox' || type === 'radio' ? 'checked' : 'value' + ] if (uncontrolled) return setValue(value as T) props.onChange && props.onChange(event) } From a73302ffd5ac55f5da6336507d4c33d69a8a2dbc Mon Sep 17 00:00:00 2001 From: jinhojang6 Date: Tue, 7 Mar 2023 02:24:07 +0900 Subject: [PATCH 3/5] refactor: refactor radio button and radio button group --- .../components/RadioButton/RadioButton.tsx | 12 ++++++------ .../RadioButtonGroup.context.ts | 4 ++-- .../RadioButtonGroup.stories.tsx | 16 ++++++++-------- .../RadioButtonGroup/RadioButtonGroup.tsx | 19 +++++++++++-------- 4 files changed, 27 insertions(+), 24 deletions(-) diff --git a/packages/lsd-react/src/components/RadioButton/RadioButton.tsx b/packages/lsd-react/src/components/RadioButton/RadioButton.tsx index 90ececf..a547e68 100644 --- a/packages/lsd-react/src/components/RadioButton/RadioButton.tsx +++ b/packages/lsd-react/src/components/RadioButton/RadioButton.tsx @@ -16,6 +16,8 @@ export type RadioButtonProps = Omit< > & { disabled?: boolean size?: 'small' | 'medium' | 'large' + name?: string + value?: string inputProps?: React.InputHTMLAttributes } @@ -32,12 +34,10 @@ export const RadioButton: React.FC & { ...props }) => { const ref = useRef(null) - const radioButtonGroup = useRadioButtonGroupContext() const size = radioButtonGroup?.size ?? _size const selected = radioButtonGroup - ? radioButtonGroup.activeRadioButton != null && - radioButtonGroup.activeRadioButton === inputProps?.value + ? radioButtonGroup.value === inputProps?.value : _checked const input = useInput({ @@ -48,9 +48,9 @@ export const RadioButton: React.FC & { }) const handleChange = (event: React.ChangeEvent) => { - onChange && onChange(event) - input.onChange(event) - inputProps.value && radioButtonGroup?.setActiveRadioButton(inputProps.value) + radioButtonGroup + ? radioButtonGroup.setActiveValue(event.target.value) + : input.onChange(event) } return ( diff --git a/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.context.ts b/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.context.ts index 28d6be6..311c7e5 100644 --- a/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.context.ts +++ b/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.context.ts @@ -5,8 +5,8 @@ import { } from './RadioButtonGroup' export type RadioButtonGroupContextType = { - activeRadioButton?: ActiveRadioButtonType | null - setActiveRadioButton: (value: ActiveRadioButtonType) => void + value?: ActiveRadioButtonType | null + setActiveValue: (value: ActiveRadioButtonType) => void size?: RadioButtonGroupProps['size'] } diff --git a/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.stories.tsx b/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.stories.tsx index 158286e..2225f95 100644 --- a/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.stories.tsx +++ b/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.stories.tsx @@ -18,28 +18,28 @@ export default { export const Root: Story = (args) => ( - + RadioButton label - + RadioButton label - + RadioButton label - + RadioButton label - + RadioButton label - + RadioButton label - + RadioButton label - + RadioButton label diff --git a/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.tsx b/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.tsx index e63a533..505f2e2 100644 --- a/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.tsx +++ b/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.tsx @@ -4,29 +4,32 @@ import { RadioButtonGroupContext } from './RadioButtonGroup.context' import { radioButtonGroupClasses } from './RadioButtonGroup.classes' import { Typography } from '../Typography' -export type ActiveRadioButtonType = string | number | readonly string[] +export type ActiveRadioButtonType = string | readonly string[] export type RadioButtonGroupProps = React.HTMLAttributes & { - activeRadioButton?: ActiveRadioButtonType | null + value?: ActiveRadioButtonType | null + name?: ActiveRadioButtonType | null + onChange?: (value: ActiveRadioButtonType) => void size?: 'small' | 'medium' | 'large' label?: string } export const RadioButtonGroup: React.FC & { classes: typeof radioButtonGroupClasses -} = ({ size = 'large', label, activeRadioButton, children, ...props }) => { +} = ({ size = 'large', label, value, name, onChange, children, ...props }) => { const ref = useRef(null) - const [value, setValue] = useState(activeRadioButton) + const [activeValue, setActiveValue] = useState(value) - const setActiveRadioButton = (radioButton: ActiveRadioButtonType) => { - setValue(radioButton) + const setActiveRadioButton = (value: ActiveRadioButtonType) => { + if (onChange) onChange(value) + else setActiveValue(value) } - useEffect(() => setValue(activeRadioButton), [activeRadioButton]) + useEffect(() => setActiveValue(value), [value]) return (
Date: Tue, 7 Mar 2023 20:57:06 +0900 Subject: [PATCH 4/5] refactor: pass down value and name directly --- .../RadioButton/RadioButton.stories.tsx | 1 + .../components/RadioButton/RadioButton.tsx | 11 ++++-- .../RadioButtonGroup.context.ts | 3 +- .../RadioButtonGroup.stories.tsx | 34 +++++-------------- .../RadioButtonGroup/RadioButtonGroup.tsx | 6 ++-- 5 files changed, 23 insertions(+), 32 deletions(-) diff --git a/packages/lsd-react/src/components/RadioButton/RadioButton.stories.tsx b/packages/lsd-react/src/components/RadioButton/RadioButton.stories.tsx index c27a36c..2a9d446 100644 --- a/packages/lsd-react/src/components/RadioButton/RadioButton.stories.tsx +++ b/packages/lsd-react/src/components/RadioButton/RadioButton.stories.tsx @@ -24,4 +24,5 @@ Root.args = { disabled: false, checked: undefined, onChange: undefined, + value: '1', } diff --git a/packages/lsd-react/src/components/RadioButton/RadioButton.tsx b/packages/lsd-react/src/components/RadioButton/RadioButton.tsx index a547e68..ed49ac2 100644 --- a/packages/lsd-react/src/components/RadioButton/RadioButton.tsx +++ b/packages/lsd-react/src/components/RadioButton/RadioButton.tsx @@ -17,7 +17,7 @@ export type RadioButtonProps = Omit< disabled?: boolean size?: 'small' | 'medium' | 'large' name?: string - value?: string + value: string inputProps?: React.InputHTMLAttributes } @@ -29,15 +29,18 @@ export const RadioButton: React.FC & { checked: _checked, defaultChecked, disabled = false, + value, inputProps = {}, children, ...props }) => { const ref = useRef(null) + const radioButtonGroup = useRadioButtonGroupContext() const size = radioButtonGroup?.size ?? _size + const name = radioButtonGroup?.name ?? '' const selected = radioButtonGroup - ? radioButtonGroup.value === inputProps?.value + ? radioButtonGroup.value === value : _checked const input = useInput({ @@ -49,7 +52,7 @@ export const RadioButton: React.FC & { const handleChange = (event: React.ChangeEvent) => { radioButtonGroup - ? radioButtonGroup.setActiveValue(event.target.value) + ? radioButtonGroup.setActiveRadioButton(event.target.value) : input.onChange(event) } @@ -69,6 +72,8 @@ export const RadioButton: React.FC & { > void + name?: string | null + setActiveRadioButton: (value: ActiveRadioButtonType) => void size?: RadioButtonGroupProps['size'] } diff --git a/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.stories.tsx b/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.stories.tsx index 2225f95..4bde163 100644 --- a/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.stories.tsx +++ b/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.stories.tsx @@ -17,31 +17,15 @@ export default { } as Meta export const Root: Story = (args) => ( - - - RadioButton label - - - RadioButton label - - - RadioButton label - - - RadioButton label - - - RadioButton label - - - RadioButton label - - - RadioButton label - - - RadioButton label - + + RadioButton label + RadioButton label + RadioButton label + RadioButton label + RadioButton label + RadioButton label + RadioButton label + RadioButton label ) diff --git a/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.tsx b/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.tsx index 505f2e2..57913e3 100644 --- a/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.tsx +++ b/packages/lsd-react/src/components/RadioButtonGroup/RadioButtonGroup.tsx @@ -7,8 +7,8 @@ import { Typography } from '../Typography' export type ActiveRadioButtonType = string | readonly string[] export type RadioButtonGroupProps = React.HTMLAttributes & { - value?: ActiveRadioButtonType | null - name?: ActiveRadioButtonType | null + value: ActiveRadioButtonType | null + name?: string | null onChange?: (value: ActiveRadioButtonType) => void size?: 'small' | 'medium' | 'large' label?: string @@ -29,7 +29,7 @@ export const RadioButtonGroup: React.FC & { return (
Date: Fri, 10 Mar 2023 00:06:42 +0900 Subject: [PATCH 5/5] refactor: use _name in case of radio button group is not being used --- packages/lsd-react/src/components/RadioButton/RadioButton.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/lsd-react/src/components/RadioButton/RadioButton.tsx b/packages/lsd-react/src/components/RadioButton/RadioButton.tsx index ed49ac2..ca87974 100644 --- a/packages/lsd-react/src/components/RadioButton/RadioButton.tsx +++ b/packages/lsd-react/src/components/RadioButton/RadioButton.tsx @@ -30,6 +30,7 @@ export const RadioButton: React.FC & { defaultChecked, disabled = false, value, + name: _name, inputProps = {}, children, ...props @@ -38,7 +39,7 @@ export const RadioButton: React.FC & { const radioButtonGroup = useRadioButtonGroupContext() const size = radioButtonGroup?.size ?? _size - const name = radioButtonGroup?.name ?? '' + const name = radioButtonGroup?.name ?? _name ?? '' const selected = radioButtonGroup ? radioButtonGroup.value === value : _checked