Skip to content

feat(radio): adding new colors, type, and size tokens, invalid state, WHCM #3555

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 27 commits into from
Mar 20, 2025
Merged

feat(radio): adding new colors, type, and size tokens, invalid state, WHCM #3555

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
27 commits
Select commit Hold shift + click to select a range
b5300b9
feat(radio): adding radio options
aramos-adobe Feb 13, 2025
b1e043e
chore(radio): update metadata
aramos-adobe Feb 13, 2025
5272a11
feat(radio): removing unused hcm token
aramos-adobe Feb 13, 2025
6075002
chore(radio): adding changeset
aramos-adobe Feb 13, 2025
75c6f2b
feat(radio): updating emphasized hcm selected color
aramos-adobe Feb 25, 2025
6ca3363
Merge branch 'spectrum-two' into aramos-adobe/css712-radio-group-s2-m…
aramos-adobe Mar 4, 2025
da822c1
Merge branch 'spectrum-two' into aramos-adobe/css712-radio-group-s2-m…
aramos-adobe Mar 4, 2025
efe4ccd
Merge branch 'spectrum-two' into aramos-adobe/css712-radio-group-s2-m…
aramos-adobe Mar 6, 2025
ccb1d52
feat(radio): adding more tests and helptext ecample
aramos-adobe Mar 6, 2025
2f8d2d6
Merge branch 'spectrum-two' into aramos-adobe/css712-radio-group-s2-m…
aramos-adobe Mar 6, 2025
13b27ce
Merge branch 'spectrum-two' into aramos-adobe/css712-radio-group-s2-m…
aramos-adobe Mar 7, 2025
7d37136
feat(radio): restoring helptext css and removing changeset
aramos-adobe Mar 10, 2025
77878dd
Merge branch 'aramos-adobe/css712-radio-group-s2-migration' of https:…
aramos-adobe Mar 10, 2025
d9818ed
Merge branch 'spectrum-two' into aramos-adobe/css712-radio-group-s2-m…
aramos-adobe Mar 11, 2025
b7b4f25
Merge branch 'spectrum-two' into aramos-adobe/css712-radio-group-s2-m…
aramos-adobe Mar 11, 2025
ee3d45d
Merge branch 'spectrum-two' into aramos-adobe/css712-radio-group-s2-m…
aramos-adobe Mar 11, 2025
b2d5f58
Merge branch 'spectrum-two' into aramos-adobe/css712-radio-group-s2-m…
aramos-adobe Mar 13, 2025
2202448
feat(radio): removing dupe tokens, test, stories
aramos-adobe Mar 13, 2025
b43d118
Merge branch 'spectrum-two' into aramos-adobe/css712-radio-group-s2-m…
aramos-adobe Mar 13, 2025
c3322dd
Merge branch 'spectrum-two' into aramos-adobe/css712-radio-group-s2-m…
aramos-adobe Mar 17, 2025
77f7789
feat(radio): updating template docs
aramos-adobe Mar 17, 2025
aa237b4
feat(radio): updating invalid template and story
aramos-adobe Mar 17, 2025
75f9ed5
feat(radio): removing invalid state
aramos-adobe Mar 17, 2025
e288721
feat(radio): cleaning up templates
aramos-adobe Mar 17, 2025
5570715
feat(radio): adding active control and test state
aramos-adobe Mar 17, 2025
bd6a49e
chore(radio): rebuilding metadata files
aramos-adobe Mar 17, 2025
a6365c3
Merge branch 'spectrum-two' into aramos-adobe/css712-radio-group-s2-m…
aramos-adobe Mar 20, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
23 changes: 23 additions & 0 deletions .changeset/angry-needles-behave.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,23 @@
---
"@spectrum-css/radio": major
---

# Radio S2 Migration
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This is just a personal preference, but I'd actually love the PR to have this title! I feel like it would make it really easy to search for in the future.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Me too! Do try to avoid using the h1 though, that's reserved for # Change Log. I recommend ### because it typically nests under the h2 version number.


Updates:

- High contrast tokens have been modified
- Typography tokens modified

## New tokens

`--spectrum-radio-border-width`
`--spectrum-radio-text-font-weight`
`--spectrum-radio-text-font-style`

## Modified tokens

`--spectrum-radio-emphasized-accent-color`
`--spectrum-radio-emphasized-accent-color-hover`
`--spectrum-radio-emphasized-accent-color-down`
`--spectrum-radio-emphasized-accent-color-focus`
2 changes: 1 addition & 1 deletion components/helptext/stories/template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,7 +34,7 @@ export const Template = ({
${when(!hideIcon && variant == "negative", () =>
Icon(
{
iconName: "Alert",
iconName: "AlertTriangle",
setName: "workflow",
size,
customClasses: [`${rootClass}-validationIcon`],
Expand Down
34 changes: 18 additions & 16 deletions components/radio/dist/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -25,10 +25,15 @@
".spectrum-Radio-label:lang(ja)",
".spectrum-Radio-label:lang(ko)",
".spectrum-Radio-label:lang(zh)",
".spectrum-Radio.is-active .spectrum-Radio-button:before",
".spectrum-Radio.is-active .spectrum-Radio-input:checked + .spectrum-Radio-button:before",
".spectrum-Radio.is-active .spectrum-Radio-label",
".spectrum-Radio.is-readOnly .spectrum-Radio-input",
".spectrum-Radio.is-readOnly .spectrum-Radio-input + .spectrum-Radio-button:before",
".spectrum-Radio.is-readOnly .spectrum-Radio-input:checked:disabled ~ .spectrum-Radio-label",
".spectrum-Radio.is-readOnly .spectrum-Radio-input:disabled ~ .spectrum-Radio-label",
".spectrum-Radio.is-readOnly .spectrum-Radio-label",
".spectrum-Radio.is-readOnly:hover .spectrum-Radio-input + .spectrum-Radio-button:before",
".spectrum-Radio:active .spectrum-Radio-button:before",
".spectrum-Radio:active .spectrum-Radio-input:checked + .spectrum-Radio-button:before",
".spectrum-Radio:active .spectrum-Radio-label",
Expand All @@ -43,6 +48,7 @@
".spectrum-Radio:lang(ja)",
".spectrum-Radio:lang(ko)",
".spectrum-Radio:lang(zh)",
".spectrum-Radio:not(.is-readOnly):active .spectrum-Radio-input:not(:disabled) + .spectrum-Radio-button",
"[dir=\"rtl\"] .spectrum-Radio .spectrum-Radio-button:after"
],
"modifiers": [
Expand Down Expand Up @@ -85,10 +91,6 @@
"--spectrum-radio-button-border-color-down",
"--spectrum-radio-button-border-color-focus",
"--spectrum-radio-button-border-color-hover",
"--spectrum-radio-button-checked-border-color-default",
"--spectrum-radio-button-checked-border-color-down",
"--spectrum-radio-button-checked-border-color-focus",
"--spectrum-radio-button-checked-border-color-hover",
"--spectrum-radio-button-control-size",
"--spectrum-radio-button-control-size-extra-large",
"--spectrum-radio-button-control-size-large",
Expand Down Expand Up @@ -119,13 +121,17 @@
"--spectrum-radio-neutral-content-color-down",
"--spectrum-radio-neutral-content-color-focus",
"--spectrum-radio-neutral-content-color-hover",
"--spectrum-radio-text-font-style",
"--spectrum-radio-text-font-weight",
"--spectrum-radio-text-to-control"
],
"global": [
"--spectrum-accent-color-1000",
"--spectrum-accent-color-1100",
"--spectrum-accent-color-900",
"--spectrum-accent-content-color-default",
"--spectrum-accent-content-color-down",
"--spectrum-accent-content-color-hover",
"--spectrum-accent-content-color-key-focus",
"--spectrum-animation-duration-100",
"--spectrum-border-width-200",
"--spectrum-cjk-line-height-100",
"--spectrum-component-bottom-to-text-100",
"--spectrum-component-bottom-to-text-200",
Expand All @@ -135,10 +141,13 @@
"--spectrum-component-height-200",
"--spectrum-component-height-300",
"--spectrum-component-height-75",
"--spectrum-component-size-difference-down",
"--spectrum-component-size-minimum-perspective-down",
"--spectrum-component-top-to-text-100",
"--spectrum-component-top-to-text-200",
"--spectrum-component-top-to-text-300",
"--spectrum-component-top-to-text-75",
"--spectrum-default-font-style",
"--spectrum-disabled-content-color",
"--spectrum-focus-indicator-color",
"--spectrum-focus-indicator-gap",
Expand All @@ -147,27 +156,20 @@
"--spectrum-font-size-200",
"--spectrum-font-size-300",
"--spectrum-font-size-75",
"--spectrum-gray-50",
"--spectrum-gray-600",
"--spectrum-gray-700",
"--spectrum-gray-800",
"--spectrum-gray-25",
"--spectrum-line-height-100",
"--spectrum-neutral-background-color-selected-default",
"--spectrum-neutral-background-color-selected-down",
"--spectrum-neutral-background-color-selected-hover",
"--spectrum-neutral-background-color-selected-key-focus",
"--spectrum-neutral-content-color-default",
"--spectrum-neutral-content-color-down",
"--spectrum-neutral-content-color-hover",
"--spectrum-neutral-content-color-key-focus",
"--spectrum-regular-font-weight",
"--spectrum-text-to-control-100",
"--spectrum-text-to-control-200",
"--spectrum-text-to-control-300",
"--spectrum-text-to-control-75"
],
"passthroughs": [],
"high-contrast": [
"--highcontrast-radio-button-background-color",
"--highcontrast-radio-button-border-color-default",
"--highcontrast-radio-button-border-color-down",
"--highcontrast-radio-button-border-color-focus",
Expand Down
155 changes: 83 additions & 72 deletions components/radio/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@
*/

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

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

/* emphasized state colors selection indicator all themes */
--spectrum-radio-emphasized-accent-color: var(--spectrum-accent-color-900);
--spectrum-radio-emphasized-accent-color-hover: var(--spectrum-accent-color-1000);
--spectrum-radio-emphasized-accent-color-down: var(--spectrum-accent-color-1100);
--spectrum-radio-emphasized-accent-color-focus: var(--spectrum-accent-color-1000);

/* unchecked selection indicator */
--spectrum-radio-button-border-color-default: var(--spectrum-gray-600);
--spectrum-radio-button-border-color-hover: var(--spectrum-gray-700);
--spectrum-radio-button-border-color-down: var(--spectrum-gray-800);
--spectrum-radio-button-border-color-focus: var(--spectrum-gray-700);

/* checked selection indicator */
--spectrum-radio-button-checked-border-color-default: var(--spectrum-neutral-background-color-selected-default);
--spectrum-radio-button-checked-border-color-hover: var(--spectrum-neutral-background-color-selected-hover);
--spectrum-radio-button-checked-border-color-down: var(--spectrum-neutral-background-color-selected-down);
--spectrum-radio-button-checked-border-color-focus: var(--spectrum-neutral-background-color-selected-key-focus);
--spectrum-radio-emphasized-accent-color: var(--spectrum-accent-content-color-default);
--spectrum-radio-emphasized-accent-color-hover: var(--spectrum-accent-content-color-hover);
--spectrum-radio-emphasized-accent-color-down: var(--spectrum-accent-content-color-down);
--spectrum-radio-emphasized-accent-color-focus: var(--spectrum-accent-content-color-key-focus);

/* radio checked/unchecked selection indicator */
--spectrum-radio-button-border-color-default: var(--spectrum-neutral-content-color-default);
--spectrum-radio-button-border-color-hover: var(--spectrum-neutral-content-color-hover);
--spectrum-radio-button-border-color-down: var(--spectrum-neutral-content-color-down);
--spectrum-radio-button-border-color-focus: var(--spectrum-neutral-content-color-key-focus);

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

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

--spectrum-radio-font-size: var(--spectrum-font-size-100);
--spectrum-radio-border-width: var(--spectrum-border-width-200);
--spectrum-radio-text-font-weight: var(--spectrum-regular-font-weight);
--spectrum-radio-text-font-style: var(--spectrum-default-font-style);

/* CJK language support all themes */
&:lang(ja),
Expand Down Expand Up @@ -112,53 +109,6 @@
--spectrum-radio-font-size: var(--spectrum-font-size-300);
}

/* windows high contrast mode */
@media (forced-colors: active) {
.spectrum-Radio {
--highcontrast-radio-button-background-color: ButtonFace;

/* high contrast text */
--highcontrast-radio-neutral-content-color: CanvasText;
--highcontrast-radio-neutral-content-color-hover: CanvasText;
--highcontrast-radio-neutral-content-color-down: CanvasText;
--highcontrast-radio-neutral-content-color-focus: CanvasText;

/* high contrast selector */
--highcontrast-radio-button-border-color-default: ButtonText;
--highcontrast-radio-button-border-color-hover: Highlight;
--highcontrast-radio-button-border-color-down: ButtonText;
--highcontrast-radio-button-border-color-focus: Highlight;

/* high contrast emphasized selector */
--highcontrast-radio-emphasized-accent-color: ButtonText;
--highcontrast-radio-emphasized-accent-color-hover: Highlight;
--highcontrast-radio-emphasized-accent-color-down: ButtonText;
--highcontrast-radio-emphasized-accent-color-focus: Highlight;

/* high contrast checked selector */
--highcontrast-radio-button-checked-border-color-default: Highlight;
--highcontrast-radio-button-checked-border-color-hover: Highlight;
--highcontrast-radio-button-checked-border-color-down: Highlight;
--highcontrast-radio-button-checked-border-color-focus: Highlight;

/* high contrast disabled text */
--highcontrast-radio-disabled-content-color: GrayText;

/* high contrast disabled selector */
--highcontrast-radio-disabled-border-color: GrayText;

/* high contrast focus ring */
--highcontrast-radio-focus-indicator-color: CanvasText;

/* ensure focus ring is visible if user agent has non-accessible system overrides */
.spectrum-Radio-button {
&::after {
forced-color-adjust: none;
}
}
}
}

.spectrum-Radio {
display: inline-flex;
align-items: flex-start;
Expand All @@ -176,23 +126,30 @@

/* checked selection indicator hover */
.spectrum-Radio-input:checked + .spectrum-Radio-button::before {
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)));
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)));
}

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

&:active {
&:not(.is-readOnly):active {
.spectrum-Radio-input:not(:disabled) + .spectrum-Radio-button {
transform: perspective(var(--spectrum-component-size-minimum-perspective-down)) translateZ(var(--spectrum-component-size-difference-down));
}
}

&:active,
&.is-active {
/* selection indicator active */
.spectrum-Radio-button::before {
border-color: var(--highcontrast-radio-button-border-color-down, var(--mod-radio-button-border-color-down, var(--spectrum-radio-button-border-color-down)));
}

/* checked selection indicator active */
.spectrum-Radio-input:checked + .spectrum-Radio-button::before {
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)));
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)));
}

.spectrum-Radio-label {
Expand All @@ -218,7 +175,7 @@

/* selected selection indicator is focused state */
.spectrum-Radio-input:checked + .spectrum-Radio-button::before {
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)));
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)));
}

.spectrum-Radio-label {
Expand Down Expand Up @@ -311,7 +268,7 @@
&::before {
/* half of element width minus half of indicator width is checked border width */
border-width: calc((var(--spectrum-radio-button-control-size) / 2) - (var(--spectrum-radio-button-selection-indicator) / 2));
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)));
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)));
}
}

Expand All @@ -336,9 +293,8 @@

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

/* TODO: font weight and style tokens */
/* font-weight: var(--spectrum-radio-text-font-weight); **** missing token resolves to 400 ****/
/* font-style: var(--spectrum-radio-text-font-style); **** missing token resolves to normal ****/
font-weight: var(--spectrum-radio-text-font-weight);
font-style: var(--spectrum-radio-text-font-style);
color: var(--highcontrast-radio-neutral-content-color, var(--mod-radio-neutral-content-color, var(--spectrum-radio-neutral-content-color)));
line-height: var(--mod-radio-line-height, var(--spectrum-radio-line-height));

Expand Down Expand Up @@ -405,3 +361,58 @@
}
}
}

/* windows high contrast mode */
@media (forced-colors: active) {
.spectrum-Radio {
/* high contrast text */
--highcontrast-radio-neutral-content-color: CanvasText;
--highcontrast-radio-neutral-content-color-hover: CanvasText;
--highcontrast-radio-neutral-content-color-down: CanvasText;
--highcontrast-radio-neutral-content-color-focus: CanvasText;

/* high contrast selector */
--highcontrast-radio-button-border-color-default: ButtonText;
--highcontrast-radio-button-border-color-hover: Highlight;
--highcontrast-radio-button-border-color-down: ButtonText;
--highcontrast-radio-button-border-color-focus: Highlight;

/* high contrast emphasized selector */
--highcontrast-radio-emphasized-accent-color: Highlight;
--highcontrast-radio-emphasized-accent-color-hover: Highlight;
--highcontrast-radio-emphasized-accent-color-down: ButtonText;
--highcontrast-radio-emphasized-accent-color-focus: Highlight;

/* high contrast checked selector */
--highcontrast-radio-button-checked-border-color-default: Highlight;
--highcontrast-radio-button-checked-border-color-hover: Highlight;
--highcontrast-radio-button-checked-border-color-down: Highlight;
--highcontrast-radio-button-checked-border-color-focus: Highlight;

/* high contrast disabled text */
--highcontrast-radio-disabled-content-color: GrayText;

/* high contrast disabled selector */
--highcontrast-radio-disabled-border-color: GrayText;

/* high contrast focus ring */
--highcontrast-radio-focus-indicator-color: CanvasText;

/* ensure focus ring is visible if user agent has non-accessible system overrides */
.spectrum-Radio-button {
&::after {
forced-color-adjust: none;
}
}

&.is-readOnly {
.spectrum-Radio-input + .spectrum-Radio-button::before {
border-color: var(--highcontrast-radio-button-border-color-default);
}

&:hover .spectrum-Radio-input + .spectrum-Radio-button::before {
border-color: var(--highcontrast-radio-button-border-color-default);
}
}
}
}
8 changes: 7 additions & 1 deletion components/radio/stories/radio.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Sizes } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isChecked, isDisabled, isEmphasized, isReadOnly, size } from "@spectrum-css/preview/types";
import { isActive, isChecked, isDisabled, isEmphasized, isFocused, isHovered, isReadOnly, size } from "@spectrum-css/preview/types";
import metadata from "../dist/metadata.json";
import packageJson from "../package.json";
import { RadioGroup } from "./radio.test.js";
Expand Down Expand Up @@ -40,6 +40,9 @@ export default {
isChecked,
isDisabled,
isReadOnly,
isHovered,
isFocused,
isActive,
},
args: {
rootClass: "spectrum-Radio",
Expand All @@ -49,6 +52,9 @@ export default {
isChecked: false,
isDisabled: false,
isReadOnly: false,
isHovered: false,
isFocused: false,
isActive: false,
},
parameters: {
actions: {
Expand Down
Loading
Loading