BFormGroup labelClass configurable via plugin settings

[scottadamsmith]

Is your feature request related to a problem? Please describe...

We want to target the "primary" label element within form-group elements for styling (like bold font-weight) without having to be aware of all the other label elements that can be rendered within a BFormGroup (checkboxes, radios, etc).

Describe the solution you'd like

We would like to be able to configure the labelClass prop for BFormGroup globally via the plugin settings.

Describe alternatives you've considered

We have considered applying the labelClass for every field, but given we'd use the same class almost universally, configuring it at the plugin level would be idea.

Alternatively, if the library itself provided a built-in class to the primary label element, that would help enable the ability to theme it as well.

Additional context

N/A

[tmorehouse]

If you set the form-group to horizontal layout (by using the label-*-cols (or label-cols), then the <label> will always have class col-form-label. If you always want the label above the input set label-cols="12". Just note that this class adds a bit of padding to the top of the label (so that when the label moves to the left side of the input it aligns the text with the text in the input).

When none of the label*cols props are used, the col-form-label class is not applied to the <label>

[scottadamsmith]

Thanks for getting back to me so quickly.

I think for now, we'd probably just apply a labelClass to each field. We have settled on form-group-label for now. Then, if we were later able to configure it via the plugin settings, we could just set it there and discontinue the requirement of applying the label but not have to change what we are targeting in the theme.

[scottadamsmith]

Alternatively, do you think targeting the .form-group label:first-child, .form-group legend:first-child would be safe or are there scenarios where the label/fieldset would not be the first child element?

[tmorehouse]

There will be one situation where there will be an intermediate element between the .form-group and legend (when you have no label-for set)... which is when the form-group is in horizontal mode (since legends do not style very well)

.form-group > label:first-child,
.form-group > legend:first-child,
.form-group > .form-row > legend:first-child {
  color: purple;
}

I would use the child selectors (>) in case you have nested form-groups (depending on the css properties you are using)

[scottadamsmith]

I will give this a shot, thanks for calling out the .form-row and nesting scenarios.

[tmorehouse]

And you can probably leave out the :first-child pseudo selector.

[scottadamsmith]

Just an update in case anyone else wants to do something similar. We felt we wanted the label for switch elements to be bold as well, so we added one additional selector for that:

.form-group > label,
.form-group > legend,
.form-group > .form-row > legend,
.form-group .custom-switch > label {
  font-weight: bold;
}

I'd say this feature request might still be useful for someone in another scenario, but with regard to our use case I think we are good to go with this approach. Thanks!