From dae9c705ae246aa6e77f22180c81e2589213cee6 Mon Sep 17 00:00:00 2001 From: Andrey Morozov Date: Thu, 5 Dec 2024 18:31:40 +0300 Subject: [PATCH] feat(RadioButton)!: rename component to SegmentedRadioGroup (#1975) --- CODEOWNERS | 2 +- src/components/RadioButton/README.md | 279 ------------------ .../__stories__/RadioButtonShowcase.tsx | 90 ------ src/components/RadioButton/index.ts | 3 - src/components/SegmentedRadioGroup/README.md | 263 +++++++++++++++++ .../SegmentedRadioGroup.scss} | 2 +- .../SegmentedRadioGroup.tsx} | 30 +- .../SegmentedRadioGroupOption.tsx} | 18 +- .../__stories__/Docs.mdx | 2 +- .../SegmentedRadioGroup.stories.tsx} | 28 +- .../SegmentedRadioGroupShowcase.tsx | 101 +++++++ .../__tests__/SegmentedRadioGroup.test.tsx} | 70 +++-- src/components/SegmentedRadioGroup/index.ts | 3 + .../Select/__stories__/SelectShowcase.tsx | 16 +- src/components/index.ts | 2 +- 15 files changed, 455 insertions(+), 454 deletions(-) delete mode 100644 src/components/RadioButton/README.md delete mode 100644 src/components/RadioButton/__stories__/RadioButtonShowcase.tsx delete mode 100644 src/components/RadioButton/index.ts create mode 100644 src/components/SegmentedRadioGroup/README.md rename src/components/{RadioButton/RadioButton.scss => SegmentedRadioGroup/SegmentedRadioGroup.scss} (99%) rename src/components/{RadioButton/RadioButton.tsx => SegmentedRadioGroup/SegmentedRadioGroup.tsx} (61%) rename src/components/{RadioButton/RadioButtonOption.tsx => SegmentedRadioGroup/SegmentedRadioGroupOption.tsx} (63%) rename src/components/{RadioButton => SegmentedRadioGroup}/__stories__/Docs.mdx (71%) rename src/components/{RadioButton/__stories__/RadioButton.stories.tsx => SegmentedRadioGroup/__stories__/SegmentedRadioGroup.stories.tsx} (50%) create mode 100644 src/components/SegmentedRadioGroup/__stories__/SegmentedRadioGroupShowcase.tsx rename src/components/{RadioButton/__tests__/RadioButton.test.tsx => SegmentedRadioGroup/__tests__/SegmentedRadioGroup.test.tsx} (77%) create mode 100644 src/components/SegmentedRadioGroup/index.ts diff --git a/CODEOWNERS b/CODEOWNERS index dd3fceac5c..aa9079d933 100644 --- a/CODEOWNERS +++ b/CODEOWNERS @@ -37,8 +37,8 @@ /src/components/Portal @amje /src/components/Progress @Lunory /src/components/Radio @zamkovskaya -/src/components/RadioButton @zamkovskaya /src/components/RadioGroup @zamkovskaya +/src/components/SegmentedRadioGroup @zamkovskaya /src/components/User @DakEnviy /src/components/UserLabel @DakEnviy /src/components/useList @IsaevAlexandr diff --git a/src/components/RadioButton/README.md b/src/components/RadioButton/README.md deleted file mode 100644 index 547a8a61e0..0000000000 --- a/src/components/RadioButton/README.md +++ /dev/null @@ -1,279 +0,0 @@ - - -# RadioButton - - - -```tsx -import {RadioButton} from '@gravity-ui/uikit'; -``` - -The `RadioButton` component is used to create a group of radio buttons where users can select a single option from multiple choices. - -### Disabled state - - - - - -```tsx -const options: RadioButtonOption[] = [ - {value: 'Value 1', content: 'Value 1'}, - {value: 'Value 2', content: 'Value 2'}, - {value: 'Value 3', content: 'Value 3'}, -]; -; -``` - - - -### Size - -To control the size of the `RadioButton`, use the `size` property. The default size is `m`. - - - - - -```tsx - const options: RadioButtonOption[] = [ - {value: 'Value 1', content: 's'}, - {value: 'Value 2', content: 'm'}, - {value: 'Value 3', content: 'l'}, - {value: 'Value 4', content: 'xl'}, - ]; - - - - -``` - - - -### Width - -To control the width of the `RadioButton`, use the `width` property. - - - - - -```tsx -
-
- - - - -
-
- - - - -
-
- - - - -
-
-``` - - - -### Properties - -| Name | Description | Type | Default | -| :----------- | :--------------------------------------------------------------------------------------------------- | :-----------------------: | :-----: | -| children | The content of the radio button. | `ReactNode` | | -| disabled | Toggles the `disabled` state of the radio button. | `boolean` | `false` | -| options | Options for radio button. | `RadioButtonOption[]` | | -| defaultValue | Sets the initial value state when the component is mounted. | `string` | | -| onUpdate | Fires when the user changes the radio button state. Provides the new value as a callback's argument. | `(value: string) => void` | | -| onChange | Fires when the user changes the radio button state. Provides change event as a callback's argument. | `Function` | | -| onFocus | Event handler for when the radio input element receives focus. | `Function` | | -| onBlur | Event handler for when the radio input element loses focus. | `Function` | | -| width | Sets the width of the radio button. | `auto - max` | | -| size | Sets the size of the radio button. | `s` `m` `l` `xl` | `m` | -| name | HTML `name` attribute for the input element. | `string` | | -| qa | HTML `data-qa` attribute, used in tests. | `string` | | -| style | HTML `style` attribute | `React.CSSProperties` | | -| className | HTML `class` attribute | `string` | | - -## RadioButton.Option - -The `RadioButton` component also exports a nested `Option` component. You can use it to create radio button options within the `RadioButton`. - - - - - -```tsx -const options: RadioButtonOption[] = [ - {value: 'Value 1', content: 'Value 1'}, - {value: 'Value 2', content: 'Value 2'}, - {value: 'Value 3', content: 'Value 3'}, -]; - - - - -; -``` - - - -### Properties - -| Name | Description | Type | Default | -| :------- | :-------------------------------------------------- | :---------: | :-----: | -| children | The content of the radio (usually a label). | `ReactNode` | | -| content | The content of the radio (alternative to children). | `ReactNode` | | -| disabled | Toggles the `disabled` state of the radio. | `boolean` | `false` | -| value | Control value | `string` | | diff --git a/src/components/RadioButton/__stories__/RadioButtonShowcase.tsx b/src/components/RadioButton/__stories__/RadioButtonShowcase.tsx deleted file mode 100644 index 310e377cd0..0000000000 --- a/src/components/RadioButton/__stories__/RadioButtonShowcase.tsx +++ /dev/null @@ -1,90 +0,0 @@ -import React from 'react'; - -import {CircleInfoFill, TriangleExclamationFill} from '@gravity-ui/icons'; - -import {Showcase} from '../../../demo/Showcase'; -import {ShowcaseItem} from '../../../demo/ShowcaseItem'; -import {Icon} from '../../Icon'; -import {RadioButton} from '../RadioButton'; -import type {RadioButtonOption} from '../RadioButton'; - -export function RadioButtonShowcase() { - const options: RadioButtonOption[] = [ - {value: 'Value 1', content: 'Value 1'}, - {value: 'Value 2', content: 'Value 2'}, - {value: 'Value 3', content: 'Value 3', disabled: true}, - ]; - - const iconOptions: RadioButtonOption[] = [ - { - value: 'Value 1', - content: ( - - - Warning - - ), - title: 'Warning', - }, - {value: 'Value 2', content: , title: 'Info'}, - ]; - - return ( - - - - - - - - - - - - - - -
-

s

-
- -
-

m

-
- -
-

l

-
- -
-

xl

-
- -
-
- - -
-
- - - - -
-
- - - - -
-
- - - - -
-
- - - ); -} diff --git a/src/components/RadioButton/index.ts b/src/components/RadioButton/index.ts deleted file mode 100644 index d813dc5132..0000000000 --- a/src/components/RadioButton/index.ts +++ /dev/null @@ -1,3 +0,0 @@ -export * from './RadioButton'; -// FIXME rename types RadioButtonOption to RadioButtonOptionProps -export {RadioButtonOption as RadioButtonItem} from './RadioButtonOption'; diff --git a/src/components/SegmentedRadioGroup/README.md b/src/components/SegmentedRadioGroup/README.md new file mode 100644 index 0000000000..6e6186c1c8 --- /dev/null +++ b/src/components/SegmentedRadioGroup/README.md @@ -0,0 +1,263 @@ + + +# SegmentedRadioGroup + + + +```tsx +import {SegmentedRadioGroup} from '@gravity-ui/uikit'; +``` + +The `SegmentedRadioGroup` component is used to create a group of radio buttons where users can select a single option from multiple choices. + +### Disabled state + + + + + +```tsx + + Value 1 + Value 2 + Value 3 + +``` + + + +### Size + +To control the size of the `SegmentedRadioGroup`, use the `size` property. The default size is `m`. + + + + + +```tsx +const options = [ +Value 1, +Value 2, +Value 3, +]; + +{options} +{options} +{options} +{options} +``` + + + +### Width + +To control the width of the `SegmentedRadioGroup`, use the `width` property. + + + + + +```tsx +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+``` + + + +### Properties + +| Name | Description | Type | Default | +| :----------- | :--------------------------------------------------------------------------------------------------- | :---------------------------: | :-----: | +| children | The content of the radio button. | `ReactNode` | | +| disabled | Toggles the `disabled` state of the radio button. | `boolean` | `false` | +| options | Options for radio button. | `SegmentedRadioGroupOption[]` | | +| defaultValue | Sets the initial value state when the component is mounted. | `string` | | +| onUpdate | Fires when the user changes the radio button state. Provides the new value as a callback's argument. | `(value: string) => void` | | +| onChange | Fires when the user changes the radio button state. Provides change event as a callback's argument. | `Function` | | +| onFocus | Event handler for when the radio input element receives focus. | `Function` | | +| onBlur | Event handler for when the radio input element loses focus. | `Function` | | +| width | Sets the width of the radio button. | `auto - max` | | +| size | Sets the size of the radio button. | `s` `m` `l` `xl` | `m` | +| name | HTML `name` attribute for the input element. | `string` | | +| qa | HTML `data-qa` attribute, used in tests. | `string` | | +| style | HTML `style` attribute | `React.CSSProperties` | | +| className | HTML `class` attribute | `string` | | + +## SegmentedRadioGroup.Option + +The `SegmentedRadioGroup` component also exports a nested `Option` component. You can use it to create radio button options within the `SegmentedRadioGroup`. + + + + + +```tsx +const options: SegmentedRadioGroupOption[] = [ + {value: 'Value 1', content: 'Value 1'}, + {value: 'Value 2', content: 'Value 2'}, + {value: 'Value 3', content: 'Value 3'}, +]; + + + + +; +``` + + + +### Properties + +| Name | Description | Type | Default | +| :------- | :-------------------------------------------------- | :---------: | :-----: | +| children | The content of the radio (usually a label). | `ReactNode` | | +| content | The content of the radio (alternative to children). | `ReactNode` | | +| disabled | Toggles the `disabled` state of the radio. | `boolean` | `false` | +| value | Control value | `string` | | diff --git a/src/components/RadioButton/RadioButton.scss b/src/components/SegmentedRadioGroup/SegmentedRadioGroup.scss similarity index 99% rename from src/components/RadioButton/RadioButton.scss rename to src/components/SegmentedRadioGroup/SegmentedRadioGroup.scss index 75461de372..951cde3590 100644 --- a/src/components/RadioButton/RadioButton.scss +++ b/src/components/SegmentedRadioGroup/SegmentedRadioGroup.scss @@ -1,6 +1,6 @@ @use '../variables'; -$block: '.#{variables.$ns}radio-button'; +$block: '.#{variables.$ns}segmented-radio-group'; #{$block} { --_--border-width: 1px; diff --git a/src/components/RadioButton/RadioButton.tsx b/src/components/SegmentedRadioGroup/SegmentedRadioGroup.tsx similarity index 61% rename from src/components/RadioButton/RadioButton.tsx rename to src/components/SegmentedRadioGroup/SegmentedRadioGroup.tsx index 573e9ca053..a390fdf843 100644 --- a/src/components/RadioButton/RadioButton.tsx +++ b/src/components/SegmentedRadioGroup/SegmentedRadioGroup.tsx @@ -6,35 +6,35 @@ import {useRadioGroup} from '../../hooks/private'; import type {ControlGroupOption, ControlGroupProps, DOMProps, QAProps} from '../types'; import {block} from '../utils/cn'; -import {RadioButtonOption as Option} from './RadioButtonOption'; +import {SegmentedRadioGroupOption as Option} from './SegmentedRadioGroupOption'; -import './RadioButton.scss'; +import './SegmentedRadioGroup.scss'; -const b = block('radio-button'); +const b = block('segmented-radio-group'); -export type RadioButtonOption = ControlGroupOption; -export type RadioButtonSize = 's' | 'm' | 'l' | 'xl'; -export type RadioButtonWidth = 'auto' | 'max'; +// export type SegmentedRadioGroupOption = ControlGroupOption; +export type SegmentedRadioGroupSize = 's' | 'm' | 'l' | 'xl'; +export type SegmentedRadioGroupWidth = 'auto' | 'max'; -export interface RadioButtonProps +export interface SegmentedRadioGroupProps extends ControlGroupProps, DOMProps, QAProps { - size?: RadioButtonSize; - width?: RadioButtonWidth; + size?: SegmentedRadioGroupSize; + width?: SegmentedRadioGroupWidth; children?: | React.ReactElement> | React.ReactElement>[]; } -type RadioButtonComponentType = (( - props: RadioButtonProps & {ref?: React.ForwardedRef}, +type SegmentedRadioGroupComponentType = (( + props: SegmentedRadioGroupProps & {ref?: React.ForwardedRef}, ) => React.JSX.Element) & { Option: typeof Option; }; -export const RadioButton = React.forwardRef(function RadioButton( - props: RadioButtonProps, +export const SegmentedRadioGroup = React.forwardRef(function SegmentedRadioGroup( + props: SegmentedRadioGroupProps, ref: React.ForwardedRef, ) { const {size = 'm', width, style, className, qa, children} = props; @@ -66,6 +66,6 @@ export const RadioButton = React.forwardRef(function RadioButton ); -}) as unknown as RadioButtonComponentType; +}) as unknown as SegmentedRadioGroupComponentType; -RadioButton.Option = Option; +SegmentedRadioGroup.Option = Option; diff --git a/src/components/RadioButton/RadioButtonOption.tsx b/src/components/SegmentedRadioGroup/SegmentedRadioGroupOption.tsx similarity index 63% rename from src/components/RadioButton/RadioButtonOption.tsx rename to src/components/SegmentedRadioGroup/SegmentedRadioGroupOption.tsx index 52019d1562..5c0852634e 100644 --- a/src/components/RadioButton/RadioButtonOption.tsx +++ b/src/components/SegmentedRadioGroup/SegmentedRadioGroupOption.tsx @@ -7,23 +7,23 @@ import type {ControlProps} from '../types'; import {block} from '../utils/cn'; import {isIcon, isSvg} from '../utils/common'; -const b = block('radio-button'); +const b = block('segmented-radio-group'); -export interface RadioButtonOptionProps extends ControlProps { +export interface SegmentedRadioGroupOptionProps + extends ControlProps { value: ValueType; content?: React.ReactNode; children?: React.ReactNode; title?: string; } -type RadioButtonOptionComponentType = ( - props: RadioButtonOptionProps, +type SegmentedRadioGroupOptionComponentType = ( + props: SegmentedRadioGroupOptionProps, ) => React.JSX.Element; -export const RadioButtonOption = React.forwardRef(function RadioButtonOption( - props: RadioButtonOptionProps, - ref: React.ForwardedRef, -) { +export const SegmentedRadioGroupOption = React.forwardRef(function SegmentedRadioGroupOption< + T extends string, +>(props: SegmentedRadioGroupOptionProps, ref: React.ForwardedRef) { const {disabled = false, content, children, title} = props; const {checked, inputProps} = useRadio(props); const inner = content || children; @@ -42,4 +42,4 @@ export const RadioButtonOption = React.forwardRef(function RadioButtonOption{inner}} ); -}) as unknown as RadioButtonOptionComponentType; +}) as unknown as SegmentedRadioGroupOptionComponentType; diff --git a/src/components/RadioButton/__stories__/Docs.mdx b/src/components/SegmentedRadioGroup/__stories__/Docs.mdx similarity index 71% rename from src/components/RadioButton/__stories__/Docs.mdx rename to src/components/SegmentedRadioGroup/__stories__/Docs.mdx index 18ac587a0e..fe25897291 100644 --- a/src/components/RadioButton/__stories__/Docs.mdx +++ b/src/components/SegmentedRadioGroup/__stories__/Docs.mdx @@ -1,5 +1,5 @@ import {Meta, Markdown} from '@storybook/addon-docs'; -import * as Stories from './RadioButton.stories'; +import * as Stories from './SegmentedRadioGroup.stories'; import Readme from '../README.md?raw'; diff --git a/src/components/RadioButton/__stories__/RadioButton.stories.tsx b/src/components/SegmentedRadioGroup/__stories__/SegmentedRadioGroup.stories.tsx similarity index 50% rename from src/components/RadioButton/__stories__/RadioButton.stories.tsx rename to src/components/SegmentedRadioGroup/__stories__/SegmentedRadioGroup.stories.tsx index 0725000f48..bc3788610b 100644 --- a/src/components/RadioButton/__stories__/RadioButton.stories.tsx +++ b/src/components/SegmentedRadioGroup/__stories__/SegmentedRadioGroup.stories.tsx @@ -4,23 +4,23 @@ import type {Meta, StoryObj} from '@storybook/react'; import {Showcase} from '../../../demo/Showcase'; import {ShowcaseItem} from '../../../demo/ShowcaseItem'; -import {RadioButton} from '../RadioButton'; +import {SegmentedRadioGroup} from '../SegmentedRadioGroup'; -import {RadioButtonShowcase} from './RadioButtonShowcase'; +import {SegmentedRadioGroupShowcase} from './SegmentedRadioGroupShowcase'; export default { - title: 'Components/Inputs/RadioButton', - component: RadioButton, + title: 'Components/Inputs/SegmentedRadioGroup', + component: SegmentedRadioGroup, } as Meta; -type Story = StoryObj; +type Story = StoryObj; export const Default: Story = { args: { - options: [ - {value: 'Value 1', content: 'Value 1'}, - {value: 'Value 2', content: 'Value 2'}, - {value: 'Value 3', content: 'Value 3'}, + children: [ + , + , + , ], }, }; @@ -29,16 +29,16 @@ export const Size: Story = { render: (args) => ( - + - + - + - + ), @@ -55,6 +55,6 @@ export const Disabled: Story = { }; export const ShowcaseStory: Story = { - render: () => , + render: () => , name: 'Showcase', }; diff --git a/src/components/SegmentedRadioGroup/__stories__/SegmentedRadioGroupShowcase.tsx b/src/components/SegmentedRadioGroup/__stories__/SegmentedRadioGroupShowcase.tsx new file mode 100644 index 0000000000..6ee01a02c6 --- /dev/null +++ b/src/components/SegmentedRadioGroup/__stories__/SegmentedRadioGroupShowcase.tsx @@ -0,0 +1,101 @@ +import React from 'react'; + +import {CircleInfoFill, TriangleExclamationFill} from '@gravity-ui/icons'; + +import {Showcase} from '../../../demo/Showcase'; +import {ShowcaseItem} from '../../../demo/ShowcaseItem'; +import {Icon} from '../../Icon'; +import {SegmentedRadioGroup} from '../SegmentedRadioGroup'; + +export function SegmentedRadioGroupShowcase() { + const options = [ + + Value 1 + , + + Value 2 + , + + Value 3 + , + ]; + + const iconOptions = [ + + + Warning + , + + + , + ]; + + return ( + + + {options} + + + + {iconOptions} + + + + + {options} + + + + +
+

s

+
+ + {options} + +
+

m

+
+ + {options} + +
+

l

+
+ + {options} + +
+

xl

+
+ + {options} + +
+
+ + +
+
+ + + + +
+
+ + + + +
+
+ + + + +
+
+ + + ); +} diff --git a/src/components/RadioButton/__tests__/RadioButton.test.tsx b/src/components/SegmentedRadioGroup/__tests__/SegmentedRadioGroup.test.tsx similarity index 77% rename from src/components/RadioButton/__tests__/RadioButton.test.tsx rename to src/components/SegmentedRadioGroup/__tests__/SegmentedRadioGroup.test.tsx index 38bc065625..9e1527384a 100644 --- a/src/components/RadioButton/__tests__/RadioButton.test.tsx +++ b/src/components/SegmentedRadioGroup/__tests__/SegmentedRadioGroup.test.tsx @@ -2,43 +2,55 @@ import React from 'react'; import userEvent from '@testing-library/user-event'; -import {RadioButton} from '../'; -import type {RadioButtonOption, RadioButtonProps, RadioButtonSize, RadioButtonWidth} from '../'; +import {SegmentedRadioGroup} from '../'; +import type { + SegmentedRadioGroupOptionProps, + SegmentedRadioGroupProps, + SegmentedRadioGroupSize, + SegmentedRadioGroupWidth, +} from '../'; import {render, screen, within} from '../../../../test-utils/utils'; import {block} from '../../../components/utils/cn'; -const qaId = 'radio-button-component'; -const b = block('radio-button'); +const qaId = 'segmented-radio-group-component'; +const b = block('segmented-radio-group'); -const options: RadioButtonOption[] = [ +const options: SegmentedRadioGroupOptionProps[] = [ {value: 'Value 1', content: 'Value 1'}, {value: 'Value 2', content: 'Value 2'}, {value: 'Value 3', content: 'Value 3'}, ]; -const renderRadioButton = (props: RadioButtonProps = {}) => { - render(); +const renderSegmentedRadioGroup = (props: SegmentedRadioGroupProps = {}) => { + render( + , + ); }; -describe('RadioButton', () => { +describe('SegmentedRadioGroup', () => { test('use passed ref for component', () => { const ref = React.createRef(); - render(); + render(); const component = screen.getByTestId(qaId); expect(ref.current).toBe(component); }); describe('visibility', () => { - test('render RadioButton by default', () => { - renderRadioButton(); + test('render SegmentedRadioGroup by default', () => { + renderSegmentedRadioGroup(); const component = screen.getByTestId(qaId); expect(component).toBeVisible(); }); test('show given children passed as prop', () => { - renderRadioButton(); + renderSegmentedRadioGroup(); const component = screen.getByTestId(qaId); const radios = within(component).getAllByRole('radio'); @@ -50,11 +62,11 @@ describe('RadioButton', () => { test('show given children passed as nested components', async () => { render( - + {options.map((opt) => ( - + ))} - , + , ); const component = screen.getByTestId(qaId); @@ -68,7 +80,7 @@ describe('RadioButton', () => { describe('ControlGroupProps interface', () => { test('all children are disabled when disabled=true prop is given', () => { - renderRadioButton({disabled: true}); + renderSegmentedRadioGroup({disabled: true}); const component = screen.getByTestId(qaId); const radios = within(component).getAllByRole('radio'); @@ -78,7 +90,7 @@ describe('RadioButton', () => { }); test('all children are not disabled when disabled=false prop is given', () => { - renderRadioButton({disabled: false}); + renderSegmentedRadioGroup({disabled: false}); const component = screen.getByTestId(qaId); const radios = within(component).getAllByRole('radio'); @@ -88,13 +100,13 @@ describe('RadioButton', () => { }); test('a proper radio is disabled when disabled=false prop is given to one of the option', () => { - const customOptions: RadioButtonOption[] = [ + const customOptions: SegmentedRadioGroupOptionProps[] = [ {value: 'Disabled', content: 'Disabled', disabled: true}, ...options, ]; render( - { test('only one child is checked', async () => { const user = userEvent.setup(); - renderRadioButton(); + renderSegmentedRadioGroup(); const component = screen.getByTestId(qaId); const radios = within(component).getAllByRole('radio'); @@ -150,7 +162,7 @@ describe('RadioButton', () => { test('call onFocus/onBlur', async () => { const handleOnFocus = jest.fn(); const handleOnBlur = jest.fn(); - renderRadioButton({onBlur: handleOnBlur, onFocus: handleOnFocus}); + renderSegmentedRadioGroup({onBlur: handleOnBlur, onFocus: handleOnFocus}); const component = screen.getByTestId(qaId); const radios = within(component).getAllByRole('radio'); @@ -168,7 +180,7 @@ describe('RadioButton', () => { const handleOnChange = jest.fn(); const handleOnUpdate = jest.fn(); - renderRadioButton({onChange: handleOnChange, onUpdate: handleOnUpdate}); + renderSegmentedRadioGroup({onChange: handleOnChange, onUpdate: handleOnUpdate}); const component = screen.getByTestId(qaId); const radios = within(component).getAllByRole('radio'); @@ -184,7 +196,7 @@ describe('RadioButton', () => { test.each(new Array('aria-label', 'aria-labelledby'))( 'render with given "%s" attribute', (attr) => { - renderRadioButton({[attr]: 'custom-text'}); + renderSegmentedRadioGroup({[attr]: 'custom-text'}); const component = screen.getByTestId(qaId); expect(component).toHaveAttribute(attr); @@ -196,7 +208,7 @@ describe('RadioButton', () => { test('add style attribute', () => { const style = {color: 'red'}; - renderRadioButton({style}); + renderSegmentedRadioGroup({style}); const component = screen.getByTestId(qaId); expect(component).toHaveStyle(style); @@ -205,26 +217,26 @@ describe('RadioButton', () => { test('add className attribute', () => { const className = 'my-class'; - renderRadioButton({className}); + renderSegmentedRadioGroup({className}); const component = screen.getByTestId(qaId); expect(component).toHaveClass(className); }); - test.each(new Array('auto', 'max'))( + test.each(new Array('auto', 'max'))( 'render with given "%s" width', (width) => { - renderRadioButton({width}); + renderSegmentedRadioGroup({width}); const component = screen.getByTestId(qaId); expect(component).toHaveClass(b({width})); }, ); - test.each(new Array('s', 'm', 'l', 'xl'))( + test.each(new Array('s', 'm', 'l', 'xl'))( 'render with given "%s" size', (size) => { - renderRadioButton({size}); + renderSegmentedRadioGroup({size}); const component = screen.getByTestId(qaId); expect(component).toHaveClass(b({size})); diff --git a/src/components/SegmentedRadioGroup/index.ts b/src/components/SegmentedRadioGroup/index.ts new file mode 100644 index 0000000000..a9d8c9fc6c --- /dev/null +++ b/src/components/SegmentedRadioGroup/index.ts @@ -0,0 +1,3 @@ +export * from './SegmentedRadioGroup'; +export {SegmentedRadioGroupOption} from './SegmentedRadioGroupOption'; +export type {SegmentedRadioGroupOptionProps} from './SegmentedRadioGroupOption'; diff --git a/src/components/Select/__stories__/SelectShowcase.tsx b/src/components/Select/__stories__/SelectShowcase.tsx index 2ce69cb6d0..c1509c4302 100644 --- a/src/components/Select/__stories__/SelectShowcase.tsx +++ b/src/components/Select/__stories__/SelectShowcase.tsx @@ -8,8 +8,7 @@ import type {SelectOption, SelectProps} from '..'; import {Button} from '../../Button'; import {ClipboardButton} from '../../ClipboardButton'; import {Icon} from '../../Icon'; -import {RadioButton} from '../../RadioButton'; -import type {RadioButtonOption} from '../../RadioButton'; +import {SegmentedRadioGroup} from '../../SegmentedRadioGroup'; import {Tooltip} from '../../Tooltip'; import {TextInput} from '../../controls'; import {block} from '../../utils/cn'; @@ -47,11 +46,6 @@ const getEscapedString = (str: string) => { return str.replace(/[-/\\^$*+?.()|[\]{}]/g, '\\$&'); }; -const radioButtonOptions: RadioButtonOption[] = [ - {value: Mode.VIEW, content: 'View'}, - {value: Mode.CODE, content: 'Code'}, -]; - const ExampleItem = (props: { title: string; selectProps: SelectProps; @@ -75,15 +69,15 @@ const ExampleItem = (props: {

{Boolean(code.length) && ( - setMode(nextMode)} > - - - + + + )}

{mode === Mode.VIEW ? ( diff --git a/src/components/index.ts b/src/components/index.ts index b7cc647adc..d1deaff651 100644 --- a/src/components/index.ts +++ b/src/components/index.ts @@ -41,7 +41,7 @@ export * from './Popup'; export * from './Portal'; export * from './Progress'; export * from './Radio'; -export * from './RadioButton'; +export * from './SegmentedRadioGroup'; export * from './RadioGroup'; export * from './Select'; export * from './Sheet';