From 405e1cc8a40d449d3a5b252265e63ec1e3a91439 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 13 Aug 2019 21:37:46 -0300 Subject: [PATCH 01/16] feat(b-form-*) remove supplying to `state` prop --- src/mixins/form-state.js | 25 +++++++++---------------- 1 file changed, 9 insertions(+), 16 deletions(-) diff --git a/src/mixins/form-state.js b/src/mixins/form-state.js index 281e354c6dd..fba05f8516f 100644 --- a/src/mixins/form-state.js +++ b/src/mixins/form-state.js @@ -2,32 +2,25 @@ * * Returned class is either 'is-valid' or 'is-invalid' based on the 'state' prop * state can be one of five values: - * - true or 'valid' for is-valid - * - false or 'invalid' for is-invalid - * - null (or empty string) for no contextual state + * - true for is-valid + * - false for is-invalid + * - null for no contextual state */ +import { isBoolean } from '../utils/inspect' // @vue/component export default { props: { state: { - // true/'valid', false/'invalid', '',null - // The order must be String first, then Boolean! - type: [String, Boolean], - default: null + // Tri-state prop: true, false, null (or undefined) + type: Boolean + // default: null } }, computed: { computedState() { - const state = this.state - if (state === '') { - return null - } else if (state === true || state === 'valid') { - return true - } else if (state === false || state === 'invalid') { - return false - } - return null + // If not a boolean, ensure that value is null + return isBoolean(this.state) ? this.state : null }, stateClass() { const state = this.computedState From 0aedce43efe88e1efccb4adc4ad9116ce0dda32c Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 13 Aug 2019 21:42:44 -0300 Subject: [PATCH 02/16] Update form-checkbox.spec.js --- .../form-checkbox/form-checkbox.spec.js | 74 ------------------- 1 file changed, 74 deletions(-) diff --git a/src/components/form-checkbox/form-checkbox.spec.js b/src/components/form-checkbox/form-checkbox.spec.js index 38e1fb4dafa..983090e4452 100644 --- 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
', 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
', async () => { From ab96a0b39788c4d82ad360b5bb507e28af86ec82 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 13 Aug 2019 21:44:40 -0300 Subject: [PATCH 03/16] Update form-textarea.spec.js --- .../form-textarea/form-textarea.spec.js | 46 ------------------- 1 file changed, 46 deletions(-) diff --git a/src/components/form-textarea/form-textarea.spec.js b/src/components/form-textarea/form-textarea.spec.js index 33885e64cd6..4b4a635508a 100644 --- a/src/components/form-textarea/form-textarea.spec.js +++ b/src/components/form-textarea/form-textarea.spec.js @@ -161,18 +161,6 @@ describe('form-textarea', () => { wrapper.destroy() }) - it('has class is-valid when state=valid', async () => { - const wrapper = mount(BFormTextarea, { - propsData: { - state: 'valid' - } - }) - expect(wrapper.classes()).toContain('is-valid') - expect(wrapper.classes()).not.toContain('is-invalid') - - wrapper.destroy() - }) - it('has class is-invalid when state=false', async () => { const wrapper = mount(BFormTextarea, { propsData: { @@ -185,18 +173,6 @@ describe('form-textarea', () => { wrapper.destroy() }) - it('has class is-invalid when state=invalid', async () => { - const wrapper = mount(BFormTextarea, { - propsData: { - state: 'invalid' - } - }) - expect(wrapper.classes()).toContain('is-invalid') - expect(wrapper.classes()).not.toContain('is-valid') - - wrapper.destroy() - }) - it('does not have aria-invalid attribute by default', async () => { const wrapper = mount(BFormTextarea) expect(wrapper.contains('[aria-invalid]')).toBe(false) @@ -215,17 +191,6 @@ describe('form-textarea', () => { wrapper.destroy() }) - it('does not have aria-invalid attribute when state=valid', async () => { - const wrapper = mount(BFormTextarea, { - propsData: { - state: 'valid' - } - }) - expect(wrapper.contains('[aria-invalid]')).toBe(false) - - wrapper.destroy() - }) - it('has aria-invalid attribute when state=false', async () => { const input = mount(BFormTextarea, { propsData: { @@ -237,17 +202,6 @@ describe('form-textarea', () => { input.destroy() }) - it('has aria-invalid attribute when state=invalid', async () => { - const input = mount(BFormTextarea, { - propsData: { - state: 'invalid' - } - }) - expect(input.attributes('aria-invalid')).toBe('true') - - input.destroy() - }) - it('has aria-invalid attribute when aria-invalid=true', async () => { const input = mount(BFormTextarea, { propsData: { From 9249f80e35fa30873525d540a85ae1a5282ec203 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 13 Aug 2019 21:46:42 -0300 Subject: [PATCH 04/16] Update form-radio.spec.js --- src/components/form-radio/form-radio.spec.js | 78 -------------------- 1 file changed, 78 deletions(-) diff --git a/src/components/form-radio/form-radio.spec.js b/src/components/form-radio/form-radio.spec.js index 99e10bcc3d3..4c8d9adc4a5 100644 --- a/src/components/form-radio/form-radio.spec.js +++ b/src/components/form-radio/form-radio.spec.js @@ -350,25 +350,6 @@ describe('form-radio', () => { wrapper.destroy() }) - it('default has input validation class is-valid when state="valid"', async () => { - const wrapper = mount(BFormRadio, { - propsData: { - state: 'valid', - checked: '', - value: 'a' - }, - 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(BFormRadio, { propsData: { @@ -388,25 +369,6 @@ describe('form-radio', () => { wrapper.destroy() }) - it('default has input validation class is-invalid when state="invalid"', async () => { - const wrapper = mount(BFormRadio, { - propsData: { - state: 'invalid', - checked: '', - value: 'a' - }, - 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
', async () => { @@ -577,26 +539,6 @@ describe('form-radio', () => { wrapper.destroy() }) - it('plain has input validation class is-valid when state="valid"', async () => { - const wrapper = mount(BFormRadio, { - propsData: { - state: 'valid', - plain: true, - checked: '', - value: 'a' - }, - 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(BFormRadio, { propsData: { @@ -617,26 +559,6 @@ describe('form-radio', () => { wrapper.destroy() }) - it('plain has input validation class is-invalid when state="invalid"', async () => { - const wrapper = mount(BFormRadio, { - propsData: { - state: 'invalid', - plain: true, - checked: '', - value: 'a' - }, - 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() - }) - // --- Button styling - stand-alone mode --- it('stand-alone button has structure
', async () => { From a59ec9b4f221d6213492576b45a116f55e3fc9b9 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 13 Aug 2019 21:47:48 -0300 Subject: [PATCH 05/16] Update form-input.spec.js --- src/components/form-input/form-input.spec.js | 39 -------------------- 1 file changed, 39 deletions(-) diff --git a/src/components/form-input/form-input.spec.js b/src/components/form-input/form-input.spec.js index 5a7b9ee45c8..506df8c7796 100644 --- 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) From 6d1c658adad4a3224ac3e8cafe5c1bcc382064e3 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 13 Aug 2019 21:48:51 -0300 Subject: [PATCH 06/16] Update form-select.spec.js --- .../form-select/form-select.spec.js | 28 ------------------- 1 file changed, 28 deletions(-) diff --git a/src/components/form-select/form-select.spec.js b/src/components/form-select/form-select.spec.js index 0ad5add4ec3..4ea90dfd21c 100644 --- a/src/components/form-select/form-select.spec.js +++ b/src/components/form-select/form-select.spec.js @@ -179,20 +179,6 @@ describe('form-select', () => { wrapper.destroy() }) - it('has class is-invalid and attr aria-invalid="true" when state="invalid"', async () => { - const wrapper = mount(BFormSelect, { - propsData: { - state: 'invalid' - } - }) - expect(wrapper.attributes('aria-invalid')).toBe('true') - expect(wrapper.classes()).toContain('is-invalid') - expect(wrapper.classes()).toContain('custom-select') - expect(wrapper.classes().length).toBe(2) - - wrapper.destroy() - }) - it('has class is-valid when state=true', async () => { const wrapper = mount(BFormSelect, { propsData: { @@ -207,20 +193,6 @@ describe('form-select', () => { wrapper.destroy() }) - it('has class is-valid when state="valid"', async () => { - const wrapper = mount(BFormSelect, { - propsData: { - state: 'valid' - } - }) - expect(wrapper.attributes('aria-invalid')).not.toBeDefined() - expect(wrapper.classes()).toContain('is-valid') - expect(wrapper.classes()).toContain('custom-select') - expect(wrapper.classes().length).toBe(2) - - wrapper.destroy() - }) - it('has attr aria-invalid="true" when aria-invalid="true"', async () => { const wrapper = mount(BFormSelect, { propsData: { From 4bee982c0f64ff802451b54af56248794d2b299e Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 13 Aug 2019 21:59:35 -0300 Subject: [PATCH 07/16] Update form-state.js --- src/mixins/form-state.js | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/mixins/form-state.js b/src/mixins/form-state.js index fba05f8516f..db458175e98 100644 --- a/src/mixins/form-state.js +++ b/src/mixins/form-state.js @@ -13,8 +13,8 @@ export default { props: { state: { // Tri-state prop: true, false, null (or undefined) - type: Boolean - // default: null + type: Boolean, + default: null } }, computed: { From efdc4cbf5f9a30940ae3bd0e75cdc0871d953e67 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 13 Aug 2019 22:11:58 -0300 Subject: [PATCH 08/16] Update README.md --- src/components/form-checkbox/README.md | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/components/form-checkbox/README.md b/src/components/form-checkbox/README.md index df77732589e..662b09f061b 100644 --- a/src/components/form-checkbox/README.md +++ b/src/components/form-checkbox/README.md @@ -481,14 +481,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 ``, 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 ``, 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. From 4a56cf177278399f5435705412174cefb12f4bd3 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 13 Aug 2019 22:12:57 -0300 Subject: [PATCH 09/16] Update README.md --- src/components/form-file/README.md | 18 ++++++++++-------- 1 file changed, 10 insertions(+), 8 deletions(-) diff --git a/src/components/form-file/README.md b/src/components/form-file/README.md index 7bfdb166f35..c9ad8256676 100644 --- a/src/components/form-file/README.md +++ b/src/components/form-file/README.md @@ -226,14 +226,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 ``, 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 From 3eab41bb3f610813b3468e64c29be4d32ae265e0 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 13 Aug 2019 22:16:37 -0300 Subject: [PATCH 10/16] Update README.md --- src/components/form-group/README.md | 17 +++++++---------- 1 file changed, 7 insertions(+), 10 deletions(-) diff --git a/src/components/form-group/README.md b/src/components/form-group/README.md index c97bd136d32..c3fae9da609 100644 --- 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 ``, 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 ``, 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 [``](/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 From 08498d666d7a39ce0385748c9edb96e513e99876 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 13 Aug 2019 22:17:14 -0300 Subject: [PATCH 11/16] Update README.md --- src/components/form-file/README.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/components/form-file/README.md b/src/components/form-file/README.md index c9ad8256676..0cf2f6fff1d 100644 --- a/src/components/form-file/README.md +++ b/src/components/form-file/README.md @@ -232,7 +232,7 @@ Generally speaking, you'll want to use a particular state for specific types of 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 ``, set the `state` prop to `false` +To apply one of the contextual state icons on ``, 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. From c3052736d2ff0ac863588d22b632c4487b72743e Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 13 Aug 2019 22:19:32 -0300 Subject: [PATCH 12/16] Update README.md --- src/components/form-input/README.md | 25 +++++++++++-------------- 1 file changed, 11 insertions(+), 14 deletions(-) diff --git a/src/components/form-input/README.md b/src/components/form-input/README.md index 44b1e1b003c..2011174d75d 100644 --- 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 ``, 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 ``, set the `state` prop to `false` +(for invalid), `true` (for valid), or `null` (no validation state). ```html @@ -314,16 +311,16 @@ text block. Specifically for assistive technologies, invalid form controls can also be assigned an `aria-invalid="true"` attribute. -When `` has an invalid contextual state (i.e. `'invalid'` or `false`) you may also -want to set the `` prop `aria-invalid` to `true`, or to one of the supported values: +When `` has an invalid contextual state (i.e. state is `false`) you may also want +to set the `` 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 From 3e4fe4de19131c7c902e3683a9fd3b760225dcd6 Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 13 Aug 2019 22:21:00 -0300 Subject: [PATCH 13/16] Update README.md --- src/components/form-radio/README.md | 20 ++++++++++---------- 1 file changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/form-radio/README.md b/src/components/form-radio/README.md index 823cd89724c..d03acddfec2 100644 --- a/src/components/form-radio/README.md +++ b/src/components/form-radio/README.md @@ -362,14 +362,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 ``, set the `state` prop to `'invalid'` -(or `false`), `'valid'` (or `true`), or `null`. +To apply one of the contextual state icons on ``, 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. @@ -421,14 +421,14 @@ controls can also be assigned an `aria-invalid="true"` attribute (see below). ### ARIA `aria-invalid` attribute -When `` has an invalid contextual state (i.e. `invalid`) you may also want to -set the `` prop `aria-invalid` to `true`. +When `` has an invalid contextual state (i.e. state = `false`) you may also want +to set the `` 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`. From 64278872991ef7761e35b500b106eebe5871b3fa Mon Sep 17 00:00:00 2001 From: Troy Morehouse Date: Tue, 13 Aug 2019 22:23:44 -0300 Subject: [PATCH 14/16] Update README.md --- src/components/form-select/README.md | 22 +++++++++++----------- 1 file changed, 11 insertions(+), 11 deletions(-) diff --git a/src/components/form-select/README.md b/src/components/form-select/README.md index f204fce7c01..c98f825e1e7 100644 --- a/src/components/form-select/README.md +++ b/src/components/form-select/README.md @@ -385,14 +385,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 ``, set the `state` prop to `'invalid'` (or -`false`), `'valid'` (or `true`), or `null`. +To apply one of the contextual state icons on ``, set the `state` prop to `false` +(for invalid), `true` (for valid), or `null` (no validation state). ### Conveying contextual validation state to assistive technologies and colorblind users @@ -402,20 +402,20 @@ screen readers - or to colorblind users. Ensure that an alternative indication of state is also provided. For instance, you could include a hint about state in the form control's `