chore(picker): remove window.isChromatic calls

Author: marissahuysentruyt

.storybook/decorators/context.js

@@ -31,14 +31,13 @@ export const withContextWrapper = makeDecorator({
 				color: "light"
 			},
 			"white": {
-				background: "var(--spectrum-examples-gradient-static-white",
+				background: "var(--spectrum-examples-gradient-static-white)",
 				color: "dark"
 			},
 		};
 
 		const original = {
 			color,
-			context,
 			scale,
 		};
 
@@ -57,7 +56,6 @@ export const withContextWrapper = makeDecorator({
 
 				// Reset the context to the original values
 				color = original.color;
-				context = original.context;
 				scale = original.scale;
 
 				let staticKey = staticColor;
@@ -72,20 +70,7 @@ export const withContextWrapper = makeDecorator({
 				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);
-
-				// Darkest is deprecated in Spectrum 2
-				if (isModern && color === "darkest") {
-					/* eslint-disable no-console -- notify that darkest was deprecated in S2 */
-					console.warn("The 'darkest' color is deprecated in Spectrum 2. Please use 'dark' instead.");
-					color = "dark";
-				}
+				container.classList.toggle("spectrum", true);
 
 				// Let the static color override the color if it's set
 				if (!isTestingWrapper && hasStaticElement && staticColorSettings[staticKey]?.color) {
@@ -98,12 +83,12 @@ export const withContextWrapper = makeDecorator({
 					color = "light";
 				}
 
-				for (let c of ["light", "dark", "darkest"]) {
-					container.classList.toggle(`spectrum--${c}`, c === color && !isRaw);
+				for (let c of ["light", "dark"]) {
+					container.classList.toggle(`spectrum--${c}`, c === color);
 				}
 
 				for (const s of ["medium", "large"]) {
-					container.classList.toggle(`spectrum--${s}`, s === scale && !isRaw);
+					container.classList.toggle(`spectrum--${s}`, s === scale);
 				}
 
 				if (!isTestingWrapper) {

components/picker/stories/template.js

@@ -35,7 +35,6 @@ export const Picker = ({
 	customClasses = [],
 	customStyles = {},
 } = {}, context = {}) => {
-	const { updateArgs } = context;
 
 	// Use the chevron from the UI icon set for each size, as defined in the design spec.
 	let disclosureIconName = "ChevronDown100";
@@ -64,10 +63,7 @@ export const Picker = ({
 			id=${id}
 			style=${styleMap(customStyles)}
 			type="button"
-			@click=${() => {
-				if (window.isChromatic()) return;
-				updateArgs({ isOpen: !isOpen });
-			}}
+			@click=${onclick}
 			aria-labelledby=${ifDefined(ariaLabeledBy)}
 		>
 			${when(contentIconName, () =>
@@ -195,12 +191,6 @@ export const Template = ({
 				}, context)
 			)}
 		</div>`;
-
-	// Make sure there is a wrapper around sibling components when using the Chromatic
-	// template, so their layout is not affected by the flex and grid layouts used.
-	if (window.isChromatic()) {
-		return html`<div style="position: relative;">${markup}</div>`;
-	}
 	return markup;
 };