Skip to content

Commit cbcc022

Browse files
joshblackjoshblack
authored
fix(FormControl): remove label equality check (#2509)
* fix(FormControl): remove label equality check * chore: add changeset * test: update snapshots
1 parent daabc08 commit cbcc022

File tree

5 files changed

+123
-42
lines changed

5 files changed

+123
-42
lines changed

‎.changeset/plenty-eels-mix.md‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
---
2+
'@primer/react': patch
3+
---
4+
5+
Update FormControl to correctly render Checkbox labels

‎src/FormControl/FormControl.tsx‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -182,9 +182,7 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
182182
{slots.LeadingVisual}
183183
</Box>
184184
)}
185-
{(React.isValidElement(slots.Label) &&
186-
slots.Label.type === FormControlLabel &&
187-
!(slots.Label.props as FormControlLabelProps).visuallyHidden) ||
185+
{(React.isValidElement(slots.Label) && !(slots.Label.props as FormControlLabelProps).visuallyHidden) ||
188186
slots.Caption ? (
189187
<Box display="flex" flexDirection="column" ml={2}>
190188
{slots.Label}

‎src/__tests__/__snapshots__/CheckboxGroup.test.tsx.snap‎

Lines changed: 39 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,23 @@ exports[`CheckboxGroup renders consistently 1`] = `
2424
margin-right: 0;
2525
}
2626
27+
.c7 {
28+
margin-left: 8px;
29+
display: -webkit-box;
30+
display: -webkit-flex;
31+
display: -ms-flexbox;
32+
display: flex;
33+
-webkit-flex-direction: column;
34+
-ms-flex-direction: column;
35+
flex-direction: column;
36+
}
37+
2738
.c2 {
2839
display: block;
2940
font-size: 16px;
3041
}
3142
32-
.c7 {
43+
.c8 {
3344
font-weight: 600;
3445
font-size: 14px;
3546
display: block;
@@ -114,12 +125,17 @@ exports[`CheckboxGroup renders consistently 1`] = `
114125
value="one"
115126
/>
116127
</div>
117-
<label
128+
<div
118129
className="c7"
119-
htmlFor="react-aria-2"
130+
display="flex"
120131
>
121-
Choice one
122-
</label>
132+
<label
133+
className="c8"
134+
htmlFor="react-aria-2"
135+
>
136+
Choice one
137+
</label>
138+
</div>
123139
</div>
124140
<div
125141
className="c4"
@@ -141,12 +157,17 @@ exports[`CheckboxGroup renders consistently 1`] = `
141157
value="two"
142158
/>
143159
</div>
144-
<label
160+
<div
145161
className="c7"
146-
htmlFor="react-aria-3"
162+
display="flex"
147163
>
148-
Choice two
149-
</label>
164+
<label
165+
className="c8"
166+
htmlFor="react-aria-3"
167+
>
168+
Choice two
169+
</label>
170+
</div>
150171
</div>
151172
<div
152173
className="c4"
@@ -168,12 +189,17 @@ exports[`CheckboxGroup renders consistently 1`] = `
168189
value="three"
169190
/>
170191
</div>
171-
<label
192+
<div
172193
className="c7"
173-
htmlFor="react-aria-4"
194+
display="flex"
174195
>
175-
Choice three
176-
</label>
196+
<label
197+
className="c8"
198+
htmlFor="react-aria-4"
199+
>
200+
Choice three
201+
</label>
202+
</div>
177203
</div>
178204
</div>
179205
</fieldset>

‎src/__tests__/__snapshots__/CheckboxOrRadioGroup.test.tsx.snap‎

Lines changed: 39 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,23 @@ exports[`CheckboxOrRadioGroup renders consistently 1`] = `
2424
margin-right: 0;
2525
}
2626
27+
.c7 {
28+
margin-left: 8px;
29+
display: -webkit-box;
30+
display: -webkit-flex;
31+
display: -ms-flexbox;
32+
display: flex;
33+
-webkit-flex-direction: column;
34+
-ms-flex-direction: column;
35+
flex-direction: column;
36+
}
37+
2738
.c2 {
2839
display: block;
2940
font-size: 16px;
3041
}
3142
32-
.c7 {
43+
.c8 {
3344
font-weight: 600;
3445
font-size: 14px;
3546
display: block;
@@ -114,12 +125,17 @@ exports[`CheckboxOrRadioGroup renders consistently 1`] = `
114125
value="choiceOne"
115126
/>
116127
</div>
117-
<label
128+
<div
118129
className="c7"
119-
htmlFor="react-aria-2"
130+
display="flex"
120131
>
121-
Choice one
122-
</label>
132+
<label
133+
className="c8"
134+
htmlFor="react-aria-2"
135+
>
136+
Choice one
137+
</label>
138+
</div>
123139
</div>
124140
<div
125141
className="c4"
@@ -141,12 +157,17 @@ exports[`CheckboxOrRadioGroup renders consistently 1`] = `
141157
value="choiceTwo"
142158
/>
143159
</div>
144-
<label
160+
<div
145161
className="c7"
146-
htmlFor="react-aria-3"
162+
display="flex"
147163
>
148-
Choice two
149-
</label>
164+
<label
165+
className="c8"
166+
htmlFor="react-aria-3"
167+
>
168+
Choice two
169+
</label>
170+
</div>
150171
</div>
151172
<div
152173
className="c4"
@@ -168,12 +189,17 @@ exports[`CheckboxOrRadioGroup renders consistently 1`] = `
168189
value="choiceThree"
169190
/>
170191
</div>
171-
<label
192+
<div
172193
className="c7"
173-
htmlFor="react-aria-4"
194+
display="flex"
174195
>
175-
Choice three
176-
</label>
196+
<label
197+
className="c8"
198+
htmlFor="react-aria-4"
199+
>
200+
Choice three
201+
</label>
202+
</div>
177203
</div>
178204
</div>
179205
</fieldset>

‎src/__tests__/__snapshots__/RadioGroup.test.tsx.snap‎

Lines changed: 39 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -24,12 +24,23 @@ exports[`RadioGroup renders consistently 1`] = `
2424
margin-right: 0;
2525
}
2626
27+
.c7 {
28+
margin-left: 8px;
29+
display: -webkit-box;
30+
display: -webkit-flex;
31+
display: -ms-flexbox;
32+
display: flex;
33+
-webkit-flex-direction: column;
34+
-ms-flex-direction: column;
35+
flex-direction: column;
36+
}
37+
2738
.c2 {
2839
display: block;
2940
font-size: 16px;
3041
}
3142
32-
.c7 {
43+
.c8 {
3344
font-weight: 600;
3445
font-size: 14px;
3546
display: block;
@@ -114,12 +125,17 @@ exports[`RadioGroup renders consistently 1`] = `
114125
value="one"
115126
/>
116127
</div>
117-
<label
128+
<div
118129
className="c7"
119-
htmlFor="react-aria-2"
130+
display="flex"
120131
>
121-
Choice one
122-
</label>
132+
<label
133+
className="c8"
134+
htmlFor="react-aria-2"
135+
>
136+
Choice one
137+
</label>
138+
</div>
123139
</div>
124140
<div
125141
className="c4"
@@ -141,12 +157,17 @@ exports[`RadioGroup renders consistently 1`] = `
141157
value="two"
142158
/>
143159
</div>
144-
<label
160+
<div
145161
className="c7"
146-
htmlFor="react-aria-3"
162+
display="flex"
147163
>
148-
Choice two
149-
</label>
164+
<label
165+
className="c8"
166+
htmlFor="react-aria-3"
167+
>
168+
Choice two
169+
</label>
170+
</div>
150171
</div>
151172
<div
152173
className="c4"
@@ -168,12 +189,17 @@ exports[`RadioGroup renders consistently 1`] = `
168189
value="three"
169190
/>
170191
</div>
171-
<label
192+
<div
172193
className="c7"
173-
htmlFor="react-aria-4"
194+
display="flex"
174195
>
175-
Choice three
176-
</label>
196+
<label
197+
className="c8"
198+
htmlFor="react-aria-4"
199+
>
200+
Choice three
201+
</label>
202+
</div>
177203
</div>
178204
</div>
179205
</fieldset>

0 commit comments

Comments
 (0)