feat(FormFeedback): Support valid feedback. (#840)

reactstrap · Feb 15, 2018 · 9b49091 · 9b49091
1 parent 2495154
commit 9b49091
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 1 deletion.
diff --git a/docs/lib/examples/FormFeedback.js b/docs/lib/examples/FormFeedback.js
@@ -8,6 +8,7 @@ export default class Example extends React.Component {
         <FormGroup>
           <Label for="exampleEmail">Input with success</Label>
           <Input valid />
+          <FormFeedback valid>Oh noes! that name is already taken</FormFeedback>
           <FormText>Example help text that remains unchanged.</FormText>
         </FormGroup>
         <FormGroup>

diff --git a/src/FormFeedback.js b/src/FormFeedback.js
@@ -8,23 +8,26 @@ const propTypes = {
   tag: PropTypes.string,
   className: PropTypes.string,
   cssModule: PropTypes.object,
+  valid: PropTypes.bool
 };
 
 const defaultProps = {
   tag: 'div',
+  valid: undefined
 };
 
 const FormFeedback = (props) => {
   const {
     className,
     cssModule,
+    valid,
     tag: Tag,
     ...attributes
   } = props;
 
   const classes = mapToCssModules(classNames(
     className,
-    'invalid-feedback'
+    valid ? 'valid-feedback' : 'invalid-feedback'
   ), cssModule);
 
   return (

diff --git a/src/__tests__/FormFeedback.spec.js b/src/__tests__/FormFeedback.spec.js
@@ -21,6 +21,12 @@ describe('FormFeedback', () => {
     expect(wrapper.hasClass('invalid-feedback')).toBe(true);
   });
 
+  it('should render with "valid-feedback" class', () => {
+    const wrapper = shallow(<FormFeedback valid>Yo!</FormFeedback>);
+
+    expect(wrapper.hasClass('valid-feedback')).toBe(true);
+  });
+
   it('should render additional classes', () => {
     const wrapper = shallow(<FormFeedback className="other">Yo!</FormFeedback>);