fix(radio-button): group-level label/button alignment (#2914)

Fixes #2286.
carbon-design-system · Jun 4, 2019 · 9a9da70 · 9a9da70
1 parent 23bd656
commit 9a9da70
Show file tree

Hide file tree

Showing 4 changed files with 49 additions and 3 deletions.
diff --git a/packages/components/src/components/radio-button/_radio-button.scss b/packages/components/src/components/radio-button/_radio-button.scss
@@ -31,6 +31,10 @@
     flex-direction: column;
     align-items: flex-start;
 
+    &.#{$prefix}--radio-button-group--label-left {
+      align-items: flex-end;
+    }
+
     .#{$prefix}--radio-button__label {
       margin-right: 0;
     }
@@ -144,16 +148,20 @@
     margin-bottom: $carbon--spacing-03;
   }
 
+  .#{$prefix}--radio-button-group--label-right .#{$prefix}--radio-button__label,
   .#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-right
     .#{$prefix}--radio-button__label {
     flex-direction: row;
   }
 
+  .#{$prefix}--radio-button-group--label-left .#{$prefix}--radio-button__label,
   .#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-left
     .#{$prefix}--radio-button__label {
     flex-direction: row-reverse;
   }
 
+  .#{$prefix}--radio-button-group--label-left
+    .#{$prefix}--radio-button__appearance,
   .#{$prefix}--radio-button-wrapper.#{$prefix}--radio-button-wrapper--label-left
     .#{$prefix}--radio-button__appearance {
     margin-right: 0;

diff --git a/packages/react/src/components/RadioButton/RadioButton.js b/packages/react/src/components/RadioButton/RadioButton.js
@@ -54,8 +54,9 @@ class RadioButton extends React.Component {
 
     /**
      * Provide where label text should be placed
+     * NOTE: `top`/`bottom` are deprecated
      */
-    labelPosition: PropTypes.string,
+    labelPosition: PropTypes.oneOf(['top', 'right', 'bottom', 'left']),
 
     /**
      * Provide a name for the underlying <input> node

diff --git a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup-story.js b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup-story.js
@@ -20,6 +20,16 @@ const values = {
   disabled: 'disabled',
 };
 
+const orientations = {
+  'Horizontal (horizontal)': 'horizontal',
+  'Vertical (vertical)': 'vertical',
+};
+
+const labelPositions = {
+  'Left (left)': 'left',
+  'Right (right)': 'right',
+};
+
 const props = {
   group: () => ({
     name: text(
@@ -31,6 +41,16 @@ const props = {
       values,
       'default-selected'
     ),
+    orientation: select(
+      'Radio button orientation (orientation)',
+      orientations,
+      'horizontal'
+    ),
+    labelPosition: select(
+      'Label position (labelPosition)',
+      labelPositions,
+      'right'
+    ),
     onChange: action('onChange'),
   }),
   radio: () => ({

diff --git a/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.js b/packages/react/src/components/RadioButtonGroup/RadioButtonGroup.js
@@ -33,6 +33,16 @@ export default class RadioButtonGroup extends React.Component {
      */
     defaultSelected: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
 
+    /**
+     * Provide where radio buttons should be placed
+     */
+    orientation: PropTypes.oneOf(['horizontal', 'vertical']),
+
+    /**
+     * Provide where label text should be placed
+     */
+    labelPosition: PropTypes.oneOf(['left', 'right']),
+
     /**
      * Specify the name of the underlying <input> nodes
      */
@@ -56,6 +66,8 @@ export default class RadioButtonGroup extends React.Component {
   };
 
   static defaultProps = {
+    orientation: 'horizontal',
+    labelPosition: 'right',
     onChange: /* istanbul ignore next */ () => {},
   };
 
@@ -104,11 +116,16 @@ export default class RadioButtonGroup extends React.Component {
   };
 
   render() {
-    const { disabled, className } = this.props;
+    const { disabled, className, orientation, labelPosition } = this.props;
 
     const wrapperClasses = classNames(
       `${prefix}--radio-button-group`,
-      className
+      className,
+      {
+        [`${prefix}--radio-button-group--${orientation}`]:
+          orientation === 'vertical',
+        [`${prefix}--radio-button-group--label-${labelPosition}`]: labelPosition,
+      }
     );
 
     return (