feat(actionmenu): migration to S2

castastrophe · castastrophe · commit 779e4117a1f1 · 2025-07-30T16:23:54.000-04:00
diff --git a/components/actionbutton/stories/template.js b/components/actionbutton/stories/template.js
@@ -55,6 +55,7 @@ export const Template = ({
 	isActive = false,
 	isDisabled = false,
 	hasPopup = "false",
+	showPopup = false,
 	popupId,
 	hideLabel = false,
 	staticColor,
@@ -105,7 +106,7 @@ export const Template = ({
 				updateArgs({ isFocused: false });
 			}}
 		>
-			${when(hasPopup && hasPopup !== "false", () =>
+			${when(showPopup && hasPopup && hasPopup !== "false", () =>
 				Icon({
 					size,
 					iconName: "CornerTriangle" + ({
diff --git a/components/actionmenu/dist/metadata.json b/components/actionmenu/dist/metadata.json
@@ -0,0 +1,9 @@
+{
+  "sourceFile": "index.css",
+  "selectors": [".spectrum-ActionMenu", ".spectrum-ActionMenu-popover"],
+  "modifiers": [],
+  "component": ["--spectrum-actionmenu-button-to-menu-gap"],
+  "global": ["--spectrum-spacing-100"],
+  "passthroughs": ["--mod-popover-animation-distance"],
+  "high-contrast": []
+}
diff --git a/components/actionmenu/index.css b/components/actionmenu/index.css
@@ -0,0 +1,36 @@
+/*!
+ * Copyright 2024 Adobe. All rights reserved.
+ *
+ * This file is licensed to you under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License. You may obtain a copy
+ * of the License at <http://www.apache.org/licenses/LICENSE-2.0>
+ *
+ * Unless required by applicable law or agreed to in writing, software distributed under
+ * the License is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR REPRESENTATIONS
+ * OF ANY KIND, either express or implied. See the License for the specific language
+ * governing permissions and limitations under the License.
+ */
+
+/*
+ * @spectrum-css/actionmenu
+ * This component is a combination of a menu, popover, and action button.
+ * It is used to display a list of actions in a popover menu when the user clicks on an action button.
+ * The markup has the following structure:
+ * <div class="spectrum-ActionMenu"> <!-- This is the container -->
+ *   <button class="spectrum-ActionMenu-trigger spectrum-ActionButton"> ... </button> <!-- This is the action button -->
+ *   <div class="spectrum-ActionMenu-popover spectrum-Popover"> <!-- This is the popover that contains the menu -->
+ *     <ul class="spectrum-ActionMenu-menu spectrum-Menu"> <!-- This is the menu -->
+ */
+
+.spectrum-ActionMenu {
+	--spectrum-actionmenu-button-to-menu-gap: var(--spectrum-spacing-100);
+	/* @todo are these both needed? since popover floats above other UI, I'm not sure if padding really makes sense or matters here */
+	/* --spectrum-actionmenu-popover-padding: var(--spectrum-spacing-100); */
+}
+
+.spectrum-ActionMenu-popover {
+	/* @passthrough start -- popover */
+	/* note: right now this is already the same value as the popover animation distance */
+	--mod-popover-animation-distance: var(--spectrum-actionmenu-button-to-menu-gap);
+	/* @passthrough end */
+}
diff --git a/components/actionmenu/project.json b/components/actionmenu/project.json
@@ -0,0 +1,17 @@
+{
+	"$schema": "../../node_modules/nx/schemas/project-schema.json",
+	"name": "actionmenu",
+	"tags": ["component"],
+	"targets": {
+		"build": {},
+		"clean": {},
+		"compare": {},
+		"format": {},
+		"lint": {},
+		"report": {},
+		"test": {
+			"defaultConfiguration": "scope"
+		},
+		"validate": {}
+	}
+}
diff --git a/components/actionmenu/stories/actionmenu.stories.js b/components/actionmenu/stories/actionmenu.stories.js
@@ -1,21 +1,37 @@
+import { ArgGrid } from "@spectrum-css/preview/decorators/utilities.js";
+import { disableDefaultModes } from "@spectrum-css/preview/modes";
+import { isOpen } from "@spectrum-css/preview/types";
+
 import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js";
 import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
 import { default as Menu } from "@spectrum-css/menu/stories/menu.stories.js";
 import { default as Popover } from "@spectrum-css/popover/stories/popover.stories.js";
-import { disableDefaultModes } from "@spectrum-css/preview/modes";
-import { isOpen } from "@spectrum-css/preview/types";
-import packageJson from "../package.json";
+
 import { ActionMenuGroup } from "./actionmenu.test.js";
+import { Template } from "./template.js";
+
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
 
 /**
- * The action menu component is an action button with a popover. The `is-selected` class should be applied to the button when the menu is open. Note that the accessibility roles are different for an action menu compared to a normal menu.
+ * Action menu allows users to access and execute various commands or tasks related to their current workflow. It's typically triggered from an action button by user interaction.
+ *
+ * Note that the accessibility roles are different for an action menu compared to a normal menu. The action menu is a combination of a menu, popover, and action button.
  */
 export default {
 	title: "Action menu",
 	component: "ActionMenu",
 	argTypes: {
 		withTip: Popover.argTypes.withTip,
-		position: Popover.argTypes.position,
+		position: {
+			...Popover.argTypes.position,
+			options: [
+				"bottom-start",
+				"bottom-end",
+				"start-top",
+				"end-top",
+			]
+		},
 		isOpen,
 		iconName: {
 			...(IconStories?.argTypes?.iconName ?? {}),
@@ -35,7 +51,9 @@ export default {
 	args: {
 		isOpen: false,
 		withTip: Popover.args.withTip,
-		position: Popover.args.position,
+		position: "bottom-start",
+		iconName: "AddCircle",
+		label: "Add",
 	},
 	parameters: {
 		actions: {
@@ -45,37 +63,81 @@ export default {
 				...(Menu.parameters?.actions?.handles ?? []),
 			],
 		},
-		packageJson,
 		docs: {
 			story: {
 				height: "200px",
 			}
-		}
+		},
+		design: {
+			type: "figma",
+			url: "https://www.figma.com/design/eoZHKJH9a3LJkHYCGt60Vb/S2-token-specs?node-id=19758-3424",
+		},
+		packageJson,
+		metadata,
+		status: {
+			type: "migrated",
+		},
 	},
+	tags: ["migrated"],
 };
 
 export const Default = ActionMenuGroup.bind({});
 Default.args = {
 	isOpen: true,
-	position: "bottom",
-	label: "More actions",
-	iconName: "More",
-	items: [
-		{
-			label: "Action 1",
-		},
-		{
-			label: "Action 2",
-		},
-		{
-			label: "Action 3",
-		},
-		{
-			label: "Action 4",
-		},
-	],
+	items: [{
+		heading: "Add new page",
+		items: [
+			{
+				label: "Same size",
+				iconName: "Copy"
+			},
+			{
+				label: "Custom size",
+				iconName: "Properties"
+			},
+			{
+				label: "Duplicate",
+				iconName: "Duplicate"
+			}
+		]
+	}, {
+		type: "divider"
+	}, {
+		heading: "Edit page",
+		items: [{
+			label: "Edit timeline",
+			iconName: "Clock",
+			description: "Add time to this page"
+		}],
+	}],
 };
 
+// ********* DOCS ONLY ********* //
+
+/**
+ * Action menus can be positioned in four locals relative to the trigger but <u>only one menu can be triggered at a single time</u>.
+ *
+ * * `top` - The menu appears above the trigger.
+ * * `bottom` - The menu appears below the trigger.
+ * * `left` - The menu appears to the left of the trigger.
+ * * `right` - The menu appears to the right of the trigger.
+ *
+ * The `position` prop can be used to set the position of the menu.
+ */
+export const PlacementOptions = (args, context) => ArgGrid({
+	Template,
+	argKey: "position",
+	...args,
+}, context);
+PlacementOptions.args = Default.args;
+PlacementOptions.tags = ["!dev"];
+PlacementOptions.parameters = {
+	chromatic: {
+		disableSnapshot: true,
+	},
+};
+
+
 // ********* VRT ONLY ********* //
 export const WithForcedColors = ActionMenuGroup.bind({});
 WithForcedColors.args = Default.args;
diff --git a/components/actionmenu/stories/template.js b/components/actionmenu/stories/template.js
@@ -4,6 +4,7 @@ import { Template as Popover } from "@spectrum-css/popover/stories/template.js";
 import { getRandomId } from "@spectrum-css/preview/decorators";
 
 export const Template = ({
+	rootClass = "spectrum-ActionMenu",
 	id = getRandomId("actionmenu"),
 	testId,
 	triggerId = getRandomId("actionmenu-trigger"),
@@ -33,13 +34,16 @@ export const Template = ({
 				iconName,
 				iconSet,
 				id: triggerId,
-				customClasses,
+				customClasses: [`${rootClass}-trigger`],
 			}, context),
 		position: "bottom-start",
 		customStyles,
+		customClasses: [`${rootClass}-popover`],
+		customWrapperClasses: [rootClass, ...customClasses],
 		content: [
 			(passthroughs) => Menu({
 				...passthroughs,
+				customClasses: [`${rootClass}-menu`],
 				items,
 				isOpen,
 				size
diff --git a/components/menu/index.css b/components/menu/index.css
@@ -267,7 +267,7 @@
 
 .spectrum-Menu {
 	display: inline-block;
-	inline-size: var(--mod-menu-inline-size, auto);
+	inline-size: var(--mod-menu-inline-size, max-content);
 	box-sizing: border-box;
 	margin: 0;
 	padding: 0;
diff --git a/components/popover/stories/popover.test.js b/components/popover/stories/popover.test.js
@@ -29,104 +29,14 @@ export const PopoverGroup = Variants({
 			"end",
 			"end-top",
 			"end-bottom",
-		].map((position) => {
-			const popoverHeight = 158;
-			const popoverWidth = 105;
-
-			let wrapperStyles = {
-				"justify-content": "center",
-				// Makes sure that padding does not add to the min-block-size set through the use of the story's parameters.docs.story.height setting.
-				"box-sizing": "border-box",
-			};
-			switch (position) {
-				case "top":
-				case "top-left":
-				case "top-right":
-				case "top-start":
-				case "top-end":
-					wrapperStyles["align-items"] = "end";
-					wrapperStyles["inline-size"] = `${popoverWidth + 20}px`;
-					wrapperStyles["padding-block-start"] = `${popoverHeight + 20}px`;
-					break;
-				case "bottom":
-				case "bottom-left":
-				case "bottom-right":
-				case "bottom-start":
-				case "bottom-end":
-					wrapperStyles["align-items"] = "start";
-					wrapperStyles["inline-size"] = `${popoverWidth + 20}px`;
-					wrapperStyles["padding-block-end"] = `${popoverHeight + 20}px`;
-					break;
-				case "right":
-					wrapperStyles["align-items"] = "center";
-					wrapperStyles["block-size"] = `${popoverHeight + 20}px`;
-					wrapperStyles["padding-right"] = `${popoverWidth + 20}px`;
-					break;
-				case "right-top":
-					wrapperStyles["align-items"] = "start";
-					wrapperStyles["block-size"] = `${popoverHeight + 20}px`;
-					wrapperStyles["padding-right"] = `${popoverWidth + 20}px`;
-					break;
-				case "right-bottom":
-					wrapperStyles["align-items"] = "end";
-					wrapperStyles["block-size"] = `${popoverHeight + 20}px`;
-					wrapperStyles["padding-right"] = `${popoverWidth + 20}px`;
-					break;
-				case "left":
-					wrapperStyles["align-items"] = "center";
-					wrapperStyles["block-size"] = `${popoverHeight + 20}px`;
-					wrapperStyles["padding-left"] = `${popoverWidth + 20}px`;
-					break;
-				case "left-top":
-					wrapperStyles["align-items"] = "start";
-					wrapperStyles["block-size"] = `${popoverHeight + 20}px`;
-					wrapperStyles["padding-left"] = `${popoverWidth + 20}px`;
-					break;
-				case "left-bottom":
-					wrapperStyles["align-items"] = "end";
-					wrapperStyles["block-size"] = `${popoverHeight + 20}px`;
-					wrapperStyles["padding-left"] = `${popoverWidth + 20}px`;
-					break;
-				case "start":
-					wrapperStyles["align-items"] = "center";
-					wrapperStyles["block-size"] = `${popoverHeight + 20}px`;
-					wrapperStyles["padding-inline-start"] = `${popoverWidth + 20}px`;
-					break;
-				case "start-top":
-					wrapperStyles["align-items"] = "start";
-					wrapperStyles["block-size"] = `${popoverHeight + 20}px`;
-					wrapperStyles["padding-inline-start"] = `${popoverWidth + 20}px`;
-					break;
-				case "start-bottom":
-					wrapperStyles["align-items"] = "end";
-					wrapperStyles["block-size"] = `${popoverHeight + 20}px`;
-					wrapperStyles["padding-inline-start"] = `${popoverWidth + 20}px`;
-					break;
-				case "end":
-					wrapperStyles["align-items"] = "center";
-					wrapperStyles["block-size"] = `${popoverHeight + 20}px`;
-					wrapperStyles["padding-inline-end"] = `${popoverWidth + 20}px`;
-					break;
-				case "end-top":
-					wrapperStyles["align-items"] = "start";
-					wrapperStyles["block-size"] = `${popoverHeight + 20}px`;
-					wrapperStyles["padding-inline-end"] = `${popoverWidth + 20}px`;
-					break;
-				case "end-bottom":
-					wrapperStyles["align-items"] = "end";
-					wrapperStyles["block-size"] = `${popoverHeight + 20}px`;
-					wrapperStyles["padding-inline-end"] = `${popoverWidth + 20}px`;
-					break;
-			}
-
-			return {
-				testHeading: `Position: ${position}`,
-				wrapperStyles,
-				position,
-				popoverHeight,
-				popoverWidth,
-			};
-		}),
+		].map((position) => ({
+			testHeading: `Position: ${position}`,
+			position,
+			popoverHeight: 178,
+			popoverWidth: 113,
+			triggerHeight: 32,
+			triggerWidth: 66,
+		})),
 		{
 			testHeading: "Dialog style content",
 			position: "bottom-start",
diff --git a/components/popover/stories/template.js b/components/popover/stories/template.js
diff --git a/tasks/component-compare.js b/tasks/component-compare.js
