feat(Feedback): Add support for tooltips (#5189)

* feat(Feedback): Add support for tooltips

* Renamed tooltip to feedbackTooltip in FormCheck and FormFile

src/Feedback.js

@@ -9,20 +9,28 @@ const propTypes = {
    * @type {('valid'|'invalid')}
    */
   type: PropTypes.string.isRequired,
+
+  /** Display feedback as a tooltip. */
+  tooltip: PropTypes.bool,
+
   as: PropTypes.elementType,
 };
 
 const defaultProps = {
   type: 'valid',
+  tooltip: false,
 };
 
 const Feedback = 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
-  ({ as: Component = 'div', className, type, ...props }, ref) => (
+  ({ as: Component = 'div', className, type, tooltip, ...props }, ref) => (
     <Component
       {...props}
       ref={ref}
-      className={classNames(className, type && `${type}-feedback`)}
+      className={classNames(
+        className,
+        `${type}-${tooltip ? 'tooltip' : 'feedback'}`,
+      )}
     />
   ),
 );

src/FormCheck.js

@@ -79,6 +79,9 @@ const propTypes = {
   /** Manually style the input as invalid */
   isInvalid: PropTypes.bool.isRequired,
 
+  /** Display feedback as a tooltip. */
+  feedbackTooltip: PropTypes.bool,
+
   /** A message to display when the input is in a validation state */
   feedback: PropTypes.node,
 };
@@ -89,6 +92,7 @@ const defaultProps = {
   disabled: false,
   isValid: false,
   isInvalid: false,
+  feedbackTooltip: false,
   title: '',
 };
 
@@ -102,6 +106,7 @@ const FormCheck = React.forwardRef(
       disabled,
       isValid,
       isInvalid,
+      feedbackTooltip,
       feedback,
       className,
       style,
@@ -165,7 +170,10 @@ const FormCheck = React.forwardRef(
                 <FormCheckLabel title={title}>{label}</FormCheckLabel>
               )}
               {(isValid || isInvalid) && (
-                <Feedback type={isValid ? 'valid' : 'invalid'}>
+                <Feedback
+                  type={isValid ? 'valid' : 'invalid'}
+                  tooltip={feedbackTooltip}
+                >
                   {feedback}
                 </Feedback>
               )}

src/FormFile.js

@@ -73,6 +73,9 @@ const propTypes = {
   /** Manually style the input as invalid */
   isInvalid: PropTypes.bool.isRequired,
 
+  /** Display feedback as a tooltip. */
+  feedbackTooltip: PropTypes.bool,
+
   /** A message to display when the input is in a validation state */
   feedback: PropTypes.node,
 
@@ -103,6 +106,7 @@ const defaultProps = {
   disabled: false,
   isValid: false,
   isInvalid: false,
+  feedbackTooltip: false,
 };
 
 const FormFile = React.forwardRef(
@@ -114,6 +118,7 @@ const FormFile = React.forwardRef(
       disabled,
       isValid,
       isInvalid,
+      feedbackTooltip,
       feedback,
       className,
       style,
@@ -187,7 +192,10 @@ const FormFile = React.forwardRef(
                 </>
               )}
               {(isValid || isInvalid) && (
-                <Feedback type={isValid ? 'valid' : 'invalid'}>
+                <Feedback
+                  type={isValid ? 'valid' : 'invalid'}
+                  tooltip={feedbackTooltip}
+                >
                   {feedback}
                 </Feedback>
               )}

test/FeedbackSpec.js

@@ -7,4 +7,20 @@ describe('<Feedback>', () => {
   it('Should have div as default component', () => {
     mount(<Feedback />).assertSingle('div');
   });
+
+  it('Should render valid feedback', () => {
+    mount(<Feedback type="valid" />).assertSingle('.valid-feedback');
+  });
+
+  it('Should render invalid feedback', () => {
+    mount(<Feedback type="invalid" />).assertSingle('.invalid-feedback');
+  });
+
+  it('Should render valid feedback tooltip', () => {
+    mount(<Feedback type="valid" tooltip />).assertSingle('.valid-tooltip');
+  });
+
+  it('Should render invalid feedback tooltip', () => {
+    mount(<Feedback type="invalid" tooltip />).assertSingle('.invalid-tooltip');
+  });
 });

test/FormCheckSpec.js

@@ -125,4 +125,42 @@ describe('<FormCheck>', () => {
     const wrapper = mount(<FormCheck as={Surrogate} />);
     wrapper.assertSingle('input.extraClass[type="checkbox"]');
   });
+
+  it('Should render valid feedback properly', () => {
+    const wrapper = mount(<FormCheck label="My label" isValid />);
+    const feedback = wrapper.find('Feedback');
+
+    expect(feedback.prop('type')).to.equal('valid');
+    expect(feedback.prop('tooltip')).to.be.false;
+  });
+
+  it('Should render invalid feedback properly', () => {
+    const wrapper = mount(
+      <FormCheck label="My label" isValid={false} isInvalid />,
+    );
+    const feedback = wrapper.find('Feedback');
+
+    expect(feedback.prop('type')).to.equal('invalid');
+    expect(feedback.prop('tooltip')).to.be.false;
+  });
+
+  it('Should render valid feedback tooltip properly', () => {
+    const wrapper = mount(
+      <FormCheck label="My label" isValid feedbackTooltip />,
+    );
+    const feedback = wrapper.find('Feedback');
+
+    expect(feedback.prop('type')).to.equal('valid');
+    expect(feedback.prop('tooltip')).to.be.true;
+  });
+
+  it('Should render invalid feedback tooltip properly', () => {
+    const wrapper = mount(
+      <FormCheck label="My label" isValid={false} isInvalid feedbackTooltip />,
+    );
+    const feedback = wrapper.find('Feedback');
+
+    expect(feedback.prop('type')).to.equal('invalid');
+    expect(feedback.prop('tooltip')).to.be.true;
+  });
 });

test/FormFileSpec.js

@@ -90,4 +90,42 @@ describe('<FormFile>', () => {
     const wrapper = mount(<FormFile as={Surrogate} />);
     wrapper.assertSingle('wrapper-element.extraClass');
   });
+
+  it('Should render valid feedback properly', () => {
+    const wrapper = mount(<FormFile label="My label" isValid />);
+    const feedback = wrapper.find('Feedback');
+
+    expect(feedback.prop('type')).to.equal('valid');
+    expect(feedback.prop('tooltip')).to.be.false;
+  });
+
+  it('Should render invalid feedback properly', () => {
+    const wrapper = mount(
+      <FormFile label="My label" isValid={false} isInvalid />,
+    );
+    const feedback = wrapper.find('Feedback');
+
+    expect(feedback.prop('type')).to.equal('invalid');
+    expect(feedback.prop('tooltip')).to.be.false;
+  });
+
+  it('Should render valid feedback tooltip properly', () => {
+    const wrapper = mount(
+      <FormFile label="My label" isValid feedbackTooltip />,
+    );
+    const feedback = wrapper.find('Feedback');
+
+    expect(feedback.prop('type')).to.equal('valid');
+    expect(feedback.prop('tooltip')).to.be.true;
+  });
+
+  it('Should render invalid feedback tooltip properly', () => {
+    const wrapper = mount(
+      <FormFile label="My label" isValid={false} isInvalid feedbackTooltip />,
+    );
+    const feedback = wrapper.find('Feedback');
+
+    expect(feedback.prop('type')).to.equal('invalid');
+    expect(feedback.prop('tooltip')).to.be.true;
+  });
 });

types/components/Feedback.d.ts

@@ -5,6 +5,7 @@ import { BsPrefixComponent } from './helpers';
 export interface FeedbackProps {
   bsPrefix?: never;
   type?: 'valid' | 'invalid';
+  tooltip?: boolean;
 }
 
 declare class Feedback<

types/components/FormCheck.d.ts

@@ -14,6 +14,7 @@ export interface FormCheckProps {
   type?: 'checkbox' | 'radio' | 'switch';
   isValid?: boolean;
   isInvalid?: boolean;
+  feedbackTooltip?: boolean;
   feedback?: React.ReactNode;
 }
 

types/components/FormFile.d.ts

@@ -11,6 +11,7 @@ export interface FormFileProps {
   custom?: boolean;
   isValid?: boolean;
   isInvalid?: boolean;
+  feedbackTooltip?: boolean;
   feedback?: React.ReactNode;
   lang?: string;
 }

types/simple.test.tsx

@@ -234,6 +234,7 @@ import {
     </Col>
   </Form.Group>
   <Form.File id="custom-file" label="Custom file input" custom />
+  <Form.File id="file-tooltip" label="File tooltip" feedbackTooltip />
   <Form.File
     ref={React.createRef<HTMLInputElement & FormFile>()}
     id="custom-file-ref"
@@ -242,6 +243,8 @@ import {
   />
   <Form.File.Input />
   <Form.Switch label="Switch" disabled />
+  <Form.Check id="check-tooltip" feedbackTooltip />
+  <FormControl.Feedback tooltip />
 </Form>;
 
 <div>