Skip to content

Commit ab9e080

Browse files
authored
fix(FormCheck)!: use feedbackType to control feedback type (react-bootstrap#6015)
BREAKING CHANGE: FormCheck feedback type is now controlled by `feedbackType` instead of `isValid` and `isInvalid`.
1 parent 0765f8a commit ab9e080

File tree

7 files changed

+28
-11
lines changed

7 files changed

+28
-11
lines changed

src/Feedback.tsx

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,13 +3,15 @@ import * as React from 'react';
33
import PropTypes from 'prop-types';
44
import { AsProp, BsPrefixRefForwardingComponent } from './helpers';
55

6+
export type FeedbackType = 'valid' | 'invalid';
7+
68
export interface FeedbackProps
79
extends AsProp,
810
React.HTMLAttributes<HTMLElement> {
911
// I think this is because we use BsPrefixRefForwardingComponent below
1012
// which includes bsPrefix.
1113
bsPrefix?: never;
12-
type?: 'valid' | 'invalid';
14+
type?: FeedbackType;
1315
tooltip?: boolean;
1416
}
1517

src/FormCheck.tsx

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import classNames from 'classnames';
22
import PropTypes from 'prop-types';
33
import * as React from 'react';
44
import { useContext, useMemo } from 'react';
5-
import Feedback from './Feedback';
5+
import Feedback, { FeedbackType } from './Feedback';
66
import FormCheckInput from './FormCheckInput';
77
import FormCheckLabel from './FormCheckLabel';
88
import FormContext from './FormContext';
@@ -22,6 +22,7 @@ export interface FormCheckProps
2222
isInvalid?: boolean;
2323
feedbackTooltip?: boolean;
2424
feedback?: React.ReactNode;
25+
feedbackType?: FeedbackType;
2526
bsSwitchPrefix?: string;
2627
}
2728

@@ -127,6 +128,7 @@ const FormCheck: BsPrefixRefForwardingComponent<'input', FormCheckProps> =
127128
isInvalid = false,
128129
feedbackTooltip = false,
129130
feedback,
131+
feedbackType,
130132
className,
131133
style,
132134
title = '',
@@ -181,11 +183,8 @@ const FormCheck: BsPrefixRefForwardingComponent<'input', FormCheckProps> =
181183
{hasLabel && (
182184
<FormCheckLabel title={title}>{label}</FormCheckLabel>
183185
)}
184-
{(isValid || isInvalid) && (
185-
<Feedback
186-
type={isValid ? 'valid' : 'invalid'}
187-
tooltip={feedbackTooltip}
188-
>
186+
{feedback && (
187+
<Feedback type={feedbackType} tooltip={feedbackTooltip}>
189188
{feedback}
190189
</Feedback>
191190
)}

test/FormCheckSpec.js

Lines changed: 16 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -120,7 +120,9 @@ describe('<FormCheck>', () => {
120120
});
121121

122122
it('Should render valid feedback properly', () => {
123-
const wrapper = mount(<FormCheck label="My label" isValid />);
123+
const wrapper = mount(
124+
<FormCheck label="My label" feedbackType="valid" feedback="test" />,
125+
);
124126
const feedback = wrapper.find('Feedback');
125127

126128
expect(feedback.prop('type')).to.equal('valid');
@@ -129,7 +131,7 @@ describe('<FormCheck>', () => {
129131

130132
it('Should render invalid feedback properly', () => {
131133
const wrapper = mount(
132-
<FormCheck label="My label" isValid={false} isInvalid />,
134+
<FormCheck label="My label" feedbackType="invalid" feedback="test" />,
133135
);
134136
const feedback = wrapper.find('Feedback');
135137

@@ -139,7 +141,12 @@ describe('<FormCheck>', () => {
139141

140142
it('Should render valid feedback tooltip properly', () => {
141143
const wrapper = mount(
142-
<FormCheck label="My label" isValid feedbackTooltip />,
144+
<FormCheck
145+
label="My label"
146+
feedbackType="valid"
147+
feedback="test"
148+
feedbackTooltip
149+
/>,
143150
);
144151
const feedback = wrapper.find('Feedback');
145152

@@ -149,7 +156,12 @@ describe('<FormCheck>', () => {
149156

150157
it('Should render invalid feedback tooltip properly', () => {
151158
const wrapper = mount(
152-
<FormCheck label="My label" isValid={false} isInvalid feedbackTooltip />,
159+
<FormCheck
160+
label="My label"
161+
feedbackType="invalid"
162+
feedback="test"
163+
feedbackTooltip
164+
/>,
153165
);
154166
const feedback = wrapper.find('Feedback');
155167

www/src/examples/Form/ValidationFormik.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -132,6 +132,7 @@ function FormExample() {
132132
onChange={handleChange}
133133
isInvalid={!!errors.terms}
134134
feedback={errors.terms}
135+
feedbackType="invalid"
135136
id="validationFormik0"
136137
/>
137138
</Form.Group>

www/src/examples/Form/ValidationNative.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ function FormExample() {
7878
required
7979
label="Agree to terms and conditions"
8080
feedback="You must agree before submitting."
81+
feedbackType="invalid"
8182
/>
8283
</Form.Group>
8384
<Button type="submit">Submit form</Button>

www/src/examples/Form/ValidationTooltips.js

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -172,6 +172,7 @@ function FormExample() {
172172
onChange={handleChange}
173173
isInvalid={!!errors.terms}
174174
feedback={errors.terms}
175+
feedbackType="invalid"
175176
id="validationFormik106"
176177
feedbackTooltip
177178
/>

www/src/pages/migrating.mdx

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -78,6 +78,7 @@ Below is a _rough_ account of the breaking API changes as well as the minimal ch
7878
### FormCheck
7979

8080
- removed `bsCustomPrefix` and `custom` in favor of `bsSwitchPrefix`.
81+
- feedback type is now controlled by `feedbackType` instead of `isValid` and `isInvalid`.
8182

8283
#### FormCheckInput
8384

0 commit comments

Comments
 (0)