feat(b-form-group): allow setting label cols props to auto (closes bootstrap-vue#4217) (bootstrap-vue#4218)

tmorehouse · web-flow · commit 21a822b9416f · 2019-10-14T20:36:48.000-03:00
diff --git a/src/components/form-group/README.md b/src/components/form-group/README.md
@@ -79,9 +79,10 @@ By default, the label appears above the input element(s), but you may optionally
 (label to the left of the input) at the various standard Bootstrap breakpoints.
 
 The props`label-cols` and `label-cols-{breakpoint}` allow you to specify how many columns the label
-should occupy in the row. The input(s) will fill the rest of the row. The value must be a number
+should occupy in the row. The input will fill the rest of the row width. The value must be a number
 greater than `0`. Or you can set the prop to `true` to make the label and input(s) each occupy half
-of the width of the rendered row (handy if you have custom Bootstrap with an odd number of columns).
+of the width of the rendered row (handy if you have custom Bootstrap with an odd number of columns),
+or set the value to `'auto'` so that the label occupies only the width that is needed.
 
 | prop            | description                       |
 | --------------- | --------------------------------- |
@@ -107,6 +108,8 @@ of the width of the rendered row (handy if you have custom Bootstrap with an odd
   </div>
 </div>
 
+The ability to set the label cols to `'auto'` was added in BootstrapVue version <samp>2.1.0</samp>.
+
 <!-- b-form-group-horizontal.vue -->
 ```
 
@@ -228,7 +231,7 @@ of related form controls:
 Setting the `disabled` prop will disable the rendered `<fieldset>` and, on most browsers, will
 disable all the input elements contained within the fieldset.
 
-`disabled` has no effect when `label-for` is set (as a `fieldset` element is not rendered).
+`disabled` has no effect when `label-for` is set (as a `<fieldset>` element is not rendered).
 
 ## Validation state feedback
 
diff --git a/src/components/form-group/form-group.js b/src/components/form-group/form-group.js
@@ -258,7 +258,7 @@ export const BFormGroup = {
         // Handle case where the prop's value is an empty string,
         // which represents true
         propVal = propVal === '' ? true : propVal || false
-        if (!isBoolean(propVal)) {
+        if (!isBoolean(propVal) && propVal !== 'auto') {
           // Convert to column size to number
           propVal = parseInt(propVal, 10) || 0
           // Ensure column size is greater than 0
