10000 feat(b-form-*) remove supplying a string to `state` prop (#3880) · shashankgaurav17/bootstrap-vue@6d382ed · GitHub
[go: up one dir, main page]
Skip to content

Commit 6d382ed

Browse files
tmorehousetmorehouse
authored
feat(b-form-*) remove supplying a string to state prop (bootstrap-vue#3880)
1 parent d46529c commit 6d382ed

File tree

14 files changed

+82
-361
lines changed

14 files changed

+82
-361
lines changed

‎src/components/form-checkbox/README.md

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -477,14 +477,14 @@ Bootstrap includes validation styles for `valid` and `invalid` states on most fo
477477

478478
Generally speaking, you'll want to use a particular state for specific types of feedback:
479479

480-
- `'invalid'` (or `false`) is great for when there's a blocking or required field. A user must fill
481-
in this field properly to submit the form.
482-
- `'valid'` (or `true`) is ideal for situations when you have per-field validation throughout a form
483-
and want to encourage a user through the rest of the fields.
484-
- `null` Displays no validation state
485-
486-
To apply one of the contextual state icons on `<b-form-checkbox>`, set the `state` prop to
487-
`'invalid'` (or `false`), `'valid'` (or `true`), or `null`.
480+
- `false` (denotes invalid state) is great for when there's a blocking or required field. A user
481+
must fill in this field properly to submit the form.
482+
- `true` (denotes valid state) is ideal for situations when you have per-field validation
483+
throughout a form and want to encourage a user through the rest of the fields.
484+
- `null` Displays no validation state (neither valid nor invalid)
485+
486+
To apply one of the contextual state icons on `<b-form-checkbox>`, set the `state` prop to `false`
487+
(for invalid), `true` (for valid), or `null` (no validation state).
488488

489489
**Note:** Contextual states are **not** supported when in button mode.
490490

‎src/components/form-checkbox/form-checkbox.spec.js

Lines changed: 0 additions & 74 deletions
Original file line numberDiff line numberDiff line change
@@ -364,24 +364,6 @@ describe('form-checkbox', () => {
364364
wrapper.destroy()
365365
})
366366

367-
it('default has input validation class is-valid when state="valid"', async () => {
368-
const wrapper = mount(BFormCheckbox, {
369-
propsData: {
370-
state: 'valid',
371-
checked: false
372-
},
373-
slots: {
374-
default: 'foobar'
375-
}
376-
})
377-
const input = wrapper.find('input')
378-
expect(input).toBeDefined()
379-
expect(input.classes()).not.toContain('is-invalid')
380-
expect(input.classes()).toContain('is-valid')
381-
382-
wrapper.destroy()
383-
})
384-
385367
it('default has input validation class is-invalid when state=false', async () => {
386368
const wrapper = mount(BFormCheckbox, {
387369
propsData: {
@@ -400,24 +382,6 @@ describe('form-checkbox', () => {
400382
wrapper.destroy()
401383
})
402384

403-
it('default has input validation class is-invalid when state="invalid"', async () => {
404-
const wrapper = mount(BFormCheckbox, {
405-
propsData: {
406-
state: 'invalid',
407-
checked: false
408-
},
409-
slots: {
410-
default: 'foobar'
411-
}
412-
})
413-
const input = wrapper.find('input')
414-
expect(input).toBeDefined()
415-
expect(input.classes()).toContain('is-invalid')
416-
expect(input.classes()).not.toContain('is-valid')
417-
418-
wrapper.destroy()
419-
})
420-
421385
// --- Plain styling ---
422386

423387
it('plain has structure <div><input><label></label></div>', async () => {
@@ -610,25 +574,6 @@ describe('form-checkbox', () => {
610574
wrapper.destroy()
611575
})
612576

613-
it('plain has input validation class is-valid when state="valid"', async () => {
614-
const wrapper = mount(BFormCheckbox, {
615-
propsData: {
616-
state: 'valid',
617-
plain: true,
618-
checked: false
619-
},
620-
slots: {
621-
default: 'foobar'
622-
}
623-
})
624-
const input = wrapper.find('input')
625-
expect(input).toBeDefined()
626-
expect(input.classes()).not.toContain('is-invalid')
627-
expect(input.classes()).toContain('is-valid')
628-
629-
wrapper.destroy()
630-
})
631-
632577
it('plain has input validation class is-invalid when state=false', async () => {
633578
const wrapper = mount(BFormCheckbox, {
634579
propsData: {
@@ -648,25 +593,6 @@ describe('form-checkbox', () => {
648593
wrapper.destroy()
649594
})
650595

651-
it('plain has input validation class is-invalid when state="invalid"', async () => {
652-
const wrapper = mount(BFormCheckbox, {
653-
propsData: {
654-
state: 'invalid',
655-
plain: true,
656-
checked: false
657-
},
658-
slots: {
659-
default: 'foobar'
660-
}
661-
})
662-
const input = wrapper.find('input')
663-
expect(input).toBeDefined()
664-
expect(input.classes()).toContain('is-invalid')
665-
expect(input.classes()).not.toContain('is-valid')
666-
667-
wrapper.destroy()
668-
})
669-
670596
// --- Switch styling - stand alone ---
671597

672598
it('switch has structure <div><input><label></label></div>', async () => {

‎src/components/form-file/README.md

Lines changed: 10 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -224,14 +224,16 @@ Bootstrap includes validation styles for `valid` and `invalid` states on most fo
224224

225225
Generally speaking, you'll want to use a particular state for specific types of feedback:
226226

227-
- `'invalid'` is great for when there's a blocking or required field. A user must fill in this field
228-
properly to submit the form.
229-
- `'valid'` is ideal for situations when you have per-field validation throughout a form and want to
230-
encourage a user through the rest of the fields.
231-
- `null` Displays no validation state
232-
233-
To apply one of the contextual state icons on `<b-form-file`, set the `state` prop to `'invalid'`
234-
(or `false`), `'valid'` ( or `true`), or `null`.
227+
- `false` (denotes invalid state) is great for when there's a blocking or required field. A user
228+
must fill in this field properly to submit the form.
229+
- `true` (denotes valid state) is ideal for situations when you have per-field validation
230+
throughout a form and want to encourage a user through the rest of the fields.
231+
- `null` Displays no validation state (neither valid nor invalid)
232+
233+
To apply one of the contextual state icons on `<b-form-file>`, set the `state` prop to `false`
234+
(for invalid), `true` (for valid), or `null` (no validation state).
235+
236+
**Note:** Contextual states are **not** supported when in button mode.
235237

236238
## Autofocus
237239

‎src/components/form-group/README.md

Lines changed: 7 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -236,15 +236,14 @@ Bootstrap includes validation styles for `valid` and `invalid` states on most fo
236236

237237
Generally speaking, you'll want to use a particular state for specific types of feedback:
238238

239-
- `'invalid'` is great for when there's a blocking or required field. A user must fill in this field
240-
properly to submit the form.
241-
- `'valid'` is ideal for situations when you have per-field validation throughout a form and want to
242-
encourage a user through the rest of the fields.
243-
- `null` Displays no validation state
239+
- `false` (denotes invalid state) is great for when there's a blocking or required field. A user
240+
must fill in this field properly to submit the form.
241+
- `true` (denotes valid state) is ideal for situations when you have per-field validation
242+
throughout a form and want to encourage a user through the rest of the fields.
243+
- `null` Displays no validation state (neither valid nor invalid)
244244

245-
To apply one of the contextual states on `<b-form-group>`, set the `state` prop to `'invalid'` (or
246-
`false`), `'valid'` (or `true`), or `null`. This will programmatically show the appropriate feedback
247-
text.
245+
To apply one of the contextual state icons on `<b-form-group>`, set the `state` prop to `false`
246+
(for invalid), `true` (for valid), or `null` (no validation state).
248247

249248
Bootstrap v4 uses sibling CSS selectors of `:invalid` or `:valid` inputs to show the feedback text.
250249
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`.
269268
Invalid feedback is rendered using the
270269
[`<b-form-invalid-feedback>`](/docs/components/form#helper-components) form sub-component.
271270

272-
**Note:** The prop `feedback` has been deprecated in favor of the `invalid-feedback` prop.
273-
274271
### Valid feedback
275272

276273
Show optional valid state feedback text to provide textual state feedback (html supported) by

‎src/components/form-input/README.md

Lines changed: 11 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -208,17 +208,14 @@ Bootstrap includes validation styles for `valid` and `invalid` states on most fo
208208

209209
Generally speaking, you'll want to use a particular state for specific types of feedback:
210210

211-
- `'invalid'` (or `false`) is great for when there's a blocking or required field. A user must fill
212-
in this field properly to submit the form.
213-
- `'valid'` (or `true`) is ideal for situations when you have per-field validation throughout a form
214-
and want to encourage a user through the rest of the fields.
215-
- `null` Displays no validation state
211+
- `false` (denotes invalid state) is great for when there's a blocking or required field. A user
212+
must fill in this field properly to submit the form.
213+
- `true` (denotes valid state) is ideal for situations when you have per-field validation
214+
throughout a form and want to encourage a user through the rest of the fields.
215+
- `null` Displays no validation state (neither valid nor invalid)
216216

217-
To apply one of the contextual state icons on `<b-form-input>`, set the `state` prop to:
218-
219-
- The string `'invalid'` or boolean `false` for invalid contextual state
220-
- The string `'valid'` or boolean `true` for the valid contextual state
221-
- `null` for no validation contextual state (default)
217+
To apply one of the contextual state icons on `<b-form-input>`, set the `state` prop to `false`
218+
(for invalid), `true` (for valid), or `null` (no validation state).
222219

223220
```html
224221
<b-container fluid>
@@ -314,16 +311,16 @@ text block.
314311
Specifically for assistive technologies, invalid form controls can also be assigned an
315312
`aria-invalid="true"` attribute.
316313

317-
When `<b-form-input>` has an invalid contextual state (i.e. `'invalid'` or `false`) you may also
318-
want to set the `<b-form-input>` prop `aria-invalid` to `true`, or to one of the supported values:
314+
When `<b-form-input>` has an invalid contextual state (i.e. state is `false`) you may also want
315+
to set the `<b-form-input>` prop `aria-invalid` to `true`, or to one of the supported values:
319316

320317
- `false`: Convey no errors detected (default)
321318
- `true` (or `'true'`): Convey that the value has failed validation.
322319
- `'grammar'` Convey that a grammatical error has been detected.
323320
- `'spelling'` Convey that a spelling error has been detected.
324321

325-
If `aria-invalid` is not explicitly set and `state` is set to `false` (or `'invalid'`), then the
326-
`aria-invalid` attribute on the input will automatically be set to `'true'`;
322+
If `aria-invalid` is not explicitly set and `state` is set to `false`, then the `aria-invalid`
323+
attribute on the input will automatically be set to `'true'`;
327324

328325
## Formatter support
329326

‎src/components/form-input/form-input.spec.js

Lines changed: 0 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -230,19 +230,6 @@ describe('form-input', () => {
230230
wrapper.destroy()
231231
})
232232

233-
it('does not have is-valid or is-invalid classes when state=""', async () => {
234-
const wrapper = mount(BFormInput, {
235-
propsData: {
236-
state: ''
237-
}
238-
})
239-
const input = wrapper.find('input')
240-
expect(input.classes()).not.toContain('is-valid')
241-
expect(input.classes()).not.toContain('is-invalid')
242-
243-
wrapper.destroy()
244-
})
245-
246233
it('has class is-valid when state=true', async () => {
247234
const wrapper = mount(BFormInput, {
248235
propsData: {
@@ -256,19 +243,6 @@ describe('form-input', () => {
256243
wrapper.destroy()
257244
})
258245

259-
it('has class is-valid when state="valid"', async () => {
260-
const wrapper = mount(BFormInput, {
261-
propsData: {
262-
state: 'valid'
263-
}
264-
})
265-
const input = wrapper.find('input')
266-
expect(input.classes()).toContain('is-valid')
267-
expect(input.classes()).not.toContain('is-invalid')
268-
269-
wrapper.destroy()
270-
})
271-
272246
it('has class is-invalid when state=false', async () => {
273247
const wrapper = mount(BFormInput, {
274248
propsData: {
@@ -282,19 +256,6 @@ describe('form-input', () => {
282256
wrapper.destroy()
283257
})
284258

285-
it('has class is-invalid when state="invalid"', async () => {
286-
const wrapper = mount(BFormInput, {
287-
propsData: {
288-
state: 'invalid'
289-
}
290-
})
291-
const input = wrapper.find('input')
292-
expect(input.classes()).toContain('is-invalid')
293-
expect(input.classes()).not.toContain('is-valid')
294-
295-
wrapper.destroy()
296-
})
297-
298259
it('does not have aria-invalid attribute by default', async () => {
299260
const wrapper = mount(BFormInput)
300261
expect(wrapper.contains('[aria-invalid]')).toBe(false)

‎src/components/form-radio/README.md

Lines changed: 10 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -358,14 +358,14 @@ Bootstrap includes validation styles for `valid` and `invalid` states on most fo
358358

359359
Generally speaking, you'll want to use a particular state for specific types of feedback:
360360

361-
- `'invalid'` is great for when there's a blocking or required field. A user must fill in this field
362-
properly to submit the form.
363-
- `'valid'` is ideal for situations when you have per-field validation throughout a form and want to
364-
encourage a user through the rest of the fields.
365-
- `null` Displays no validation state
361+
- `false` (denotes invalid state) is great for when there's a blocking or required field. A user
362+
must fill in this field properly to submit the form.
363+
- `true` (denotes valid state) is ideal for situations when you have per-field validation
364+
throughout a form and want to encourage a user through the rest of the fields.
365+
- `null` Displays no validation state (neither valid nor invalid)
366366

367-
To apply one of the contextual state icons on `<b-form-radio>`, set the `state` prop to `'invalid'`
368-
(or `false`), `'valid'` (or `true`), or `null`.
367+
To apply one of the contextual state icons on `<b-form-radio>`, set the `state` prop to `false`
368+
(for invalid), `true` (for valid), or `null` (no validation state).
369369

370370
**Note:** Contextual state is not supported for radios rendered in buttons mode.
371371

@@ -417,14 +417,14 @@ controls can also be assigned an `aria-invalid="true"` attribute (see below).
417417

418418
### ARIA `aria-invalid` attribute
419419

420-
When `<b-form-radio-group>` has an invalid contextual state (i.e. `invalid`) you may also want to
421-
set the `<b-form-radio-group>` prop `aria-invalid` to `true`.
420+
When `<b-form-radio-group>` has an invalid contextual state (i.e. state = `false`) you may also want
421+
to set the `<b-form-radio-group>` prop `aria-invalid` to `true`.
422422

423423
Supported `aria-invalid` values are:
424424

425425
- `false` (default) No errors detected
426426
- `true` The value has failed validation.
427427

428-
`aria-invalid` is automatically set to `true` if the `state` prop is `'invalid'` (or `false`).
428+
`aria-invalid` is automatically set to `true` if the `state` prop is `false`.
429429

430430
<!-- Component reference added automatically from component package.json -->

0 commit comments

Comments
 (0)
0