Skip to content

Commit 0cebff7

Browse files
heath-freenomeheath-freenome
committed
- Added new optionalControlsId() function, using it to add ids to all of the data controls
1 parent 533132d commit 0cebff7

File tree

27 files changed

+281
-75
lines changed

27 files changed

+281
-75
lines changed

‎packages/antd/src/templates/OptionalDataControlsTemplate/index.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,11 @@ export default function OptionalDataControlsTemplate<
1515
S extends StrictRJSFSchema = RJSFSchema,
1616
F extends FormContextType = any,
1717
>(props: OptionalDataControlsTemplateProps<T, S, F>) {
18-
const { registry, label, onAddClick, onRemoveClick } = props;
18+
const { id, registry, label, onAddClick, onRemoveClick } = props;
1919
if (onAddClick) {
2020
return (
2121
<AddButton
22+
id={id}
2223
registry={registry}
2324
className='rjsf-add-optional-data'
2425
onClick={onAddClick}
@@ -31,6 +32,7 @@ export default function OptionalDataControlsTemplate<
3132
} else if (onRemoveClick) {
3233
return (
3334
<RemoveButton
35+
id={id}
3436
registry={registry}
3537
className='rjsf-remove-optional-data'
3638
onClick={onRemoveClick}
@@ -41,5 +43,5 @@ export default function OptionalDataControlsTemplate<
4143
/>
4244
);
4345
}
44-
return <em>{label}</em>;
46+
return <em id={id}>{label}</em>;
4547
}

‎packages/antd/test/__snapshots__/Form.test.tsx.snap‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -6424,6 +6424,7 @@ exports[`single fields optional data controls shows "add" and "remove" optional
64246424
<button
64256425
className="ant-btn css-dev-only-do-not-override-xepvsj ant-btn-default ant-btn-dangerous ant-btn-color-dangerous ant-btn-variant-outlined ant-btn-sm ant-btn-icon-only rjsf-remove-optional-data"
64266426
disabled={false}
6427+
id="root_nestedObjectOptional__optionalRemove"
64276428
onClick={[Function]}
64286429
style={
64296430
{
@@ -6643,6 +6644,7 @@ exports[`single fields optional data controls shows "add" and "remove" optional
66436644
<button
66446645
className="ant-btn css-dev-only-do-not-override-xepvsj ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-sm ant-btn-icon-only rjsf-add-optional-data"
66456646
disabled={false}
6647+
id="root_nestedObjectOptional_deepObjectOptional__optionalAdd"
66466648
onClick={[Function]}
66476649
style={
66486650
{
@@ -7122,6 +7124,7 @@ exports[`single fields optional data controls shows "add" and "remove" optional
71227124
<button
71237125
className="ant-btn css-dev-only-do-not-override-xepvsj ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-sm ant-btn-icon-only rjsf-add-optional-data"
71247126
disabled={false}
7127+
id="root_nestedObjectOptional_deepArrayOptional2__optionalAdd"
71257128
onClick={[Function]}
71267129
style={
71277130
{
@@ -7455,6 +7458,7 @@ exports[`single fields optional data controls shows "add" and "remove" optional
74557458
<button
74567459
className="ant-btn css-dev-only-do-not-override-xepvsj ant-btn-default ant-btn-dangerous ant-btn-color-dangerous ant-btn-variant-outlined ant-btn-sm ant-btn-icon-only rjsf-remove-optional-data"
74577460
disabled={false}
7461+
id="root_nestedArrayOptional__optionalRemove"
74587462
onClick={[Function]}
74597463
style={
74607464
{
@@ -8728,7 +8732,9 @@ exports[`single fields optional data controls shows "add" and "remove" optional
87288732
}
87298733
}
87308734
>
8731-
<em>
8735+
<em
8736+
id="root_nestedObjectOptional_deepObjectOptional__optionalMsg"
8737+
>
87328738
No data for optional field
87338739
</em>
87348740
</div>
@@ -9162,7 +9168,9 @@ exports[`single fields optional data controls shows "add" and "remove" optional
91629168
}
91639169
}
91649170
>
9165-
<em>
9171+
<em
9172+
id="root_nestedObjectOptional_deepArrayOptional2__optionalMsg"
9173+
>
91669174
No data for optional field
91679175
</em>
91689176
</div>
@@ -10504,6 +10512,7 @@ exports[`single fields optional data controls shows "add" optional controls when
1050410512
<button
1050510513
className="ant-btn css-dev-only-do-not-override-xepvsj ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-sm ant-btn-icon-only rjsf-add-optional-data"
1050610514
disabled={false}
10515+
id="root_nestedObjectOptional__optionalAdd"
1050710516
onClick={[Function]}
1050810517
style={
1050910518
{
@@ -10654,6 +10663,7 @@ exports[`single fields optional data controls shows "add" optional controls when
1065410663
<button
1065510664
className="ant-btn css-dev-only-do-not-override-xepvsj ant-btn-default ant-btn-color-default ant-btn-variant-outlined ant-btn-sm ant-btn-icon-only rjsf-add-optional-data"
1065610665
disabled={false}
10666+
id="root_nestedArrayOptional__optionalAdd"
1065710667
onClick={[Function]}
1065810668
style={
1065910669
{
@@ -11540,7 +11550,9 @@ exports[`single fields optional data controls shows "add" optional controls when
1154011550
}
1154111551
}
1154211552
>
11543-
<em>
11553+
<em
11554+
id="root_nestedObjectOptional__optionalMsg"
11555+
>
1154411556
No data for optional field
1154511557
</em>
1154611558
</div>
@@ -11636,7 +11648,9 @@ exports[`single fields optional data controls shows "add" optional controls when
1163611648
}
1163711649
}
1163811650
>
11639-
<em>
11651+
<em
11652+
id="root_nestedArrayOptional__optionalMsg"
11653+
>
1164011654
No data for optional field
1164111655
</em>
1164211656
</div>

‎packages/chakra-ui/src/OptionalDataControlsTemplate/OptionalDataControlsTemplate.tsx‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -16,10 +16,11 @@ export default function OptionalDataControlsTemplate<
1616
S extends StrictRJSFSchema = RJSFSchema,
1717
F extends FormContextType = any,
1818
>(props: OptionalDataControlsTemplateProps<T, S, F>) {
19-
const { registry, label, onAddClick, onRemoveClick } = props;
19+
const { id, registry, label, onAddClick, onRemoveClick } = props;
2020
if (onAddClick) {
2121
return (
2222
<ChakraIconButton
23+
id={id}
2324
registry={registry}
2425
className='rjsf-add-optional-data btn-sm'
2526
onClick={onAddClick}
@@ -32,6 +33,7 @@ export default function OptionalDataControlsTemplate<
3233
} else if (onRemoveClick) {
3334
return (
3435
<RemoveButton
36+
id={id}
3537
registry={registry}
3638
className='rjsf-remove-optional-data btn-sm'
3739
onClick={onRemoveClick}
@@ -41,5 +43,5 @@ export default function OptionalDataControlsTemplate<
4143
/>
4244
);
4345
}
44-
return <em>{label}</em>;
46+
return <em id={id}>{label}</em>;
4547
}

‎packages/chakra-ui/test/__snapshots__/Form.test.tsx.snap‎

Lines changed: 18 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -10756,6 +10756,7 @@ exports[`single fields optional data controls shows "add" and "remove" optional
1075610756
<button
1075710757
aria-label="Remove data for optional field"
1075810758
className="chakra-button rjsf-remove-optional-data btn-sm emotion-12"
10759+
id="root_nestedObjectOptional__optionalRemove"
1075910760
onClick={[Function]}
1076010761
title="Remove data for optional field"
1076110762
type="button"
@@ -10879,6 +10880,7 @@ exports[`single fields optional data controls shows "add" and "remove" optional
1087910880
<button
1088010881
aria-label="Add data for optional field"
1088110882
className="chakra-button rjsf-add-optional-data btn-sm emotion-12"
10883+
id="root_nestedObjectOptional_deepObjectOptional__optionalAdd"
1088210884
onClick={[Function]}
1088310885
title="Add data for optional field"
1088410886
type="button"
@@ -11118,6 +11120,7 @@ exports[`single fields optional data controls shows "add" and "remove" optional
1111811120
<button
1111911121
aria-label="Add data for optional field"
1112011122
className="chakra-button rjsf-add-optional-data btn-sm emotion-12"
11123+
id="root_nestedObjectOptional_deepArrayOptional2__optionalAdd"
1112111124
onClick={[Function]}
1112211125
title="Add data for optional field"
1112311126
type="button"
@@ -11275,6 +11278,7 @@ exports[`single fields optional data controls shows "add" and "remove" optional
1127511278
<button
1127611279
aria-label="Remove data for optional field"
1127711280
className="chakra-button rjsf-remove-optional-data btn-sm emotion-12"
11281+
id="root_nestedArrayOptional__optionalRemove"
1127811282
onClick={[Function]}
1127911283
title="Remove data for optional field"
1128011284
type="button"
@@ -13008,7 +13012,9 @@ exports[`single fields optional data controls shows "add" and "remove" optional
1300813012
className="emotion-5"
1300913013
>
1301013014
<div>
13011-
<em>
13015+
<em
13016+
id="root_nestedObjectOptional_deepObjectOptional__optionalMsg"
13017+
>
1301213018
No data for optional field
1301313019
</em>
1301413020
</div>
@@ -13224,7 +13230,9 @@ exports[`single fields optional data controls shows "add" and "remove" optional
1322413230
className="emotion-39"
1322513231
>
1322613232
<div>
13227-
<em>
13233+
<em
13234+
id="root_nestedObjectOptional_deepArrayOptional2__optionalMsg"
13235+
>
1322813236
No data for optional field
1322913237
</em>
1323013238
</div>
@@ -14922,6 +14930,7 @@ exports[`single fields optional data controls shows "add" optional controls when
1492214930
<button
1492314931
aria-label="Add data for optional field"
1492414932
className="chakra-button rjsf-add-optional-data btn-sm emotion-12"
14933+
id="root_nestedObjectOptional__optionalAdd"
1492514934
onClick={[Function]}
1492614935
title="Add data for optional field"
1492714936
type="button"
@@ -14994,6 +15003,7 @@ exports[`single fields optional data controls shows "add" optional controls when
1499415003
<button
1499515004
aria-label="Add data for optional field"
1499615005
className="chakra-button rjsf-add-optional-data btn-sm emotion-12"
15006+
id="root_nestedArrayOptional__optionalAdd"
1499715007
onClick={[Function]}
1499815008
title="Add data for optional field"
1499915009
type="button"
@@ -16322,7 +16332,9 @@ exports[`single fields optional data controls shows "add" optional controls when
1632216332
className="emotion-5"
1632316333
>
1632416334
<div>
16325-
<em>
16335+
<em
16336+
id="root_nestedObjectOptional__optionalMsg"
16337+
>
1632616338
No data for optional field
1632716339
</em>
1632816340
</div>
@@ -16366,7 +16378,9 @@ exports[`single fields optional data controls shows "add" optional controls when
1636616378
className="emotion-17"
1636716379
>
1636816380
<div>
16369-
<em>
16381+
<em
16382+
id="root_nestedArrayOptional__optionalMsg"
16383+
>
1637016384
No data for optional field
1637116385
</em>
1637216386
</div>

‎packages/core/src/components/fields/OptionalDataControlsField.tsx‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import {
55
getTemplate,
66
getUiOptions,
77
isFormDataAvailable,
8+
optionalControlsId,
89
OptionalDataControlsTemplateProps,
910
RJSFSchema,
1011
StrictRJSFSchema,
@@ -41,17 +42,21 @@ export default function OptionalDataControlsField<
4142
uiOptions,
4243
);
4344
const hasFormData = isFormDataAvailable(formData);
45+
let id: string;
4446
let label: string | undefined;
4547
let onAddClick: OptionalDataControlsTemplateProps['onAddClick'];
4648
let onRemoveClick: OptionalDataControlsTemplateProps['onRemoveClick'];
4749
if (disabled || readonly) {
50+
id = optionalControlsId(fieldPathId, 'Msg');
4851
label = hasFormData ? undefined : translateString(TranslatableString.OptionalObjectEmptyMsg);
4952
} else {
5053
const labelEnum = hasFormData ? TranslatableString.OptionalObjectRemove : TranslatableString.OptionalObjectAdd;
5154
label = translateString(labelEnum);
5255
if (hasFormData) {
56+
id = optionalControlsId(fieldPathId, 'Remove');
5357
onRemoveClick = () => onChange(undefined as T, fieldPathId.path, errorSchema);
5458
} else {
59+
id = optionalControlsId(fieldPathId, 'Add');
5560
onAddClick = () => {
5661
// If it has form data, store an empty object, otherwise use get the default form state and use it
5762
let newFormData: unknown = schemaUtils.getDefaultFormState(schema, formData, 'excludeObjectChildren');
@@ -66,6 +71,7 @@ export default function OptionalDataControlsField<
6671
return (
6772
label && (
6873
<OptionalDataControlsTemplate
74+
id={id}
6975
registry={registry}
7076
schema={schema}
7177
uiSchema={uiSchema}

‎packages/core/src/components/templates/OptionalDataControlsTemplate.tsx‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,10 +15,11 @@ export default function OptionalDataControlsTemplate<
1515
S extends StrictRJSFSchema = RJSFSchema,
1616
F extends FormContextType = any,
1717
>(props: OptionalDataControlsTemplateProps<T, S, F>) {
18-
const { registry, label, onAddClick, onRemoveClick } = props;
18+
const { id, registry, label, onAddClick, onRemoveClick } = props;
1919
if (onAddClick) {
2020
return (
2121
<IconButton
22+
id={id}
2223
registry={registry}
2324
icon='plus'
2425
className='rjsf-add-optional-data btn-sm'
@@ -29,6 +30,7 @@ export default function OptionalDataControlsTemplate<
2930
} else if (onRemoveClick) {
3031
return (
3132
<IconButton
33+
id={id}
3234
registry={registry}
3335
icon='remove'
3436
className='rjsf-remove-optional-data btn-sm'

‎packages/core/test/__snapshots__/FormSnap.test.tsx.snap‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1966,6 +1966,7 @@ exports[`single fields optional data controls shows "add" and "remove" optional
19661966
>
19671967
<button
19681968
className="btn btn-default rjsf-remove-optional-data btn-sm"
1969+
id="root_nestedObjectOptional__optionalRemove"
19691970
onClick={[Function]}
19701971
title="Remove data for optional field"
19711972
type="button"
@@ -2024,6 +2025,7 @@ exports[`single fields optional data controls shows "add" and "remove" optional
20242025
>
20252026
<button
20262027
className="btn btn-default rjsf-add-optional-data btn-sm"
2028+
id="root_nestedObjectOptional_deepObjectOptional__optionalAdd"
20272029
onClick={[Function]}
20282030
title="Add data for optional field"
20292031
type="button"
@@ -2138,6 +2140,7 @@ exports[`single fields optional data controls shows "add" and "remove" optional
21382140
>
21392141
<button
21402142
className="btn btn-default rjsf-add-optional-data btn-sm"
2143+
id="root_nestedObjectOptional_deepArrayOptional2__optionalAdd"
21412144
onClick={[Function]}
21422145
title="Add data for optional field"
21432146
type="button"
@@ -2217,6 +2220,7 @@ exports[`single fields optional data controls shows "add" and "remove" optional
22172220
>
22182221
<button
22192222
className="btn btn-default rjsf-remove-optional-data btn-sm"
2223+
id="root_nestedArrayOptional__optionalRemove"
22202224
onClick={[Function]}
22212225
title="Remove data for optional field"
22222226
type="button"
@@ -3052,6 +3056,7 @@ exports[`single fields optional data controls shows "add" optional controls when
30523056
>
30533057
<button
30543058
className="btn btn-default rjsf-add-optional-data btn-sm"
3059+
id="root_nestedObjectOptional__optionalAdd"
30553060
onClick={[Function]}
30563061
title="Add data for optional field"
30573062
type="button"
@@ -3085,6 +3090,7 @@ exports[`single fields optional data controls shows "add" optional controls when
30853090
>
30863091
<button
30873092
className="btn btn-default rjsf-add-optional-data btn-sm"
3093+
id="root_nestedArrayOptional__optionalAdd"
30883094
onClick={[Function]}
30893095
title="Add data for optional field"
30903096
type="button"

‎packages/daisyui/src/templates/OptionalDataControlsTemplate/OptionalDataControlsTemplate.tsx‎

Lines changed: 10 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,11 @@ export default function OptionalDataControlsTemplate<
1818
S extends StrictRJSFSchema = RJSFSchema,
1919
F extends FormContextType = any,
2020
>(props: OptionalDataControlsTemplateProps<T, S, F>) {
21-
const { registry, label, onAddClick, onRemoveClick } = props;
21+
const { id, registry, label, onAddClick, onRemoveClick } = props;
2222
if (onAddClick) {
2323
return (
2424
<DaisyUIButton
25+
id={id}
2526
registry={registry}
2627
iconType='info'
2728
icon={faPlus as IconDefinition}
@@ -32,8 +33,14 @@ export default function OptionalDataControlsTemplate<
3233
);
3334
} else if (onRemoveClick) {
3435
return (
35-
<RemoveButton registry={registry} className='rjsf-remove-optional-data' onClick={onRemoveClick} title={label} />
36+
<RemoveButton
37+
id={id}
38+
registry={registry}
39+
className='rjsf-remove-optional-data'
40+
onClick={onRemoveClick}
41+
title={label}
42+
/>
3643
);
3744
}
38-
return <em>{label}</em>;
45+
return <em id={id}>{label}</em>;
3946
}

0 commit comments

Comments
 (0)