Updating docs to use ButtonInput

Author: aabenoja

docs/examples/.eslintrc

@@ -12,6 +12,7 @@
     "Badge",
     "Button",
     "ButtonGroup",
+    "ButtonInput",
     "ButtonToolbar",
     "CollapsibleNav",
     "CollapsibleMixin",

docs/examples/ButtonInput.js

@@ -0,0 +1,44 @@
+const ButtonInputExample = React.createClass({
+  getInitialState() {
+    return {
+      disabled: true,
+      style: ''
+    };
+  },
+
+  resetValidation() {
+    this.setState({
+      disabled: true,
+      style: ''
+    });
+  },
+
+  validationState() {
+    let length = this.refs.input.getValue().length;
+    let style = 'danger';
+
+    if (length > 10) { style = 'success'; }
+    else if (length > 5) { style = 'warning'; }
+
+    let disabled = style !== 'success';
+
+    return { style, disabled };
+  },
+
+  handleChange() {
+    this.setState( this.validationState() );
+  },
+
+  render() {
+    return (
+    <form>
+      <Input type="text" ref="input" onChange={this.handleChange} />
+      <ButtonInput bsSize="small">Child Text</ButtonInput>
+      <ButtonInput type="reset" bsStyle="primary" onClick={this.resetValidation} />
+      <ButtonInput type="submit" value="Submit Your Input" bsStyle={this.state.style} bsSize="large" disabled={this.state.disabled} />
+    </form>
+    );
+  }
+});
+
+React.render(<ButtonInputExample />, mountNode);

docs/examples/InputTypes.js

@@ -16,7 +16,9 @@ const inputTypeInstance = (
     </Input>
     <Input type='textarea' label='Text Area' placeholder='textarea' />
     <Input type='static' value='Static Text' />
-    <Input type='submit' value='Submit button' />
+    <ButtonInput value='Button Input' />
+    <ButtonInput type='reset' value='Reset Button' />
+    <ButtonInput type='submit' value='Submit Button' />
   </form>
 );
 

docs/src/ComponentsPage.js

@@ -551,6 +551,9 @@ const ComponentsPage = React.createClass({
                   <h2 id='input-types'>Types</h2>
                   <p>Supports <code>select</code>, <code>textarea</code>, <code>static</code> as well as standard HTML input types. <code>getValue()</code> returns an array for multiple select.</p>
                   <ReactPlayground codeText={Samples.InputTypes} />
+                  <h2 id='button-input-types'>Button Input Types</h2>
+                  <p>Form buttons are encapsulated by <code>ButtonInput</code>. Pass in <code>type="reset"</code> or <code>type="submit"</code> to suit your needs. Styling is the same as <code>Button</code>.</p>
+                  <ReactPlayground codeText={Samples.ButtonInput} />
                   <h2 id='input-addons'>Add-ons</h2>
                   <p>Use <code>addonBefore</code> and <code>addonAfter</code> for normal addons, <code>buttonBefore</code> and <code>buttonAfter</code> for button addons.
                   Exotic configurations may require some css on your side.</p>

docs/src/ReactPlayground.js

@@ -5,6 +5,7 @@ import * as modAlert from '../../src/Alert';
 import * as modBadge from '../../src/Badge';
 import * as modmodButton from '../../src/Button';
 import * as modButtonGroup from '../../src/ButtonGroup';
+import * as modButtonInput from '../../src/ButtonInput';
 import * as modmodButtonToolbar from '../../src/ButtonToolbar';
 import * as modCollapsibleNav from '../../src/CollapsibleNav';
 import * as modCollapsibleMixin from '../../src/CollapsibleMixin';
@@ -52,6 +53,7 @@ const Alert = modAlert.default;
 const Badge = modBadge.default;
 const Button = modmodButton.default;
 const ButtonGroup = modButtonGroup.default;
+const ButtonInput = modButtonInput.default;
 const ButtonToolbar = modmodButtonToolbar.default;
 const CollapsibleNav = modCollapsibleNav.default;
 const CollapsibleMixin = modCollapsibleMixin.default;

docs/src/Samples.js

@@ -83,6 +83,7 @@ export default {
   TableResponsive:               require('fs').readFileSync(__dirname + '/../examples/TableResponsive.js', 'utf8'),
   Input:                         require('fs').readFileSync(__dirname + '/../examples/Input.js', 'utf8'),
   InputTypes:                    require('fs').readFileSync(__dirname + '/../examples/InputTypes.js', 'utf8'),
+  ButtonInput:                   require('fs').readFileSync(__dirname + '/../examples/ButtonInput.js', 'utf8'),
   InputAddons:                   require('fs').readFileSync(__dirname + '/../examples/InputAddons.js', 'utf8'),
   InputSizes:                    require('fs').readFileSync(__dirname + '/../examples/InputSizes.js', 'utf8'),
   InputValidation:               require('fs').readFileSync(__dirname + '/../examples/InputValidation.js', 'utf8'),

src/index.js

@@ -6,6 +6,7 @@ import BootstrapMixin from './BootstrapMixin';
 import Badge from './Badge';
 import Button from './Button';
 import ButtonGroup from './ButtonGroup';
+import ButtonInput from './ButtonInput';
 import ButtonToolbar from './ButtonToolbar';
 import CollapsableNav from './CollapsableNav';
 import CollapsibleNav from './CollapsibleNav';
@@ -60,6 +61,7 @@ export default {
   Badge,
   Button,
   ButtonGroup,
+  ButtonInput,
   ButtonToolbar,
   CollapsableNav,
   CollapsibleNav,

test/FactoriesSpec.js

@@ -2,6 +2,7 @@ import React from 'react';
 import components from '../tools/public-components';
 
 let props = {
+  ButtonInput: {value: 'button'},
   Glyphicon: {glyph: 'star'},
   Modal: {onRequestHide() {}},
   ModalTrigger: {modal: React.DOM.div(null)},