Skip to content

Commit 345ae5a

Browse files
tmorehousetmorehouse
authored
Revert "feat(form-group): new label-size prop" (bootstrap-vue#1421)
chore: revert "feat(form-group): new label-size prop"
1 parent 5c83cd8 commit 345ae5a

File tree

2 files changed

+75
-119
lines changed

2 files changed

+75
-119
lines changed

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

Lines changed: 16 additions & 54 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,8 @@ as well as contextual state visual feedback.
1010
id="fieldset1"
1111
description="Let us know your name."
1212
label="Enter your name"
13-
:invalid-feedback="invalidFeedback"
14-
:valid-feedback="validFeedback"
13+
:invalid-feedback="feedback"
14+
valid-feedback="Thank you"
1515
:state="state"
1616
>
1717
<b-form-input id="input1" :state="state" v-model.trim="name"></b-form-input>
@@ -21,20 +21,11 @@ as well as contextual state visual feedback.
2121
<script>
2222
export default {
2323
computed: {
24-
state () {
25-
return this.name.length >= 4 ? true : false
26-
},
27-
invalidFeedback () {
28-
if (this.name.length > 4) {
29-
return ''
30-
} else if (this.name.length > 0) {
31-
return 'Enter at least 4 characters'
32-
} else {
33-
return 'Please enter something'
34-
}
24+
feedback () {
25+
return this.name.length > 0 ? 'Enter at least 4 characters' : 'Please enter something'
3526
},
36-
validFeedback () {
37-
return this.state === true ? 'Thank you' : ''
27+
state () {
28+
return this.name.length > 4 ? 'valid' : 'invalid'
3829
}
3930
},
4031
data () {
@@ -53,15 +44,6 @@ Use the prop `label` to set the content of the `<fieldset>` generated `<legend>`
5344
element (html supported), or by using the named slot `label`, You may optionally
5445
visually hide the label text by setting the prop `label-sr-only`.
5546

56-
The label text may also optionally be aligned `left`, `center` or `right` by setting
57-
the respective value via the prop `label-text-align`. Alignment has no effect if
58-
`label-sr-only` is set.
59-
60-
You can also apply additional classes to the label via the `label-class` prop, such as
61-
responsive padding or alignment utility classes. The `label-class` prop accepts either
62-
a string or array of strings.
63-
64-
### Horizontal layout
6547
By default, the label appears above the input element(s), but you may optionally set
6648
the prop `horizontal` to place the label on the same line, and control the width
6749
of the label by setting `label-cols` to the number of columns (default of `3`,
@@ -70,6 +52,15 @@ not `horizontal`. For viewports below size `sm`, the label will revert to
7052
being displayed above the input control. You can control the breakpoint for this
7153
by setting the `breakpoint` prop (default is `sm`).
7254

55+
The label text may also optionally be aligned `left`, `center` or `right` by setting
56+
the respective value via the prop `label-text-align`. Alignment has no effect if
57+
`label-sr-only` is set.
58+
59+
You can also apply additional classes to the label via the `label-class` prop, such as
60+
responsive padding or alignment utility classes. The `label-class` prop accepts either
61+
a string or array of strings.
62+
63+
**Example: Horizontal laout**
7364
```html
7465
<div>
7566
<b-form-group id="fieldsetHorizontal"
@@ -85,39 +76,10 @@ by setting the `breakpoint` prop (default is `sm`).
8576
<!-- form-group-horizontal.vue -->
8677
```
8778

88-
### Label size
89-
You can control the label text size match the size of your form input(s) via the
90-
optional `label-size` prop. Values can be `'sm'` or `'lg'` for small or large
91-
label, respectively. Sizes work for both `horizontal` and non-horizontal form groups.
92-
93-
```html
94-
<div>
95-
<b-form-group horizontal
96-
:label-cols="2"
97-
label-size="sm"
98-
label="Small">
99-
<b-form-input size="sm"></b-form-input>
100-
</b-form-group>
101-
<b-form-group horizontal
102-
:label-cols="2"
103-
label="Default">
104-
<b-form-input></b-form-input>
105-
</b-form-group>
106-
<b-form-group horizontal
107-
:label-cols="2"
108-
label-size="lg"
109-
label="Large">
110-
<b-form-input size="lg"></b-form-input>
111-
</b-form-group>
112-
</div>
113-
114-
<!-- form-group-label-size.vue -->
115-
```
116-
11779
## Description
11880
Optional descriptive text which is always shown with the `.text-muted` class
11981
(html supported) by setting the `description` prop or using the named slot `description`.
120-
The description text is rendered using the `<b-form-text>` component.
82+
The description text is rendered using the <`b-form-text>` component.
12183

12284
## Validation feedback
12385

‎src/components/form-group/_form-group.js

Lines changed: 59 additions & 65 deletions
Original file line numberDiff line numberDiff line change
@@ -13,63 +13,76 @@ export default {
1313
const $slots = t.$slots
1414
// Label
1515
let legend = h(false)
16-
if (t.hasLabel || t.horizontal) {
17-
// In horizontal mode, if there is no label, we still need to offset the input
18-
const tag = t.hasLabel ? 'legend' : 'div'
19-
const domProps = $slots.label ? {} : { innerHTML: t.label || '' }
16+
if (t.label || $slots.label || t.horizontal) {
2017
legend = h(
21-
tag,
22-
{ class: t.labelClasses, attrs: { id: t.labelId }, domProps: domProps },
23-
$slots.label
18+
'legend',
19+
{ class: t.labelClasses, attrs: { id: t.labelId } },
20+
[ $slots.label || h('span', { domProps: { innerHTML: t.label || '' } }) ]
2421
)
2522
}
26-
// Invalid feeback text (explicitly hidden if state is valid)
23+
// Invalid feeback text
2724
let invalidFeedback = h(false)
28-
if (t.hasInvalidFeedback) {
29-
let domProps = {}
30-
if (!$slots['invalid-feedback'] && !$slots['feedback']) {
31-
domProps = { innerHTML: t.invalidFeedback || t.feedback || '' }
32-
}
25+
if (t.invalidFeedback || t.feedback || $slots['invalid-feedback'] || $slots['feedback']) {
3326
invalidFeedback = h(
3427
'b-form-invalid-feedback',
3528
{
29+
directives: [
30+
{
31+
name: 'show',
32+
rawName: 'v-show',
33+
value: Boolean(t.invalidFeedback || t.feedback || $slots['invalid-feedback'] || $slots['feedback']),
34+
expression: "Boolean(t.invalidFeedback || t.feedback || $slots['invalid-feedback'] || $slots['feedback'])"
35+
}
36+
],
3637
attrs: {
3738
id: t.invalidFeedbackId,
3839
role: 'alert',
3940
'aria-live': 'assertive',
4041
'aria-atomic': 'true'
41-
},
42-
domProps: domProps
42+
}
4343
},
44-
$slots['invalid-feedback'] || $slots['feedback']
44+
[
45+
t.computedState === false
46+
? ($slots['invalid-feedback'] || $slots['feedback'] || h('span', { domProps: { innerHTML: t.invalidFeedback || t.feedback || '' } }))
47+
: h(false)
48+
]
4549
)
4650
}
47-
// Valid feeback text (explicitly hidden if state is invalid)
51+
// Valid feeback text
4852
let validFeedback = h(false)
49-
if (t.hasValidFeedback) {
50-
const domProps = $slots['valid-feedback'] ? {} : { innerHTML: t.validFeedback || '' }
53+
if (t.validFeedback || $slots['valid-feedback']) {
5154
validFeedback = h(
5255
'b-form-valid-feedback',
5356
{
57+
directives: [
58+
{
59+
name: 'show',
60+
rawName: 'v-show',
61+
value: Boolean(t.validFeedback || $slots['valid-feedback']),
62+
expression: "Boolean(t.validFeedback || $slots['valid-feedback'])"
63+
}
64+
],
5465
attrs: {
5566
id: t.validFeedbackId,
5667
role: 'alert',
5768
'aria-live': 'assertive',
5869
'aria-atomic': 'true'
59-
},
60-
domProps: domProps
70+
}
6171
},
62-
$slots['valid-feedback']
72+
[
73+
t.computedState === true
74+
? ($slots['valid-feedback'] || h('span', { domProps: { innerHTML: t.validFeedback || '' } }))
75+
: h(false)
76+
]
6377
)
6478
}
6579
// Form help text (description)
6680
let description = h(false)
67-
if (t.hasDescription) {
68-
const domProps = $slots['description'] ? {} : { innerHTML: t.description || '' }
81+
if (t.description || $slots['description']) {
6982
description = h(
7083
'b-form-text',
71-
{ attrs: { id: t.descriptionId }, domProps: domProps },
72-
$slots['description']
84+
{ attrs: { id: t.descriptionId } },
85+
[ $slots['description'] || h('span', { domProps: { innerHTML: t.description || '' } }) ]
7386
)
7487
}
7588
// Build layout
@@ -116,10 +129,6 @@ export default {
116129
type: String,
117130
default: null
118131
},
119-
labelSize: {
120-
type: String,
121-
default: null
122-
},
123132
labelSrOnly: {
124133
type: Boolean,
125134
default: false
@@ -151,20 +160,22 @@ export default {
151160
}
152161
},
153162
computed: {
163+
inputState () {
164+
return this.stateClass
165+
},
154166
groupClasses () {
155167
return [
156168
'b-form-group',
157169
'form-group',
158170
this.validated ? 'was-validated' : null,
159-
this.stateClass
171+
this.inputState
160172
]
161173
},
162174
labelClasses () {
163175
return [
164-
this.labelSrOnly ? 'sr-only' : (this.labelSize ? 'col-form-label' : 'col-form-legend'),
176+
this.labelSrOnly ? 'sr-only' : 'col-form-legend',
165177
this.labelLayout,
166178
this.labelAlignClass,
167-
this.labelSizeClass,
168179
this.labelClass
169180
]
170181
},
@@ -180,55 +191,38 @@ export default {
180191
}
181192
return this.labelTextAlign ? `text-${this.labelTextAlign}` : null
182193
},
183-
labelSizeClass () {
184-
if (this.labelSrOnly) {
185-
return null
186-
}
187-
return this.labelSize ? `col-form-label-${this.labelSize}` : null
188-
},
189194
inputLayoutClasses () {
190195
return [
191196
this.horizontal ? `col-${this.breakpoint}-${12 - this.labelCols}` : 'col-12'
192197
]
193198
},
194-
hasLabel () {
195-
return this.label || this.$slots['label']
196-
},
197-
hasDescription () {
198-
return this.description || this.$slots['description']
199-
},
200-
hasInvalidFeedback () {
201-
if (this.computedState === true) {
202-
// If the form-group state is explicityly valid, we return false
203-
return false
204-
}
205-
return this.invalidFeedback || this.feedback || this.$slots['invalid-feedback'] || this.$slots['feedback']
206-
},
207-
hasValidFeedback () {
208-
if (this.computedState === false) {
209-
// If the form-group state is explicityly invalid, we return false
210-
return false
211-
}
212-
return this.validFeedback || this.$slots['valid-feedback']
213-
},
214199
labelId () {
215-
return this.hasLabel ? this.safeId('_BV_label_') : null
200+
return (this.label || this.$slots['label']) ? this.safeId('_BV_label_') : null
216201
},
217202
descriptionId () {
218-
return this.hasDescription ? this.safeId('_BV_description_') : null
203+
if (this.description || this.$slots['description']) {
204+
return this.safeId('_BV_description_')
205+
}
206+
return null
219207
},
220208
invalidFeedbackId () {
221-
return this.hasInvalidFeedback ? this.safeId('_BV_feedback_invalid_') : null
209+
if (this.invalidFeedback || this.feedback || this.$slots['invalid-feedback'] || this.$slots['feedback']) {
210+
return this.safeId('_BV_feedback_invalid_')
211+
}
212+
return null
222213
},
223214
validFeedbackId () {
224-
return this.hasValidFeedback ? this.safeId('_BV_feedback_valid_') : null
215+
if (this.validFeedback || this.$slots['valid-feedback']) {
216+
return this.safeId('_BV_feedback_valid_')
217+
}
218+
return null
225219
},
226220
describedByIds () {
227221
return [
228222
this.labelId,
229223
this.descriptionId,
230-
this.invalidFeedbackId,
231-
this.validFeedbackId
224+
this.computedState === false ? this.invalidFeedbackId : null,
225+
this.computedState === true ? this.validFeedbackId : null
232226
].filter(i => i).join(' ') || null
233227
}
234228
}

0 commit comments

Comments
 (0)