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
+
```
*/