Skip to content

Commit 5d07e11

Browse files
mirkaciampo
authored andcommitted
RadioControl: Keep a 16px visual with a larger hit target (WordPress#83840)
* Keep RadioControl visually 16px with larger hit target * Document RadioControl hit target change * Share radio hit target styling through mixin Co-authored-by: mirka <0mirka00@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org>
1 parent 1ecd7cd commit 5d07e11

6 files changed

Lines changed: 23 additions & 27 deletions

File tree

‎packages/base-styles/CHANGELOG.md‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,10 @@
77
- Default `--wp-admin-theme-color` to `#3858e9`, the WordPress 7.0 default admin color scheme, instead of the legacy `#007cba`. To keep the old color, include `admin-scheme(#007cba)` on `:root` in your own stylesheet. `wordpress-admin-schemes()` and the default custom properties now set `#007cba` for the Fresh scheme, which had used the `:root` default ([#83749](https://github.com/WordPress/gutenberg/pull/83749)).
88
- `radio-control`: Use the design system color tokens ([#83270](https://github.com/WordPress/gutenberg/pull/83270)).
99

10+
### Bug Fixes
11+
12+
- `radio-control`: Keep radio circles and checked dots visually 16px and 8px on narrow screens while providing a 24px pointer target ([#83840](https://github.com/WordPress/gutenberg/pull/83840)).
13+
1014
## 13.2.0 (2026-09-23)
1115

1216
### Enhancements

‎packages/base-styles/_mixins.scss‎

Lines changed: 14 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -394,21 +394,24 @@
394394
margin-right: variables.$grid-unit-15;
395395
transition: none;
396396
border-radius: variables.$radius-round;
397-
width: variables.$radio-input-size-sm;
398-
height: variables.$radio-input-size-sm;
399-
min-width: variables.$radio-input-size-sm;
400-
max-width: variables.$radio-input-size-sm;
397+
width: variables.$radio-input-size;
398+
height: variables.$radio-input-size;
399+
min-width: variables.$radio-input-size;
400+
max-width: variables.$radio-input-size;
401401
position: relative;
402402

403403
@media not (prefers-reduced-motion) {
404404
transition: box-shadow 0.1s linear;
405405
}
406406

407-
@include break-small() {
408-
height: variables.$radio-input-size;
409-
width: variables.$radio-input-size;
410-
min-width: variables.$radio-input-size;
411-
max-width: variables.$radio-input-size;
407+
&::after {
408+
content: "";
409+
position: absolute;
410+
top: 50%;
411+
left: 50%;
412+
width: variables.$grid-unit-30;
413+
aspect-ratio: 1;
414+
transform: translate(-50%, -50%);
412415
}
413416

414417
&:hover {
@@ -417,8 +420,8 @@
417420

418421
&:checked::before {
419422
box-sizing: inherit;
420-
width: math.div(variables.$radio-input-size-sm, 2);
421-
height: math.div(variables.$radio-input-size-sm, 2);
423+
width: math.div(variables.$radio-input-size, 2);
424+
height: math.div(variables.$radio-input-size, 2);
422425
position: absolute;
423426
top: 50%;
424427
left: 50%;
@@ -428,11 +431,6 @@
428431

429432
// This border serves as a background color in Windows High Contrast mode.
430433
border: 4px solid currentColor;
431-
432-
@include break-small() {
433-
width: math.div(variables.$radio-input-size, 2);
434-
height: math.div(variables.$radio-input-size, 2);
435-
}
436434
}
437435

438436
&:focus {

‎packages/components/CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@
2626

2727
### Bug Fixes
2828

29+
- `RadioControl`: Keep radio circles visually 16px at all viewport widths while retaining a 24px pointer target ([#83840](https://github.com/WordPress/gutenberg/pull/83840)).
2930
- `Text`: Make single-line truncation and `isBlock` overrides consistent across the main document and iframes ([#82573](https://github.com/WordPress/gutenberg/pull/82573)).
3031
- `CardDivider`: Apply the Card's width, display, and border color consistently inside iframes ([#82577](https://github.com/WordPress/gutenberg/pull/82577)).
3132
- `BorderControl`, `BorderBoxControl`: Stop offering `%` as a width unit, since `border-width` does not accept percentages. A width already set in `%` keeps showing its unit ([#83492](https://github.com/WordPress/gutenberg/pull/83492)).

‎packages/components/src/radio-control/style.scss‎

Lines changed: 1 addition & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -67,11 +67,7 @@
6767
cursor: var(--wpds-cursor-control);
6868
}
6969

70-
line-height: $radio-input-size-sm;
71-
72-
@include break-small() {
73-
line-height: $radio-input-size;
74-
}
70+
line-height: $radio-input-size;
7571
}
7672

7773
.components-radio-control__option-description {

‎packages/dataviews/CHANGELOG.md‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@
44

55
### Enhancements
66

7+
- Single-selection filter radio indicators stay visually 16px on narrow screens ([#83840](https://github.com/WordPress/gutenberg/pull/83840)).
78
- Selection checkboxes stay visually 16px on narrow screens while retaining a 24px click target ([#83612](https://github.com/WordPress/gutenberg/pull/83612)).
89

910
### Bug Fixes

‎packages/dataviews/src/components/dataviews-filters/style.scss‎

Lines changed: 2 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -264,8 +264,8 @@
264264
content: "";
265265
border-radius: 50%;
266266
box-sizing: inherit;
267-
width: vars.$radio-input-size-sm * 0.5;
268-
height: vars.$radio-input-size-sm * 0.5;
267+
width: vars.$radio-input-size * 0.5;
268+
height: vars.$radio-input-size * 0.5;
269269
position: absolute;
270270
top: 50%;
271271
left: 50%;
@@ -276,10 +276,6 @@
276276
// This border serves as a background color in Windows High Contrast mode.
277277
border: 4px solid var(--wpds-color-foreground-interactive-brand-strong);
278278

279-
@include break-small() {
280-
width: vars.$radio-input-size * 0.5;
281-
height: vars.$radio-input-size * 0.5;
282-
}
283279
}
284280
}
285281
}

0 commit comments

Comments
 (0)