Skip to content

Commit 0af6461

Browse files
aramos-adobearamos-adobe
authored
feat(radio): adding new colors, type, and size tokens, invalid state, WHCM (#3555)
* feat(radio): adding radio options * chore(radio): update metadata * feat(radio): removing unused hcm token * chore(radio): adding changeset * feat(radio): updating emphasized hcm selected color * feat(radio): adding more tests and helptext ecample * feat(radio): restoring helptext css and removing changeset * feat(radio): removing dupe tokens, test, stories * feat(radio): updating template docs * feat(radio): updating invalid template and story * feat(radio): removing invalid state * feat(radio): cleaning up templates * feat(radio): adding active control and test state * chore(radio): rebuilding metadata files
1 parent 9d0ab17 commit 0af6461

File tree

7 files changed

+180
-92
lines changed

7 files changed

+180
-92
lines changed

‎.changeset/angry-needles-behave.md

+23
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
---
2+
"@spectrum-css/radio": major
3+
---
4+
5+
# Radio S2 Migration
6+
7+
Updates:
8+
9+
- High contrast tokens have been modified
10+
- Typography tokens modified
11+
12+
## New tokens
13+
14+
`--spectrum-radio-border-width`
15+
`--spectrum-radio-text-font-weight`
16+
`--spectrum-radio-text-font-style`
17+
18+
## Modified tokens
19+
20+
`--spectrum-radio-emphasized-accent-color`
21+
`--spectrum-radio-emphasized-accent-color-hover`
22+
`--spectrum-radio-emphasized-accent-color-down`
23+
`--spectrum-radio-emphasized-accent-color-focus`

‎components/helptext/stories/template.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -34,7 +34,7 @@ export const Template = ({
3434
${when(!hideIcon && variant == "negative", () =>
3535
Icon(
3636
{
37-
iconName: "Alert",
37+
iconName: "AlertTriangle",
3838
setName: "workflow",
3939
size,
4040
customClasses: [`${rootClass}-validationIcon`],

‎components/radio/dist/metadata.json

+18-16
Original file line numberDiff line numberDiff line change
@@ -25,10 +25,15 @@
2525
".spectrum-Radio-label:lang(ja)",
2626
".spectrum-Radio-label:lang(ko)",
2727
".spectrum-Radio-label:lang(zh)",
28+
".spectrum-Radio.is-active .spectrum-Radio-button:before",
29+
".spectrum-Radio.is-active .spectrum-Radio-input:checked + .spectrum-Radio-button:before",
30+
".spectrum-Radio.is-active .spectrum-Radio-label",
2831
".spectrum-Radio.is-readOnly .spectrum-Radio-input",
32+
".spectrum-Radio.is-readOnly .spectrum-Radio-input + .spectrum-Radio-button:before",
2933
".spectrum-Radio.is-readOnly .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label",
3034
".spectrum-Radio.is-readOnly .spectrum-Radio-input:disabled ~ .spectrum-Radio-label",
3135
".spectrum-Radio.is-readOnly .spectrum-Radio-label",
36+
".spectrum-Radio.is-readOnly:hover .spectrum-Radio-input + .spectrum-Radio-button:before",
3237
".spectrum-Radio:active .spectrum-Radio-button:before",
3338
".spectrum-Radio:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before",
3439
".spectrum-Radio:active .spectrum-Radio-label",
@@ -43,6 +48,7 @@
4348
".spectrum-Radio:lang(ja)",
4449
".spectrum-Radio:lang(ko)",
4550
".spectrum-Radio:lang(zh)",
51+
".spectrum-Radio:not(.is-readOnly):active .spectrum-Radio-input:not(:disabled) + .spectrum-Radio-button",
4652
"[dir=\"rtl\"] .spectrum-Radio .spectrum-Radio-button:after"
4753
],
4854
"modifiers": [
@@ -85,10 +91,6 @@
8591
"--spectrum-radio-button-border-color-down",
8692
"--spectrum-radio-button-border-color-focus",
8793
"--spectrum-radio-button-border-color-hover",
88-
"--spectrum-radio-button-checked-border-color-default",
89-
"--spectrum-radio-button-checked-border-color-down",
90-
"--spectrum-radio-button-checked-border-color-focus",
91-
"--spectrum-radio-button-checked-border-color-hover",
9294
"--spectrum-radio-button-control-size",
9395
"--spectrum-radio-button-control-size-extra-large",
9496
"--spectrum-radio-button-control-size-large",
@@ -119,13 +121,17 @@
119121
"--spectrum-radio-neutral-content-color-down",
120122
"--spectrum-radio-neutral-content-color-focus",
121123
"--spectrum-radio-neutral-content-color-hover",
124+
"--spectrum-radio-text-font-style",
125+
"--spectrum-radio-text-font-weight",
122126
"--spectrum-radio-text-to-control"
123127
],
124128
"global": [
125-
"--spectrum-accent-color-1000",
126-
"--spectrum-accent-color-1100",
127-
"--spectrum-accent-color-900",
129+
"--spectrum-accent-content-color-default",
130+
"--spectrum-accent-content-color-down",
131+
"--spectrum-accent-content-color-hover",
132+
"--spectrum-accent-content-color-key-focus",
128133
"--spectrum-animation-duration-100",
134+
"--spectrum-border-width-200",
129135
"--spectrum-cjk-line-height-100",
130136
"--spectrum-component-bottom-to-text-100",
131137
"--spectrum-component-bottom-to-text-200",
@@ -135,10 +141,13 @@
135141
"--spectrum-component-height-200",
136142
"--spectrum-component-height-300",
137143
"--spectrum-component-height-75",
144+
"--spectrum-component-size-difference-down",
145+
"--spectrum-component-size-minimum-perspective-down",
138146
"--spectrum-component-top-to-text-100",
139147
"--spectrum-component-top-to-text-200",
140148
"--spectrum-component-top-to-text-300",
141149
"--spectrum-component-top-to-text-75",
150+
"--spectrum-default-font-style",
142151
"--spectrum-disabled-content-color",
143152
"--spectrum-focus-indicator-color",
144153
"--spectrum-focus-indicator-gap",
@@ -147,27 +156,20 @@
147156
"--spectrum-font-size-200",
148157
"--spectrum-font-size-300",
149158
"--spectrum-font-size-75",
150-
"--spectrum-gray-50",
151-
"--spectrum-gray-600",
152-
"--spectrum-gray-700",
153-
"--spectrum-gray-800",
159+
"--spectrum-gray-25",
154160
"--spectrum-line-height-100",
155-
"--spectrum-neutral-background-color-selected-default",
156-
"--spectrum-neutral-background-color-selected-down",
157-
"--spectrum-neutral-background-color-selected-hover",
158-
"--spectrum-neutral-background-color-selected-key-focus",
159161
"--spectrum-neutral-content-color-default",
160162
"--spectrum-neutral-content-color-down",
161163
"--spectrum-neutral-content-color-hover",
162164
"--spectrum-neutral-content-color-key-focus",
165+
"--spectrum-regular-font-weight",
163166
"--spectrum-text-to-control-100",
164167
"--spectrum-text-to-control-200",
165168
"--spectrum-text-to-control-300",
166169
"--spectrum-text-to-control-75"
167170
],
168171
"passthroughs": [],
169172
"high-contrast": [
170-
"--highcontrast-radio-button-background-color",
171173
"--highcontrast-radio-button-border-color-default",
172174
"--highcontrast-radio-button-border-color-down",
173175
"--highcontrast-radio-button-border-color-focus",

‎components/radio/index.css

+83-72
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@
1818
*/
1919

2020
.spectrum-Radio {
21-
--spectrum-radio-button-background-color: var(--spectrum-gray-50);
21+
--spectrum-radio-button-background-color: var(--spectrum-gray-25);
2222

2323
/* state colors for all themes */
2424
--spectrum-radio-neutral-content-color: var(--spectrum-neutral-content-color-default);
@@ -36,22 +36,16 @@
3636
--spectrum-radio-disabled-border-color: var(--spectrum-disabled-content-color);
3737

3838
/* emphasized state colors selection indicator all themes */
39-
--spectrum-radio-emphasized-accent-color: var(--spectrum-accent-color-900);
40-
--spectrum-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-1000);
41-
--spectrum-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100);
42-
--spectrum-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000);
43-
44-
/* unchecked selection indicator */
45-
--spectrum-radio-button-border-color-default: var(--spectrum-gray-600);
46-
--spectrum-radio-button-border-color-hover: var(--spectrum-gray-700);
47-
--spectrum-radio-button-border-color-down: var(--spectrum-gray-800);
48-
--spectrum-radio-button-border-color-focus: var(--spectrum-gray-700);
49-
50-
/* checked selection indicator */
51-
--spectrum-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default);
52-
--spectrum-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover);
53-
--spectrum-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down);
54-
--spectrum-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-key-focus);
39+
--spectrum-radio-emphasized-accent-color: var(--spectrum-accent-content-color-default);
40+
--spectrum-radio-emphasized-accent-color-hover: var(--spectrum-accent-content-color-hover);
41+
--spectrum-radio-emphasized-accent-color-down: var(--spectrum-accent-content-color-down);
42+
--spectrum-radio-emphasized-accent-color-focus: var(--spectrum-accent-content-color-key-focus);
43+
44+
/* radio checked/unchecked selection indicator */
45+
--spectrum-radio-button-border-color-default: var(--spectrum-neutral-content-color-default);
46+
--spectrum-radio-button-border-color-hover: var(--spectrum-neutral-content-color-hover);
47+
--spectrum-radio-button-border-color-down: var(--spectrum-neutral-content-color-down);
48+
--spectrum-radio-button-border-color-focus: var(--spectrum-neutral-content-color-key-focus);
5549

5650
--spectrum-radio-line-height: var(--spectrum-line-height-100);
5751

@@ -67,6 +61,9 @@
6761
--spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium);
6862

6963
--spectrum-radio-font-size: var(--spectrum-font-size-100);
64+
--spectrum-radio-border-width: var(--spectrum-border-width-200);
65+
--spectrum-radio-text-font-weight: var(--spectrum-regular-font-weight);
66+
--spectrum-radio-text-font-style: var(--spectrum-default-font-style);
7067

7168
/* CJK language support all themes */
7269
&:lang(ja),
@@ -112,53 +109,6 @@
112109
--spectrum-radio-font-size: var(--spectrum-font-size-300);
113110
}
114111

115-
/* windows high contrast mode */
116-
@media (forced-colors: active) {
117-
.spectrum-Radio {
118-
--highcontrast-radio-button-background-color: ButtonFace;
119-
120-
/* high contrast text */
121-
--highcontrast-radio-neutral-content-color: CanvasText;
122-
--highcontrast-radio-neutral-content-color-hover: CanvasText;
123-
--highcontrast-radio-neutral-content-color-down: CanvasText;
124-
--highcontrast-radio-neutral-content-color-focus: CanvasText;
125-
126-
/* high contrast selector */
127-
--highcontrast-radio-button-border-color-default: ButtonText;
128-
--highcontrast-radio-button-border-color-hover: Highlight;
129-
--highcontrast-radio-button-border-color-down: ButtonText;
130-
--highcontrast-radio-button-border-color-focus: Highlight;
131-
132-
/* high contrast emphasized selector */
133-
--highcontrast-radio-emphasized-accent-color: ButtonText;
134-
--highcontrast-radio-emphasized-accent-color-hover: Highlight;
135-
--highcontrast-radio-emphasized-accent-color-down: ButtonText;
136-
--highcontrast-radio-emphasized-accent-color-focus: Highlight;
137-
138-
/* high contrast checked selector */
139-
--highcontrast-radio-button-checked-border-color-default: Highlight;
140-
--highcontrast-radio-button-checked-border-color-hover: Highlight;
141-
--highcontrast-radio-button-checked-border-color-down: Highlight;
142-
--highcontrast-radio-button-checked-border-color-focus: Highlight;
143-
144-
/* high contrast disabled text */
145-
--highcontrast-radio-disabled-content-color: GrayText;
146-
147-
/* high contrast disabled selector */
148-
--highcontrast-radio-disabled-border-color: GrayText;
149-
150-
/* high contrast focus ring */
151-
--highcontrast-radio-focus-indicator-color: CanvasText;
152-
153-
/* ensure focus ring is visible if user agent has non-accessible system overrides */
154-
.spectrum-Radio-button {
155-
&::after {
156-
forced-color-adjust: none;
157-
}
158-
}
159-
}
160-
}
161-
162112
.spectrum-Radio {
163113
display: inline-flex;
164114
align-items: flex-start;
@@ -176,23 +126,30 @@
176126

177127
/* checked selection indicator hover */
178128
.spectrum-Radio-input:checked + .spectrum-Radio-button::before {
179-
border-color: var(--highcontrast-radio-button-checked-border-color-hover, var(--mod-radio-button-checked-border-color-hover, var(--spectrum-radio-button-checked-border-color-hover)));
129+
border-color: var(--highcontrast-radio-button-checked-border-color-hover, var(--mod-radio-button-checked-border-color-hover, var(--spectrum-radio-button-border-color-hover)));
180130
}
181131

182132
.spectrum-Radio-label {
183133
color: var(--highcontrast-radio-neutral-content-color-hover, var(--mod-radio-neutral-content-color-hover, var(--spectrum-radio-neutral-content-color-hover)));
184134
}
185135
}
186136

187-
&:active {
137+
&:not(.is-readOnly):active {
138+
.spectrum-Radio-input:not(:disabled) + .spectrum-Radio-button {
139+
transform: perspective(var(--spectrum-component-size-minimum-perspective-down)) translateZ(var(--spectrum-component-size-difference-down));
140+
}
141+
}
142+
143+
&:active,
144+
&.is-active {
188145
/* selection indicator active */
189146
.spectrum-Radio-button::before {
190147
border-color: var(--highcontrast-radio-button-border-color-down, var(--mod-radio-button-border-color-down, var(--spectrum-radio-button-border-color-down)));
191148
}
192149

193150
/* checked selection indicator active */
194151
.spectrum-Radio-input:checked + .spectrum-Radio-button::before {
195-
border-color: var(--highcontrast-radio-button-checked-border-color-down, var(--mod-radio-button-checked-border-color-down, var(--spectrum-radio-button-checked-border-color-down)));
152+
border-color: var(--highcontrast-radio-button-checked-border-color-down, var(--mod-radio-button-checked-border-color-down, var(--spectrum-radio-button-border-color-down)));
196153
}
197154

198155
.spectrum-Radio-label {
@@ -218,7 +175,7 @@
218175

219176
/* selected selection indicator is focused state */
220177
.spectrum-Radio-input:checked + .spectrum-Radio-button::before {
221-
border-color: var(--highcontrast-radio-button-checked-border-color-focus, var(--mod-radio-button-checked-border-color-focus, var(--spectrum-radio-button-checked-border-color-focus)));
178+
border-color: var(--highcontrast-radio-button-checked-border-color-focus, var(--mod-radio-button-checked-border-color-focus, var(--spectrum-radio-button-border-color-focus)));
222179
}
223180

224181
.spectrum-Radio-label {
@@ -311,7 +268,7 @@
311268
&::before {
312269
/* half of element width minus half of indicator width is checked border width */
313270
border-width: calc((var(--spectrum-radio-button-control-size) / 2) - (var(--spectrum-radio-button-selection-indicator) / 2));
314-
border-color: var(--highcontrast-radio-button-checked-border-color-default, var(--mod-radio-button-checked-border-color-default, var(--spectrum-radio-button-checked-border-color-default)));
271+
border-color: var(--highcontrast-radio-button-checked-border-color-default, var(--mod-radio-button-checked-border-color-default, var(--spectrum-radio-button-border-color-default)));
315272
}
316273
}
317274

@@ -336,9 +293,8 @@
336293

337294
font-size: var(--mod-radio-font-size, var(--spectrum-radio-font-size));
338295

339-
/* TODO: font weight and style tokens */
340-
/* font-weight: var(--spectrum-radio-text-font-weight); **** missing token resolves to 400 ****/
341-
/* font-style: var(--spectrum-radio-text-font-style); **** missing token resolves to normal ****/
296+
font-weight: var(--spectrum-radio-text-font-weight);
297+
font-style: var(--spectrum-radio-text-font-style);
342298
color: var(--highcontrast-radio-neutral-content-color, var(--mod-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color)));
343299
line-height: var(--mod-radio-line-height, var(--spectrum-radio-line-height));
344300

@@ -405,3 +361,58 @@
405361
}
406362
}
407363
}
364+
365+
/* windows high contrast mode */
366+
@media (forced-colors: active) {
367+
.spectrum-Radio {
368+
/* high contrast text */
369+
--highcontrast-radio-neutral-content-color: CanvasText;
370+
--highcontrast-radio-neutral-content-color-hover: CanvasText;
371+
--highcontrast-radio-neutral-content-color-down: CanvasText;
372+
--highcontrast-radio-neutral-content-color-focus: CanvasText;
373+
374+
/* high contrast selector */
375+
--highcontrast-radio-button-border-color-default: ButtonText;
376+
--highcontrast-radio-button-border-color-hover: Highlight;
377+
--highcontrast-radio-button-border-color-down: ButtonText;
378+
--highcontrast-radio-button-border-color-focus: Highlight;
379+
380+
/* high contrast emphasized selector */
381+
--highcontrast-radio-emphasized-accent-color: Highlight;
382+
--highcontrast-radio-emphasized-accent-color-hover: Highlight;
383+
--highcontrast-radio-emphasized-accent-color-down: ButtonText;
384+
--highcontrast-radio-emphasized-accent-color-focus: Highlight;
385+
386+
/* high contrast checked selector */
387+
--highcontrast-radio-button-checked-border-color-default: Highlight;
388+
--highcontrast-radio-button-checked-border-color-hover: Highlight;
389+
--highcontrast-radio-button-checked-border-color-down: Highlight;
390+
--highcontrast-radio-button-checked-border-color-focus: Highlight;
391+
392+
/* high contrast disabled text */
393+
--highcontrast-radio-disabled-content-color: GrayText;
394+
395+
/* high contrast disabled selector */
396+
--highcontrast-radio-disabled-border-color: GrayText;
397+
398+
/* high contrast focus ring */
399+
--highcontrast-radio-focus-indicator-color: CanvasText;
400+
401+
/* ensure focus ring is visible if user agent has non-accessible system overrides */
402+
.spectrum-Radio-button {
403+
&::after {
404+
forced-color-adjust: none;
405+
}
406+
}
407+
408+
&.is-readOnly {
409+
.spectrum-Radio-input + .spectrum-Radio-button::before {
410+
border-color: var(--highcontrast-radio-button-border-color-default);
411+
}
412+
413+
&:hover .spectrum-Radio-input + .spectrum-Radio-button::before {
414+
border-color: var(--highcontrast-radio-button-border-color-default);
415+
}
416+
}
417+
}
418+
}

‎components/radio/stories/radio.stories.js

+7-1
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
import { Sizes } from "@spectrum-css/preview/decorators";
22
import { disableDefaultModes } from "@spectrum-css/preview/modes";
3-
import { isChecked, isDisabled, isEmphasized, isReadOnly, size } from "@spectrum-css/preview/types";
3+
import { isActive, isChecked, isDisabled, isEmphasized, isFocused, isHovered, isReadOnly, size } from "@spectrum-css/preview/types";
44
import metadata from "../dist/metadata.json";
55
import packageJson from "../package.json";
66
import { RadioGroup } from "./radio.test.js";
@@ -40,6 +40,9 @@ export default {
4040
isChecked,
4141
isDisabled,
4242
isReadOnly,
43+
isHovered,
44+
isFocused,
45+
isActive,
4346
},
4447
args: {
4548
rootClass: "spectrum-Radio",
@@ -49,6 +52,9 @@ export default {
4952
isChecked: false,
5053
isDisabled: false,
5154
isReadOnly: false,
55+
isHovered: false,
56+
isFocused: false,
57+
isActive: false,
5258
},
5359
parameters: {
5460
actions: {

0 commit comments

Comments
 (0)