Skip to content

Commit 5f7f912

Browse files
himanshupathak95himanshupathak95ciampo
authored
Components: Standardize checkbox and radio focus outlines (#85379) (#85436)
* Components: Use shared checkbox and radio focus outlines * Components: Document checkbox and radio focus ring changes * Components: Link PR 85379 to checkbox and radio focus changelog * CheckboxControl: Remove redundant input styles * RadioControl: Preserve state borders on focus --- (cherry picked from commit 9345e88) Co-authored-by: himanshupathak95 <abcd95@git.wordpress.org> Co-authored-by: ciampo <mciampini@git.wordpress.org>
1 parent 9280722 commit 5f7f912

3 files changed

Lines changed: 126 additions & 16 deletions

File tree

‎packages/components/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+
- `CheckboxControl`, `RadioControl`: Use the design system outline for focus rings ([#85379](https://github.com/WordPress/gutenberg/pull/85379)).
78
- `Snackbar`: Use design system focus ring ([#85168](https://github.com/WordPress/gutenberg/pull/85168)).
89
- `BorderControl`: Remove double outline & use design system's focus ring ([#85173](https://github.com/WordPress/gutenberg/pull/85173)).
910

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

Lines changed: 57 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -20,7 +20,63 @@
2020
}
2121

2222
.components-checkbox-control__input[type="checkbox"] {
23-
@include checkbox-control;
23+
transition: none;
24+
@include input-control;
25+
26+
&:hover:not(:disabled, [aria-disabled="true"]) {
27+
background: var(--wpds-color-background-interactive-neutral-active);
28+
}
29+
30+
&:checked::before,
31+
&[aria-checked="mixed"]::before {
32+
margin: -3px -5px;
33+
color: $white;
34+
35+
@include break-medium() {
36+
margin: -4px 0 0 -5px;
37+
}
38+
}
39+
40+
&[aria-checked="mixed"] {
41+
background: $components-color-accent;
42+
border-color: $components-color-accent;
43+
44+
&::before {
45+
// Inherited from `forms.css`.
46+
// See: https://github.com/WordPress/wordpress-develop/tree/5.1.1/src/wp-admin/css/forms.css#L122-L132
47+
content: "\f460";
48+
float: left;
49+
display: inline-block;
50+
vertical-align: middle;
51+
width: 16px;
52+
/* stylelint-disable-next-line font-family-no-missing-generic-family-keyword -- dashicons don't need a generic family keyword. */
53+
font: 400 30px/1 dashicons;
54+
speak: none;
55+
-webkit-font-smoothing: antialiased;
56+
-moz-osx-font-smoothing: grayscale;
57+
58+
@include break-medium() {
59+
float: none;
60+
font-size: 21px;
61+
}
62+
}
63+
}
64+
65+
&[aria-disabled="true"],
66+
&:disabled {
67+
background: var(--wpds-color-background-interactive-neutral-disabled);
68+
border-color: var(--wpds-color-stroke-interactive-neutral-disabled);
69+
color: var(--wpds-color-foreground-interactive-neutral-disabled);
70+
cursor: default;
71+
72+
// Override style inherited from wp-admin. Required to avoid degraded appearance on different backgrounds.
73+
opacity: 1;
74+
75+
&:checked::before,
76+
&[aria-checked="mixed"]::before {
77+
color: var(--wpds-color-foreground-interactive-neutral-disabled);
78+
}
79+
}
2480
background: $white;
2581
color: $gray-900;
2682
clear: none;
@@ -41,10 +97,6 @@
4197
transition: 0.1s border-color ease-in-out;
4298
}
4399

44-
&:focus {
45-
@include button-style-outset__focus(var(--wp-admin-theme-color));
46-
}
47-
48100
&:not(:disabled):is(:checked, :indeterminate) {
49101
background: $components-color-accent;
50102
border-color: $components-color-accent;

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

Lines changed: 68 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
@use "@wordpress/base-styles/colors" as *;
1+
@use "sass:math";
22
@use "@wordpress/base-styles/mixins" as *;
33
@use "@wordpress/base-styles/variables" as *;
44

@@ -27,7 +27,72 @@
2727
grid-column: 1;
2828
grid-row: 1;
2929

30-
@include radio-control;
30+
border: var(--wpds-border-width-xs) solid var(--wpds-color-stroke-interactive-neutral);
31+
background: var(--wpds-color-background-interactive-neutral-weak);
32+
transition: none;
33+
border-radius: $radius-round;
34+
width: $radio-input-size;
35+
height: $radio-input-size;
36+
min-width: $radio-input-size;
37+
max-width: $radio-input-size;
38+
position: relative;
39+
40+
&::after {
41+
content: "";
42+
position: absolute;
43+
top: 50%;
44+
left: 50%;
45+
width: $grid-unit-30;
46+
aspect-ratio: 1;
47+
transform: translate(-50%, -50%);
48+
}
49+
50+
&:focus {
51+
@include outset-ring__focus();
52+
border-color: var(--wpds-color-stroke-interactive-neutral);
53+
54+
// Override the focus shadow from wp-admin forms.css.
55+
box-shadow: none;
56+
}
57+
58+
&:hover {
59+
border-color: var(--wpds-color-stroke-interactive-neutral-active);
60+
}
61+
62+
&:checked::before {
63+
box-sizing: inherit;
64+
width: math.div($radio-input-size, 2);
65+
height: math.div($radio-input-size, 2);
66+
position: absolute;
67+
top: 50%;
68+
left: 50%;
69+
transform: translate(-50%, -50%);
70+
margin: 0;
71+
background-color: currentColor;
72+
73+
// This border serves as a background color in Windows High Contrast mode.
74+
border: 4px solid currentColor;
75+
}
76+
77+
&:checked {
78+
background: var(--wpds-color-background-interactive-brand-strong);
79+
border-color: transparent;
80+
color: var(--wpds-color-foreground-interactive-brand-strong);
81+
}
82+
83+
&[aria-disabled="true"],
84+
&:disabled {
85+
background: var(--wpds-color-background-interactive-neutral-weak-disabled);
86+
border-color: var(--wpds-color-stroke-interactive-neutral-disabled);
87+
color: var(--wpds-color-foreground-interactive-neutral-disabled);
88+
cursor: default;
89+
opacity: 1; // Override opacity inherited from wp-admin forms.css.
90+
91+
@media (forced-colors: active) {
92+
color: GrayText;
93+
border-color: GrayText;
94+
}
95+
}
3196

3297
display: inline-flex;
3398
margin: 0;
@@ -38,23 +103,15 @@
38103
cursor: var(--wpds-cursor-control);
39104
}
40105

41-
&:focus {
42-
@include button-style-outset__focus(var(--wp-admin-theme-color));
43-
}
44-
45106
&:checked {
46107
&::before {
47108
content: "";
48109
border-radius: $radius-round;
49110
}
50111
}
51112

52-
&:disabled {
113+
&:disabled:checked::before {
53114
opacity: 1; // Override style from wp-admin forms.css.
54-
55-
&:checked::before {
56-
opacity: 1; // Override style from wp-admin forms.css.
57-
}
58115
}
59116
}
60117

0 commit comments

Comments
 (0)