feat(BasicInput): BasicInput displays check with success prop

Now it looks like CSS input with success and success validations are pretty [#114690155] Signed-off-by: Elena Sharma <esharma@pivotal.io>
pivotal-cf · Mar 3, 2016 · 17bf239 · 17bf239
1 parent 442e71a
commit 17bf239
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 10 deletions.
diff --git 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(<BasicInput {...{className: 'input-class', label, id, onChange: changeSpy}}/>, root);
+      ReactDOM.render(<BasicInput success {...{className: 'input-class', label, id, onChange: changeSpy}}/>, 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
@@ -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 (
-      <div className={formClasses}>
+      <div>
         <label htmlFor={id} className={labelClasses}>{label}</label>
-        <input {...inputProps}/>
-        {displayError && <div className="error-text help-block">
-          {errorMessage ? errorMessage : `Please enter your ${label.toLowerCase()}.`}
-        </div>}
+        <div className={formClasses}>
+          <input {...inputProps} />
+          {displayError && <div className="error-text help-block">
+            {errorMessage ? errorMessage : `Please enter your ${label.toLowerCase()}.`}
+          </div>}
+        </div>
       </div>
     );
   }

diff --git 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
@@ -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
+<BasicInput
+ success
+ label="Great Label for a Great Job!"
+ placeholder="YOU ARE SO COOL"
+/>
 ```
 */