From e133b4ee70110d10c84b98a2242a2f786dcbe51d Mon Sep 17 00:00:00 2001 From: TJ Egan Date: Thu, 18 Feb 2021 15:39:35 -0800 Subject: [PATCH] feat(RadioButtonGroup): add new legendText prop, refactor stories --- .../radio-button/_radio-button.scss | 1 - .../__snapshots__/PublicAPI-test.js.snap | 3 + .../RadioButton/RadioButton-story.js | 114 +++++++++++------- .../components/RadioButton/RadioButton.mdx | 13 ++ .../RadioButtonGroup-story.js | 110 ----------------- .../RadioButtonGroup/RadioButtonGroup-test.js | 20 ++- .../RadioButtonGroup/RadioButtonGroup.js | 21 +++- .../RadioButtonGroup/RadioButtonGroup.mdx | 23 ---- 8 files changed, 118 insertions(+), 187 deletions(-) delete mode 100644 packages/react/src/components/RadioButtonGroup/RadioButtonGroup-story.js delete mode 100644 packages/react/src/components/RadioButtonGroup/RadioButtonGroup.mdx diff --git a/packages/components/src/components/radio-button/_radio-button.scss b/packages/components/src/components/radio-button/_radio-button.scss index bdbb7f740904..4d255d272d6c 100644 --- a/packages/components/src/components/radio-button/_radio-button.scss +++ b/packages/components/src/components/radio-button/_radio-button.scss @@ -23,7 +23,6 @@ .#{$prefix}--radio-button-group { display: flex; align-items: center; - margin-top: rem(6px); } // Remove spacing above collection of radio buttons if label is present diff --git a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap index 13d6768580c9..54a7638c1ec7 100644 --- a/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap +++ b/packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap @@ -4505,6 +4505,9 @@ Map { ], "type": "oneOf", }, + "legendText": Object { + "type": "node", + }, "name": Object { "isRequired": true, "type": "string", diff --git a/packages/react/src/components/RadioButton/RadioButton-story.js b/packages/react/src/components/RadioButton/RadioButton-story.js index 1c83e03256c1..db44219b7b2d 100644 --- a/packages/react/src/components/RadioButton/RadioButton-story.js +++ b/packages/react/src/components/RadioButton/RadioButton-story.js @@ -9,70 +9,96 @@ import React from 'react'; import { action } from '@storybook/addon-actions'; import { withKnobs, boolean, select, text } from '@storybook/addon-knobs'; +import RadioButtonGroup from '../RadioButtonGroup'; import RadioButton from '../RadioButton'; -import { RadioButton as OGRadioButton } from './RadioButton'; -import RadioButtonSkeleton from '../RadioButton/RadioButton.Skeleton'; import mdx from './RadioButton.mdx'; +const values = { + 'Option 1': 'radio-1', + 'Option 2': 'radio-2', + 'Option 3': 'radio-3', +}; + +const orientations = { + 'Horizontal (horizontal)': 'horizontal', + 'Vertical (vertical)': 'vertical', +}; + const labelPositions = { 'Left (left)': 'left', 'Right (right)': 'right', }; -const radioProps = () => ({ - className: 'some-class', - name: text('Form item name (name)', 'test'), - value: text('Value (value)', 'standard'), - labelText: text('Label text (labelText)', 'Standard Radio Button'), - labelPosition: select( - 'Label position (labelPosition)', - labelPositions, - 'right' - ), - disabled: boolean('Disabled (disabled)', false), - onChange: action('onChange'), -}); +const props = { + group: () => ({ + legendText: text( + 'The label (legend) of the RadioButtonGroup (legendText)', + 'Radio button heading' + ), + name: text( + 'The form control name (name in )', + 'radio-button-group' + ), + valueSelected: select( + 'Value of the selected button (valueSelected in )', + values, + 'radio-3' + ), + orientation: select( + 'Radio button orientation (orientation)', + orientations, + 'horizontal' + ), + labelPosition: select( + 'Label position (labelPosition)', + labelPositions, + 'right' + ), + onChange: action('onChange'), + }), + radio: () => ({ + className: 'some-class', + disabled: boolean('Disabled (disabled in )', false), + labelText: text('The label of the RadioButton (labelText)', 'Option 1'), + }), +}; export default { title: 'Components/RadioButton', decorators: [withKnobs], - component: OGRadioButton, - subcomponents: { - RadioButtonSkeleton, - }, parameters: { + component: RadioButtonGroup, docs: { page: mdx, }, - }, -}; - -export const Default = () => ; -Default.parameters = { - info: { - text: ` - Radio buttons are used when a list of two or more options are mutually exclusive, - meaning the user must select only one option. The example below shows how the Radio Button component - can be used as an uncontrolled component that is initially checked by setting the defaultChecked property - to true. To use the component in a controlled way, set the checked property instead. - `, + subcomponents: { + RadioButton, + }, }, }; -export const Skeleton = () => ( -
- -
-); - -Skeleton.storyName = 'skeleton'; +export const Default = () => { + return ( + + + + + + ); +}; -Skeleton.parameters = { - info: { - text: ` - Placeholder skeleton state to use when content is loading. - `, - }, +export const Playground = () => { + const radioProps = props.radio(); + return ( + + + + + + ); }; diff --git a/packages/react/src/components/RadioButton/RadioButton.mdx b/packages/react/src/components/RadioButton/RadioButton.mdx index a00c0c517d92..b840c6df4a42 100644 --- a/packages/react/src/components/RadioButton/RadioButton.mdx +++ b/packages/react/src/components/RadioButton/RadioButton.mdx @@ -10,8 +10,21 @@ import { Props } from '@storybook/addon-docs/blocks'; ## Table of Contents +- [Overview](#overview) +- [Component API](#component-api) +- [Feedback](#feedback) + ## Overview +Radio buttons represent a group of mutually exclusive choices, compared to +checkboxes that allow users to make one or more selections from a group. In use +cases where only one selection from a group is allowed, use the radio button +component instead of the checkbox. + + + + + ## Component API diff --git a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup-story.js b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup-story.js deleted file mode 100644 index 8623bab5c35f..000000000000 --- a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup-story.js +++ /dev/null @@ -1,110 +0,0 @@ -/** - * Copyright IBM Corp. 2016, 2018 - * - * This source code is licensed under the Apache-2.0 license found in the - * LICENSE file in the root directory of this source tree. - */ - -import React from 'react'; -import { action } from '@storybook/addon-actions'; - -import { withKnobs, boolean, select, text } from '@storybook/addon-knobs'; -import RadioButtonGroup from '../RadioButtonGroup'; -import RadioButton from '../RadioButton'; -import FormGroup from '../FormGroup'; -import mdx from './RadioButtonGroup.mdx'; - -const values = { - standard: 'standard', - 'default-selected': 'default-selected', - disabled: 'disabled', -}; - -const orientations = { - 'Horizontal (horizontal)': 'horizontal', - 'Vertical (vertical)': 'vertical', -}; - -const labelPositions = { - 'Left (left)': 'left', - 'Right (right)': 'right', -}; - -const props = { - group: () => ({ - name: text( - 'The form control name (name in )', - 'radio-button-group' - ), - valueSelected: select( - 'Value of the selected button (valueSelected in )', - values, - 'default-selected' - ), - orientation: select( - 'Radio button orientation (orientation)', - orientations, - 'horizontal' - ), - labelPosition: select( - 'Label position (labelPosition)', - labelPositions, - 'right' - ), - onChange: action('onChange'), - }), - radio: () => ({ - className: 'some-class', - disabled: boolean('Disabled (disabled in )', false), - labelText: text( - 'Label text (labelText in )', - 'Radio button label' - ), - }), -}; - -export default { - title: 'Components/RadioButtonGroup', - decorators: [withKnobs], - - parameters: { - component: RadioButtonGroup, - docs: { - page: mdx, - }, - - subcomponents: { - RadioButton, - }, - }, -}; - -export const Default = () => { - const radioProps = props.radio(); - return ( - - - - - - - - ); -}; - -Default.parameters = { - info: { - text: ` - The example below shows a Radio Button Group component with a default selected Radio Button. - Although you can set the checked prop on the Radio Button, when using the Radio Button component - as a child of the Radio Button Group, either set the defaultSelected or valueSelected which will - automatically set the selected prop on the corresponding Radio Button component. - - Use defaultSelected when you want a radio button to be selected initially, but don't need to set it - at a later time. If you do need to set it dynamically at a later time, then use the valueSelected property instead. - `, - }, -}; diff --git a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup-test.js b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup-test.js index e17b8f6fbb37..d10c0af36852 100644 --- a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup-test.js +++ b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup-test.js @@ -16,22 +16,30 @@ const { prefix } = settings; describe('RadioButtonGroup', () => { describe('renders as expected', () => { const wrapper = mount( - + ); - describe('wrapping div', () => { - const div = wrapper.first('div'); + describe('wrapping fieldset', () => { + const fieldset = wrapper.find('fieldset'); + const legend = wrapper.find('legend'); + + it('renders a fieldset', () => { + expect(fieldset.length).toEqual(1); + }); - it('renders a div', () => { - expect(div.length).toEqual(1); + it('renders a legend if legendText is provided', () => { + expect(legend.length).toEqual(1); }); it('sets classes that are passed via className prop', () => { wrapper.setProps({ className: 'extra-class' }); - expect(div.hasClass('extra-class')); + expect(fieldset.hasClass('extra-class')); }); it('sets disabled attribute if disabled prop is set', () => { diff --git a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.js b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.js index 58da7b3bcf9c..0801bde14281 100644 --- a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.js +++ b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.js @@ -43,6 +43,12 @@ export default class RadioButtonGroup extends React.Component { */ labelPosition: PropTypes.oneOf(['left', 'right']), + /** + * Provide a legend to the RadioButtonGroup input that you are + * exposing to the user + */ + legendText: PropTypes.node, + /** * Specify the name of the underlying `` nodes */ @@ -116,7 +122,13 @@ export default class RadioButtonGroup extends React.Component { }; render() { - const { disabled, className, orientation, labelPosition } = this.props; + const { + disabled, + className, + orientation, + labelPosition, + legendText, + } = this.props; const wrapperClasses = classNames( `${prefix}--radio-button-group`, @@ -130,9 +142,12 @@ export default class RadioButtonGroup extends React.Component { return (
-
+
+ {legendText && ( + {legendText} + )} {this.getRadioButtons()} -
+
); } diff --git a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.mdx b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.mdx deleted file mode 100644 index 62915bc3b573..000000000000 --- a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.mdx +++ /dev/null @@ -1,23 +0,0 @@ -import { Props } from '@storybook/addon-docs/blocks'; - -# RadioButtonGroup - -[Source code](https://github.com/carbon-design-system/carbon/tree/master/packages/react/src/components/RadioButtonGroup) - |  -[Usage guidelines](https://www.carbondesignsystem.com/components/radio-button/usage) - |  -[Accessibility](https://www.carbondesignsystem.com/components/radio-button/accessibility) - -## Table of Contents - -## Overview - -## Component API - - - -## Feedback - -Help us improve this component by providing feedback, asking questions on Slack, -or updating this file on -[GitHub](https://github.com/carbon-design-system/carbon/edit/master/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.mdx).