Skip to content

Commit 7a65aab

Browse files
adamkudrnaadamkudrna
committed
Allow check fields and selectable fields to render as required #487
Users may find themselves in a situation where the input is not required (i.e. making the input checked), but they also don't want to render the field as optional because not choosing an option can be perfectly valid. For this case, there is the `renderAsRequired` prop. This affects `CheckboxField`, `Radio`, `SelectField`, and `Toggle`. Closes #487
1 parent d3264dd commit 7a65aab

File tree

13 files changed

+266
-8
lines changed

13 files changed

+266
-8
lines changed

‎src/components/CheckboxField/CheckboxField.jsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,7 @@ export const CheckboxField = React.forwardRef((props, ref) => {
1515
isLabelVisible,
1616
label,
1717
labelPosition,
18+
renderAsRequired,
1819
required,
1920
validationState,
2021
validationText,
@@ -30,7 +31,7 @@ export const CheckboxField = React.forwardRef((props, ref) => {
3031
context && context.layout === 'horizontal' ? styles.isRootLayoutHorizontal : styles.isRootLayoutVertical,
3132
labelPosition === 'before' && styles.hasRootLabelBefore,
3233
disabled && styles.isRootDisabled,
33-
required && styles.isRootRequired,
34+
(renderAsRequired || required) && styles.isRootRequired,
3435
getRootValidationStateClassName(validationState, styles),
3536
)}
3637
htmlFor={id}
@@ -82,6 +83,7 @@ CheckboxField.defaultProps = {
8283
id: undefined,
8384
isLabelVisible: true,
8485
labelPosition: 'after',
86+
renderAsRequired: false,
8587
required: false,
8688
validationState: null,
8789
validationText: null,
@@ -120,7 +122,11 @@ CheckboxField.propTypes = {
120122
*/
121123
labelPosition: PropTypes.oneOf(['before', 'after']),
122124
/**
123-
* If `true`, the input will be required.
125+
* If `true`, the input will be rendered as if it was required.
126+
*/
127+
renderAsRequired: PropTypes.bool,
128+
/**
129+
* If `true`, the input will be made and rendered as required, regardless of the `renderAsRequired` prop.
124130
*/
125131
required: PropTypes.bool,
126132
/**

‎src/components/CheckboxField/README.md‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -186,6 +186,46 @@ React.createElement(() => {
186186
});
187187
```
188188

189+
### Required State
190+
191+
The required state indicates that the input is mandatory.
192+
193+
```docoff-react-preview
194+
React.createElement(() => {
195+
const [agree, setAgree] = React.useState(true);
196+
return (
197+
<CheckboxField
198+
checked={agree}
199+
label="I agree"
200+
onChange={() => setAgree(!agree)}
201+
required
202+
/>
203+
);
204+
});
205+
```
206+
207+
However, you may find yourself in a situation where the input is not required
208+
(i.e. making the input checked), but you also don't want to render the field as
209+
optional because the unchecked state can be perfectly valid. For this case,
210+
there is the `renderAsRequired` prop:
211+
212+
```docoff-react-preview
213+
React.createElement(() => {
214+
const [agree, setAgree] = React.useState(true);
215+
return (
216+
<CheckboxField
217+
checked={agree}
218+
label="I agree"
219+
onChange={() => setAgree(!agree)}
220+
renderAsRequired
221+
/>
222+
);
223+
});
224+
```
225+
226+
It renders the field as required, but doesn't add the `required` attribute to
227+
the actual input.
228+
189229
### Disabled State
190230

191231
Disabled state makes the input unavailable.

‎src/components/CheckboxField/__tests__/CheckboxField.test.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,7 @@ import { helpTextPropTest } from '../../../../tests/propTests/helpTextPropTest';
1111
import { formLayoutProviderTest } from '../../../../tests/providerTests/formLayoutProviderTest';
1212
import { isLabelVisibleTest } from '../../../../tests/propTests/isLabelVisibleTest';
1313
import { labelPropTest } from '../../../../tests/propTests/labelPropTest';
14+
import { renderAsRequiredPropTest } from '../../../../tests/propTests/renderAsRequiredPropTest';
1415
import { requiredPropTest } from '../../../../tests/propTests/requiredPropTest';
1516
import { validationStatePropTest } from '../../../../tests/propTests/validationStatePropTest';
1617
import { validationTextPropTest } from '../../../../tests/propTests/validationTextPropTest';
@@ -43,6 +44,7 @@ describe('rendering', () => {
4344
],
4445
...isLabelVisibleTest(),
4546
...labelPropTest(),
47+
...renderAsRequiredPropTest,
4648
...requiredPropTest,
4749
...validationStatePropTest,
4850
...validationTextPropTest,

‎src/components/Radio/README.md‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -237,6 +237,74 @@ have.
237237
})
238238
```
239239

240+
### Required State
241+
242+
The required state indicates that the input is mandatory.
243+
244+
```docoff-react-preview
245+
React.createElement(() => {
246+
const [fruit, setFruit] = React.useState('apple');
247+
return (
248+
<Radio
249+
label="Your favourite fruit"
250+
onChange={(e) => setFruit(e.target.value)}
251+
options={[
252+
{
253+
label: 'Apple',
254+
value: 'apple',
255+
},
256+
{
257+
label: 'Banana',
258+
value: 'banana',
259+
},
260+
{
261+
label: 'Grapefruit',
262+
value: 'grapefruit',
263+
},
264+
]}
265+
value={fruit}
266+
required
267+
/>
268+
);
269+
})
270+
```
271+
272+
However, you may find yourself in a situation where the input is not required
273+
(i.e. making the input checked), but you also don't want to render the field as
274+
optional because not choosing an option can be perfectly valid. For this case,
275+
there is the `renderAsRequired` prop:
276+
277+
```docoff-react-preview
278+
React.createElement(() => {
279+
const [fruit, setFruit] = React.useState('apple');
280+
return (
281+
<Radio
282+
label="Your favourite fruit"
283+
onChange={(e) => setFruit(e.target.value)}
284+
options={[
285+
{
286+
label: 'Apple',
287+
value: 'apple',
288+
},
289+
{
290+
label: 'Banana',
291+
value: 'banana',
292+
},
293+
{
294+
label: 'Grapefruit',
295+
value: 'grapefruit',
296+
},
297+
]}
298+
value={fruit}
299+
renderAsRequired
300+
/>
301+
);
302+
})
303+
```
304+
305+
It renders the field as required, but doesn't add the `required` attribute to
306+
the actual input.
307+
240308
### Disabled State
241309

242310
It's possible to disable just some options or the whole set.

‎src/components/Radio/Radio.jsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ export const Radio = ({
1616
label,
1717
layout,
1818
options,
19+
renderAsRequired,
1920
required,
2021
validationState,
2122
validationText,
@@ -33,7 +34,7 @@ export const Radio = ({
3334
? styles.isRootLayoutHorizontal
3435
: styles.isRootLayoutVertical,
3536
disabled && styles.isRootDisabled,
36-
required && styles.isRootRequired,
37+
(renderAsRequired || required) && styles.isRootRequired,
3738
getRootValidationStateClassName(validationState, styles),
3839
)}
3940
disabled={disabled}
@@ -116,6 +117,7 @@ Radio.defaultProps = {
116117
id: undefined,
117118
isLabelVisible: true,
118119
layout: 'vertical',
120+
renderAsRequired: false,
119121
required: false,
120122
validationState: null,
121123
validationText: null,
@@ -181,7 +183,11 @@ Radio.propTypes = {
181183
]),
182184
})).isRequired,
183185
/**
184-
* If `true`, the input will be required.
186+
* If `true`, the input will be rendered as if it was required.
187+
*/
188+
renderAsRequired: PropTypes.bool,
189+
/**
190+
* If `true`, the input will be made and rendered as required, regardless of the `renderAsRequired` prop.
185191
*/
186192
required: PropTypes.bool,
187193
/**

‎src/components/Radio/__tests__/Radio.test.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,7 @@ import { formLayoutProviderTest } from '../../../../tests/providerTests/formLayo
1010
import { isLabelVisibleTest } from '../../../../tests/propTests/isLabelVisibleTest';
1111
import { labelPropTest } from '../../../../tests/propTests/labelPropTest';
1212
import { layoutPropTest } from '../../../../tests/propTests/layoutPropTest';
13+
import { renderAsRequiredPropTest } from '../../../../tests/propTests/renderAsRequiredPropTest';
1314
import { requiredPropTest } from '../../../../tests/propTests/requiredPropTest';
1415
import { validationStatePropTest } from '../../../../tests/propTests/validationStatePropTest';
1516
import { validationTextPropTest } from '../../../../tests/propTests/validationTextPropTest';
@@ -83,6 +84,7 @@ describe('rendering', () => {
8384
expect(within(rootElement).getByLabelText('option 2')).toBeDisabled();
8485
},
8586
],
87+
...renderAsRequiredPropTest,
8688
...requiredPropTest,
8789
...validationStatePropTest,
8890
...validationTextPropTest,

‎src/components/SelectField/README.md‎

Lines changed: 68 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -592,6 +592,74 @@ React.createElement(() => {
592592
})
593593
```
594594

595+
### Required State
596+
597+
The required state indicates that the input is mandatory.
598+
599+
```docoff-react-preview
600+
React.createElement(() => {
601+
const [fruit, setFruit] = React.useState('apple');
602+
return (
603+
<SelectField
604+
label="Your favourite fruit"
605+
onChange={(e) => setFruit(e.target.value)}
606+
options={[
607+
{
608+
label: 'Apple',
609+
value: 'apple',
610+
},
611+
{
612+
label: 'Banana',
613+
value: 'banana',
614+
},
615+
{
616+
label: 'Grapefruit',
617+
value: 'grapefruit',
618+
},
619+
]}
620+
value={fruit}
621+
required
622+
/>
623+
);
624+
});
625+
```
626+
627+
However, you may find yourself in a situation where the input is not required
628+
(i.e. selecting an option), but you also don't want to render the field as
629+
optional because the unselected state can be perfectly valid. For this case,
630+
there is the `renderAsRequired` prop:
631+
632+
```docoff-react-preview
633+
React.createElement(() => {
634+
const [fruit, setFruit] = React.useState('apple');
635+
return (
636+
<SelectField
637+
label="Your favourite fruit"
638+
onChange={(e) => setFruit(e.target.value)}
639+
options={[
640+
{
641+
label: 'Apple',
642+
value: 'apple',
643+
},
644+
{
645+
label: 'Banana',
646+
value: 'banana',
647+
},
648+
{
649+
label: 'Grapefruit',
650+
value: 'grapefruit',
651+
},
652+
]}
653+
value={fruit}
654+
renderAsRequired
655+
/>
656+
);
657+
});
658+
```
659+
660+
It renders the field as required, but doesn't add the `required` attribute to
661+
the actual input.
662+
595663
### Disabled State
596664

597665
It's possible to disable just some options or the whole input.

‎src/components/SelectField/SelectField.jsx‎

Lines changed: 8 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ export const SelectField = React.forwardRef((props, ref) => {
2121
label,
2222
layout,
2323
options,
24+
renderAsRequired,
2425
required,
2526
size,
2627
validationState,
@@ -43,7 +44,7 @@ export const SelectField = React.forwardRef((props, ref) => {
4344
? styles.isRootLayoutHorizontal
4445
: styles.isRootLayoutVertical,
4546
inputGroupContext && styles.isRootGrouped,
46-
required && styles.isRootRequired,
47+
(renderAsRequired || required) && styles.isRootRequired,
4748
getRootSizeClassName(
4849
resolveContextOrProp(inputGroupContext && inputGroupContext.size, size),
4950
styles,
@@ -136,6 +137,7 @@ SelectField.defaultProps = {
136137
id: undefined,
137138
isLabelVisible: true,
138139
layout: 'vertical',
140+
renderAsRequired: false,
139141
required: false,
140142
size: 'medium',
141143
validationState: null,
@@ -227,7 +229,11 @@ SelectField.propTypes = {
227229
})),
228230
]).isRequired,
229231
/**
230-
* If `true`, the input will be required.
232+
* If `true`, the input will be rendered as if it was required.
233+
*/
234+
renderAsRequired: PropTypes.bool,
235+
/**
236+
* If `true`, the input will be made and rendered as required, regardless of the `renderAsRequired` prop.
231237
*/
232238
required: PropTypes.bool,
233239
/**

‎src/components/SelectField/__tests__/SelectField.test.jsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import { formLayoutProviderTest } from '../../../../tests/providerTests/formLayo
1414
import { isLabelVisibleTest } from '../../../../tests/propTests/isLabelVisibleTest';
1515
import { labelPropTest } from '../../../../tests/propTests/labelPropTest';
1616
import { layoutPropTest } from '../../../../tests/propTests/layoutPropTest';
17+
import { renderAsRequiredPropTest } from '../../../../tests/propTests/renderAsRequiredPropTest';
1718
import { requiredPropTest } from '../../../../tests/propTests/requiredPropTest';
1819
import { sizePropTest } from '../../../../tests/propTests/sizePropTest';
1920
import { validationStatePropTest } from '../../../../tests/propTests/validationStatePropTest';
@@ -107,6 +108,7 @@ describe('rendering', () => {
107108
expect(within(rootElement).getByText('option 4')).toHaveAttribute('id', 'id__item__key');
108109
},
109110
],
111+
...renderAsRequiredPropTest,
110112
...requiredPropTest,
111113
...sizePropTest,
112114
...validationStatePropTest,

0 commit comments

Comments
 (0)