Permalink
Browse files

feat(form-group): new prop for label-class, deprecate prop feedback i…

…n favor of invalid-feedback (#1412)

* feat(form-group): add prop for label-class

* Update README.md

* Update README.md

* Update README.md
  • Loading branch information...
tmorehouse committed Nov 28, 2017
1 parent 7f7eba1 commit 7d61cb4018aae44bf69043e08b71d3aae6e4cabe
@@ -10,7 +10,7 @@ as well as contextual state visual feedback.
id="fieldset1"
description="Let us know your name."
label="Enter your name"
:feedback="feedback"
:invalid-feedback="feedback"
valid-feedback="Thank you"
:state="state"
>
@@ -56,6 +56,10 @@ The label text may also optionally be aligned `left`, `center` or `right` by set
the respective value via the prop `label-text-align`. Alignment has no effect if
`label-sr-only` is set.
You can also apply additional classes to the label via the `label-class` prop, such as
responsive padding or alignment utility classes. The `label-class` prop accepts either
a string or array of strings.
**Example: Horizontal laout**
```html
<div>
@@ -93,12 +97,12 @@ and want to encourage a user through the rest of the fields.
To apply one of the contextual state icons on `<b-form-group>`, set the `state` prop
to `'invalid'` (or `false`), `'valid'` (or `true`), or `null`.
You should always provide content via the `feedback` prop (or slot) to aid users
You should always provide content via the `invalid-feedback` prop (or slot) to aid users
using assistive technologies when setting a contextual `invalid` state.
### Invalid feedback
Show optional invalid state feedback text to provide textual state feedback (html supported)
by setting the prop `feedback` or using the named slot `invalid-feedback`.
by setting the prop `invalid-feedback` or using the named slot `invalid-feedback`.
Note that the invalid feedback **will not be shown** unless the invalid `state` is set on the
`<b-form-group>` and it's child(ren) input(s) or just on the input (`<b-form-input>`,
@@ -110,7 +114,9 @@ prop set (and the input fails browser native validation constraintes such as `re
Refer to Bootstrap V4's `Form` component documentation for details on validation methods.
Invalid feedback is rendered using the `<b-form-invalid-feedback>` componment.
**Notes:**
- The prop `feedback` has been deprecated in favor of the `invalid-feedback` prop.
- Invalid feedback is rendered using the `<b-form-invalid-feedback>` componment.
### Valid feedback
Show optional valid state feedback text to provide textual state feedback (html supported)
@@ -22,28 +22,28 @@ export default {
}
// Invalid feeback text
let invalidFeedback = h(false)
if (t.feedback || $slots['invalid-feedback'] || $slots['feedback']) {
if (t.invalidFeedback || t.feedback || $slots['invalid-feedback'] || $slots['feedback']) {
invalidFeedback = h(
'b-form-invalid-feedback',
{
directives: [
{
name: 'show',
rawName: 'v-show',
value: Boolean(t.feedback || $slots['invalid-feedback'] || $slots['feedback']),
expression: "Boolean(t.feedback || $slots['invalid-feedback'] || $slots['feedback'])"
value: Boolean(t.invalidFeedback || t.feedback || $slots['invalid-feedback'] || $slots['feedback']),
expression: "Boolean(t.invalidFeedback || t.feedback || $slots['invalid-feedback'] || $slots['feedback'])"
}
],
attrs: {
id: t.feedbackId,
id: t.invalidFeedbackId,
role: 'alert',
'aria-live': 'assertive',
'aria-atomic': 'true'
}
},
[
t.computedState === false
? ($slots['invalid-feedback'] || $slots['feedback'] || h('span', { domProps: { innerHTML: t.feedback || '' } }))
? ($slots['invalid-feedback'] || $slots['feedback'] || h('span', { domProps: { innerHTML: t.invalidFeedback || t.feedback || '' } }))
: h(false)
]
)
@@ -133,11 +133,20 @@ export default {
type: Boolean,
default: false
},
labelClass: {
type: [String, Array],
default: null
},
description: {
type: String,
default: null
},
invalidFeedback: {
type: String,
default: null
},
feedback: {
// Deprecated in favor of invalid-feedback
type: String,
default: null
},
@@ -166,7 +175,8 @@ export default {
return [
this.labelSrOnly ? 'sr-only' : 'col-form-legend',
this.labelLayout,
this.labelAlignClass
this.labelAlignClass,
this.labelClass
]
},
labelLayout () {
@@ -195,8 +205,8 @@ export default {
}
return null
},
feedbackId () {
if (this.feedback || this.$slots['invalid-feedback'] || this.$slots['feedback']) {
invalidFeedbackId () {
if (this.invalidFeedback || this.feedback || this.$slots['invalid-feedback'] || this.$slots['feedback']) {
return this.safeId('_BV_feedback_invalid_')
}
return null
@@ -211,7 +221,7 @@ export default {
return [
this.labelId,
this.descriptionId,
this.computedState === false ? this.feedbackId : null,
this.computedState === false ? this.invalidFeedbackId : null,
this.computedState === true ? this.validFeedbackId : null
].filter(i => i).join(' ') || null
}
@@ -156,10 +156,10 @@ to:
:state="nameState"
aria-describedby="input-help input-feeback"
placeholder="Enter your name"></b-form-input>
<b-form-feedback id="input-feedback">
<b-form-invalid-feedback id="input-feedback">
<!-- This will only be shown if the preceeding input has an invalid state -->
Enter at least 3 letters
</b-form-feedback>
</b-form-invalid-feedback>
<b-form-text id="input-help">
<!-- this is a form text block (formerly known as help block) -->
Enter your name.
@@ -185,7 +185,7 @@ export default {
<!-- form-input-states-2.vue -->
```
**Tip:** Use the [`<b-form-group>`](/docs/components/form-group) component to
> **Tip:** Use the [`<b-form-group>`](/docs/components/form-group) component to
automatically generate markup similar to above.
### Conveying contextual state to assistive technologies and colorblind users
@@ -594,11 +594,11 @@ small screens can be harder to deal with on mobile devices (such as smart-phones
</template>
<div>
<b-form-group label="Name" :state="input1state" horizontal class="mb-1"
description="Enter your name" feedback="This field is required">
description="Enter your name" invalid-feedback="This field is required">
<b-form-input ref="input1" :state="input1state" size="sm" v-model="input1"></b-form-input>
</b-form-group>
<b-form-group label="Color" :state="input2state" horizontal class="mb-1"
description="Pick a color" feedback="This field is required">
description="Pick a color" invalid-feedback="This field is required">
<b-form-select size="sm" :state="input2state" v-model="input2" :options="options"></b-form-select>
</b-form-group>
<b-alert show class="small">

0 comments on commit 7d61cb4

Please sign in to comment.