feat(radio-group): react radio-group accepts classname, id, and style…

… props

[#87784030]

spec/pivotal-ui-react/radio-group/radio-group_spec.js

@@ -1,44 +1,65 @@
 require('../spec_helper');
+var RadioGroup = require('../../../src/pivotal-ui-react/radio-group/radio-group').RadioGroup;
+var Radio = require('../../../src/pivotal-ui-react/radio/radio').Radio;
 
 describe('RadioGroup', function() {
-  var changeSpy;
-  beforeEach(function() {
-    var RadioGroup = require('../../../src/pivotal-ui-react/radio-group/radio-group').RadioGroup;
-    var Radio = require('../../../src/pivotal-ui-react/radio/radio').Radio;
-
-    changeSpy = jasmine.createSpy('change');
-    React.render(
-      <RadioGroup name="bananas" onChange={changeSpy} id="clear-channel">
-        <Radio value="1">One!!!</Radio>
-        <Radio value="2">The two value</Radio>
-        <Radio value="3">Three</Radio>
-      </RadioGroup>,
-      root
-    );
-  });
+  describe('basic RadioGroup', function() {
+    var changeSpy;
+    beforeEach(function() {
 
-  afterEach(function() {
-    React.unmountComponentAtNode(root);
-  });
+      changeSpy = jasmine.createSpy('change');
+      React.render(
+        <RadioGroup name="bananas" onChange={changeSpy}>
+          <Radio value="1">One!!!</Radio>
+          <Radio value="2">The two value</Radio>
+          <Radio value="3">Three</Radio>
+        </RadioGroup>,
+        root
+      );
+    });
 
-  it('renders the radio group', function() {
-    expect('.radio-group#clear-channel').toExist();
-  });
+    afterEach(function() {
+      React.unmountComponentAtNode(root);
+    });
 
-  it('renders 3 radiobuttons', function() {
-    expect('.radio-group .radio label :radio[name=bananas]').toHaveLength(3);
-    expect('.radio-group .radio label :radio[name=bananas]:eq(0)').toHaveValue('1');
-    expect('.radio-group .radio label :radio[name=bananas]:eq(1)').toHaveValue('2');
-    expect('.radio-group .radio label :radio[name=bananas]:eq(2)').toHaveValue('3');
+    it('renders the radio group', function() {
+      expect('.radio-group').toExist();
+    });
+
+    it('renders 3 radiobuttons', function() {
+      expect('.radio-group .radio label :radio[name=bananas]').toHaveLength(3);
+      expect('.radio-group .radio label :radio[name=bananas]:eq(0)').toHaveValue('1');
+      expect('.radio-group .radio label :radio[name=bananas]:eq(1)').toHaveValue('2');
+      expect('.radio-group .radio label :radio[name=bananas]:eq(2)').toHaveValue('3');
+    });
+
+    describe('when the radio button is changed', function() {
+      beforeEach(function() {
+        $('.radio-group :radio').simulate('change').simulate('click');
+      });
+
+      it('calls the change callback', function() {
+        expect(changeSpy).toHaveBeenCalledWith('1');
+      });
+    });
   });
 
-  describe('when the radio button is changed', function() {
+  describe('RadioGroup with custom attributes', function() {
     beforeEach(function() {
-      $('.radio-group :radio').simulate('change').simulate('click');
+      React.render(
+        <RadioGroup name="bananas" id="clear-channel" style={{color: 'red'}} className='1234'>
+          <Radio value="1">One!!!</Radio>
+          <Radio value="2">The two value</Radio>
+          <Radio value="3">Three</Radio>
+        </RadioGroup>,
+        root
+      );
     });
 
-    it('calls the change callback', function() {
-      expect(changeSpy).toHaveBeenCalledWith('1');
+    it('renders the radio group with the overrides', function() {
+      expect('.radio-group').toHaveAttr('id', 'clear-channel');
+      expect('.radio-group').toHaveClass('1234');
+      expect('.radio-group').toHaveCss({color: 'rgb(255, 0, 0)'});
     });
   });
 });

src/pivotal-ui-react/radio-group/radio-group.js

@@ -1,5 +1,6 @@
 var React = require('react/addons');
 var cloneWithProps = React.addons.cloneWithProps;
+import {mergeProps} from 'pui-react-helpers';
 
 /**
  * @component RadioGroup
@@ -44,10 +45,12 @@ var RadioGroup = React.createClass({
   },
 
   render: function() {
-    var {id, name, children} = this.props;
+    var {name, children, ...others} = this.props;
     children = React.Children.map(children, (child) => cloneWithProps(child, {name, onChange: this.onChange}));
+    var props = mergeProps(others, {className: 'radio-group'});
 
-    return <div className="radio-group" {...{id}}>{children}</div>;
+
+    return <div {...props} >{children}</div>;
   }
 });