fix(FormCheck)!: use feedbackType to control feedback type (#6015)

BREAKING CHANGE: FormCheck feedback type is now controlled by `feedbackType` instead of `isValid` and `isInvalid`.
react-bootstrap · Sep 6, 2021 · ab9e080 · ab9e080
1 parent 0765f8a
commit ab9e080
Show file tree

Hide file tree

Showing 7 changed files with 28 additions and 11 deletions.
diff --git a/src/Feedback.tsx b/src/Feedback.tsx
@@ -3,13 +3,15 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import { AsProp, BsPrefixRefForwardingComponent } from './helpers';
 
+export type FeedbackType = 'valid' | 'invalid';
+
 export interface FeedbackProps
   extends AsProp,
     React.HTMLAttributes<HTMLElement> {
   // I think this is because we use BsPrefixRefForwardingComponent below
   // which includes bsPrefix.
   bsPrefix?: never;
-  type?: 'valid' | 'invalid';
+  type?: FeedbackType;
   tooltip?: boolean;
 }
 

diff --git a/src/FormCheck.tsx b/src/FormCheck.tsx
@@ -2,7 +2,7 @@ import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import * as React from 'react';
 import { useContext, useMemo } from 'react';
-import Feedback from './Feedback';
+import Feedback, { FeedbackType } from './Feedback';
 import FormCheckInput from './FormCheckInput';
 import FormCheckLabel from './FormCheckLabel';
 import FormContext from './FormContext';
@@ -22,6 +22,7 @@ export interface FormCheckProps
   isInvalid?: boolean;
   feedbackTooltip?: boolean;
   feedback?: React.ReactNode;
+  feedbackType?: FeedbackType;
   bsSwitchPrefix?: string;
 }
 
@@ -127,6 +128,7 @@ const FormCheck: BsPrefixRefForwardingComponent<'input', FormCheckProps> =
         isInvalid = false,
         feedbackTooltip = false,
         feedback,
+        feedbackType,
         className,
         style,
         title = '',
@@ -181,11 +183,8 @@ const FormCheck: BsPrefixRefForwardingComponent<'input', FormCheckProps> =
                 {hasLabel && (
                   <FormCheckLabel title={title}>{label}</FormCheckLabel>
                 )}
-                {(isValid || isInvalid) && (
-                  <Feedback
-                    type={isValid ? 'valid' : 'invalid'}
-                    tooltip={feedbackTooltip}
-                  >
+                {feedback && (
+                  <Feedback type={feedbackType} tooltip={feedbackTooltip}>
                     {feedback}
                   </Feedback>
                 )}

diff --git a/test/FormCheckSpec.js b/test/FormCheckSpec.js
@@ -120,7 +120,9 @@ describe('<FormCheck>', () => {
   });
 
   it('Should render valid feedback properly', () => {
-    const wrapper = mount(<FormCheck label="My label" isValid />);
+    const wrapper = mount(
+      <FormCheck label="My label" feedbackType="valid" feedback="test" />,
+    );
     const feedback = wrapper.find('Feedback');
 
     expect(feedback.prop('type')).to.equal('valid');
@@ -129,7 +131,7 @@ describe('<FormCheck>', () => {
 
   it('Should render invalid feedback properly', () => {
     const wrapper = mount(
-      <FormCheck label="My label" isValid={false} isInvalid />,
+      <FormCheck label="My label" feedbackType="invalid" feedback="test" />,
     );
     const feedback = wrapper.find('Feedback');
 
@@ -139,7 +141,12 @@ describe('<FormCheck>', () => {
 
   it('Should render valid feedback tooltip properly', () => {
     const wrapper = mount(
-      <FormCheck label="My label" isValid feedbackTooltip />,
+      <FormCheck
+        label="My label"
+        feedbackType="valid"
+        feedback="test"
+        feedbackTooltip
+      />,
     );
     const feedback = wrapper.find('Feedback');
 
@@ -149,7 +156,12 @@ describe('<FormCheck>', () => {
 
   it('Should render invalid feedback tooltip properly', () => {
     const wrapper = mount(
-      <FormCheck label="My label" isValid={false} isInvalid feedbackTooltip />,
+      <FormCheck
+        label="My label"
+        feedbackType="invalid"
+        feedback="test"
+        feedbackTooltip
+      />,
     );
     const feedback = wrapper.find('Feedback');
 

diff --git a/www/src/examples/Form/ValidationFormik.js b/www/src/examples/Form/ValidationFormik.js
@@ -132,6 +132,7 @@ function FormExample() {
               onChange={handleChange}
               isInvalid={!!errors.terms}
               feedback={errors.terms}
+              feedbackType="invalid"
               id="validationFormik0"
             />
           </Form.Group>

diff --git a/www/src/examples/Form/ValidationNative.js b/www/src/examples/Form/ValidationNative.js
@@ -78,6 +78,7 @@ function FormExample() {
           required
           label="Agree to terms and conditions"
           feedback="You must agree before submitting."
+          feedbackType="invalid"
         />
       </Form.Group>
       <Button type="submit">Submit form</Button>

diff --git a/www/src/examples/Form/ValidationTooltips.js b/www/src/examples/Form/ValidationTooltips.js
@@ -172,6 +172,7 @@ function FormExample() {
               onChange={handleChange}
               isInvalid={!!errors.terms}
               feedback={errors.terms}
+              feedbackType="invalid"
               id="validationFormik106"
               feedbackTooltip
             />

diff --git a/www/src/pages/migrating.mdx b/www/src/pages/migrating.mdx
@@ -78,6 +78,7 @@ Below is a _rough_ account of the breaking API changes as well as the minimal ch
 ### FormCheck
 
 - removed `bsCustomPrefix` and `custom` in favor of `bsSwitchPrefix`.
+- feedback type is now controlled by `feedbackType` instead of `isValid` and `isInvalid`.
 
 #### FormCheckInput