fix(FormText): 'muted' prop bug in <FormText />. (#3901)

react-bootstrap · Jun 14, 2019 · 0bb8a6f · 0bb8a6f
1 parent d0e259c
commit 0bb8a6f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 8 deletions.
diff --git a/src/FormText.js b/src/FormText.js
@@ -29,15 +29,12 @@ const propTypes = {
 
 const FormText = React.forwardRef(
   // Need to define the default "as" during prop destructuring to be compatible with styled-components github.com/react-bootstrap/react-bootstrap/issues/3595
-  ({ bsPrefix, className, as: Component = 'small', ...props }, ref) => {
+  ({ bsPrefix, className, as: Component = 'small', muted, ...props }, ref) => {
     bsPrefix = useBootstrapPrefix(bsPrefix, 'form-text');
-    return (
-      <Component
-        {...props}
-        ref={ref}
-        className={classNames(className, bsPrefix)}
-      />
-    );
+
+    const classes = classNames(className, bsPrefix, muted && 'text-muted');
+
+    return <Component {...props} ref={ref} className={classes} />;
   },
 );
 

diff --git a/test/FormTextSpec.js b/test/FormTextSpec.js
@@ -19,4 +19,17 @@ describe('<FormText>', () => {
   it('Should have small as default component', () => {
     mount(<FormText />).assertSingle('small');
   });
+
+  it('Should have "form-text" & "text-muted" class', () => {
+    expect(
+      mount(<FormText muted />)
+        .find('small')
+        .hasClass('form-text'),
+    ).to.equal(true);
+    expect(
+      mount(<FormText muted />)
+        .find('small')
+        .hasClass('text-muted'),
+    ).to.equal(true);
+  });
 });