feat(RadioButton): support labelPosition prop (#1930)

* feat(RadioButton): support labelPosition prop Fixes #1913. * chore(RadioButton): code format change * chore(RadioButton): deprecate/remove top/bottom option
carbon-design-system · Mar 8, 2019 · 1bca992 · 1bca992
1 parent f288b7c
commit 1bca992
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 9 deletions.
diff --git a/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap b/src/components/DataTable/__tests__/__snapshots__/DataTable-test.js.snap
@@ -722,14 +722,15 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
                         ariaLabel="Select row"
                         checked={false}
                         id="data-table-11__select-row-b"
+                        labelPosition="right"
                         labelText=""
                         name="select-row-b"
                         onChange={[Function]}
                         onClick={[Function]}
                         value=""
                       >
                         <div
-                          className="radioButtonWrapper"
+                          className="bx--radio-button-wrapper radioButtonWrapper"
                         >
                           <input
                             ariaLabel="Select row"
@@ -788,14 +789,15 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
                         ariaLabel="Select row"
                         checked={false}
                         id="data-table-11__select-row-a"
+                        labelPosition="right"
                         labelText=""
                         name="select-row-a"
                         onChange={[Function]}
                         onClick={[Function]}
                         value=""
                       >
                         <div
-                          className="radioButtonWrapper"
+                          className="bx--radio-button-wrapper radioButtonWrapper"
                         >
                           <input
                             ariaLabel="Select row"
@@ -854,14 +856,15 @@ exports[`DataTable selection -- radio buttons should render 1`] = `
                         ariaLabel="Select row"
                         checked={false}
                         id="data-table-11__select-row-c"
+                        labelPosition="right"
                         labelText=""
                         name="select-row-c"
                         onChange={[Function]}
                         onClick={[Function]}
                         value=""
                       >
                         <div
-                          className="radioButtonWrapper"
+                          className="bx--radio-button-wrapper radioButtonWrapper"
                         >
                           <input
                             ariaLabel="Select row"

diff --git a/src/components/RadioButton/RadioButton-story.js b/src/components/RadioButton/RadioButton-story.js
@@ -9,15 +9,33 @@ import React from 'react';
 import { storiesOf } from '@storybook/react';
 import { action } from '@storybook/addon-actions';
 
-import { withKnobs, boolean, text } from '@storybook/addon-knobs';
+import { withKnobs, boolean, select, text } from '@storybook/addon-knobs';
 import RadioButton from '../RadioButton';
 import RadioButtonSkeleton from '../RadioButton/RadioButton.Skeleton';
+import { breakingChangesX } from '../../internal/FeatureFlags';
+
+const labelPositions = {
+  'Left (left)': 'left',
+  'Right (right)': 'right',
+};
+
+if (!breakingChangesX) {
+  Object.assign(labelPositions, {
+    'Top (top)': 'top',
+    'Bottom (bottom)': 'bottom',
+  });
+}
 
 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'
+  ),
   checked: boolean('Checked (checked)', false),
   disabled: boolean('Disabled (disabled)', false),
   onChange: action('onChange'),

diff --git a/src/components/RadioButton/RadioButton.Skeleton.js b/src/components/RadioButton/RadioButton.Skeleton.js
@@ -6,15 +6,20 @@
  */
 
 import React from 'react';
+import classNames from 'classnames';
 import { settings } from 'carbon-components';
+import { breakingChangesX } from '../../internal/FeatureFlags';
 
 const { prefix } = settings;
 
 export default class RadioButtonSkeleton extends React.Component {
   render() {
     const { id } = this.props;
+    const wrapperClasses = classNames(`${prefix}--radio-button-wrapper`, {
+      radioButtonWrapper: !breakingChangesX,
+    });
     return (
-      <div className="radioButtonWrapper">
+      <div className={wrapperClasses}>
         <div className={`${prefix}--radio-button ${prefix}--skeleton`} />
         {
           /* eslint-disable jsx-a11y/label-has-for,jsx-a11y/label-has-associated-control */

diff --git a/src/components/RadioButton/RadioButton.js b/src/components/RadioButton/RadioButton.js
@@ -8,9 +8,10 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import classNames from 'classnames';
+import warning from 'warning';
 import { settings } from 'carbon-components';
-import uid from '../../tools/uniqueId';
 import { breakingChangesX } from '../../internal/FeatureFlags';
+import uid from '../../tools/uniqueId';
 
 const { prefix } = settings;
 
@@ -47,6 +48,11 @@ class RadioButton extends React.Component {
      */
     labelText: PropTypes.node.isRequired,
 
+    /**
+     * Provide where label text should be placed
+     */
+    labelPosition: PropTypes.string,
+
     /**
      * Provide a name for the underlying <input> node
      */
@@ -71,6 +77,7 @@ class RadioButton extends React.Component {
 
   static defaultProps = {
     labelText: '',
+    labelPosition: 'right',
     onChange: () => {},
     value: '',
   };
@@ -82,11 +89,29 @@ class RadioButton extends React.Component {
   };
 
   render() {
+    const {
+      className,
+      labelText,
+      labelPosition,
+      innerRef: ref,
+      ...other
+    } = this.props;
+    if (__DEV__) {
+      warning(
+        labelPosition !== 'top' && labelPosition !== 'bottom',
+        '`top`/`bottom` values for `labelPosition` property in the `RadioButton` component is deprecated ' +
+          'and being removed in the next release of `carbon-components-react`.'
+      );
+    }
     const wrapperClasses = classNames(
-      'radioButtonWrapper',
-      this.props.className
+      className,
+      `${prefix}--radio-button-wrapper`,
+      {
+        [`${prefix}--radio-button-wrapper--label-${labelPosition}`]:
+          labelPosition !== 'right',
+        radioButtonWrapper: !breakingChangesX,
+      }
     );
-    const { labelText, innerRef: ref, ...other } = this.props;
     return (
       <div className={wrapperClasses}>
         <input

diff --git a/src/components/RadioButton/migrate-to-10.x.md b/src/components/RadioButton/migrate-to-10.x.md
@@ -0,0 +1,5 @@
+# Properties
+
+| Property                                    | New     |
+| ------------------------------------------- | ------- |
+| `top`/`bottom` for `labelPosition` property | Removed |