feat(accordion): add direct actions feature

- adds direct actions feature to storybook, template, and css

Author: rise-erpelding

components/accordion/dist/metadata.json

@@ -22,6 +22,9 @@
     ".spectrum-Accordion-item.is-open > .spectrum-Accordion-itemHeading .spectrum-Accordion-itemIndicator",
     ".spectrum-Accordion-item:first-child",
     ".spectrum-Accordion-itemContent",
+    ".spectrum-Accordion-itemDirectActions",
+    ".spectrum-Accordion-itemDirectActions .spectrum-ActionButton",
+    ".spectrum-Accordion-itemDirectActions .spectrum-Switch",
     ".spectrum-Accordion-itemHeader",
     ".spectrum-Accordion-itemHeader.spectrum-Accordion-itemHeader:active",
     ".spectrum-Accordion-itemHeader:focus-visible",
@@ -44,6 +47,8 @@
     "--mod-accordion-background-color-key-focus",
     "--mod-accordion-content-padding-inline",
     "--mod-accordion-corner-radius",
+    "--mod-accordion-direct-actions-height",
+    "--mod-accordion-direct-actions-vertical-spacing",
     "--mod-accordion-disclosure-indicator-height",
     "--mod-accordion-disclosure-indicator-to-text-space",
     "--mod-accordion-divider-color",
@@ -60,6 +65,7 @@
     "--mod-accordion-item-content-font-style",
     "--mod-accordion-item-content-font-weight",
     "--mod-accordion-item-content-line-height",
+    "--mod-accordion-item-direct-actions-spacing",
     "--mod-accordion-item-focus-indicator-color",
     "--mod-accordion-item-focus-indicator-gap",
     "--mod-accordion-item-focus-indicator-thickness",
@@ -107,6 +113,8 @@
     "--spectrum-accordion-content-area-top-to-content",
     "--spectrum-accordion-content-padding-inline",
     "--spectrum-accordion-corner-radius",
+    "--spectrum-accordion-direct-actions-height",
+    "--spectrum-accordion-direct-actions-vertical-spacing",
     "--spectrum-accordion-disclosure-indicator-height",
     "--spectrum-accordion-disclosure-indicator-to-text-extra-large",
     "--spectrum-accordion-disclosure-indicator-to-text-large",
@@ -131,6 +139,7 @@
     "--spectrum-accordion-item-content-font-style",
     "--spectrum-accordion-item-content-font-weight",
     "--spectrum-accordion-item-content-line-height",
+    "--spectrum-accordion-item-direct-actions-spacing",
     "--spectrum-accordion-item-focus-indicator-color",
     "--spectrum-accordion-item-focus-indicator-gap",
     "--spectrum-accordion-item-focus-indicator-thickness",
@@ -227,6 +236,7 @@
     "--spectrum-neutral-content-color-hover",
     "--spectrum-neutral-content-color-key-focus",
     "--spectrum-sans-font-family-stack",
+    "--spectrum-spacing-100",
     "--spectrum-transparent-black-100",
     "--spectrum-transparent-black-25",
     "--spectrum-transparent-black-300"

components/accordion/index.css

@@ -31,6 +31,7 @@
 	--spectrum-accordion-item-content-area-top-to-content: var(--spectrum-accordion-content-area-top-to-content);
 	--spectrum-accordion-item-content-area-bottom-to-content: var(--spectrum-accordion-content-area-bottom-to-content);
 	--spectrum-accordion-divider-thickness: var(--spectrum-divider-thickness-small);
+	--spectrum-accordion-direct-actions-height: var(--spectrum-component-height-100);
 
 	/* Text header */
 	--spectrum-accordion-item-header-font: var(--spectrum-sans-font-family-stack);
@@ -40,6 +41,7 @@
 	--spectrum-accordion-item-header-line-height: var(--spectrum-line-height-100);
 
 	--spectrum-accordion-item-header-cursor: pointer;
+	--spectrum-accordion-item-direct-actions-spacing: var(--spectrum-spacing-100);
 	--spectrum-accordion-animation-duration: var(--spectrum-animation-duration-100);
 
 	/* Text body */
@@ -72,6 +74,12 @@
 		var(--mod-accordion-item-header-top-to-text-space, var(--spectrum-accordion-item-header-top-to-text-space)) + var(--mod-accordion-item-header-bottom-to-text-space, var(--spectrum-accordion-item-header-bottom-to-text-space)) + (var(--mod-accordion-item-header-font-size, var(--spectrum-accordion-item-header-font-size)) * var(--mod-accordion-item-header-line-height, var(--spectrum-accordion-item-header-line-height)))
 	);
 
+	/* Calculated vertical spacing for action button and switch to center them within the accordion item */
+	--spectrum-accordion-direct-actions-vertical-spacing: calc(
+		(var(--mod-accordion-item-min-block-size, var(--spectrum-accordion-item-min-block-size)) -
+		var(--mod-accordion-direct-actions-height, var(--spectrum-accordion-direct-actions-height))) / 2
+	);
+
 	/* Right-to-left adjustments for transforms */
 	&:dir(rtl) {
 		--spectrum-logical-rotation: matrix(-1, 0, 0, 1, 0, 0);
@@ -100,6 +108,7 @@
 	--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-small);
 	--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-small);
 	--spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-small);
+	--spectrum-accordion-direct-actions-height: var(--spectrum-component-height-75); /* component height for switch and action button */
 }
 
 .spectrum-Accordion--sizeL {
@@ -116,6 +125,7 @@
 	--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-large);
 	--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-large);
 	--spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-large);
+	--spectrum-accordion-direct-actions-height: var(--spectrum-component-height-200);
 }
 
 .spectrum-Accordion--sizeXL {
@@ -132,6 +142,7 @@
 	--spectrum-accordion-item-header-top-to-text-space: var(--spectrum-accordion-top-to-text-extra-large);
 	--spectrum-accordion-item-header-bottom-to-text-space: var(--spectrum-accordion-bottom-to-text-extra-large);
 	--spectrum-accordion-top-to-disclosure-indicator: var(--spectrum-field-top-to-disclosure-icon-extra-large);
+	--spectrum-accordion-direct-actions-height: var(--spectrum-component-height-300);
 }
 
 .spectrum-Accordion--compact {
@@ -237,6 +248,7 @@
 	margin: 0;
 	position: relative;
 	box-sizing: border-box;
+	display: flex;
 }
 
 .spectrum-Accordion-itemIndicator {
@@ -268,6 +280,9 @@
 
 /* Focusable button that expands/collapses the accordion item. */
 .spectrum-Accordion-itemHeader {
+	text-overflow: ellipsis;
+	word-break: break-word;
+
 	box-sizing: border-box;
 	position: relative;
 
@@ -277,6 +292,7 @@
 
 	/* start spacing controlled by edge to disclosure icon spacing */
 	padding-inline: 0 var(--mod-accordion-edge-to-content-area, var(--spectrum-accordion-edge-to-content-area));
+	padding-block: 0; /* reset user-agent styles */
 	line-height: var(--mod-accordion-item-header-line-height, var(--spectrum-accordion-item-header-line-height));
 
 	text-overflow: ellipsis;
@@ -315,6 +331,17 @@
 	}
 }
 
+.spectrum-Accordion-itemDirectActions {
+	margin-inline-end: var(--mod-accordion-edge-to-content-area, var(--spectrum-accordion-edge-to-content-area));
+	display: inline-flex;
+	gap: var(--mod-accordion-item-direct-actions-spacing, var(--spectrum-accordion-item-direct-actions-spacing));
+
+	& .spectrum-ActionButton,
+	& .spectrum-Switch {
+		margin-block-start: var(--mod-accordion-direct-actions-vertical-spacing, var(--spectrum-accordion-direct-actions-vertical-spacing));
+	}
+}
+
 .spectrum-Accordion-item.is-open {
 	> .spectrum-Accordion-itemHeading .spectrum-Accordion-itemIndicator {
 		transform: var(--spectrum-logical-rotation,) rotate(90deg);

components/accordion/stories/accordion.stories.js

@@ -1,3 +1,4 @@
+import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
 import { Sizes } from "@spectrum-css/preview/decorators";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isQuiet, size } from "@spectrum-css/preview/types";
@@ -60,7 +61,36 @@ export default {
 			},
 			control: { type: "boolean" },
 		},
-		isQuiet
+		isQuiet,
+		hasActionButtons: {
+			name: "Has action buttons",
+			description: "Adds an action button to each accordion item header, in the direct actions section.",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "Direct actions",
+			},
+			control: { type: "boolean" },
+		},
+		actionButtonIconName: {
+			name: "Action button icon",
+			...(IconStories?.argTypes?.iconName ?? {}),
+			if: { arg: "hasActionButtons", truthy: true },
+			table: {
+				type: { summary: "string" },
+				category: "Direct actions",
+			},
+		},
+		hasSwitches: {
+			name: "Has switches",
+			description: "Adds a switch to each accordion item header, in the direct actions section.",
+			type: { name: "boolean" },
+			table: {
+				type: { summary: "boolean" },
+				category: "Direct actions",
+			},
+			control: { type: "boolean" },
+		},
 	},
 	args: {
 		rootClass: "spectrum-Accordion",
@@ -70,6 +100,9 @@ export default {
 		disableAll: false,
 		isQuiet: false,
 		hasNoInlinePadding: false,
+		hasActionButtons: false,
+		actionButtonIconName: "Circle",
+		hasSwitches: false,
 	},
 	parameters: {
 		actions: {

components/accordion/stories/accordion.test.js

@@ -59,7 +59,7 @@ export const testsContent = new Map([
 		},
 	],
 	[
-		"Landscape",
+		"Landscape and longer text that wraps",
 		{
 			content: "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec eleifend est mollis ligula lobortis, tempus ultricies sapien lacinia. Nulla ut turpis velit. Sed finibus dapibus diam et sollicitudin. Phasellus in ipsum nec ante elementum congue eget in leo. Morbi eleifend justo non rutrum venenatis. Fusce cursus et lectus eu facilisis. Ut laoreet felis in magna dignissim feugiat.",
 		},

components/accordion/stories/template.js

@@ -1,10 +1,13 @@
+import { Template as ActionButton } from "@spectrum-css/actionbutton/stories/template.js";
 import { Template as Icon } from "@spectrum-css/icon/stories/template.js";
 import { getRandomId } from "@spectrum-css/preview/decorators";
+import { Template as Switch } from "@spectrum-css/switch/stories/template.js";
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { repeat } from "lit/directives/repeat.js";
 import { styleMap } from "lit/directives/style-map.js";
+import { when } from "lit/directives/when.js";
 
 import "../index.css";
 
@@ -19,6 +22,10 @@ export const AccordionItem = ({
 	isHovered = false,
 	isActive = false,
 	isFocused = false,
+	hasActionButton = false,
+	hasSwitch = false,
+	actionButtonIconName = "",
+	size = "m",
 	iconSize = "m",
 	customStyles = {},
 	customClasses = [],
@@ -66,6 +73,28 @@ export const AccordionItem = ({
 					}, context)}
 					<span class="${rootClass}Title">${heading}</span>
 				</button>
+				${when(
+					hasActionButton || hasSwitch,
+					() =>
+						html`
+							<div class="${rootClass}DirectActions">
+								${when(hasActionButton, () =>
+									ActionButton({
+										label: "", // icon-only
+										isQuiet: true,
+										customClasses: [`${rootClass}ActionButton`],
+										iconName: actionButtonIconName,
+										size,
+									}, context)
+								)}
+								${when(hasSwitch, () =>
+									Switch({
+										label: "",
+										customClasses: [`${rootClass}Switch`],
+										size
+									}, context))}
+							</div>
+						`)}
 			</h3>
 			<!-- WAI-ARIA 1.1: Item content uses a role of "region" -->
 			<div
@@ -90,6 +119,9 @@ export const Template = ({
 	id = getRandomId("accordion"),
 	disableAll = false,
 	collapseAll = false,
+	hasActionButtons = false,
+	actionButtonIconName = "",
+	hasSwitches = false,
 	customClasses = [],
 	customStyles = {},
 } = {}, context = {}) => {
@@ -118,6 +150,10 @@ export const Template = ({
 					rootClass: `${rootClass}-item`,
 					heading,
 					idx,
+					size,
+					hasActionButton: item.hasActionButton || hasActionButtons,
+					actionButtonIconName: item.actionButtonIconName || actionButtonIconName,
+					hasSwitch: item.hasSwitch || hasSwitches,
 					iconSize: `${size}`,
 					isDisabled: item.isDisabled || disableAll,
 					isOpen: collapseAll === true ? false : item.isOpen,