Skip to content

Commit 00e2b6f

Browse files
tmorehousetmorehouse
authored
fix(forms): BS4.beta form/input validation styles & components (#847)
* Update form.vue Add browser validation support * [form-feedback] functional compojent * Add form-feedback to available components * Update form-feedback.js * ESLint * Rename form-fieldset.vue to form-group.vue * rename form-fieldset => form-group form-fieldset is now an alias of form-group * form demo.js * form-feedback demo.js * form-feedback demo.html * form demo.html * Create form-feedback.spec.js * Create form.spec.js * Rename tests/fixtures/form-fieldset/demo.html to tests/fixtures/form-group/demo.html * Rename tests/fixtures/form-fieldset/demo.js to tests/fixtures/form-group/demo.js * Update and rename form-fieldset.spec.js to form-group.spec.js * update form-group demo.html * Update demo.html * Update demo.html * Update demo.html * Update form-input-static.vue * Update form-group.vue * Update form-input.vue * Update form-select.vue * Update form-input.vue * Update form-file.vue * Update form-group.vue * Update form-radio.vue * Update form-group.vue * Update form-checkbox.vue * Update form.vue * Update demo.js * Update demo.html * Update demo.html * Update demo.html * Update demo.html * []form-input] Docs update * [form-group] Handle validation situation where inputs are wrapped * Update index.js * Rename docs/components/form-fieldset/README.md to docs/components/form-group/README.md * Rename docs/components/form-fieldset/index.js to docs/components/form-group/index.js * Rename docs/components/form-fieldset/meta.json to docs/components/form-group/meta.json * [docs] Rename form-fieldset to form-group in docs index * [form-group] Documentation update * [form-file] Docs update * Update README.md * [form-select] Documentation update * [form-radio] docs update * [form-checkbox] Docs update * [form] documentation update * Create form-textarea.vue * index.js add form-textara * [form-textarea] add max-rows prop * Create demo.html * Create demo.js * Create form-textarea.spec.js * Create README.md * Create meta.json * Create index.js * add form-textarea ot docs * Create index.js * Create meta.json * Delete index.js * Delete meta.json * [form-input] remove textarea support and add in new plaintext support Plaintext replaces the form-static component. * Update form-textarea.vue * Update meta.json * Update meta.json * Update README.md * [form-input] Docs update for plaintext prop remove text-area documentation * [form-textarea] plaintext prop docs * remove form-input-static * Update demo.html * Update demo.js * Update meta.json * [form] Update docs * [form] Update novalidate * Update README.md * Update form.vue * fix(docs): spelling, links, & linting * fix(form-input): correct component data ref * fix(docs): tweak docs to new rules * fix(docs): compute prop name * [form-input] use b-form-text component in examples * fix(docs): form-textarea * fix closing tag * Update demo.html * Update form.spec.js * fix(docs): form-input close tag * fix(docs): form-select * Update form.spec.js * fix(form-radio): typos * fix(form-checkbox): more typos * fix(docs): key v-for in buttons docs
1 parent 8ff2623 commit 00e2b6f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

48 files changed

+1156
-678
lines changed

‎docs/components/button/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -110,7 +110,7 @@ the `.sync` prop modifier (available in Vue 2.3+) on the `pressed` property
110110

111111
<h5>In a button group</h5>
112112
<b-button-group size="sm">
113-
<b-button v-for="btn in buttons" :pressed.sync="btn.state" :variant="btn.variant">
113+
<b-button v-for="btn in buttons" :pressed.sync="btn.state" :variant="btn.variant" :key="btn.variant">
114114
{{ btn.caption }}
115115
</b-button>
116116
</b-button-group>

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

Lines changed: 52 additions & 35 deletions
Original file line numberDiff line numberDiff line change
@@ -30,20 +30,28 @@ export default {
3030
```html
3131
<template>
3232
<div>
33-
<b-form-fieldset id="fieldset2"
33+
<b-form-group id="fieldset2"
3434
:label="label"
3535
label-for="checkboxes2"
3636
:description="desc"
3737
:state="state"
3838
:feedback="feedback"
3939
>
4040
<div role="group" id="checkboxes2">
41-
<b-form-checkbox v-model="selected" name="flavour" value="orange">Orange</b-form-checkbox>
42-
<b-form-checkbox v-model="selected" name="flavour" value="apple">Apple</b-form-checkbox>
43-
<b-form-checkbox v-model="selected" name="flavour" value="pineapple">Pineapple</b-form-checkbox>
44-
<b-form-checkbox v-model="selected" name="flavour" value="grape">Grape</b-form-checkbox>
41+
<b-form-checkbox v-model="selected" :state="state" name="flavour" value="orange">
42+
Orange
43+
</b-form-checkbox>
44+
<b-form-checkbox v-model="selected" :state="state" name="flavour" value="apple">
45+
Apple
46+
</b-form-checkbox>
47+
<b-form-checkbox v-model="selected" :state="state" name="flavour" value="pineapple">
48+
Pineapple
49+
</b-form-checkbox>
50+
<b-form-checkbox v-model="selected" :state="state" name="flavour" value="grape">
51+
Grape
52+
</b-form-checkbox>
4553
</div>
46-
</b-form-fieldset>
54+
</b-form-group>
4755
<hr>
4856
<div>Selected: <strong>{{ selected }}</strong></div>
4957
</div>
@@ -58,20 +66,20 @@ export default {
5866
},
5967
computed: {
6068
feedback() {
61-
if (this.selected.length > 2) {
62-
return "Don't be greedy!";
63-
} else if (this.selected.length === 1) {
64-
return 'Select one more...';
65-
}
66-
return '';
69+
if (this.selected.length > 2) {
70+
return "Don't be greedy!";
71+
} else if (this.selected.length === 1) {
72+
return "Select one more"
73+
}
74+
return '';
6775
},
6876
state() {
6977
if (this.selected.length > 2) {
70-
return 'danger';
78+
return 'invalid';
7179
} else if (this.selected.length === 2) {
72-
return 'success';
80+
return 'valid';
7381
} else if (this.selected.length === 1) {
74-
return 'warning';
82+
return 'injvalid';
7583
}
7684
return '';
7785
}
@@ -82,11 +90,10 @@ export default {
8290
<!-- form-checkbox-2.vue -->
8391
```
8492

85-
### Inline and Stacked checkboxes
93+
## Inline and Stacked checkboxes
8694
`<b-form-checbox>` components render as inline elements by default. Add a parent
8795
with class `.custom-controls-stacked` to ensure each form control is on a separate line.
8896

89-
**Example 3: Inline & Stacked checkboxes:**
9097
```html
9198
<template>
9299
<div>
@@ -119,7 +126,7 @@ export default {
119126
<!-- form-checkbox-3.vue -->
120127
```
121128

122-
### Value(s)
129+
## Value(s)
123130
By default, `<b-form-checkbox>` value will be `true` when checked and `false` when unchecked.
124131
You can customize the checked and unchecked values by specifying the `value` and `unchecked-value`
125132
properties.
@@ -133,20 +140,20 @@ be returned in the `v-model` bound array. You should provide unique values for e
133140
checkbox's `value` prop.
134141

135142

136-
#### Multiple checkboxes and accessibility
143+
### Multiple checkboxes and accessibility
137144
When binding multiple checkboxes together, you should set the `name` prop to the same value for
138145
all checkboxes in the group, as well as wrap the group in a `<div>` (or other block element)
139146
which has the aria attribute `role="group"`. This will inform users of assitive technologies
140147
that the checkboxes are related.
141148

142-
When placing the group of checkboxes inside a `<b-form-fieldset>`, set a unique `id` on the
149+
When placing the group of checkboxes inside a `<b-form-groupt>`, set a unique `id` on the
143150
element with `role="group"` and set the `label-for` prop of the `<b-form-fieldet>` to
144151
this `id` value (see **Example 2** above). Whenever using grouped checkboxes, it is
145152
recommended that they be placed in a `<b-form-fieldset>` component to associate a `<label>`
146153
with the entire group of checkboxes.
147154

148155

149-
### Button style checkboxes
156+
## Button style checkboxes
150157
Render a checkbox with the look of a button by setting the prop `button`. Change the button variant by
151158
setting the `button-variant` prop to one of the standard Bootstrap button variants (see
152159
[`<b-button>`](./button) for supported variants). The default `button-variant` is `secondary`.
@@ -157,7 +164,6 @@ and add the attribute `data-toggle="buttons"` to get the proper Bootstrap CSS st
157164
Button style checkboxes will have the class `.active` automatically applied to the label
158165
when they are in the checked state.
159166

160-
**Example 4: Button style checkboxes:**
161167
```html
162168
<template>
163169
<div>
@@ -200,16 +206,24 @@ export default {
200206
<!-- form-checkbox-4.vue -->
201207
```
202208

203-
### Contextual states
204-
To apply contextual state colors to `<b-form-checkbox>`, it must be wrapped in
205-
a `<b-form-fieldset>` component (which has the `state` prop set to the state you
206-
would like), or wrapped in another element - such as a `<div>` - which has one
207-
of the standard Bootstrap V4 `.has-*` state class applied.
209+
## Contextual states
210+
Bootstrap includes validation styles for `valid` and `invalid` states
211+
on most form controls.
208212

209-
**Note:** Contextual states are not supported when `button` is set.
213+
Generally speaking, you’ll want to use a particular state for specific types of feedback:
214+
- `'invalid'` is great for when there’s a blocking or required field. A user must fill in
215+
this field properly to submit the form.
216+
- `'valid'` is ideal for situations when you have per-field validation throughout a form
217+
and want to encourage a user through the rest of the fields.
218+
- `null` Displays no validation state
210219

220+
To apply one of the contextual state icons on `<b-form-checkbox>`, set the `state` prop
221+
to `'invalid'`, `'valid'`, or `null`.
211222

212-
### Indeterminate (tri-state) support
223+
**Note:** Contextual states are not supported when `button` mode is set.
224+
225+
226+
## Indeterminate (tri-state) support
213227
Normally checkbox inputs can only have two states: `checked` or `unchecked`. They can
214228
have any value, but they either submit that value (checked) or don't (unchecked) with
215229
a form submission (although Bootstrap-Vue allows a value for the `unchecked` state)
@@ -228,7 +242,7 @@ The `indeterminate` prop can be synced to the checkboxe's state by v-binding the
228242

229243
**Note:** indeterminate is not supported when `button` is set.
230244

231-
**Example 5: Single Indeterminate checkbox:**
245+
**Single Indeterminate checkbox:**
232246
```html
233247
<template>
234248
<div>
@@ -261,7 +275,7 @@ export default {
261275
<!-- form-checkbox-5.vue -->
262276
```
263277

264-
**Example 6: Indeterminate checkbox use-case:**
278+
**Indeterminate checkbox use-case:**
265279
```html
266280
<template>
267281
<b-card>
@@ -282,6 +296,7 @@ export default {
282296
v-model="selected"
283297
name="flavs"
284298
:value="flavour"
299+
:key="flavour"
285300
>{{ flavour }}</b-form-checkbox>
286301
</div>
287302
<p aria-live="polite">Selected: <strong>{{ selected }}</strong></p>
@@ -322,20 +337,22 @@ export default {
322337
<!-- form-checkbox-6.vue -->
323338
```
324339

325-
#### Indeterminate state and accessibility
340+
**Note:** indeterminate is not supported in `button` mode.
341+
342+
### Indeterminate state and accessibility
326343
Not all screen readers will convey the indeterminate state to screen reader users.
327-
So it is recommended to provide some form of textual feedback to the user (possibly
344+
So it is recommended to provide some form of textual feedback to the user (possibly
328345
by via the `.sr-only` class) if the indeterminate state has special contextual
329346
meaning in your application.
330347

331348

332-
### Non custom check inputs
349+
## Non custom check inputs
333350
You can have `b-form-checkbox` render a browser native chechbox input by setting the `plain` prop.
334351

335352
**Note:** The `plain` prop has no effect with `button` is set.
336353

337354
### See also
338-
- [`<b-form-fieldset>`](./form-fieldset)
355+
- [`<b-form-group>`](./form-group)
339356
- [`<b-button-group>`](./button-group)
340357
- [`<b-button>`](./button)
341358

‎docs/components/form-fieldset/README.md‎

Lines changed: 0 additions & 134 deletions
This file was deleted.

0 commit comments

Comments
 (0)