From a29fb4f8ff6de0d2fccd7a50f33c414ee677d769 Mon Sep 17 00:00:00 2001
From: Daniel Flores <dnielfs@gmail.com>
Date: Mon, 4 Feb 2019 17:42:01 -0500
Subject: [PATCH] fix(radiobuttongroup): custom class should merge with base
 class (#1818)

---
 .../RadioButtonGroup/RadioButtonGroup-test.js | 20 +++++++++++++++++++
 .../RadioButtonGroup/RadioButtonGroup.js      | 13 +++++++-----
 2 files changed, 28 insertions(+), 5 deletions(-)

diff --git a/src/components/RadioButtonGroup/RadioButtonGroup-test.js b/src/components/RadioButtonGroup/RadioButtonGroup-test.js
index 15946c462e48..c115b540459b 100644
--- a/src/components/RadioButtonGroup/RadioButtonGroup-test.js
+++ b/src/components/RadioButtonGroup/RadioButtonGroup-test.js
@@ -142,4 +142,24 @@ describe('RadioButtonGroup', () => {
       expect(wrapper.state().selected).toEqual('male');
     });
   });
+
+  describe('Custom class name should stay with original class name', () => {
+    const wrapper = shallow(
+      <RadioButtonGroup
+        className="my-radio-group"
+        valueSelected="male"
+        defaultSelected="female"
+        name="gender">
+        <RadioButton labelText="Male" value="male" />
+        <RadioButton labelText="Female" value="female" />
+      </RadioButtonGroup>
+    );
+
+    it('should found the provided class along with the base class', () => {
+      expect(wrapper.exists('.my-radio-group')).toBe(true);
+      expect(wrapper.exists('.bx--radio-button-group.my-radio-group')).toBe(
+        true
+      );
+    });
+  });
 });
diff --git a/src/components/RadioButtonGroup/RadioButtonGroup.js b/src/components/RadioButtonGroup/RadioButtonGroup.js
index 39213db55e1a..63e038041a70 100644
--- a/src/components/RadioButtonGroup/RadioButtonGroup.js
+++ b/src/components/RadioButtonGroup/RadioButtonGroup.js
@@ -7,6 +7,7 @@
 
 import PropTypes from 'prop-types';
 import React from 'react';
+import classNames from 'classnames';
 import RadioButton from '../RadioButton';
 import warning from 'warning';
 import { settings } from 'carbon-components';
@@ -103,14 +104,16 @@ export default class RadioButtonGroup extends React.Component {
   };
 
   render() {
-    const {
-      disabled,
-      className = `${prefix}--radio-button-group`,
-    } = this.props;
+    const { disabled, className } = this.props;
+
+    const wrapperClasses = classNames(
+      `${prefix}--radio-button-group`,
+      className
+    );
 
     return (
       <div className={`${prefix}--form-item`}>
-        <div className={className} disabled={disabled}>
+        <div className={wrapperClasses} disabled={disabled}>
           {this.getRadioButtons()}
         </div>
       </div>