Skip to content

Commit

Permalink
Updates label and legend styles for Checkbox, Radio, CheckboxGroup, a…
Browse files Browse the repository at this point in the history
…nd RadioGroup (#5333)

* updates checkbox and radio label and legend styles

* adds changeset

* test(vrt): update snapshots

* brings back align-self rule on InputLabel

---------

Co-authored-by: mperrotti <mperrotti@users.noreply.github.com>
  • Loading branch information
mperrotti and mperrotti authored Nov 26, 2024
1 parent 18df436 commit f0603fd
Show file tree
Hide file tree
Showing 292 changed files with 19 additions and 13 deletions.
6 changes: 6 additions & 0 deletions .changeset/smart-parrots-beam.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,6 @@
---
"@primer/react": patch
---

- Makes {Checkbox|Radio}Group `<legend>` bold and default font size
- Makes Checkbox and Radio `<label>` default font weight
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
20 changes: 9 additions & 11 deletions packages/react/src/FormControl/FormControl.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -172,17 +172,15 @@ const FormControl = React.forwardRef<HTMLDivElement, FormControlProps>(
{slots.leadingVisual}
</Box>
)}
{!slots.label?.props.visuallyHidden || slots.caption ? (
<Box display="flex" flexDirection="column" sx={{'> *': {paddingLeft: 'var(--stack-gap-condensed)'}}}>
{slots.label}
{slots.caption}
</Box>
) : (
<>
{slots.label}
{slots.caption}
</>
)}
<Box
sx={{
'> *': {paddingLeft: 'var(--stack-gap-condensed)'},
'> label': {fontWeight: 'var(--base-text-weight-normal)'},
}}
>
{slots.label}
{slots.caption}
</Box>
</Box>
) : (
<Box
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -35,7 +35,8 @@

.RadioGroupLabel {
display: block;
font-size: var(--text-body-size-large);
font-size: var(--text-body-size-medium);
font-weight: var(--base-text-weight-semibold);

&:where([data-label-disabled]) {
color: var(--fgColor-muted);
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,8 @@ const CheckboxOrRadioGroupLabel: React.FC<React.PropsWithChildren<CheckboxOrRadi
sx={{
display: 'block',
color: disabled ? 'fg.muted' : undefined,
fontSize: 2,
fontSize: 1,
fontWeight: 'bold',
...sx,
}}
>
Expand Down

0 comments on commit f0603fd

Please sign in to comment.