Skip to content

Commit

Permalink
[added] bsSize prop to Input, supporting input groups
Browse files Browse the repository at this point in the history
This allows for specifying a size, such as 'small' or 'large', such as:

    <Input
      type="text"
      placeholder="Search"
      bsSize="small"
      buttonAfter={<Button><Glyphicon glyph="search" /></Button>}
      />

(Input groups are enabled whenever these props have values:
addonBefore, addonAfter, buttonBefore, or buttonAfter)

This maps to the "input-group-sm" and "input-group-lg" classes as documented here:
http://getbootstrap.com/components/#input-groups-sizing
  • Loading branch information
Matthew Scott committed Mar 3, 2015
1 parent 35d39ba commit 71ff264
Show file tree
Hide file tree
Showing 2 changed files with 25 additions and 1 deletion.
10 changes: 9 additions & 1 deletion src/Input.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -4,6 +4,7 @@ var classSet = require('./utils/classSet');
var Button = require('./Button');

var Input = React.createClass({

propTypes: {
type: React.PropTypes.string,
label: React.PropTypes.node,
Expand All @@ -12,6 +13,7 @@ var Input = React.createClass({
addonAfter: React.PropTypes.node,
buttonBefore: React.PropTypes.node,
buttonAfter: React.PropTypes.node,
bsSize: React.PropTypes.oneOf(['small', 'medium', 'large']),
bsStyle: function(props) {
if (props.type === 'submit') {
// Return early if `type=submit` as the `Button` component
Expand Down Expand Up @@ -140,8 +142,14 @@ var Input = React.createClass({
</span>
) : null;

var inputGroupClassName;
switch (this.props.bsSize) {
case 'small': inputGroupClassName = 'input-group-sm'; break;
case 'large': inputGroupClassName = 'input-group-lg'; break;
}

return addonBefore || addonAfter || buttonBefore || buttonAfter ? (
<div className="input-group" key="input-group">
<div className={joinClasses(inputGroupClassName, 'input-group')} key="input-group">
{addonBefore}
{buttonBefore}
{children}
Expand Down
16 changes: 16 additions & 0 deletions test/InputSpec.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -123,6 +123,22 @@ describe('Input', function () {
assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'input-group-addon'));
});

it('renders input-group with sm or lg class name when bsSize is small or large', function () {
var instance = ReactTestUtils.renderIntoDocument(
<Input addonBefore="$" bsSize="small" />
);

assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'input-group'));
assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'input-group-sm'));

instance = ReactTestUtils.renderIntoDocument(
<Input addonBefore="$" bsSize="large" />
);

assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'input-group'));
assert.ok(ReactTestUtils.findRenderedDOMComponentWithClass(instance, 'input-group-lg'));
});

it('renders btn-group', function() {
var instance = ReactTestUtils.renderIntoDocument(
<Input buttonAfter={<Button>!</Button>} />
Expand Down

0 comments on commit 71ff264

Please sign in to comment.