Skip to content

Commit a46599d

Browse files
aramos-adobearamos-adobe
committed
feat(radio): adding radio options
1 parent 973ccc2 commit a46599d

File tree

5 files changed

+202
-65
lines changed

5 files changed

+202
-65
lines changed

‎components/radio/index.css

Lines changed: 118 additions & 63 deletions
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,28 @@
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);
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+
/* invalid state colores selection indicator all themes */
45+
--spectrum-radio-invalid-color-default: var(--spectrum-negative-color-900);
46+
--spectrum-radio-invalid-color-hover: var(--spectrum-negative-color-1000);
47+
--spectrum-radio-invalid-color-down: var(--spectrum-negative-color-1000);
48+
--spectrum-radio-invalid-color-key-focus: var(--spectrum-negative-color-1000);
4349

4450
/* 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);
51+
--spectrum-radio-button-border-color-default: var(--spectrum-neutral-content-color-default);
52+
--spectrum-radio-button-border-color-hover: var(--spectrum-neutral-content-color-hover);
53+
--spectrum-radio-button-border-color-down: var(--spectrum-neutral-content-color-down);
54+
--spectrum-radio-button-border-color-focus: var(--spectrum-neutral-content-color-key-focus);
4955

5056
/* 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);
57+
--spectrum-radio-button-checked-border-color-default: var(--spectrum-neutral-content-color-default);
58+
--spectrum-radio-button-checked-border-color-hover: var(--spectrum-neutral-content-color-hover);
59+
--spectrum-radio-button-checked-border-color-down: var(--spectrum-neutral-content-color-down);
60+
--spectrum-radio-button-checked-border-color-focus: var(--spectrum-neutral-content-color-key-focus);
5561

5662
--spectrum-radio-line-height: var(--spectrum-line-height-100);
5763

@@ -67,6 +73,9 @@
6773
--spectrum-radio-button-top-to-control: var(--spectrum-radio-button-top-to-control-medium);
6874

6975
--spectrum-radio-font-size: var(--spectrum-font-size-100);
76+
--spectrum-radio-border-width: var(--spectrum-border-width-200);
77+
--spectrum-radio-text-font-weight: var(--spectrum-regular-font-weight);
78+
--spectrum-radio-text-font-style: var(--spectrum-default-font-style);
7079

7180
/* CJK language support all themes */
7281
&:lang(ja),
@@ -112,53 +121,6 @@
112121
--spectrum-radio-font-size: var(--spectrum-font-size-300);
113122
}
114123

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-
162124
.spectrum-Radio {
163125
display: inline-flex;
164126
align-items: flex-start;
@@ -184,6 +146,12 @@
184146
}
185147
}
186148

149+
&:not(.is-readOnly):active {
150+
.spectrum-Radio-input:not(:disabled) + .spectrum-Radio-button {
151+
transform: perspective(var(--spectrum-component-size-minimum-perspective-down)) translateZ(var(--spectrum-component-size-difference-down));
152+
}
153+
}
154+
187155
&:active {
188156
/* selection indicator active */
189157
.spectrum-Radio-button::before {
@@ -262,6 +230,36 @@
262230
}
263231
}
264232

233+
.is-invalid {
234+
.spectrum-Radio-input + .spectrum-Radio-button::before {
235+
border-color: var(--highcontrast-radio-button-border-color-default, var(--mod-radio-invalid-border-color, var(--spectrum-radio-invalid-color-default)));
236+
}
237+
238+
&:hover .spectrum-Radio-input + .spectrum-Radio-button::before {
239+
border-color: var(--highcontrast-radio-button-border-color-default, var(--mod-radio-invalid-border-color-hover, var(--spectrum-radio-invalid-color-hover)));
240+
}
241+
242+
/* selection indicator invalid */
243+
.spectrum-Radio-input:checked + .spectrum-Radio-button::before {
244+
border-color: var(--highcontrast-radio-button-checked-border-color-default, var(--mod-radio-invalid-color-default, var(--spectrum-radio-invalid-color-default)));
245+
}
246+
247+
/* selection indicator invalid hover */
248+
&:hover .spectrum-Radio-input:checked + .spectrum-Radio-button::before {
249+
border-color: var(--highcontrast-radio-button-checked-border-color-default, var(--mod-radio-invalid-color-hover, var(--spectrum-radio-invalid-color-hover)));
250+
}
251+
252+
/* selection indicator invalid active */
253+
&:active .spectrum-Radio-input:checked + .spectrum-Radio-button::before {
254+
border-color: var(--highcontrast-radio-button-checked-border-color-default, var(--mod-radio-invalid-color-down, var(--spectrum-radio-invalid-color-down)));
255+
}
256+
257+
/* selection indicator invalid focus */
258+
&:focus .spectrum-Radio-input:checked + .spectrum-Radio-button::before {
259+
border-color: var(--highcontrast-radio-button-checked-border-color-default, var(--mod-radio-invalid-color-key-focus, var(--spectrum-radio-invalid-color-key-focus)));
260+
}
261+
}
262+
265263
/* Disabled state */
266264
.spectrum-Radio .spectrum-Radio-input:disabled,
267265
.spectrum-Radio .spectrum-Radio-input:checked:disabled {
@@ -336,9 +334,8 @@
336334

337335
font-size: var(--mod-radio-font-size, var(--spectrum-radio-font-size));
338336

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 ****/
337+
font-weight: var(--spectrum-radio-text-font-weight);
338+
font-style: var(--spectrum-radio-text-font-style);
342339
color: var(--highcontrast-radio-neutral-content-color, var(--mod-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color)));
343340
line-height: var(--mod-radio-line-height, var(--spectrum-radio-line-height));
344341

@@ -405,3 +402,61 @@
405402
}
406403
}
407404
}
405+
406+
/* windows high contrast mode */
407+
@media (forced-colors: active) {
408+
.spectrum-Radio {
409+
--highcontrast-radio-button-background-color: ButtonFace;
410+
411+
/* high contrast text */
412+
--highcontrast-radio-neutral-content-color: CanvasText;
413+
--highcontrast-radio-neutral-content-color-hover: CanvasText;
414+
--highcontrast-radio-neutral-content-color-down: CanvasText;
415+
--highcontrast-radio-neutral-content-color-focus: CanvasText;
416+
417+
/* high contrast selector */
418+
--highcontrast-radio-button-border-color-default: ButtonText;
419+
--highcontrast-radio-button-border-color-hover: Highlight;
420+
--highcontrast-radio-button-border-color-down: ButtonText;
421+
--highcontrast-radio-button-border-color-focus: Highlight;
422+
423+
/* high contrast emphasized selector */
424+
--highcontrast-radio-emphasized-accent-color: ButtonText;
425+
--highcontrast-radio-emphasized-accent-color-hover: Highlight;
426+
--highcontrast-radio-emphasized-accent-color-down: ButtonText;
427+
--highcontrast-radio-emphasized-accent-color-focus: Highlight;
428+
429+
/* high contrast checked selector */
430+
--highcontrast-radio-button-checked-border-color-default: Highlight;
431+
--highcontrast-radio-button-checked-border-color-hover: Highlight;
432+
--highcontrast-radio-button-checked-border-color-down: Highlight;
433+
--highcontrast-radio-button-checked-border-color-focus: Highlight;
434+
435+
436+
/* high contrast disabled text */
437+
--highcontrast-radio-disabled-content-color: GrayText;
438+
439+
/* high contrast disabled selector */
440+
--highcontrast-radio-disabled-border-color: GrayText;
441+
442+
/* high contrast focus ring */
443+
--highcontrast-radio-focus-indicator-color: CanvasText;
444+
445+
/* ensure focus ring is visible if user agent has non-accessible system overrides */
446+
.spectrum-Radio-button {
447+
&::after {
448+
forced-color-adjust: none;
449+
}
450+
}
451+
452+
&.is-readOnly {
453+
.spectrum-Radio-input + .spectrum-Radio-button::before {
454+
border-color: var(--highcontrast-radio-button-border-color-default);
455+
}
456+
457+
&:hover .spectrum-Radio-input + .spectrum-Radio-button::before {
458+
border-color: var(--highcontrast-radio-button-border-color-default);
459+
}
460+
}
461+
}
462+
}

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

Lines changed: 3 additions & 1 deletion
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 { isChecked, isDisabled, isEmphasized, isInvalid, 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";
@@ -37,6 +37,7 @@ export default {
3737
control: { type: "text" },
3838
},
3939
isEmphasized,
40+
isInvalid,
4041
isChecked,
4142
isDisabled,
4243
isReadOnly,
@@ -47,6 +48,7 @@ export default {
4748
label: "Label",
4849
isEmphasized: false,
4950
isChecked: false,
51+
isInvalid: false,
5052
isDisabled: false,
5153
isReadOnly: false,
5254
},

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

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,14 @@ export const RadioGroup = Variants({
77
{
88
testHeading: "Default"
99
},
10+
{
11+
testHeading: "Hover",
12+
isHovered: true,
13+
},
14+
{
15+
testHeading: "Focus",
16+
isFocused: true,
17+
},
1018
{
1119
testHeading: "Emphasized",
1220
isEmphasized: true,
@@ -34,5 +42,9 @@ export const RadioGroup = Variants({
3442
testHeading: "Read-only",
3543
isReadOnly: true,
3644
},
45+
{
46+
testHeading: "Invalid",
47+
isInvalid: true,
48+
}
3749
]
3850
});

‎components/radio/stories/template.js

Lines changed: 12 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,6 +15,9 @@ export const Template = ({
1515
isChecked = false,
1616
isDisabled = false,
1717
isReadOnly = false,
18+
isFocused = false,
19+
isInvalid = false,
20+
isHovered,
1821
id = getRandomId("radio"),
1922
customClasses = [],
2023
customStyles = {},
@@ -34,15 +37,17 @@ export const Template = ({
3437
[`${rootClass}--size${size?.toUpperCase()}`]:
3538
typeof size !== "undefined",
3639
[`${rootClass}--emphasized`]: isEmphasized,
40+
"is-hover": isHovered,
3741
"is-readOnly" : isReadOnly,
42+
"is-invalid": isInvalid,
3843
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
3944
})}
4045
style=${styleMap(customStyles)}
4146
>
4247
<input
4348
type="radio"
4449
name=${name}
45-
class="${rootClass}-input"
50+
class=${classMap({["is-focus-visible"]: isFocused, [`${rootClass}-input`]: true })}
4651
id=${inputId}
4752
?checked=${isChecked}
4853
?disabled=${isDisabled}
@@ -57,6 +62,12 @@ export const Template = ({
5762
// Make checked value immutable for read-only.
5863
e.preventDefault();
5964
}}
65+
@focusin=${function() {
66+
updateArgs({ isFocused: true });
67+
}}
68+
@focusout=${function() {
69+
updateArgs({ isFocused: false });
70+
}}
6071
/>
6172
<span class="${rootClass}-button ${rootClass}-button--sizeS"></span>
6273
<label class="${rootClass}-label ${rootClass}-label--sizeS" for=${inputId}

0 commit comments

Comments
 (0)