fix(FormControl): add size support when using plaintext

react-bootstrap · Jul 24, 2023 · 452fea8 · 452fea8
1 parent f6388aa
commit 452fea8
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 14 deletions.
diff --git a/src/FormControl.tsx b/src/FormControl.tsx
@@ -126,16 +126,6 @@ const FormControl: BsPrefixRefForwardingComponent<'input', FormControlProps> =
 
       bsPrefix = useBootstrapPrefix(bsPrefix, 'form-control');
 
-      let classes;
-      if (plaintext) {
-        classes = { [`${bsPrefix}-plaintext`]: true };
-      } else {
-        classes = {
-          [bsPrefix]: true,
-          [`${bsPrefix}-${size}`]: size,
-        };
-      }
-
       warning(
         controlId == null || !id,
         '`controlId` is ignored on `<FormControl>` when `id` is specified.',
@@ -151,10 +141,12 @@ const FormControl: BsPrefixRefForwardingComponent<'input', FormControlProps> =
           id={id || controlId}
           className={classNames(
             className,
-            classes,
-            isValid && `is-valid`,
-            isInvalid && `is-invalid`,
-            type === 'color' && `${bsPrefix}-color`,
+            !plaintext && [bsPrefix],
+            plaintext && [`${bsPrefix}-plaintext`],
+            size && [`${bsPrefix}-${size}`],
+            type === 'color' && [`${bsPrefix}-color`],
+            isValid && 'is-valid',
+            isInvalid && 'is-invalid',
           )}
         />
       );

diff --git a/test/FormControlSpec.tsx b/test/FormControlSpec.tsx
@@ -46,6 +46,16 @@ describe('<FormControl>', () => {
     element.classList.contains('form-control-plaintext').should.be.true;
   });
 
+  it('should support plaintext inputs with size', () => {
+    const { getByTestId } = render(
+      <FormControl plaintext size="sm" data-testid="test-id" />,
+    );
+
+    const element = getByTestId('test-id');
+    element.classList.length.should.equal(2);
+    element.classList.contains('form-control-sm').should.be.true;
+  });
+
   it('should support type=color', () => {
     const { getByTestId } = render(
       <FormControl type="color" data-testid="test-id" />,