Skip to content

feat(action-menu): S2 migration [CSS-1160] #4085

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

Open
wants to merge 2 commits into
base: spectrum-two
Choose a base branch
from
+1,495 −909
Open

feat(action-menu): S2 migration [CSS-1160] #4085

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ed7599f
feat(actionmenu): migration to S2
castastrophe Aug 29, 2025
13e72bf
chore(menu): apply aria fixes to menu template per a11y review
castastrophe Sep 2, 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
21 changes: 7 additions & 14 deletions components/actionbutton/dist/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,17 +14,16 @@
".spectrum-ActionButton-label",
".spectrum-ActionButton-label:empty",
".spectrum-ActionButton.is-disabled",
".spectrum-ActionButton.is-selected",
".spectrum-ActionButton.is-selected.spectrum-ActionButton--emphasized",
".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticBlack",
".spectrum-ActionButton.is-selected.spectrum-ActionButton--staticWhite",
".spectrum-ActionButton.spectrum-ActionButton--emphasized:is(.is-selected, [aria-pressed=\"true\"], [aria-expanded=\"true\"])",
".spectrum-ActionButton.spectrum-ActionButton--quiet",
".spectrum-ActionButton.spectrum-ActionButton--quiet.is-selected",
".spectrum-ActionButton.spectrum-ActionButton--quiet:disabled:not(.is-selected)",
".spectrum-ActionButton.spectrum-ActionButton--quiet:is(.is-selected, [aria-pressed=\"true\"], [aria-expanded=\"true\"])",
".spectrum-ActionButton.spectrum-ActionButton--quiet:is(:disabled, .is-disabled, [aria-disabled=\"true\"]):not(:is([aria-pressed=\"true\"], [aria-expanded=\"true\"]))",
".spectrum-ActionButton.spectrum-ActionButton--staticBlack",
".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet",
".spectrum-ActionButton.spectrum-ActionButton--staticBlack:is(.is-selected, [aria-pressed=\"true\"], [aria-expanded=\"true\"])",
".spectrum-ActionButton.spectrum-ActionButton--staticWhite",
".spectrum-ActionButton.spectrum-ActionButton--staticWhite.spectrum-ActionButton--quiet",
".spectrum-ActionButton.spectrum-ActionButton--staticWhite:is(.is-selected, [aria-pressed=\"true\"], [aria-expanded=\"true\"])",
".spectrum-ActionButton::-moz-focus-inner",
".spectrum-ActionButton:active",
".spectrum-ActionButton:after",
Expand All @@ -35,15 +34,15 @@
".spectrum-ActionButton:focus-visible:after",
".spectrum-ActionButton:has(.spectrum-ActionButton-icon)",
".spectrum-ActionButton:hover",
".spectrum-ActionButton:is(.is-selected, [aria-pressed=\"true\"], [aria-expanded=\"true\"])",
".spectrum-ActionButton:is(:disabled, .is-disabled, [aria-disabled=\"true\"])",
".spectrum-ActionButton:not(:has(.spectrum-ActionButton-label))",
"a.spectrum-ActionButton"
],
"modifiers": [
"--mod-actionbutton-animation-duration",
Copy link
Collaborator Author

Choose a reason for hiding this comment

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

Since this is for S2 and we've agreed to remove modifiers, I removed the mods on any lines I needed to update for this change anyway.

"--mod-actionbutton-background-color-default",
"--mod-actionbutton-background-color-default-selected",
"--mod-actionbutton-background-color-default-selected-emphasized",
"--mod-actionbutton-background-color-disabled",
"--mod-actionbutton-background-color-down",
"--mod-actionbutton-background-color-down-selected",
"--mod-actionbutton-background-color-down-selected-emphasized",
Expand All @@ -57,7 +56,6 @@
"--mod-actionbutton-content-color-default",
"--mod-actionbutton-content-color-default-selected",
"--mod-actionbutton-content-color-default-selected-emphasized",
"--mod-actionbutton-content-color-disabled",
"--mod-actionbutton-content-color-down",
"--mod-actionbutton-content-color-down-selected",
"--mod-actionbutton-content-color-down-selected-emphasized",
Expand All @@ -67,14 +65,9 @@
"--mod-actionbutton-content-color-hover",
"--mod-actionbutton-content-color-hover-selected",
"--mod-actionbutton-content-color-hover-selected-emphasized",
"--mod-actionbutton-edge-to-hold-icon",
"--mod-actionbutton-edge-to-text",
"--mod-actionbutton-edge-to-visual",
"--mod-actionbutton-edge-to-visual-only",
"--mod-actionbutton-focus-indicator-border-radius",
"--mod-actionbutton-focus-indicator-color",
"--mod-actionbutton-focus-indicator-gap",
"--mod-actionbutton-focus-indicator-thickness",
"--mod-actionbutton-font-size",
"--mod-actionbutton-font-style",
"--mod-actionbutton-font-weight",
Expand Down
79 changes: 38 additions & 41 deletions components/actionbutton/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ governing permissions and limitations under the License.
--spectrum-actionbutton-background-color-focus: var(--spectrum-gray-200);
--spectrum-actionbutton-background-color-disabled: transparent;

&.is-selected {
&:is(.is-selected, [aria-pressed="true"], [aria-expanded="true"]) {
--spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color);
}
}
Expand Down Expand Up @@ -118,7 +118,8 @@ governing permissions and limitations under the License.
}
}

&.is-selected {
/* expanded is specific to action menu when the menu is open */
&:is(.is-selected, [aria-pressed="true"], [aria-expanded="true"]) {
--mod-actionbutton-background-color-default: var(--mod-actionbutton-background-color-default-selected, var(--spectrum-neutral-background-color-selected-default));
--mod-actionbutton-background-color-hover: var(--mod-actionbutton-background-color-hover-selected, var(--spectrum-neutral-background-color-selected-hover));
--mod-actionbutton-background-color-down: var(--mod-actionbutton-background-color-down-selected, var(--spectrum-neutral-background-color-selected-down));
Expand Down Expand Up @@ -252,26 +253,46 @@ governing permissions and limitations under the License.
background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-default)));
color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-default, var(--spectrum-actionbutton-content-color-default)));

transition: border-color var(--highcontrast-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out;

&::after {
position: absolute;
inset: 0;
margin: calc((var(--spectrum-actionbutton-focus-indicator-gap) + var(--spectrum-actionbutton-border-width)) * -1);
border-radius: var(--spectrum-actionbutton-focus-indicator-border-radius);
transition: box-shadow var(--highcontrast-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration)) ease-in-out;
pointer-events: none;
content: "";
}

&:hover {
background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-hover, var(--spectrum-actionbutton-background-color-hover)));
color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-hover, var(--spectrum-actionbutton-content-color-hover)));
background-color: var(--highcontrast-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-hover));
color: var(--highcontrast-actionbutton-content-color-default, var(--spectrum-actionbutton-content-color-hover));
}

&:focus-visible {
background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-focus, var(--spectrum-actionbutton-background-color-focus)));
color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-focus, var(--spectrum-actionbutton-content-color-focus)));
background-color: var(--highcontrast-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-focus));
color: var(--highcontrast-actionbutton-content-color-default, var(--spectrum-actionbutton-content-color-focus));

box-shadow: none;
outline: none;

&::after {
box-shadow: 0 0 0 var(--spectrum-actionbutton-focus-indicator-thickness) var(--highcontrast-actionbutton-focus-indicator-color, var(--spectrum-actionbutton-focus-indicator-color));
}
}

&:active {
background-color: var(--highcontrast-actionbutton-background-color-default, var(--mod-actionbutton-background-color-down, var(--spectrum-actionbutton-background-color-down)));
color: var(--highcontrast-actionbutton-content-color-default, var(--mod-actionbutton-content-color-down, var(--spectrum-actionbutton-content-color-down)));
background-color: var(--highcontrast-actionbutton-background-color-default, var(--spectrum-actionbutton-background-color-down));
color: var(--highcontrast-actionbutton-content-color-default, var(--spectrum-actionbutton-content-color-down));
transform: perspective(var(--spectrum-actionbutton-downstate-perspective)) translateZ(var(--spectrum-component-size-difference-down));
}

&:disabled,
&.is-disabled {
background-color: var(--highcontrast-actionbutton-background-color-disabled, var(--mod-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled)));
color: var(--highcontrast-actionbutton-content-color-disabled, var(--mod-actionbutton-content-color-disabled, var(--spectrum-actionbutton-content-color-disabled)));
/* ideal when we want to disable the button but still allow it's content to be focused */
&:is(:disabled, .is-disabled, [aria-disabled="true"]) {
/* @todo: should pointer events be disabled? */
background-color: var(--highcontrast-actionbutton-background-color-disabled, var(--spectrum-actionbutton-background-color-disabled));
color: var(--highcontrast-actionbutton-content-color-disabled, var(--spectrum-actionbutton-content-color-disabled));
}
}

Expand Down Expand Up @@ -313,36 +334,13 @@ a.spectrum-ActionButton {

.spectrum-ActionButton-hold {
position: absolute;
inset-inline-end: calc(var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--spectrum-actionbutton-border-width));
inset-block-end: calc(var(--mod-actionbutton-edge-to-hold-icon, var(--spectrum-actionbutton-edge-to-hold-icon)) - var(--spectrum-actionbutton-border-width));
inset-inline-end: calc(var(--spectrum-actionbutton-edge-to-hold-icon) - var(--spectrum-actionbutton-border-width));
inset-block-end: calc(var(--spectrum-actionbutton-edge-to-hold-icon) - var(--spectrum-actionbutton-border-width));
display: block;
color: inherit;
transform: var(--spectrum-logical-rotation);
}

/* Focus indicator */
.spectrum-ActionButton {
transition: border-color var(--highcontrast-actionbutton-animation-duration, var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration))) ease-in-out;

&::after {
position: absolute;
inset: 0;
margin: calc((var(--mod-actionbutton-focus-indicator-gap, var(--spectrum-actionbutton-focus-indicator-gap)) + var(--spectrum-actionbutton-border-width)) * -1);
border-radius: var(--mod-actionbutton-focus-indicator-border-radius, var(--spectrum-actionbutton-focus-indicator-border-radius));
transition: box-shadow var(--highcontrast-actionbutton-animation-duration, var(--mod-actionbutton-animation-duration, var(--spectrum-actionbutton-animation-duration))) ease-in-out;
pointer-events: none;
content: "";
}

&:focus-visible {
box-shadow: none;
outline: none;

&::after {
box-shadow: 0 0 0 var(--mod-actionbutton-focus-indicator-thickness, var(--spectrum-actionbutton-focus-indicator-thickness)) var(--highcontrast-actionbutton-focus-indicator-color, var(--mod-actionbutton-focus-indicator-color, var(--spectrum-actionbutton-focus-indicator-color)));
}
}
}

@media (forced-colors: active) {
.spectrum-ActionButton {
/**
Expand Down Expand Up @@ -388,7 +386,7 @@ a.spectrum-ActionButton {
--highcontrast-actionbutton-background-color-disabled: Canvas;
--highcontrast-actionbutton-content-color-default: CanvasText;

&:disabled:not(.is-selected) {
&:is(:disabled, .is-disabled, [aria-disabled="true"]):not(:is([aria-pressed="true"], [aria-expanded="true"])) {
--highcontrast-actionbutton-border-color: Canvas;
}
}
Expand All @@ -400,8 +398,7 @@ a.spectrum-ActionButton {
--highcontrast-actionbutton-border-color: Highlight;
}

/* Selected always shows as a solid highlighted color. */
&.is-selected {
&:is(.is-selected, [aria-pressed="true"], [aria-expanded="true"]) {
--highcontrast-actionbutton-border-color: Highlight;
--highcontrast-actionbutton-background-color-default: Highlight;
--highcontrast-actionbutton-content-color-default: HighlightText;
Expand Down
29 changes: 24 additions & 5 deletions components/actionbutton/stories/actionbutton.stories.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,14 @@
import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
import { Sizes, withDownStateDimensionCapture } from "@spectrum-css/preview/decorators";
import { disableDefaultModes } from "@spectrum-css/preview/modes";
import { isActive, isDisabled, isEmphasized, isFocused, isHovered, isQuiet, isSelected, size, staticColor } from "@spectrum-css/preview/types";
import metadata from "../dist/metadata.json";
import packageJson from "../package.json";
import { isActive, isDisabled, isEmphasized, isFocused, isHovered, isOpen, isQuiet, isSelected, size, staticColor } from "@spectrum-css/preview/types";
import { ActionButtonGroup } from "./actionbutton.test.js";
import { ActionButtonsWithIconOptions, IconOnlyOption, Template, TreatmentTemplate } from "./template.js";

// Local assets to render the component styles and structure
import metadata from "../dist/metadata.json";
import packageJson from "../package.json";

/**
* The action button component represents an action a user can take.
*
Expand Down Expand Up @@ -56,8 +58,8 @@ export default {
control: "boolean",
},
hasPopup: {
name: "Has popup",
description: "If the button triggers a popup action, this should be set to reflect the type of element that pops-up.",
name: "Has pop-up",
description: "If the button triggers a pop-up action, this should be set to reflect the type of element that pops-up.",
type: { name: "string" },
table: {
type: { summary: "string" },
Expand All @@ -66,6 +68,22 @@ export default {
control: "select",
options: ["true", "menu", "listbox", "tree", "grid", "dialog", "false"],
},
hasLongPress: {
name: "Long press",
description: "If the trigger supports a long-press action which triggers the menu, this should be set to true.",
type: { name: "boolean" },
table: {
type: { summary: "boolean" },
category: "Accessibility",
},
control: "boolean",
},
isOpen: {
...isOpen,
name: "Pop-up is open",
description: "When the button triggers a pop-up, this should be true when the pop-up is open.",
if: { arg: "hasPopup", truthy: true },
},
staticColor: {
...staticColor,
if: { arg: "isEmphasized", truthy: false },
Expand All @@ -77,6 +95,7 @@ export default {
isQuiet: false,
isEmphasized: false,
hasPopup: "false",
hasLongPress: false,
isActive: false,
isFocused: false,
isHovered: false,
Expand Down
2 changes: 2 additions & 0 deletions components/actionbutton/stories/actionbutton.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -17,12 +17,14 @@ export const ActionButtons = (args, context) => {
${Template({
...args,
hasPopup: "true",
hasLongPress: true,
hideLabel: true,
}, context)}
${Template({
...args,
iconName: undefined,
hasPopup: "true",
hasLongPress: true,
}, context)}
</div>
`;
Expand Down
17 changes: 12 additions & 5 deletions components/actionbutton/stories/template.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -54,7 +54,9 @@ export const Template = ({
isFocused = false,
isActive = false,
isDisabled = false,
isOpen = false,
hasPopup = "false",
hasLongPress = false,
popupId,
hideLabel = false,
staticColor,
Expand All @@ -72,7 +74,8 @@ export const Template = ({
aria-label=${ifDefined(hideLabel ? label : undefined)}
aria-haspopup=${ifDefined(hasPopup && hasPopup !== "false" ? hasPopup : undefined)}
aria-controls=${hasPopup && hasPopup !== "false" ? popupId : undefined}
aria-pressed=${isSelected ? "true" : "false"}
aria-pressed=${ifDefined(isSelected ? "true" : undefined)}
aria-expanded=${ifDefined(hasPopup && hasPopup !== "false" ? isOpen ? "true" : "false" : undefined)}
class=${classMap({
[rootClass]: true,
[`${rootClass}--size${size?.toUpperCase()}`]:
Expand All @@ -82,14 +85,14 @@ export const Template = ({
[`${rootClass}--static${capitalize(staticColor)}`]:
typeof staticColor !== "undefined",
["is-disabled"]: isDisabled,
["is-selected"]: isSelected,
["is-hover"]: isHovered,
["is-focus-visible"]: isFocused,
["is-active"]: isActive,
...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
})}
id=${id}
data-testid=${testId ?? id}
popovertarget=${ifDefined(hasPopup && hasPopup !== "false" ? popupId : undefined)}
role=${ifDefined(role)}
style=${styleMap(customStyles)}
?disabled=${isDisabled}
Expand All @@ -105,7 +108,7 @@ export const Template = ({
updateArgs({ isFocused: false });
}}
>
${when(hasPopup && hasPopup !== "false", () =>
${when(hasLongPress && hasPopup && hasPopup !== "false", () =>
Icon({
size,
iconName: "CornerTriangle" + ({
Expand Down Expand Up @@ -138,7 +141,7 @@ export const Template = ({

/**
* Displays multiple action buttons in a row, with different combinations of
* label, icon, and hold button (has popup).
* label, icon, and hold button (has pop-up).
*/
export const ActionButtonsWithIconOptions = (args, context) => Container({
withBorder: false,
Expand All @@ -162,19 +165,21 @@ export const ActionButtonsWithIconOptions = (args, context) => Container({
...args,
hideLabel: true,
hasPopup: "true",
hasLongPress: true,
}, context),
Template({
...args,
iconName: undefined,
hasPopup: "true",
hasLongPress: true,
}, context)
],
}, context);

/**
* Displays two action buttons in a row:
* - icon only action button
* - icon only action button with hold button (has popup)
* - icon only action button with hold button (has pop-up)
*/
export const IconOnlyOption = (args, context) => Container({
withBorder: false,
Expand All @@ -187,12 +192,14 @@ export const IconOnlyOption = (args, context) => Container({
...args,
hideLabel: true,
hasPopup: "true",
hasLongPress: true,
}, context),
Template({
...args,
hideLabel: true,
isQuiet: true,
hasPopup: "true",
hasLongPress: true,
}, context),
],
}, context);
Expand Down
2 changes: 1 addition & 1 deletion components/actiongroup/dist/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,10 @@
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item",
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item + .spectrum-ActionGroup-item",
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item .spectrum-ActionButton-label",
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item.is-selected",
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:first-child",
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:focus-visible",
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:hover",
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:is(.is-selected, [aria-pressed=\"true\"], [aria-expanded=\"true\"])",
".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:last-child",
".spectrum-ActionGroup--justified .spectrum-ActionGroup-item",
".spectrum-ActionGroup--sizeL",
Expand Down
2 changes: 1 addition & 1 deletion components/actiongroup/index.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,7 +102,7 @@
margin-inline-end: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset));
}

&.is-selected {
&:is(.is-selected, [aria-pressed="true"], [aria-expanded="true"]) {
z-index: 1;
}

Expand Down
9 changes: 9 additions & 0 deletions components/actionmenu/dist/metadata.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,9 @@
{
"sourceFile": "index.css",
"selectors": [".spectrum-ActionMenu", ".spectrum-ActionMenu-popover"],
"modifiers": ["--mod-actionmenu-button-to-menu-gap"],
"component": ["--spectrum-actionmenu-button-to-menu-gap"],
"global": ["--spectrum-spacing-100"],
"passthroughs": ["--mod-popover-animation-distance"],
"high-contrast": []
}
Loading
Loading