bootstrap-vue · tmorehouse · Aug 14, 2019 · Aug 14, 2019 · Aug 14, 2019 · Aug 14, 2019
diff --git a/src/components/form-checkbox/README.md b/src/components/form-checkbox/README.md
@@ -477,14 +477,14 @@ Bootstrap includes validation styles for `valid` and `invalid` states on most fo
 
 Generally speaking, you'll want to use a particular state for specific types of feedback:
 
-- `'invalid'` (or `false`) is great for when there's a blocking or required field. A user must fill
-  in this field properly to submit the form.
-- `'valid'` (or `true`) is ideal for situations when you have per-field validation throughout a form
-  and want to encourage a user through the rest of the fields.
-- `null` Displays no validation state
-
-To apply one of the contextual state icons on `<b-form-checkbox>`, set the `state` prop to
-`'invalid'` (or `false`), `'valid'` (or `true`), or `null`.
+- `false` (denotes invalid state) is great for when there's a blocking or required field. A user
+  must fill in this field properly to submit the form.
+- `true` (denotes valid state) is ideal for situations when you have per-field validation
+  throughout a form and want to encourage a user through the rest of the fields.
+- `null` Displays no validation state (neither valid nor invalid)
+
+To apply one of the contextual state icons on `<b-form-checkbox>`, set the `state` prop to `false`
+(for invalid), `true` (for valid), or `null` (no validation state).
 
 **Note:** Contextual states are **not** supported when in button mode.
 

diff --git a/src/components/form-checkbox/form-checkbox.spec.js b/src/components/form-checkbox/form-checkbox.spec.js
@@ -364,24 +364,6 @@ describe('form-checkbox', () => {
     wrapper.destroy()
   })
 
-  it('default has input validation class is-valid when state="valid"', async () => {
-    const wrapper = mount(BFormCheckbox, {
-      propsData: {
-        state: 'valid',
-        checked: false
-      },
-      slots: {
-        default: 'foobar'
-      }
-    })
-    const input = wrapper.find('input')
-    expect(input).toBeDefined()
-    expect(input.classes()).not.toContain('is-invalid')
-    expect(input.classes()).toContain('is-valid')
-
-    wrapper.destroy()
-  })
-
   it('default has input validation class is-invalid when state=false', async () => {
     const wrapper = mount(BFormCheckbox, {
       propsData: {
@@ -400,24 +382,6 @@ describe('form-checkbox', () => {
     wrapper.destroy()
   })
 
-  it('default has input validation class is-invalid when state="invalid"', async () => {
-    const wrapper = mount(BFormCheckbox, {
-      propsData: {
-        state: 'invalid',
-        checked: false
-      },
-      slots: {
-        default: 'foobar'
-      }
-    })
-    const input = wrapper.find('input')
-    expect(input).toBeDefined()
-    expect(input.classes()).toContain('is-invalid')
-    expect(input.classes()).not.toContain('is-valid')
-
-    wrapper.destroy()
-  })
-
   // --- Plain styling ---
 
   it('plain has structure <div><input><label></label></div>', async () => {
@@ -610,25 +574,6 @@ describe('form-checkbox', () => {
     wrapper.destroy()
   })
 
-  it('plain has input validation class is-valid when state="valid"', async () => {
-    const wrapper = mount(BFormCheckbox, {
-      propsData: {
-        state: 'valid',
-        plain: true,
-        checked: false
-      },
-      slots: {
-        default: 'foobar'
-      }
-    })
-    const input = wrapper.find('input')
-    expect(input).toBeDefined()
-    expect(input.classes()).not.toContain('is-invalid')
-    expect(input.classes()).toContain('is-valid')
-
-    wrapper.destroy()
-  })
-
   it('plain has input validation class is-invalid when state=false', async () => {
     const wrapper = mount(BFormCheckbox, {
       propsData: {
@@ -648,25 +593,6 @@ describe('form-checkbox', () => {
     wrapper.destroy()
   })
 
-  it('plain has input validation class is-invalid when state="invalid"', async () => {
-    const wrapper = mount(BFormCheckbox, {
-      propsData: {
-        state: 'invalid',
-        plain: true,
-        checked: false
-      },
-      slots: {
-        default: 'foobar'
-      }
-    })
-    const input = wrapper.find('input')
-    expect(input).toBeDefined()
-    expect(input.classes()).toContain('is-invalid')
-    expect(input.classes()).not.toContain('is-valid')
-
-    wrapper.destroy()
-  })
-
   // --- Switch styling - stand alone ---
 
   it('switch has structure <div><input><label></label></div>', async () => {

diff --git a/src/components/form-file/README.md b/src/components/form-file/README.md
@@ -224,14 +224,16 @@ Bootstrap includes validation styles for `valid` and `invalid` states on most fo
 
 Generally speaking, you'll want to use a particular state for specific types of feedback:
 
-- `'invalid'` is great for when there's a blocking or required field. A user must fill in this field
-  properly to submit the form.
-- `'valid'` is ideal for situations when you have per-field validation throughout a form and want to
-  encourage a user through the rest of the fields.
-- `null` Displays no validation state
-
-To apply one of the contextual state icons on `<b-form-file`, set the `state` prop to `'invalid'`
-(or `false`), `'valid'` ( or `true`), or `null`.
+- `false` (denotes invalid state) is great for when there's a blocking or required field. A user
+  must fill in this field properly to submit the form.
+- `true` (denotes valid state) is ideal for situations when you have per-field validation
+  throughout a form and want to encourage a user through the rest of the fields.
+- `null` Displays no validation state (neither valid nor invalid)
+
+To apply one of the contextual state icons on `<b-form-file>`, set the `state` prop to `false`
+(for invalid), `true` (for valid), or `null` (no validation state).
+
+**Note:** Contextual states are **not** supported when in button mode.
 
 ## Autofocus
 

diff --git a/src/components/form-group/README.md b/src/components/form-group/README.md
@@ -236,15 +236,14 @@ Bootstrap includes validation styles for `valid` and `invalid` states on most fo
 
 Generally speaking, you'll want to use a particular state for specific types of feedback:
 
-- `'invalid'` is great for when there's a blocking or required field. A user must fill in this field
-  properly to submit the form.
-- `'valid'` is ideal for situations when you have per-field validation throughout a form and want to
-  encourage a user through the rest of the fields.
-- `null` Displays no validation state
+- `false` (denotes invalid state) is great for when there's a blocking or required field. A user
+  must fill in this field properly to submit the form.
+- `true` (denotes valid state) is ideal for situations when you have per-field validation
+  throughout a form and want to encourage a user through the rest of the fields.
+- `null` Displays no validation state (neither valid nor invalid)
 
-To apply one of the contextual states on `<b-form-group>`, set the `state` prop to `'invalid'` (or
-`false`), `'valid'` (or `true`), or `null`. This will programmatically show the appropriate feedback
-text.
+To apply one of the contextual state icons on `<b-form-group>`, set the `state` prop to `false`
+(for invalid), `true` (for valid), or `null` (no validation state).
 
 Bootstrap v4 uses sibling CSS selectors of `:invalid` or `:valid` inputs to show the feedback text.
 Some form controls (such as checkboxes, radios, and file inputs, or inputs inside input-groups) are
@@ -269,8 +268,6 @@ setting the prop `invalid-feedback` or using the named slot `invalid-feedback`.
 Invalid feedback is rendered using the
 [`<b-form-invalid-feedback>`](/docs/components/form#helper-components) form sub-component.
 
-**Note:** The prop `feedback` has been deprecated in favor of the `invalid-feedback` prop.
-
 ### Valid feedback
 
 Show optional valid state feedback text to provide textual state feedback (html supported) by

diff --git a/src/components/form-input/README.md b/src/components/form-input/README.md
@@ -208,17 +208,14 @@ Bootstrap includes validation styles for `valid` and `invalid` states on most fo
 
 Generally speaking, you'll want to use a particular state for specific types of feedback:
 
-- `'invalid'` (or `false`) is great for when there's a blocking or required field. A user must fill
-  in this field properly to submit the form.
-- `'valid'` (or `true`) is ideal for situations when you have per-field validation throughout a form
-  and want to encourage a user through the rest of the fields.
-- `null` Displays no validation state
+- `false` (denotes invalid state) is great for when there's a blocking or required field. A user
+  must fill in this field properly to submit the form.
+- `true` (denotes valid state) is ideal for situations when you have per-field validation
+  throughout a form and want to encourage a user through the rest of the fields.
+- `null` Displays no validation state (neither valid nor invalid)
 
-To apply one of the contextual state icons on `<b-form-input>`, set the `state` prop to:
-
-- The string `'invalid'` or boolean `false` for invalid contextual state
-- The string `'valid'` or boolean `true` for the valid contextual state
-- `null` for no validation contextual state (default)
+To apply one of the contextual state icons on `<b-form-input>`, set the `state` prop to `false`
+(for invalid), `true` (for valid), or `null` (no validation state).
 
 ```html
 <b-container fluid>
@@ -314,16 +311,16 @@ text block.
 Specifically for assistive technologies, invalid form controls can also be assigned an
 `aria-invalid="true"` attribute.
 
-When `<b-form-input>` has an invalid contextual state (i.e. `'invalid'` or `false`) you may also
-want to set the `<b-form-input>` prop `aria-invalid` to `true`, or to one of the supported values:
+When `<b-form-input>` has an invalid contextual state (i.e. state is `false`) you may also want
+to set the `<b-form-input>` prop `aria-invalid` to `true`, or to one of the supported values:
 
 - `false`: Convey no errors detected (default)
 - `true` (or `'true'`): Convey that the value has failed validation.
 - `'grammar'` Convey that a grammatical error has been detected.
 - `'spelling'` Convey that a spelling error has been detected.
 
-If `aria-invalid` is not explicitly set and `state` is set to `false` (or `'invalid'`), then the
-`aria-invalid` attribute on the input will automatically be set to `'true'`;
+If `aria-invalid` is not explicitly set and `state` is set to `false`, then the `aria-invalid`
+attribute on the input will automatically be set to `'true'`;
 
 ## Formatter support
 

diff --git a/src/components/form-input/form-input.spec.js b/src/components/form-input/form-input.spec.js
@@ -230,19 +230,6 @@ describe('form-input', () => {
     wrapper.destroy()
   })
 
-  it('does not have is-valid or is-invalid classes when state=""', async () => {
-    const wrapper = mount(BFormInput, {
-      propsData: {
-        state: ''
-      }
-    })
-    const input = wrapper.find('input')
-    expect(input.classes()).not.toContain('is-valid')
-    expect(input.classes()).not.toContain('is-invalid')
-
-    wrapper.destroy()
-  })
-
   it('has class is-valid when state=true', async () => {
     const wrapper = mount(BFormInput, {
       propsData: {
@@ -256,19 +243,6 @@ describe('form-input', () => {
     wrapper.destroy()
   })
 
-  it('has class is-valid when state="valid"', async () => {
-    const wrapper = mount(BFormInput, {
-      propsData: {
-        state: 'valid'
-      }
-    })
-    const input = wrapper.find('input')
-    expect(input.classes()).toContain('is-valid')
-    expect(input.classes()).not.toContain('is-invalid')
-
-    wrapper.destroy()
-  })
-
   it('has class is-invalid when state=false', async () => {
     const wrapper = mount(BFormInput, {
       propsData: {
@@ -282,19 +256,6 @@ describe('form-input', () => {
     wrapper.destroy()
   })
 
-  it('has class is-invalid when state="invalid"', async () => {
-    const wrapper = mount(BFormInput, {
-      propsData: {
-        state: 'invalid'
-      }
-    })
-    const input = wrapper.find('input')
-    expect(input.classes()).toContain('is-invalid')
-    expect(input.classes()).not.toContain('is-valid')
-
-    wrapper.destroy()
-  })
-
   it('does not have aria-invalid attribute by default', async () => {
     const wrapper = mount(BFormInput)
     expect(wrapper.contains('[aria-invalid]')).toBe(false)

diff --git a/src/components/form-radio/README.md b/src/components/form-radio/README.md
@@ -358,14 +358,14 @@ Bootstrap includes validation styles for `valid` and `invalid` states on most fo
 
 Generally speaking, you'll want to use a particular state for specific types of feedback:
 
-- `'invalid'` is great for when there's a blocking or required field. A user must fill in this field
-  properly to submit the form.
-- `'valid'` is ideal for situations when you have per-field validation throughout a form and want to
-  encourage a user through the rest of the fields.
-- `null` Displays no validation state
+- `false` (denotes invalid state) is great for when there's a blocking or required field. A user
+  must fill in this field properly to submit the form.
+- `true` (denotes valid state) is ideal for situations when you have per-field validation
+  throughout a form and want to encourage a user through the rest of the fields.
+- `null` Displays no validation state (neither valid nor invalid)
 
-To apply one of the contextual state icons on `<b-form-radio>`, set the `state` prop to `'invalid'`
-(or `false`), `'valid'` (or `true`), or `null`.
+To apply one of the contextual state icons on `<b-form-radio>`, set the `state` prop to `false`
+(for invalid), `true` (for valid), or `null` (no validation state).
 
 **Note:** Contextual state is not supported for radios rendered in buttons mode.
 
@@ -417,14 +417,14 @@ controls can also be assigned an `aria-invalid="true"` attribute (see below).
 
 ### ARIA `aria-invalid` attribute
 
-When `<b-form-radio-group>` has an invalid contextual state (i.e. `invalid`) you may also want to
-set the `<b-form-radio-group>` prop `aria-invalid` to `true`.
+When `<b-form-radio-group>` has an invalid contextual state (i.e. state = `false`) you may also want
+to set the `<b-form-radio-group>` prop `aria-invalid` to `true`.
 
 Supported `aria-invalid` values are:
 
 - `false` (default) No errors detected
 - `true` The value has failed validation.
 
-`aria-invalid` is automatically set to `true` if the `state` prop is `'invalid'` (or `false`).
+`aria-invalid` is automatically set to `true` if the `state` prop is `false`.
 
 <!-- Component reference added automatically from component package.json -->