Permalink
Browse files

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
  • Loading branch information...
tmorehouse committed Aug 16, 2017
1 parent 8ff2623 commit 00e2b6ff0afd18d291b6db17e836facfadef9f72
Showing with 1,156 additions and 678 deletions.
  1. +1 −1 docs/components/button/README.md
  2. +52 −35 docs/components/form-checkbox/README.md
  3. +0 −134 docs/components/form-fieldset/README.md
  4. +22 −8 docs/components/form-file/README.md
  5. +106 −0 docs/components/form-group/README.md
  6. 0 docs/components/{form-fieldset → form-group}/index.js
  7. 0 docs/components/{form-fieldset → form-group}/meta.json
  8. +77 −67 docs/components/form-input/README.md
  9. +6 −17 docs/components/form-input/meta.json
  10. +43 −33 docs/components/form-radio/README.md
  11. +50 −40 docs/components/form-select/README.md
  12. +69 −0 docs/components/form-textarea/README.md
  13. +4 −0 docs/components/form-textarea/index.js
  14. +34 −0 docs/components/form-textarea/meta.json
  15. +25 −5 docs/components/form/README.md
  16. +1 −1 docs/components/form/meta.json
  17. +2 −1 docs/components/index.js
  18. +13 −2 lib/components/form-checkbox.vue
  19. +29 −0 lib/components/form-feedback.js
  20. +47 −40 lib/components/form-file.vue
  21. +130 −112 lib/components/{form-fieldset.vue → form-group.vue}
  22. +2 −1 lib/components/form-input-static.vue
  23. +79 −99 lib/components/form-input.vue
  24. +26 −10 lib/components/form-radio.vue
  25. +23 −25 lib/components/form-select.vue
  26. +114 −0 lib/components/form-textarea.vue
  27. +33 −18 lib/components/form.vue
  28. +7 −5 lib/components/index.js
  29. +17 −0 tests/components/form-feedback.spec.js
  30. +0 −6 tests/components/form-fieldset.spec.js
  31. +6 −0 tests/components/form-group.spec.js
  32. +6 −0 tests/components/form-textarea.spec.js
  33. +6 −0 tests/components/form.spec.js
  34. +4 −0 tests/fixtures/form-feedback/demo.html
  35. +3 −0 tests/fixtures/form-feedback/demo.js
  36. +0 −7 tests/fixtures/form-fieldset/demo.html
  37. +11 −0 tests/fixtures/form-file/demo.html
  38. +2 −0 tests/fixtures/form-file/demo.js
  39. +11 −0 tests/fixtures/form-group/demo.html
  40. 0 tests/fixtures/{form-fieldset → form-group}/demo.js
  41. +22 −9 tests/fixtures/form-input/demo.html
  42. +5 −1 tests/fixtures/form-input/demo.js
  43. +14 −1 tests/fixtures/form-radio/demo.html
  44. +12 −0 tests/fixtures/form-select/demo.html
  45. +22 −0 tests/fixtures/form-textarea/demo.html
  46. +7 −0 tests/fixtures/form-textarea/demo.js
  47. +10 −0 tests/fixtures/form/demo.html
  48. +3 −0 tests/fixtures/form/demo.js
@@ -110,7 +110,7 @@ the `.sync` prop modifier (available in Vue 2.3+) on the `pressed` property
<h5>In a button group</h5>
<b-button-group size="sm">
<b-button v-for="btn in buttons" :pressed.sync="btn.state" :variant="btn.variant">
<b-button v-for="btn in buttons" :pressed.sync="btn.state" :variant="btn.variant" :key="btn.variant">
{{ btn.caption }}
</b-button>
</b-button-group>
@@ -30,20 +30,28 @@ export default {
```html
<template>
<div>
<b-form-fieldset id="fieldset2"
<b-form-group id="fieldset2"
:label="label"
label-for="checkboxes2"
:description="desc"
:state="state"
:feedback="feedback"
>
<div role="group" id="checkboxes2">
<b-form-checkbox v-model="selected" name="flavour" value="orange">Orange</b-form-checkbox>
<b-form-checkbox v-model="selected" name="flavour" value="apple">Apple</b-form-checkbox>
<b-form-checkbox v-model="selected" name="flavour" value="pineapple">Pineapple</b-form-checkbox>
<b-form-checkbox v-model="selected" name="flavour" value="grape">Grape</b-form-checkbox>
<b-form-checkbox v-model="selected" :state="state" name="flavour" value="orange">
Orange
</b-form-checkbox>
<b-form-checkbox v-model="selected" :state="state" name="flavour" value="apple">
Apple
</b-form-checkbox>
<b-form-checkbox v-model="selected" :state="state" name="flavour" value="pineapple">
Pineapple
</b-form-checkbox>
<b-form-checkbox v-model="selected" :state="state" name="flavour" value="grape">
Grape
</b-form-checkbox>
</div>
</b-form-fieldset>
</b-form-group>
<hr>
<div>Selected: <strong>{{ selected }}</strong></div>
</div>
@@ -58,20 +66,20 @@ export default {
},
computed: {
feedback() {
if (this.selected.length > 2) {
return "Don't be greedy!";
} else if (this.selected.length === 1) {
return 'Select one more...';
}
return '';
if (this.selected.length > 2) {
return "Don't be greedy!";
} else if (this.selected.length === 1) {
return "Select one more"
}
return '';
},
state() {
if (this.selected.length > 2) {
return 'danger';
return 'invalid';
} else if (this.selected.length === 2) {
return 'success';
return 'valid';
} else if (this.selected.length === 1) {
return 'warning';
return 'injvalid';
}
return '';
}
@@ -82,11 +90,10 @@ export default {
<!-- form-checkbox-2.vue -->
```
### Inline and Stacked checkboxes
## Inline and Stacked checkboxes
`<b-form-checbox>` components render as inline elements by default. Add a parent
with class `.custom-controls-stacked` to ensure each form control is on a separate line.
**Example 3: Inline & Stacked checkboxes:**
```html
<template>
<div>
@@ -119,7 +126,7 @@ export default {
<!-- form-checkbox-3.vue -->
```
### Value(s)
## Value(s)
By default, `<b-form-checkbox>` value will be `true` when checked and `false` when unchecked.
You can customize the checked and unchecked values by specifying the `value` and `unchecked-value`
properties.
@@ -133,20 +140,20 @@ be returned in the `v-model` bound array. You should provide unique values for e
checkbox's `value` prop.
#### Multiple checkboxes and accessibility
### Multiple checkboxes and accessibility
When binding multiple checkboxes together, you should set the `name` prop to the same value for
all checkboxes in the group, as well as wrap the group in a `<div>` (or other block element)
which has the aria attribute `role="group"`. This will inform users of assitive technologies
that the checkboxes are related.
When placing the group of checkboxes inside a `<b-form-fieldset>`, set a unique `id` on the
When placing the group of checkboxes inside a `<b-form-groupt>`, set a unique `id` on the
element with `role="group"` and set the `label-for` prop of the `<b-form-fieldet>` to
this `id` value (see **Example 2** above). Whenever using grouped checkboxes, it is
recommended that they be placed in a `<b-form-fieldset>` component to associate a `<label>`
with the entire group of checkboxes.
### Button style checkboxes
## Button style checkboxes
Render a checkbox with the look of a button by setting the prop `button`. Change the button variant by
setting the `button-variant` prop to one of the standard Bootstrap button variants (see
[`<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
Button style checkboxes will have the class `.active` automatically applied to the label
when they are in the checked state.
**Example 4: Button style checkboxes:**
```html
<template>
<div>
@@ -200,16 +206,24 @@ export default {
<!-- form-checkbox-4.vue -->
```
### Contextual states
To apply contextual state colors to `<b-form-checkbox>`, it must be wrapped in
a `<b-form-fieldset>` component (which has the `state` prop set to the state you
would like), or wrapped in another element - such as a `<div>` - which has one
of the standard Bootstrap V4 `.has-*` state class applied.
## Contextual states
Bootstrap includes validation styles for `valid` and `invalid` states
on most form controls.
**Note:** Contextual states are not supported when `button` is set.
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-checkbox>`, set the `state` prop
to `'invalid'`, `'valid'`, or `null`.
### Indeterminate (tri-state) support
**Note:** Contextual states are not supported when `button` mode is set.
## Indeterminate (tri-state) support
Normally checkbox inputs can only have two states: `checked` or `unchecked`. They can
have any value, but they either submit that value (checked) or don't (unchecked) with
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
**Note:** indeterminate is not supported when `button` is set.
**Example 5: Single Indeterminate checkbox:**
**Single Indeterminate checkbox:**
```html
<template>
<div>
@@ -261,7 +275,7 @@ export default {
<!-- form-checkbox-5.vue -->
```
**Example 6: Indeterminate checkbox use-case:**
**Indeterminate checkbox use-case:**
```html
<template>
<b-card>
@@ -282,6 +296,7 @@ export default {
v-model="selected"
name="flavs"
:value="flavour"
:key="flavour"
>{{ flavour }}</b-form-checkbox>
</div>
<p aria-live="polite">Selected: <strong>{{ selected }}</strong></p>
@@ -322,20 +337,22 @@ export default {
<!-- form-checkbox-6.vue -->
```
#### Indeterminate state and accessibility
**Note:** indeterminate is not supported in `button` mode.
### Indeterminate state and accessibility
Not all screen readers will convey the indeterminate state to screen reader users.
So it is recommended to provide some form of textual feedback to the user (possibly
So it is recommended to provide some form of textual feedback to the user (possibly
by via the `.sr-only` class) if the indeterminate state has special contextual
meaning in your application.
### Non custom check inputs
## Non custom check inputs
You can have `b-form-checkbox` render a browser native chechbox input by setting the `plain` prop.
**Note:** The `plain` prop has no effect with `button` is set.
### See also
- [`<b-form-fieldset>`](./form-fieldset)
- [`<b-form-group>`](./form-group)
- [`<b-button-group>`](./button-group)
- [`<b-button>`](./button)

This file was deleted.

Oops, something went wrong.
Oops, something went wrong.

0 comments on commit 00e2b6f

Please sign in to comment.