fix(radiobuttongroup): custom class should merge with base class (car…

…bon-design-system#1818)

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
+      );
+    });
+  });
 });

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>