Skip to content

Commit 8cc975c

Browse files
heath-freenomeheath-freenome
committed
Implemented classNames in all theme where it was missing (rjsf-team#3032)
- Updated the `WrapIfAdditional` component to add `classNames` to the outer wrapper in a manner consistent with the `core` theme, for the following themes: - bootstrap-4, chakra-ui, material-ui, mui and semantic-ui - Updated the snapshots to add the missing `classNames` classes
1 parent f36c6ea commit 8cc975c

File tree

21 files changed

+8507
-7635
lines changed

21 files changed

+8507
-7635
lines changed

‎packages/bootstrap-4/src/FieldTemplate/WrapIfAdditional.tsx

+3-2
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ type WrapIfAdditionalProps = { children: React.ReactElement } & Pick<
2121
>;
2222

2323
const WrapIfAdditional = ({
24+
classNames,
2425
children,
2526
disabled,
2627
id,
@@ -37,15 +38,15 @@ const WrapIfAdditional = ({
3738
const additional = ADDITIONAL_PROPERTY_FLAG in schema;
3839

3940
if (!additional) {
40-
return children;
41+
return <div className={classNames}>{children}</div>;
4142
}
4243

4344
const handleBlur = ({ target }: React.FocusEvent<HTMLInputElement>) =>
4445
onKeyChange(target.value);
4546
const keyId = `${id}-key`;
4647

4748
return (
48-
<Row key={keyId}>
49+
<Row className={classNames} key={keyId}>
4950
<Col xs={5}>
5051
<Form.Group>
5152
<Form.Label htmlFor={keyId}>{keyLabel}</Form.Label>

‎packages/bootstrap-4/test/__snapshots__/AdditionalProperties.test.tsx.snap

+111-107
Original file line numberDiff line numberDiff line change
@@ -7,154 +7,158 @@ exports[`AdditionalProperties tests show add button and fields if additionalProp
77
onSubmit={[Function]}
88
>
99
<div
10-
className="form-group"
10+
className="form-group field field-undefined"
1111
>
12-
1312
<div
14-
className="p-0 container-fluid"
13+
className="form-group"
1514
>
15+
1616
<div
17-
className="row"
18-
style={
19-
Object {
20-
"marginBottom": "10px",
21-
}
22-
}
17+
className="p-0 container-fluid"
2318
>
2419
<div
25-
className="col-12"
20+
className="row"
21+
style={
22+
Object {
23+
"marginBottom": "10px",
24+
}
25+
}
2626
>
27-
2827
<div
29-
className="row"
28+
className="col-12"
3029
>
30+
3131
<div
32-
className="col-5"
32+
className="form-group field field-string row"
3333
>
3434
<div
35-
className="form-group"
36-
>
37-
<label
38-
className="form-label"
39-
htmlFor="root-key"
40-
>
41-
additionalProperty Key
42-
</label>
43-
<input
44-
className="form-control"
45-
defaultValue="additionalProperty"
46-
disabled={false}
47-
id="root-key"
48-
name="root-key"
49-
onBlur={[Function]}
50-
required={false}
51-
type="text"
52-
/>
53-
</div>
54-
</div>
55-
<div
56-
className="col-5"
57-
>
58-
<div
59-
className="form-group"
35+
className="col-5"
6036
>
6137
<div
62-
className="mb-0 form-group"
38+
className="form-group"
6339
>
6440
<label
6541
className="form-label"
66-
htmlFor="root"
42+
htmlFor="root-key"
6743
>
68-
additionalProperty
44+
additionalProperty Key
6945
</label>
7046
<input
71-
autoFocus={false}
7247
className="form-control"
48+
defaultValue="additionalProperty"
7349
disabled={false}
74-
id="root"
50+
id="root-key"
51+
name="root-key"
7552
onBlur={[Function]}
76-
onChange={[Function]}
77-
onFocus={[Function]}
78-
placeholder=""
79-
readOnly={false}
8053
required={false}
8154
type="text"
82-
value="should appear"
8355
/>
8456
</div>
85-
8657
</div>
87-
</div>
88-
<div
89-
className="py-4 col-2"
90-
>
91-
<button
92-
className="btn btn-danger btn-block btn-sm"
93-
disabled={false}
94-
onClick={[Function]}
95-
title="Remove"
96-
type="button"
58+
<div
59+
className="col-5"
9760
>
98-
<svg
99-
fill="currentColor"
100-
height="1em"
101-
stroke="currentColor"
102-
strokeWidth="0"
103-
style={
104-
Object {
105-
"color": undefined,
106-
}
107-
}
108-
viewBox="0 0 512 512"
109-
width="1em"
110-
xmlns="http://www.w3.org/2000/svg"
61+
<div
62+
className="form-group"
11163
>
112-
<path
113-
d="M368.5 240h-225c-8.8 0-16 7.2-16 16 0 4.4 1.8 8.4 4.7 11.3 2.9 2.9 6.9 4.7 11.3 4.7h225c8.8 0 16-7.2 16-16s-7.2-16-16-16z"
114-
/>
115-
</svg>
116-
</button>
64+
<div
65+
className="mb-0 form-group"
66+
>
67+
<label
68+
className="form-label"
69+
htmlFor="root"
70+
>
71+
additionalProperty
72+
</label>
73+
<input
74+
autoFocus={false}
75+
className="form-control"
76+
disabled={false}
77+
id="root"
78+
onBlur={[Function]}
79+
onChange={[Function]}
80+
onFocus={[Function]}
81+
placeholder=""
82+
readOnly={false}
83+
required={false}
84+
type="text"
85+
value="should appear"
86+
/>
87+
</div>
88+
89+
</div>
90+
</div>
91+
<div
92+
className="py-4 col-2"
93+
>
94+
<button
95+
className="btn btn-danger btn-block btn-sm"
96+
disabled={false}
97+
onClick={[Function]}
98+
title="Remove"
99+
type="button"
100+
>
101+
<svg
102+
fill="currentColor"
103+
height="1em"
104+
stroke="currentColor"
105+
strokeWidth="0"
106+
style={
107+
Object {
108+
"color": undefined,
109+
}
110+
}
111+
viewBox="0 0 512 512"
112+
width="1em"
113+
xmlns="http://www.w3.org/2000/svg"
114+
>
115+
<path
116+
d="M368.5 240h-225c-8.8 0-16 7.2-16 16 0 4.4 1.8 8.4 4.7 11.3 2.9 2.9 6.9 4.7 11.3 4.7h225c8.8 0 16-7.2 16-16s-7.2-16-16-16z"
117+
/>
118+
</svg>
119+
</button>
120+
</div>
117121
</div>
118122
</div>
119123
</div>
120-
</div>
121-
<div
122-
className="row"
123-
>
124124
<div
125-
className="py-4 col-3 offset-9"
125+
className="row"
126126
>
127-
<button
128-
className="ml-1 object-property-expand btn btn-primary"
129-
disabled={false}
130-
onClick={[Function]}
131-
style={
132-
Object {
133-
"width": "100%",
134-
}
135-
}
136-
title="Add Item"
137-
type="button"
127+
<div
128+
className="py-4 col-3 offset-9"
138129
>
139-
<svg
140-
fill="currentColor"
141-
height="1em"
142-
stroke="currentColor"
143-
strokeWidth="0"
130+
<button
131+
className="ml-1 object-property-expand btn btn-primary"
132+
disabled={false}
133+
onClick={[Function]}
144134
style={
145135
Object {
146-
"color": undefined,
136+
"width": "100%",
147137
}
148138
}
149-
viewBox="0 0 16 16"
150-
width="1em"
151-
xmlns="http://www.w3.org/2000/svg"
139+
title="Add Item"
140+
type="button"
152141
>
153-
<path
154-
d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"
155-
/>
156-
</svg>
157-
</button>
142+
<svg
143+
fill="currentColor"
144+
height="1em"
145+
stroke="currentColor"
146+
strokeWidth="0"
147+
style={
148+
Object {
149+
"color": undefined,
150+
}
151+
}
152+
viewBox="0 0 16 16"
153+
width="1em"
154+
xmlns="http://www.w3.org/2000/svg"
155+
>
156+
<path
157+
d="M8 4a.5.5 0 0 1 .5.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3A.5.5 0 0 1 8 4z"
158+
/>
159+
</svg>
160+
</button>
161+
</div>
158162
</div>
159163
</div>
160164
</div>

0 commit comments

Comments
 (0)