fix(menu): adjust switches and controls

- Remove dividers control for single menu item story, which isn't meant
to show dividers
- Add values to Menu Item Only Chromatic testing preview
- Add control to add custom value to Menu Item Only
- Move hasAction (switches) controls to menu item only
- hasDividers control only exists on Menu with variants story
- selectionMode control removed from Collapsible, Tray Submenu stories
- Add isTraySubmenu control

Author: rise-erpelding

components/menu/stories/menu.stories.js

@@ -51,38 +51,17 @@ export default {
 			control: "text",
 			if: { arg: "shouldTruncate", truthy: true },
 		},
-		hasActions: {
-			name: "Has switches",
-			description: "If multiple selection is enabled, show switches instead of checkboxes to show which items have been selected",
-			type: { name: "boolean" },
-			table: {
-				type: { summary: "boolean" },
-				category: "Selection",
-			},
-			control: "boolean",
-			if: { arg: "selectionMode", eq: "multiple" },
-		},
 		labelledby: { table: { disable: true } },
 		items: { table: { disable: true } },
 		role: { table: { disable: true } },
 		subrole: { table: { disable: true } },
-		hasDividers: {
-			name: "Has dividers",
-			description: "Shows dividers between sections",
-			table: {
-				type: { summary: "boolean" },
-				category: "Component",
-			},
-			control: "boolean",
-		},
 	},
 	args: {
 		rootClass: "spectrum-Menu",
 		selectionMode: "none",
 		size: "m",
 		shouldTruncate: false,
 		maxInlineSize: "150px",
-		hasDividers: false,
 	},
 	parameters: {
 		actions: {
@@ -164,12 +143,22 @@ const ChromaticMenuWithVariants = (args) => {
 
 export const MenuWithVariants = (args) => window.isChromatic() ?
 	ChromaticMenuWithVariants(args) : Template(args);
+MenuWithVariants.argTypes = {
+	hasDividers: {
+		name: "Has dividers",
+		description: "Shows dividers between sections",
+		table: {
+			type: { summary: "boolean" },
+			category: "Component",
+		},
+		control: "boolean",
+	},
+};
 MenuWithVariants.args = {
 	role: "listbox",
 	subrole: "option",
 	customStyles: { maxWidth: "400px" },
 	selectionMode: "none",
-	hasActions: false,
 	hasDividers: false,
 	items: [
 		{
@@ -285,6 +274,9 @@ MenuWithVariants.args = {
 };
 
 export const Collapsible = Template.bind({});
+Collapsible.argTypes = {
+	selectionMode: { table: { disable: true } },
+};
 Collapsible.args = {
 	shouldTruncate: true,
 	items: [
@@ -355,6 +347,18 @@ Collapsible.args = {
 };
 
 export const TraySubmenu = Template.bind({});
+TraySubmenu.argTypes = {
+	selectionMode: { table: { disable: true } },
+	isTraySubmenu: {
+		name: "Is tray submenu",
+		type: { name: "boolean" },
+		table: {
+			type: { summary: "boolean" },
+			category: "Component",
+		},
+		control: "boolean",
+	}
+};
 TraySubmenu.args = {
 	selectionMode: "multiple",
 	customStyles: {
@@ -478,6 +482,41 @@ const MultiCheckboxSelectedStates = (args) => {
 	`;
 };
 
+const WithValueStates = (args) => {
+	const baseValueArgs = {...args, hasValue: true, value: "Value"};
+	const valueData = [
+		{
+			stateTitle: "With value",
+			args: { ...baseValueArgs },
+		},
+		{
+			stateTitle: "With value, disabled",
+			args: { ...baseValueArgs, isDisabled: true },
+		},
+		{
+			stateTitle: "With value and switch",
+			args: { ...baseValueArgs, hasActions: true },
+		},
+		{
+			stateTitle: "With value, truncated label",
+			args: { ...baseValueArgs, shouldTruncate: true, maxInlineSize: "195px", items: [{ label: "Truncated label on menu item" }] },
+		},
+	];
+
+	return valueData.map((valueItem) => html`
+		<div>
+		${Typography({
+			semantics: "detail",
+			size: "s",
+			content: [ valueItem.stateTitle ],
+		})}
+			<div>
+				${Template({ ...args, ...valueItem.args })}
+			</div>
+		</div>
+	`);
+};
+
 const ChromaticMenuItem = (args) => {
 	const sectionData = [
 		{
@@ -512,6 +551,10 @@ const ChromaticMenuItem = (args) => {
 			sectionTitle: "Multi-selection with switches and switch label",
 			sectionMarkup: MultiCheckboxSelectedStates({...args, selectionMode: "multiple", hasActions: true, items: [{ label: "Menu item", value: "switch label"}]}),
 		},
+		{
+			sectionTitle: "With values",
+			sectionMarkup: WithValueStates(args),
+		},
 		{
 			sectionTitle: "Sizes",
 			sectionMarkup: Sizes({ ...args, items: [{ label: "With sizing", iconName: "Share" }] }),
@@ -546,13 +589,15 @@ MenuItemOnly.args = {
 		},
 	],
 	hasActions: false,
+	hasValue: false,
 	hasItemDescription: false,
 	isDisabled: false,
 	isItemActive: false,
 	isItemFocused: false,
 	isItemHovered: false,
 	isItemSelected: false,
 	singleItemDescription: "Menu item description",
+	singleItemValue: "Value",
 };
 MenuItemOnly.argTypes = {
 	isItemActive: { table: { disable: true } },
@@ -582,6 +627,7 @@ MenuItemOnly.argTypes = {
 		},
 		if: { arg: "selectionMode", not: { eq: "none" } },
 	},
+	hasDividers:  { table: { disable: true } },
 	hasItemDescription: {
 		name: "Has menu item description",
 		type: { name: "boolean" },
@@ -591,6 +637,17 @@ MenuItemOnly.argTypes = {
 			control: "boolean",
 		},
 	},
+	hasActions: {
+		name: "Has switches",
+		description: "If multiple selection is enabled, show switches instead of checkboxes to show which items have been selected",
+		type: { name: "boolean" },
+		table: {
+			type: { summary: "boolean" },
+			category: "Selection",
+		},
+		control: "boolean",
+		if: { arg: "selectionMode", eq: "multiple" },
+	},
 	singleItemDescription: {
 		name: "Menu item description for single menu item",
 		type: { name: "text", required: true },
@@ -601,6 +658,25 @@ MenuItemOnly.argTypes = {
 		control: "text",
 		if: { arg: "hasItemDescription", truthy: true },
 	},
+	hasValue: {
+		name: "Has value text",
+		type: { name: "boolean" },
+		table: {
+			type: { summary: "boolean" },
+			category: "Content",
+			control: "boolean",
+		},
+	},
+	singleItemValue: {
+		name: "Menu item value for single menu item",
+		type: { name: "text", required: true },
+		table: {
+			type: { summary: "text" },
+			category: "Content",
+		},
+		control: "text",
+		if: { arg: "hasValue", truthy: true },
+	},
 };
 
 // story used in Picker component

components/menu/stories/template.js

@@ -303,6 +303,7 @@ export const Template = ({
 	rootClass = "spectrum-Menu",
 	selectionMode = "none",
 	singleItemDescription,
+	singleItemValue,
 	shouldTruncate,
 	size,
 	subrole = "menuitem",
@@ -360,6 +361,7 @@ export const Template = ({
             selectionMode,
             shouldTruncate,
             size,
+            value: singleItemValue || i.value,
           });
       })}
     </ul>