feat(validation): add/update form validation

TheSharpieOne · TheSharpieOne · commit 8b2386f9b4b3 · 2017-09-16T10:29:12.000-04:00
Added/updated test
Added/updated docs

deprecation: the state prop on input has now become the valid prop which accepts a boolean
breaking change: The color prop has been removed from FromGroup, see the valid prop on Input.
diff --git a/docs/lib/Components/FormPage.js b/docs/lib/Components/FormPage.js
@@ -62,7 +62,7 @@ export default class FormPage extends React.Component {
           </PrismCode>
         </pre>
 
-        <h3>Form Feedback</h3>
+        <h3>Form Validation</h3>
         <div className="docs-example">
           <FormFeedbackExample />
         </div>
diff --git a/docs/lib/examples/FormFeedback.js b/docs/lib/examples/FormFeedback.js
@@ -5,23 +5,23 @@ export default class Example extends React.Component {
   render() {
     return (
       <Form>
-        <FormGroup color="success">
+        <FormGroup>
           <Label for="exampleEmail">Input with success</Label>
-          <Input state="success" />
-          <FormFeedback>Success! You did it!</FormFeedback>
-          <FormText color="muted">Example help text that remains unchanged.</FormText>
+          <Input valid />
+          <FormFeedback>
+            <a href="https://github.com/twbs/bootstrap/issues/23372">A bug</a> fixed in (the currently
+            unreleased) (
+            <a href="https://github.com/twbs/bootstrap/pull/23377">PR</a>
+            ) bootstrap <a href="https://github.com/twbs/bootstrap/issues/23278">v4 beta-2</a> shows invalid-feedback
+            with is-valid inputs.
+          </FormFeedback>
+          <FormText>Example help text that remains unchanged.</FormText>
         </FormGroup>
-        <FormGroup color="warning">
-          <Label for="examplePassword">Input with warning</Label>
-          <Input state="warning" />
-          <FormFeedback>Whoops, check your formatting and try again.</FormFeedback>
-          <FormText color="muted">Example help text that remains unchanged.</FormText>
-        </FormGroup>
-        <FormGroup color="danger">
+        <FormGroup>
           <Label for="examplePassword">Input with danger</Label>
-          <Input state="danger" />
+          <Input valid={false} />
           <FormFeedback>Oh noes! that name is already taken</FormFeedback>
-          <FormText color="muted">Example help text that remains unchanged.</FormText>
+          <FormText>Example help text that remains unchanged.</FormText>
         </FormGroup>
       </Form>
     );
diff --git a/src/FormFeedback.js b/src/FormFeedback.js
@@ -24,7 +24,7 @@ const FormFeedback = (props) => {
 
   const classes = mapToCssModules(classNames(
     className,
-    'form-control-feedback'
+    'invalid-feedback'
   ), cssModule);
 
   return (
diff --git a/src/FormGroup.js b/src/FormGroup.js
@@ -9,7 +9,6 @@ const propTypes = {
   check: PropTypes.bool,
   disabled: PropTypes.bool,
   tag: PropTypes.string,
-  color: PropTypes.string,
   className: PropTypes.string,
   cssModule: PropTypes.object,
 };
@@ -24,15 +23,13 @@ const FormGroup = (props) => {
     cssModule,
     row,
     disabled,
-    color,
     check,
     tag: Tag,
     ...attributes
   } = props;
 
   const classes = mapToCssModules(classNames(
     className,
-    color ? `has-${color}` : false,
     row ? 'row' : false,
     check ? 'form-check' : 'form-group',
     check && disabled ? 'disabled' : false
diff --git a/src/FormText.js b/src/FormText.js
@@ -14,6 +14,7 @@ const propTypes = {
 
 const defaultProps = {
   tag: 'small',
+  color: 'muted',
 };
 
 const FormText = (props) => {
diff --git a/src/Input.js b/src/Input.js
@@ -3,13 +3,14 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import { mapToCssModules } from './utils';
+import { mapToCssModules, deprecated } from './utils';
 
 const propTypes = {
   children: PropTypes.node,
   type: PropTypes.string,
   size: PropTypes.string,
-  state: PropTypes.string,
+  state: deprecated(PropTypes.string, 'Please use the prop "valid"'),
+  valid: PropTypes.bool,
   tag: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   innerRef: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
   static: PropTypes.bool,
@@ -25,12 +26,13 @@ const defaultProps = {
 
 class Input extends React.Component {
   render() {
-    const {
+    let {
       className,
       cssModule,
       type,
       size,
       state,
+      valid,
       tag,
       addon,
       static: staticInput,
@@ -60,9 +62,18 @@ class Input extends React.Component {
       }
     }
 
+    if (state && typeof valid === 'undefined') {
+      if (state === 'danger') {
+        valid = false;
+      } else if (state === 'success') {
+        valid = true;
+      }
+    }
+
     const classes = mapToCssModules(classNames(
       className,
-      state ? `form-control-${state}` : false,
+      valid === false && 'is-invalid',
+      valid && 'is-valid',
       size ? `form-control-${size}` : false,
       formControlClass
     ), cssModule);
diff --git a/src/__tests__/FormFeedback.spec.js b/src/__tests__/FormFeedback.spec.js
@@ -15,10 +15,10 @@ describe('FormFeedback', () => {
     expect(wrapper.text()).toBe('Yo!');
   });
 
-  it('should render with "form-control-feedback" class', () => {
+  it('should render with "invalid-feedback" class', () => {
     const wrapper = shallow(<FormFeedback>Yo!</FormFeedback>);
 
-    expect(wrapper.hasClass('form-control-feedback')).toBe(true);
+    expect(wrapper.hasClass('invalid-feedback')).toBe(true);
   });
 
   it('should render additional classes', () => {
diff --git a/src/__tests__/FormGroup.spec.js b/src/__tests__/FormGroup.spec.js
@@ -64,12 +64,6 @@ describe('FormGroup', () => {
     expect(wrapper.hasClass('row')).toBe(false);
   });
 
-  it('should render with "has-${color}" class when color prop is provided', () => {
-    const wrapper = shallow(<FormGroup color="yoyo">Yo!</FormGroup>);
-
-    expect(wrapper.hasClass('has-yoyo')).toBe(true);
-  });
-
   it('should render additional classes', () => {
     const wrapper = shallow(<FormGroup className="other">Yo!</FormGroup>);
 
diff --git a/src/__tests__/FormText.spec.js b/src/__tests__/FormText.spec.js
@@ -27,6 +27,19 @@ describe('FormText', () => {
     expect(wrapper.hasClass('form-text')).toBe(false);
   });
 
+  it('should render with "text-muted" class by default', () => {
+    const wrapper = shallow(<FormText>Yo!</FormText>);
+
+    expect(wrapper.hasClass('text-muted')).toBe(true);
+  });
+
+  it('should render without "text-*" class when color is and empty string', () => {
+    const wrapper = shallow(<FormText color="">Yo!</FormText>);
+
+    expect(wrapper.hasClass('text-muted')).toBe(false);
+    expect(wrapper.hasClass('text-')).toBe(false);
+  });
+
   it('should render with "text-${color}" class when color is provided', () => {
     const wrapper = shallow(<FormText color="yoyo">Yo!</FormText>);
 
diff --git a/src/__tests__/Input.spec.js b/src/__tests__/Input.spec.js
@@ -63,10 +63,35 @@ describe('Input', () => {
     expect(wrapper.text()).toBe('Yo!');
   });
 
-  it('should render with "form-control-${state}" class when state is provided', () => {
+  it('should render with "is-invalid" class when state is "danger" [DEPRECATED]', () => {
     const wrapper = shallow(<Input state="danger" />);
 
-    expect(wrapper.hasClass('form-control-danger')).toBe(true);
+    expect(wrapper.hasClass('is-invalid')).toBe(true);
+  });
+
+  it('should render with "is-valid" class when state is "success" [DEPRECATED]', () => {
+    const wrapper = shallow(<Input state="success" />);
+
+    expect(wrapper.hasClass('is-valid')).toBe(true);
+  });
+
+  it('should not render with "is-valid" nor "is-invalid" class when state is "warning" [DEPRECATED]', () => {
+    const wrapper = shallow(<Input state="warning" />);
+
+    expect(wrapper.hasClass('is-valid')).toBe(false);
+    expect(wrapper.hasClass('is-invalid')).toBe(false);
+  });
+
+  it('should render with "is-invalid" class when valid is false', () => {
+    const wrapper = shallow(<Input valid={false} />);
+
+    expect(wrapper.hasClass('is-invalid')).toBe(true);
+  });
+
+  it('should render with "is-valid" class when valid is true', () => {
+    const wrapper = shallow(<Input valid />);
+
+    expect(wrapper.hasClass('is-valid')).toBe(true);
   });
 
   it('should render with "form-control-${size}" class when size is provided', () => {
