feat(actionmenu): migrate to s2 tokens and styling

Author: castastrophe

components/actionbutton/dist/metadata.json

@@ -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:where(.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:where(.is-selected, [aria-pressed=\"true\"], [aria-expanded=\"true\"])",
+    ".spectrum-ActionButton.spectrum-ActionButton--quiet:where(:disabled, .is-disabled, [aria-disabled=\"true\"]):not(:where(.is-selected, [aria-pressed=\"true\"], [aria-expanded=\"true\"]))",
     ".spectrum-ActionButton.spectrum-ActionButton--staticBlack",
     ".spectrum-ActionButton.spectrum-ActionButton--staticBlack.spectrum-ActionButton--quiet",
+    ".spectrum-ActionButton.spectrum-ActionButton--staticBlack:where(.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:where(.is-selected, [aria-pressed=\"true\"], [aria-expanded=\"true\"])",
     ".spectrum-ActionButton::-moz-focus-inner",
     ".spectrum-ActionButton:active",
     ".spectrum-ActionButton:after",
@@ -36,10 +35,11 @@
     ".spectrum-ActionButton:has(.spectrum-ActionButton-icon)",
     ".spectrum-ActionButton:hover",
     ".spectrum-ActionButton:not(:has(.spectrum-ActionButton-label))",
+    ".spectrum-ActionButton:where(.is-selected, [aria-pressed=\"true\"], [aria-expanded=\"true\"])",
+    ".spectrum-ActionButton:where(:disabled, .is-disabled, [aria-disabled=\"true\"])",
     "a.spectrum-ActionButton"
   ],
   "modifiers": [
-    "--mod-actionbutton-animation-duration",
     "--mod-actionbutton-background-color-default",
     "--mod-actionbutton-background-color-default-selected",
     "--mod-actionbutton-background-color-default-selected-emphasized",
@@ -71,10 +71,6 @@
     "--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",

components/actionbutton/index.css

@@ -63,7 +63,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 {
+		&:where(.is-selected, [aria-pressed="true"], [aria-expanded="true"]) {
 			--spectrum-actionbutton-background-color-disabled: var(--spectrum-disabled-background-color);
 		}
 	}
@@ -116,7 +116,8 @@ governing permissions and limitations under the License.
 		}
 	}
 
-	&.is-selected {
+	/* expanded is specific to action menu when the menu is open */
+	&:where(.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));
@@ -298,6 +299,16 @@ governing permissions and limitations under the License.
 		border-style: none;
 	}
 
+	&::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: "";
+	}
+
 	&:focus {
 		outline: none;
 	}
@@ -315,6 +326,13 @@ governing permissions and limitations under the License.
 	&: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)));
+
+		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 {
@@ -323,8 +341,8 @@ governing permissions and limitations under the License.
 		transform: perspective(var(--spectrum-actionbutton-downstate-perspective)) translateZ(var(--spectrum-component-size-difference-down));
 	}
 
-	&:disabled,
-	&.is-disabled {
+	/* ideal when we want to disable the button but still allow it's content to be focused */
+	&:where(:disabled, .is-disabled, [aria-disabled="true"]) {
 		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)));
 	}
@@ -364,10 +382,6 @@ a.spectrum-ActionButton {
 	/* Fixes horizontal alignment of text in anchor buttons */
 	text-align: center;
 
-	&:empty {
-		display: none;
-	}
-
 	pointer-events: none;
 
 	font-size: var(--mod-actionbutton-font-size, var(--spectrum-actionbutton-font-size));
@@ -378,40 +392,21 @@ a.spectrum-ActionButton {
 
 	text-overflow: ellipsis;
 	overflow: hidden;
+
+	&:empty {
+		display: none;
+	}
 }
 
 .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));
+	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 {
 		/**
@@ -457,7 +452,7 @@ a.spectrum-ActionButton {
 			--highcontrast-actionbutton-background-color-disabled: Canvas;
 			--highcontrast-actionbutton-content-color-default: CanvasText;
 
-			&:disabled:not(.is-selected) {
+			&:where(:disabled, .is-disabled, [aria-disabled="true"]):not(:where(.is-selected, [aria-pressed="true"], [aria-expanded="true"])) {
 				--highcontrast-actionbutton-border-color: Canvas;
 			}
 		}
@@ -469,8 +464,7 @@ a.spectrum-ActionButton {
 			--highcontrast-actionbutton-border-color: Highlight;
 		}
 
-		/* Selected always shows as a solid highlighted color. */
-		&.is-selected {
+		&:where(.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;

components/actionbutton/stories/actionbutton.stories.js

@@ -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.
  *
@@ -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" },
@@ -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 },
@@ -77,6 +95,7 @@ export default {
 		isQuiet: false,
 		isEmphasized: false,
 		hasPopup: "false",
+		hasLongPress: false,
 		isActive: false,
 		isFocused: false,
 		isHovered: false,

components/actionbutton/stories/actionbutton.test.js

@@ -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>
 	`;

components/actionbutton/stories/template.js

@@ -54,7 +54,9 @@ export const Template = ({
 	isFocused = false,
 	isActive = false,
 	isDisabled = false,
+	isOpen = false,
 	hasPopup = "false",
+	hasLongPress = false,
 	popupId,
 	hideLabel = false,
 	staticColor,
@@ -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()}`]:
@@ -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}
@@ -105,7 +108,7 @@ export const Template = ({
 				updateArgs({ isFocused: false });
 			}}
 		>
-			${when(hasPopup && hasPopup !== "false", () =>
+			${when(hasLongPress && hasPopup && hasPopup !== "false", () =>
 				Icon({
 					size,
 					iconName: "CornerTriangle" + ({
@@ -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,
@@ -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,
@@ -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);

components/actiongroup/dist/metadata.json

@@ -14,11 +14,11 @@
     ".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:last-child",
+    ".spectrum-ActionGroup--compact:not(.spectrum-ActionGroup--quiet) .spectrum-ActionGroup-item:where(.is-selected, [aria-pressed=\"true\"], [aria-expanded=\"true\"])",
     ".spectrum-ActionGroup--justified .spectrum-ActionGroup-item",
     ".spectrum-ActionGroup--sizeL",
     ".spectrum-ActionGroup--sizeM",

components/actiongroup/index.css

@@ -102,7 +102,7 @@
 			margin-inline-end: var(--mod-actiongroup-border-radius-reset, var(--spectrum-actiongroup-border-radius-reset));
 		}
 
-		&.is-selected {
+		&:where(.is-selected, [aria-pressed="true"], [aria-expanded="true"]) {
 			z-index: 1;
 		}
 

components/actionmenu/dist/metadata.json

@@ -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": []
+}