feat(labels): react labels now accept classname, id, style

[#87784030]

spec/pivotal-ui-react/labels/labels_spec.js

@@ -1,7 +1,8 @@
 require('../spec_helper');
 describe('Label', function() {
+  var Label;
   beforeEach(function() {
-    var Label = require('../../../src/pivotal-ui-react/labels/labels').Label;
+    Label = require('../../../src/pivotal-ui-react/labels/labels').Label;
     React.render(<Label>bananas</Label>, root);
   });
 
@@ -14,4 +15,28 @@ describe('Label', function() {
     expect('#root span').toHaveClass('label-primary');
     expect('#root span').toHaveText('bananas');
   });
+
+  function renderLabel(props) {
+    React.render(<Label {...props}>bananas</Label>, root);
+  }
+
+  describe('when custom options are added', function() {
+    beforeEach(function() {
+      renderLabel({
+        title: 'stuff',
+        id: 'things',
+        className: 'foo',
+        style: {
+          color: 'red'
+        }
+      });
+    });
+
+    it('renders a label with custom options', function() {
+      expect('#root span').toHaveAttr('title', 'stuff');
+      expect('#root span').toHaveAttr('id', 'things');
+      expect('#root span').toHaveClass('foo');
+      expect('#root span').toHaveCss({color: 'rgb(255, 0, 0)'});
+    });
+  });
 });

src/pivotal-ui-react/labels/labels.js

@@ -1,4 +1,5 @@
 var React = require('react');
+import {mergeProps} from 'pui-react-helpers';
 
 /**
  * @component Label
@@ -18,7 +19,12 @@ var React = require('react');
  */
 var Label = React.createClass({
   render() {
-    return <span className="label label-primary">{this.props.children}</span>;
+    let defaultProps = {
+      className: ['label', 'label-primary']
+    };
+    let {children, ...others} = this.props;
+    let props = mergeProps(others, defaultProps);
+    return <span {...props}>{children}</span>;
   }
 });