Merge pull request #1653 from egauci/master

[added] Allow overriding element in FormControls.Static

src/FormControls/Static.js

@@ -2,6 +2,7 @@ import React from 'react';
 import classNames from 'classnames';
 import InputBase from '../InputBase';
 import childrenValueValidation from '../utils/childrenValueInputValidation';
+import elementType from 'react-prop-types/lib/elementType';
 
 class Static extends InputBase {
   getValue() {
@@ -10,17 +11,26 @@ class Static extends InputBase {
   }
 
   renderInput() {
+    const {componentClass: ComponentClass, ...props} = this.props;
     return (
-      <p {...this.props} className={classNames(this.props.className, 'form-control-static')} ref="input" key="input">
+      <ComponentClass {...props} className={classNames(props.className, 'form-control-static')} ref="input" key="input">
         {this.getValue()}
-      </p>
+      </ComponentClass>
     );
   }
 }
 
 Static.propTypes = {
   value: childrenValueValidation,
+  /**
+   * You can override the default 'p' with a custom element
+   */
+  componentClass: elementType,
   children: childrenValueValidation
 };
 
+Static.defaultProps = {
+  componentClass: 'p'
+};
+
 export default Static;

test/FormControlsSpec.js

@@ -39,5 +39,12 @@ describe('Form Controls', () => {
         <FormControls.Static><span>blah</span></FormControls.Static>
       );
     });
+    it('allows choosing non-default element tag', () => {
+      const instance = ReactTestUtils.renderIntoDocument(
+        <FormControls.Static componentClass="output" value="v" />
+      );
+      const result = ReactTestUtils.findRenderedDOMComponentWithTag(instance, 'output');
+      result.innerHTML.should.equal('v');
+    });
   });
 });