docs(combobox): merging changes from main

Author: aramos-adobe

.storybook/assets/base.css

@@ -40,7 +40,6 @@ svg:has(symbol):not(:has(use)) {
 
 /* --- DOCS STYLES --- */
 .docs-story > *:first-child {
-	background-color: var(--spectrum-background-layer-1-color);
 	overflow: hidden;
 }
 

.storybook/decorators/context.js

@@ -20,6 +20,7 @@ export const withContextWrapper = makeDecorator({
 				color = "light",
 				context = "legacy",
 				scale = "medium",
+				testingPreview = false,
 			} = {},
 			id,
 			viewMode,
@@ -36,36 +37,53 @@ export const withContextWrapper = makeDecorator({
 			},
 		};
 
+		const original = {
+			color,
+			context,
+			scale,
+		};
+
 		useEffect(() => {
+			const isDocs = viewMode === "docs";
+			const isTesting = testingPreview;
 			const isRaw = Boolean(context === "raw");
 			const isModern = Boolean(context === "spectrum");
 			const isExpress = Boolean(context === "express");
 
-			// viewMode is either "docs" or "story"
-			if (viewMode === "docs" && !isRaw) {
+			// Start by attaching the appropriate tokens to the container
+			toggleStyles(document.body, "tokens", tokens, !isRaw);
+
+			if (!isRaw) {
 				// add the default classes to the body to ensure labels, headings, and borders are styled correctly
 				document.body.classList.add("spectrum", "spectrum--light", "spectrum--medium");
 			}
 
-			for (const container of fetchContainers(id, viewMode === "docs")) {
-				// Start by attaching the appropriate tokens to the container
-				toggleStyles(container, "tokens", tokens, !isRaw);
+			for (const container of fetchContainers(id, isDocs, isTesting)) {
+				// Reset the context to the original values
+				color = original.color;
+				context = original.context;
+				scale = original.scale;
 
 				// Check if the container has a static color element
-				const hasStaticElement = container.matches(`:has(.${rootClass}--staticWhite, .${rootClass}--staticBlack, .${rootClass}--overBackground)`);
+				let hasStaticElement = container.matches(`:has([data-html-preview])`) ? container.matches(`:has([data-html-preview] .${rootClass}--staticWhite, [data-html-preview] .${rootClass}--staticBlack)`) : container.matches(`:has(.${rootClass}--staticWhite, .${rootClass}--staticBlack)`);
+
 				let staticKey = staticColor;
 				if (!staticKey && hasStaticElement) {
 					staticKey = (
 						container.querySelector(`.${rootClass}--staticWhite`) && "white" ||
-						container.querySelector(`.${rootClass}--staticBlack, .${rootClass}--overBackground`) && "black"
+						container.querySelector(`.${rootClass}--staticBlack`) && "black"
 					);
 				}
 
+				// If we can't determine the static key, we can't use the static color
+				if (!staticKey) hasStaticElement = false;
+
 				// Every container gets the spectrum class
 				container.classList.toggle("spectrum", !isRaw);
 
 				// S1 and S1 Express get the legacy class
 				container.classList.toggle("spectrum--legacy", !isModern && !isRaw);
+
 				// Express only gets the express class
 				container.classList.toggle("spectrum--express", isExpress && !isRaw);
 
@@ -76,16 +94,23 @@ export const withContextWrapper = makeDecorator({
 					color = "dark";
 				}
 
-				for (let c of ["light", "dark", "darkest"]) {
-					// Force light or dark mode if the static color is set
-					const isColor = staticKey && c === staticColorSettings[staticKey]?.color || !staticKey && c === color;
+				// Let the static color override the color if it's set
+				if (hasStaticElement && staticColorSettings[staticKey]?.color) {
+					color = staticColorSettings[staticKey].color;
+				}
+
+				// Force a light theme for the body wrapper in testing preview mode
+				// because the individual containers will bring in the correct theme
+				if (isTesting && container.matches("body:has([data-testing-preview]")) {
+					color = "light";
+				}
 
-					container.classList.toggle(`spectrum--${c}`, isColor && !isRaw);
+				for (let c of ["light", "dark", "darkest"]) {
+					container.classList.toggle(`spectrum--${c}`, c === color && !isRaw);
 				}
 
 				for (const s of ["medium", "large"]) {
-					const isScale = s === scale;
-					container.classList.toggle(`spectrum--${s}`, isScale && !isRaw);
+					container.classList.toggle(`spectrum--${s}`, s === scale && !isRaw);
 				}
 
 				// Start by removing the background color from the container and then add it back if needed
@@ -94,7 +119,8 @@ export const withContextWrapper = makeDecorator({
 					container.style.background = staticColorSettings[staticKey].background;
 				}
 			}
-		}, [color, context, staticColor, scale, viewMode, rootClass, tokens, staticColorSettings]);
+
+		}, [context, viewMode, original, staticColor, color, scale, rootClass, tokens, staticColorSettings, testingPreview]);
 
 		return StoryFn(data);
 	},

.storybook/decorators/helpers.js

@@ -50,22 +50,28 @@ export function fetchStyleContainer(id, container) {
  * @type (id: string, isDocs: boolean = false) => HTMLElement[]
  * @description Fetches the style container for the given ID or creates a new one
  **/
-export function fetchContainers(id, isDocs = false) {
-    if (!id) return [];
-    const { document } = global;
+export function fetchContainers(id, isDocs = false, isTesting = false) {
+	if (!id) return [];
+	const { document } = global;
+
+	let containers = [];
 
-    let containers = [document.body];
+	// Storybook IDs used to target the container element for the docs pages
+	const roots = [
+		...document.querySelectorAll(`#story--${id}`),
+		...document.querySelectorAll(`#story--${id}--primary`)
+	];
 
-    // Storybook IDs used to target the container element for the docs pages
-    const roots = [
-        ...document.querySelectorAll(`#story--${id}`),
-        ...document.querySelectorAll(`#story--${id}--primary`)
-    ];
+	// viewMode is either "docs" or "story"
+	if (isDocs && roots.length > 0) {
+		containers = roots.map(root => root.closest(".docs-story") ?? root);
+	}
+	else if (isTesting) {
+		// Only capture the top-level container for testing previews
+		containers.push(...document.querySelectorAll("[data-inner-container]"));
+	}
 
-    // viewMode is either "docs" or "story"
-    if (isDocs && roots.length > 0) {
-        containers = roots.map(root => root.closest(".docs-story") ?? root);
-    }
+	if (containers.length === 0) containers = [document.body];
 
-    return containers;
+	return containers;
 }

.storybook/decorators/utilities.js

@@ -209,6 +209,8 @@ export const ArgGrid = ({
 	withWrapperBorder = true,
 	...args
 } = {}, context = {}) => {
+	const isDocs = context.viewMode === "docs";
+
 	if (typeof argKey === "undefined") {
 		console.warn("ArgGrid: argKey is required to render the grid.");
 		return nothing;
@@ -230,6 +232,11 @@ export const ArgGrid = ({
 		return nothing;
 	}
 
+	// If no heading and this is a docs view, skip the border
+	if (!heading && isDocs) {
+		withWrapperBorder = false;
+	}
+
 	return Container({
 		heading,
 		direction,
@@ -323,17 +330,26 @@ export const Variants = ({
 		TestTemplate = Template;
 	}
 
+	const staticColor = {
+		black: "var(--spectrum-docs-static-black-background-color)",
+		white: "var(--spectrum-docs-static-white-background-color)",
+	};
+
 	return (args, context) => {
 		// Fetch any docs configurations from the context to use for VRT
-		const { parameters = {} } = context;
+		const { argTypes = {}, parameters = {} } = context;
 
 		const height = parameters?.docs?.story?.height;
 		const width = parameters?.docs?.story?.width;
 
+		// Check if the staticColor property exists in this story
+		const hasStaticColor = Object.keys(argTypes).includes("staticColor");
+
 		return html`
 			<!-- Simple, clean template preview for non-testing grid views -->
 			<div
 				style=${styleMap({
+					backgroundColor: hasStaticColor && staticColor[args.staticColor],
 					"padding": "12px",
 					"min-block-size": typeof height === "number" ? `${height}px` : height,
 					"min-inline-size": typeof width === "number" ? `${width}px` : width,
@@ -347,6 +363,7 @@ export const Variants = ({
 
 			<!-- Start testing grid markup -->
 			<div
+				data-testing-preview
 				style=${styleMap({
 					"padding": "24px",
 					"display": window.isChromatic() ? "flex" : "none",
@@ -391,7 +408,14 @@ export const Variants = ({
 							testHeading = "Default";
 						}
 
+						// Check if the staticColor property is being used in this story
+						let backgroundColor;
+						if (hasStaticColor && data.staticColor) {
+							backgroundColor = staticColor[data.staticColor];
+						}
+
 						const combinedStyles = {
+							backgroundColor,
 							...wrapperStyles,
 							...testWrapperStyles,
 						};
@@ -405,7 +429,7 @@ export const Variants = ({
 								...containerStyles,
 							},
 							// if the test has multiple states, pass the wrapper styles to that container, otherwise use it here
-							wrapperStyles: withStates ? {} : combinedStyles,
+							wrapperStyles: withStates ? { backgroundColor } : combinedStyles,
 							content: html`
 								${when(withStates, () =>
 									States({

components/actionbutton/stories/actionbutton.stories.js

@@ -237,30 +237,6 @@ Sizing.parameters = {
 
 
 // ********* VRT ONLY ********* //
-export const StaticBlack = ActionButtonGroup.bind({});
-StaticBlack.tags = ["!autodocs", "!dev"];
-StaticBlack.args = {
-	...Default.args,
-	staticColor: "black",
-};
-StaticBlack.parameters = {
-	chromatic: {
-		modes: disableDefaultModes
-	},
-};
-
-export const StaticWhite = ActionButtonGroup.bind({});
-StaticWhite.tags = ["!autodocs", "!dev"];
-StaticWhite.args = {
-	...Default.args,
-	staticColor: "white",
-};
-StaticWhite.parameters = {
-	chromatic: {
-		modes: disableDefaultModes
-	},
-};
-
 export const WithForcedColors = ActionButtonGroup.bind({});
 WithForcedColors.args = Default.args;
 WithForcedColors.tags = ["!autodocs", "!dev"];

components/actionbutton/stories/actionbutton.test.js

@@ -4,24 +4,27 @@ import { Template } from "./template.js";
 
 export const ActionButtons = (args, context) => {
 	return html`
-		${Template(args, context)}
-		${Template({
-			...args,
-		}, context)}
-		${Template({
-			...args,
-			hideLabel: true,
-		}, context)}
-		${Template({
-			...args,
-			hasPopup: "true",
-			hideLabel: true,
-		}, context)}
-		${Template({
-			...args,
-			iconName: undefined,
-			hasPopup: "true",
-		}, context)}
+		<div style="display: flex; column-gap: 13px; row-gap: 24px;">
+			${Template(args, context)}
+			${Template({
+				...args,
+				iconName: undefined,
+			}, context)}
+			${Template({
+				...args,
+				hideLabel: true,
+			}, context)}
+			${Template({
+				...args,
+				hasPopup: "true",
+				hideLabel: true,
+			}, context)}
+			${Template({
+				...args,
+				iconName: undefined,
+				hasPopup: "true",
+			}, context)}
+		</div>
 	`;
 };
 
@@ -64,6 +67,14 @@ export const ActionButtonGroup = Variants({
 			},
 			withStates: false,
 		},
+		{
+			testHeading: "Static black",
+			staticColor: "black",
+		},
+		{
+			testHeading: "Static white",
+			staticColor: "white",
+		},
 	],
 	stateData: [{
 		testHeading: "Disabled",
@@ -85,4 +96,4 @@ export const ActionButtonGroup = Variants({
 		isDisabled: true,
 		isSelected: true,
 	}],
-});
+});