feat: add size prop for FormLabel component - Fixes #4886 (#4893)

* Add size prop for FormLabel component

* fix lint issues

* adding test for FormLabel size prop

* merging column and size props

* fix column prop for FormLabel component

Co-authored-by: raghavi-k <raghavi.k@gofrugal.com>

src/FormLabel.js

@@ -22,7 +22,7 @@ const propTypes = {
    * Renders the FormLabel as a `<Col>` component (accepting all the same props),
    * as well as adding additional styling for horizontal forms.
    */
-  column: PropTypes.bool,
+  column: PropTypes.oneOfType([PropTypes.bool, PropTypes.oneOf(['sm', 'lg'])]),
 
   /**
    * The FormLabel `ref` will be forwarded to the underlying element.
@@ -52,11 +52,13 @@ const FormLabel = React.forwardRef(
 
     bsPrefix = useBootstrapPrefix(bsPrefix, 'form-label');
 
+    let columnClass = 'col-form-label';
+    if (typeof column === 'string') columnClass = `${columnClass}-${column}`;
     const classes = classNames(
       className,
       bsPrefix,
       srOnly && 'sr-only',
-      column && 'col-form-label',
+      column && columnClass,
     );
 
     warning(

test/FormLabelSpec.js

@@ -70,4 +70,20 @@ describe('<FormLabel>', () => {
     const instance = mount(<Container />).instance();
     expect(instance.input.tagName).to.equal('LABEL');
   });
+
+  it('should properly size itself when rendered as a Col', () => {
+    mount(<FormLabel column="sm">Label</FormLabel>).assertSingle(
+      'label.col-form-label-sm',
+    );
+    mount(<FormLabel column>Label</FormLabel>).assertSingle(
+      'label.col-form-label',
+    );
+    mount(<FormLabel column="lg">Label</FormLabel>).assertSingle(
+      'label.col-form-label-lg',
+    );
+    let labelComponent = mount(<FormLabel>Label</FormLabel>);
+    labelComponent.assertNone('label.col-form-label');
+    labelComponent.assertNone('label.col-form-label-sm');
+    labelComponent.assertNone('label.col-form-label-lg');
+  });
 });

www/src/examples/Form/FormLabelSizing.js

@@ -0,0 +1,28 @@
+<Form.Group>
+  <Form.Row>
+    <Form.Label column="lg" lg={2}>
+      Large Text
+    </Form.Label>
+    <Col>
+      <Form.Control size="lg" type="text" placeholder="Large text" />
+    </Col>
+  </Form.Row>
+  <br />
+  <Form.Row>
+    <Form.Label column lg={2}>
+      Normal Text
+    </Form.Label>
+    <Col>
+      <Form.Control type="text" placeholder="Normal text" />
+    </Col>
+  </Form.Row>
+  <br />
+  <Form.Row>
+    <Form.Label column="sm" lg={2}>
+      Small Text
+    </Form.Label>
+    <Col>
+      <Form.Control size="sm" type="text" placeholder="Small text" />
+    </Col>
+  </Form.Row>
+</Form.Group>;

www/src/examples/Form/InputSizes.js

@@ -1,7 +1,7 @@
-<>
+<Form.Group>
   <Form.Control size="lg" type="text" placeholder="Large text" />
   <br />
   <Form.Control type="text" placeholder="Normal text" />
   <br />
   <Form.Control size="sm" type="text" placeholder="Small text" />
-</>;
+</Form.Group>;

www/src/pages/components/forms.js

@@ -12,6 +12,7 @@ import CheckCustomInline from '../../examples/Form/CheckCustomInline';
 import CheckInline from '../../examples/Form/CheckInline';
 import FormGroup from '../../examples/Form/FormGroup';
 import FormRow from '../../examples/Form/FormRow';
+import FormLabelSizing from '../../examples/Form/FormLabelSizing';
 import GridBasic from '../../examples/Form/GridBasic';
 import GridComplex from '../../examples/Form/GridComplex';
 import Horizontal from '../../examples/Form/Horizontal';
@@ -70,8 +71,9 @@ export default withLayout(function FormControlsSection({ data }) {
         Sizing
       </LinkedHeading>
       <p>
-        Use <code>size</code> on <code>{'<FormControl>'}</code> to change the
-        size of inputs.
+        Use <code>size</code> on <code>{'<FormControl>'}</code> and{' '}
+        <code>{'<FormLabel>'}</code> to change the size of inputs and labels
+        respectively.
       </p>
       <ReactPlayground codeText={FormInputSizes} />
       <LinkedHeading h="3" id="forms-input-Plaintext">
@@ -182,7 +184,7 @@ export default withLayout(function FormControlsSection({ data }) {
       <ReactPlayground codeText={FormRow} />
       <p>More complex layouts can also be created with the grid system.</p>
       <ReactPlayground codeText={GridComplex} />
-      <LinkedHeading h="3" id="forms-layout-form-row">
+      <LinkedHeading h="3" id="horizontal-forms">
         Horizontal forms
       </LinkedHeading>
       <p>
@@ -191,6 +193,14 @@ export default withLayout(function FormControlsSection({ data }) {
         gutters for tighter and more compact layouts.
       </p>
       <ReactPlayground codeText={Horizontal} />
+      <LinkedHeading h="4" id="horizontal-forms-label-sizing">
+        Horizontal forms label sizing
+      </LinkedHeading>
+      <p>
+        You can size the <code>{'<FormLabel>'}</code> using the column prop as
+        shown.
+      </p>
+      <ReactPlayground codeText={FormLabelSizing} />
 
       <LinkedHeading h="2" id="forms-validation">
         Validation