Add support for label classes

docs/api-fields.md

@@ -108,6 +108,13 @@ import BoolField from 'uniforms-unstyled/BoolField'; // Choose your theme packag
   grid="4" // 'col-4-sm' on label, 'col-8-sm' on input
   grid={{md: 5}} // 'col-5-md' on label, 'col-7-md' on input
   grid="col-6-xl" // 'col-6-xl' on label, 'col-6-xl' on input
+  // label className.
+  //   A custom className for the field's label
+  // Available in:
+  //   bootstrap3
+  //   bootstrap4
+  labelClassName="a b c" // You can either specify them as a single string
+  labelClassName=[ 'a', 'b', 'c' ] // or as an array of strings
   // Field layout
   //  The layout of label. You can set span and/or offset.
   // Available in:
@@ -198,6 +205,13 @@ import DateField from 'uniforms-unstyled/DateField'; // Choose your theme packag
   grid="4" // 'col-4-sm' on label, 'col-8-sm' on input
   grid={{md: 5}} // 'col-5-md' on label, 'col-7-md' on input
   grid="col-6-xl" // 'col-6-xl' on label, 'col-6-xl' on input
+  // label className.
+  //   A custom className for the field's label
+  // Available in:
+  //   bootstrap3
+  //   bootstrap4
+  labelClassName="a b c" // You can either specify them as a single string
+  labelClassName=[ 'a', 'b', 'c' ] // or as an array of strings
   // Field layout
   //  The layout of label. You can set span and/or offset.
   // Available in:
@@ -450,6 +464,13 @@ import LongTextField from 'uniforms-unstyled/LongTextField'; // Choose your them
   //   bootstrap3
   //   bootstrap4
   help="Need help?"
+  // label className.
+  //   A custom className for the field's label
+  // Available in:
+  //   bootstrap3
+  //   bootstrap4
+  labelClassName="a b c" // You can either specify them as a single string
+  labelClassName=[ 'a', 'b', 'c' ] // or as an array of strings
   // Field layout
   //  The layout of label. You can set span and/or offset.
   // Available in:
@@ -566,6 +587,13 @@ import NumField from 'uniforms-unstyled/NumField'; // Choose your theme package.
   grid="4" // 'col-4-sm' on label, 'col-8-sm' on input
   grid={{md: 5}} // 'col-5-md' on label, 'col-7-md' on input
   grid="col-6-xl" // 'col-6-xl' on label, 'col-6-xl' on input
+  // label className.
+  //   A custom className for the field's label
+  // Available in:
+  //   bootstrap3
+  //   bootstrap4
+  labelClassName="a b c" // You can either specify them as a single string
+  labelClassName=[ 'a', 'b', 'c' ] // or as an array of strings
   // Field layout
   //  The layout of label. You can set span and/or offset.
   // Available in:
@@ -657,6 +685,13 @@ import RadioField from 'uniforms-unstyled/RadioField'; // Choose your theme pack
   // Array of allowed values.
   //   By default, those are extracted from your schema.
   allowedValues={[value1, value2 /* ... */]}
+  // label className.
+  //   A custom className for the field's label
+  // Available in:
+  //   bootstrap3
+  //   bootstrap4
+  labelClassName="a b c" // You can either specify them as a single string
+  labelClassName=[ 'a', 'b', 'c' ] // or as an array of strings
   // Field layout
   //  The layout of label. You can set span and/or offset.
   // Available in:
@@ -711,6 +746,13 @@ import SelectField from 'uniforms-unstyled/SelectField'; // Choose your theme pa
   // Turn on checkbox/radio mode.
   //   It's always true in mutltiple (i.e. fieldType === Array) mode.
   checkboxes={true}
+  // label className.
+  //   A custom className for the field's label
+  // Available in:
+  //   bootstrap3
+  //   bootstrap4
+  labelClassName="a b c" // You can either specify them as a single string
+  labelClassName=[ 'a', 'b', 'c' ] // or as an array of strings
   // Field layout
   //  The layout of label. You can set span and/or offset.
   // Available in:
@@ -803,6 +845,13 @@ import TextField from 'uniforms-unstyled/TextField'; // Choose your theme packag
   grid="4" // 'col-4-sm' on label, 'col-8-sm' on input
   grid={{md: 5}} // 'col-5-md' on label, 'col-7-md' on input
   grid="col-6-xl" // 'col-6-xl' on label, 'col-6-xl' on input
+  // label className.
+  //   A custom className for the field's label
+  // Available in:
+  //   bootstrap3
+  //   bootstrap4
+  labelClassName="a b c" // You can either specify them as a single string
+  labelClassName=[ 'a', 'b', 'c' ] // or as an array of strings
   // Field layout
   //  The layout of label. You can set span and/or offset.
   // Available in:

packages/uniforms-bootstrap3/__tests__/wrapField.js

@@ -56,3 +56,29 @@ test('<wrapField> - renders error block (showInlineError=false)', () => {
 
   expect(wrapper.find('.help-block')).toHaveLength(0);
 });
+
+test('<wrapField> - label has custom class (String)', () => {
+  const element = wrapField(
+    {
+      label: 'A field label',
+      labelClassName: 'custom-label-class'
+    },
+    <div />
+  );
+  const wrapper = mount(element);
+
+  expect(wrapper.find('label.custom-label-class')).toHaveLength(1);
+});
+
+test('<wrapField> - label has custom class (Array[String])', () => {
+  const element = wrapField(
+    {
+      label: 'A field label',
+      labelClassName: ['custom-1', 'custom-2']
+    },
+    <div />
+  );
+  const wrapper = mount(element);
+
+  expect(wrapper.find('label.custom-1.custom-2')).toHaveLength(1);
+});

packages/uniforms-bootstrap3/src/wrapField.js

@@ -18,6 +18,7 @@ export default function wrapField(
     helpClassName, // Help text class name.
     id,
     label,
+    labelClassName, // Label class name (String|Array[String]).
     required,
     showInlineError, // Show inline error message?
     wrapClassName, // Input wrapper class name.
@@ -58,7 +59,11 @@ export default function wrapField(
       {label && (
         <label
           htmlFor={id}
-          className={classnames('control-label', gridClassName(grid, 'label'))}
+          className={classnames(
+            'control-label',
+            gridClassName(grid, 'label'),
+            labelClassName
+          )}
         >
           {label}
         </label>

packages/uniforms-bootstrap4/__tests__/wrapField.js

@@ -48,3 +48,29 @@ test('<wrapField> - renders error block (showInlineError=false)', () => {
 
   expect(wrapper.find('.text-danger')).toHaveLength(0);
 });
+
+test('<wrapField> - label has custom class (String)', () => {
+  const element = wrapField(
+    {
+      label: 'A field label',
+      labelClassName: 'custom-label-class'
+    },
+    <div />
+  );
+  const wrapper = mount(element);
+
+  expect(wrapper.find('label.custom-label-class')).toHaveLength(1);
+});
+
+test('<wrapField> - label has custom class (Array[String])', () => {
+  const element = wrapField(
+    {
+      label: 'A field label',
+      labelClassName: ['custom-1', 'custom-2']
+    },
+    <div />
+  );
+  const wrapper = mount(element);
+
+  expect(wrapper.find('label.custom-1.custom-2')).toHaveLength(1);
+});

packages/uniforms-bootstrap4/src/wrapField.js

@@ -16,6 +16,7 @@ export default function wrapField(
     helpClassName, // Help text class name.
     id,
     label,
+    labelClassName, // Label class name (String|Array[String]).
     required,
     showInlineError, // Show inline error message?
     wrapClassName, // Input wrapper class name.
@@ -60,7 +61,8 @@ export default function wrapField(
               'col-form-label': grid,
               'text-danger': error
             },
-            gridClassName(grid, 'label')
+            gridClassName(grid, 'label'),
+            labelClassName
           )}
         >
           {label}