Skip to content

Commit c63e805

Browse files
joshblackjoshblack
authored
fix: update CheckboxOrRadioGroup to spread empty object instead of false-y value (#5764)
1 parent 8b492cf commit c63e805

File tree

2 files changed

+47
-30
lines changed

2 files changed

+47
-30
lines changed

‎.changeset/perfect-plants-trade.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 base component for Checkbox and Radio to pass along correct prop type in React 19

‎packages/react/src/internal/components/CheckboxOrRadioGroup/CheckboxOrRadioGroup.tsx‎

Lines changed: 42 additions & 30 deletions
Original file line numberDiff line numberDiff line change
@@ -108,10 +108,12 @@ const CheckboxOrRadioGroup: React.FC<React.PropsWithChildren<CheckboxOrRadioGrou
108108
<Box
109109
className={clsx(className, classes.GroupFieldset)}
110110
data-validation={validationChild ? '' : undefined}
111-
{...(labelChild && {
112-
as: 'fieldset',
113-
disabled,
114-
})}
111+
{...(labelChild
112+
? {
113+
as: 'fieldset',
114+
disabled,
115+
}
116+
: {})}
115117
sx={sx}
116118
>
117119
{labelChild ? (
@@ -138,12 +140,14 @@ const CheckboxOrRadioGroup: React.FC<React.PropsWithChildren<CheckboxOrRadioGrou
138140

139141
<Body
140142
className={classes.Body}
141-
{...(!labelChild && {
142-
['aria-labelledby']: ariaLabelledby,
143-
['aria-describedby']: [validationMessageId, captionId].filter(Boolean).join(' '),
144-
as: 'div',
145-
role: 'group',
146-
})}
143+
{...(!labelChild
144+
? {
145+
['aria-labelledby']: ariaLabelledby,
146+
['aria-describedby']: [validationMessageId, captionId].filter(Boolean).join(' '),
147+
as: 'div',
148+
role: 'group',
149+
}
150+
: {})}
147151
>
148152
{React.Children.toArray(rest).filter(child => React.isValidElement(child))}
149153
</Body>
@@ -174,10 +178,12 @@ const CheckboxOrRadioGroup: React.FC<React.PropsWithChildren<CheckboxOrRadioGrou
174178
<fieldset
175179
className={clsx(className, classes.GroupFieldset)}
176180
data-validation={validationChild ? '' : undefined}
177-
{...(labelChild && {
178-
as: 'fieldset',
179-
disabled,
180-
})}
181+
{...(labelChild
182+
? {
183+
as: 'fieldset',
184+
disabled,
185+
}
186+
: {})}
181187
>
182188
{labelChild ? (
183189
/*
@@ -203,12 +209,14 @@ const CheckboxOrRadioGroup: React.FC<React.PropsWithChildren<CheckboxOrRadioGrou
203209

204210
<Body
205211
className={classes.Body}
206-
{...(!labelChild && {
207-
['aria-labelledby']: ariaLabelledby,
208-
['aria-describedby']: [validationMessageId, captionId].filter(Boolean).join(' '),
209-
as: 'div',
210-
role: 'group',
211-
})}
212+
{...(!labelChild
213+
? {
214+
['aria-labelledby']: ariaLabelledby,
215+
['aria-describedby']: [validationMessageId, captionId].filter(Boolean).join(' '),
216+
as: 'div',
217+
role: 'group',
218+
}
219+
: {})}
212220
>
213221
{React.Children.toArray(rest).filter(child => React.isValidElement(child))}
214222
</Body>
@@ -242,10 +250,12 @@ const CheckboxOrRadioGroup: React.FC<React.PropsWithChildren<CheckboxOrRadioGrou
242250
margin={0}
243251
mb={validationChild ? 2 : undefined}
244252
padding={0}
245-
{...(labelChild && {
246-
as: 'fieldset',
247-
disabled,
248-
})}
253+
{...(labelChild
254+
? {
255+
as: 'fieldset',
256+
disabled,
257+
}
258+
: {})}
249259
className={className}
250260
sx={sx}
251261
>
@@ -272,12 +282,14 @@ const CheckboxOrRadioGroup: React.FC<React.PropsWithChildren<CheckboxOrRadioGrou
272282
)}
273283

274284
<Body
275-
{...(!labelChild && {
276-
['aria-labelledby']: ariaLabelledby,
277-
['aria-describedby']: [validationMessageId, captionId].filter(Boolean).join(' '),
278-
as: 'div',
279-
role: 'group',
280-
})}
285+
{...(!labelChild
286+
? {
287+
['aria-labelledby']: ariaLabelledby,
288+
['aria-describedby']: [validationMessageId, captionId].filter(Boolean).join(' '),
289+
as: 'div',
290+
role: 'group',
291+
}
292+
: {})}
281293
>
282294
{React.Children.toArray(rest).filter(child => React.isValidElement(child))}
283295
</Body>

0 commit comments

Comments
 (0)