diff --git a/library/spec/pivotal-ui-react/inputs/inputs_spec.js b/library/spec/pivotal-ui-react/inputs/inputs_spec.js index 2556c7167..490ec3e5a 100644 --- a/library/spec/pivotal-ui-react/inputs/inputs_spec.js +++ b/library/spec/pivotal-ui-react/inputs/inputs_spec.js @@ -64,7 +64,7 @@ describe('inputs', function() { beforeEach(function () { BasicInput = require('../../../src/pivotal-ui-react/inputs/inputs').BasicInput; changeSpy = jasmine.createSpy('change'); - ReactDOM.render(, root); + ReactDOM.render(, root); }); it('renders an input with the label', function() { @@ -81,6 +81,10 @@ describe('inputs', function() { expect(changeSpy).toHaveBeenCalled(); }); + it('displays a checkmark when success prop is true', () => { + expect('.has-success').toExist(); + }); + it('merges classnames', function() { expect('.form-group input').toHaveClass( 'form-control'); expect('.form-group').toHaveClass('input-class'); diff --git a/library/src/pivotal-ui-react/inputs/inputs.js b/library/src/pivotal-ui-react/inputs/inputs.js index 5d42f3a41..820d2eb15 100644 --- a/library/src/pivotal-ui-react/inputs/inputs.js +++ b/library/src/pivotal-ui-react/inputs/inputs.js @@ -27,22 +27,26 @@ const BasicInput = React.createClass({ labelClassName: types.string, displayError: types.bool, errorMessage: types.node, - inputClassName: types.string + inputClassName: types.string, + success: types.bool }, render() { - const {className, label, labelClassName, displayError, errorMessage, inputClassName, ...inputProps} = this.props; + const {className, label, labelClassName, displayError, errorMessage, inputClassName, success, ...inputProps} = this.props; const {id} = inputProps; - inputProps.className = classnames(inputClassName, 'form-control'); - const formClasses = classnames('form-group', className, {'has-error': displayError}); + const successClassName = success ? 'has-success' : ''; + const formClasses = classnames('form-group', className, successClassName, {'has-error': displayError}); const labelClasses = classnames('control-label', labelClassName); + inputProps.className = classnames(inputClassName, 'form-control'); return ( -
+
- - {displayError &&
- {errorMessage ? errorMessage : `Please enter your ${label.toLowerCase()}.`} -
} +
+ + {displayError &&
+ {errorMessage ? errorMessage : `Please enter your ${label.toLowerCase()}.`} +
} +
); } diff --git a/library/src/pivotal-ui/components/forms/forms.scss b/library/src/pivotal-ui/components/forms/forms.scss index 5a1522b30..fb90fcc23 100644 --- a/library/src/pivotal-ui/components/forms/forms.scss +++ b/library/src/pivotal-ui/components/forms/forms.scss @@ -15,6 +15,9 @@ margin-right: 2px; } } + .form-control { + padding-right: 38px; + } } .unstyled { diff --git a/styleguide/docs/react/inputs.js b/styleguide/docs/react/inputs.js index 053378e00..b845efd96 100644 --- a/styleguide/docs/react/inputs.js +++ b/styleguide/docs/react/inputs.js @@ -37,6 +37,16 @@ Basic Inputs display a custom `errorMessage` when the `displayError` parameter i errorMessage="Try Again, Fool" inputClassName="hey" /> + +``` +Basic Inputs display a checkmark when the `success` prop is given. + +```react_example + ``` */