chore: swatch group storybook rendering fix (#2252)

.gitignore

@@ -14,6 +14,7 @@ npm-debug.log*
 lerna-debug.log
 yarn-error.log
 package-lock.json
+.nx
 
 # Storybook build output
 tools/preview/storybook-static

components/colorarea/stories/template.js

@@ -31,13 +31,13 @@ export const Template = ({
 		>
 			<div
 				class="spectrum-ColorArea-gradient"
-				style="background: linear-gradient(to top, black 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, white 0%, rgba(0, 0, 0, 0) 100%), rgb(255, 0, 0);"
+				style="background: linear-gradient(to top, black 0%, rgba(0, 0, 0, 0) 100%), linear-gradient(to right, white 0%, rgba(0, 0, 0, 0) 100%), rgba(255, 0, 0);"
 			></div>
 			${ColorHandle({
 				...globals,
 				isDisabled,
 				customClasses: [`${rootClass}-handle`],
-				colorHandleStyle: {
+				customStyles: {
 					"--spectrum-picked-color": "rgba(255, 0, 0)",
 					transfom: `translate(${customWidth}, 0px)`,
 				},

components/colorhandle/stories/colorhandle.stories.js

@@ -5,7 +5,7 @@ export default {
 	title: "Components/Color handle",
 	description:
 		"The Color Handle component is used with ColorArea, ColorSlider and ColorWheel as the color selector",
-	component: "Colorhandle",
+	component: "ColorHandle",
 	argTypes: {
 		isDisabled: {
 			name: "Disabled",

components/colorhandle/stories/template.js

@@ -1,5 +1,5 @@
-import { html } from "lit";
 import { Template as OpacityCheckerboard } from "@spectrum-css/opacitycheckerboard/stories/template.js";
+import { html } from "lit";
 
 import "../index.css";
 
@@ -8,24 +8,18 @@ export const Template = ({
 	customClasses = [],
 	isDisabled = false,
 	isFocused = false,
-	colorHandleStyle = {
+	customStyles = {
 		"--spectrum-picked-color": "rgba(255, 0, 0, 0.5)",
 	},
 	...globals
-}) => {
-	const checkerboardContent = html `<div class="${rootClass}-inner"></div>`
-
-	return html`
-		${OpacityCheckerboard({
-			...globals,
-			componentOnly: true,
-			customClasses: [
-				`${rootClass}`,
-				...!isDisabled && isFocused ? ["is-focused"] : [],
-				...isDisabled ? ["is-disabled"] : [],
-				...customClasses,
-			],
-			content: checkerboardContent,
-			checkerBoardStyles: colorHandleStyle,
-		})}`
-}
+}) => OpacityCheckerboard({
+	...globals,
+	customClasses: [
+		`${rootClass}`,
+		...!isDisabled && isFocused ? ["is-focused"] : [],
+		...isDisabled ? ["is-disabled"] : [],
+		...customClasses,
+	],
+	content: [html `<div class="${rootClass}-inner"></div>`],
+	customStyles,
+});

components/colorslider/stories/colorslider.stories.js

@@ -7,6 +7,7 @@ export default {
 		"The Color slider component lets users visually change an individual channel of a color.",
 	component: "ColorSlider",
 	argTypes: {
+		colorHandleStyle: { table: { disable: true } },
 		vertical: { table: { disable: true } },
 		isDisabled: {
 			name: "Disabled",
@@ -28,14 +29,14 @@ export default {
 			if: { arg: "isDisabled", truthy: false },
 		},
 		gradientStops: {
-			name: "Gradient Stops",
+			name: "Gradient stops",
 			description:
 				"The <linear-color-stop> value of the CSS linear-gradient. Can be multiple stops separated by commas.",
-			type: { name: "string" },
+			type: { name: "array" },
 			table: { disable: true },
 		},
 		gradientType: {
-			name: "Gradient Type",
+			name: "Gradient type",
 			description: "The gradient can be defined in the markup using CSS or with an image.",
 			options: ['gradient', 'image'],
 			control: { type: 'select' },
@@ -47,8 +48,9 @@ export default {
 		isDisabled: false,
 		isFocused: false,
 		gradientType: "gradient",
+		vertical: false,
 		gradientStops:
-			"rgb(255, 0, 0) 0%, rgb(255, 255, 0) 17%, rgb(0, 255, 0) 33%, rgb(0, 255, 255) 50%, rgb(0, 0, 255) 67%, rgb(255, 0, 255) 83%, rgb(255, 0, 0)",
+			["rgb(255, 0, 0) 0%", "rgb(255, 255, 0) 17%", "rgb(0, 255, 0) 33%", "rgb(0, 255, 255) 50%", "rgb(0, 0, 255) 67%", "rgb(255, 0, 255) 83%", "rgb(255, 0, 0) 100%"],
 	},
 	parameters: {
 		actions: {
@@ -72,7 +74,7 @@ Vertical.args = {
 
 export const Alpha = Template.bind({});
 Alpha.args = {
-	gradientStops: "rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0) 100%",
+	gradientStops: ["rgba(0, 0, 0, 1) 0%", "rgba(0, 0, 0, 0) 100%"],
 	colorHandleStyle: {
 		"--spectrum-picked-color": "rgba(0, 0, 0, 1)",
 	},
@@ -91,4 +93,4 @@ WithImage.storyName = "Image";
 export const Disabled = Template.bind({});
 Disabled.args = {
 	isDisabled: true,
-};
+};

components/colorslider/stories/template.js

@@ -1,5 +1,7 @@
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+import { when } from "lit/directives/when.js";
 
 import { Template as ColorHandle } from "@spectrum-css/colorhandle/stories/template.js";
 import { Template as OpacityCheckerboard } from "@spectrum-css/opacitycheckerboard/stories/template.js";
@@ -11,59 +13,63 @@ export const Template = ({
 	customClasses = [],
 	isDisabled = false,
 	isFocused = false,
-	vertical,
-	gradientStops,
-	gradientType,
+	vertical = false,
+	gradientStops = [
+		"rgb(255, 0, 0) 0%",
+		"rgb(255, 255, 0) 17%",
+		"rgb(0, 255, 0) 33%",
+		"rgb(0, 255, 255) 50%",
+		"rgb(0, 0, 255) 67%",
+		"rgb(255, 0, 255) 83%",
+		"rgb(255, 0, 0)"],
+	gradientType = "gradient",
 	colorHandleStyle = {
 		"--spectrum-picked-color": "rgba(255, 0, 0)",
 	},
 	...globals
-}) => {
-	const checkerboardContent = gradientType == "image"
-		? html`
-			<img
-				class="spectrum-ColorSlider-gradient" 
-				role="presentation" 
-				src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAeCAIAAAAkbYJ/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjNBMTBENzk4QkQzMTFFQThDOTdDN0QyNDNGMUNFMzAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjNBMTBEN0E4QkQzMTFFQThDOTdDN0QyNDNGMUNFMzAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGM0ExMEQ3NzhCRDMxMUVBOEM5N0M3RDI0M0YxQ0UzMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGM0ExMEQ3ODhCRDMxMUVBOEM5N0M3RDI0M0YxQ0UzMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrmQ8p4AAADbSURBVHja7JFLDsMgDAWNc/9L9h7YiQ0Gou66rGaUWHxegDDN5SPiEm/Uo+3S3LPWIzEy2uqu1Vh1dy3q5TM/ks38yprJbGdXK38GdHwVs94sAtXNas9h/LIK2zE11jlHrI5ksa9a5r+mdJ3E8i+OveISurzCvldr3V/dp91XQLTPvWYdgbFCr/tcp81BqW/bzKxLkz2epxLzPWglS7Y1ERX4axCMYEAwIBgQDAgGBAOCEQwIBgQDggHBgGBAMIIBwYBgQDAgGBAMCAYEIxgQDAgGBAOC4RduAQYALiXYw9aNKvcAAAAASUVORK5CYII="
-			>`
-		: html`
-			<div
-				class="${rootClass}-gradient"
-				role="presentation"
-				style="background: linear-gradient(to ${vertical ? "bottom" : "right"}, ${gradientStops});"
-			></div>`;
-
-	return html`
-		<div
-			class=${classMap({
-				[rootClass]: true,
-				[`${rootClass}--vertical`]: vertical,
-				"is-disabled": isDisabled,
-				"is-focused": isFocused,
-				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
-			})}
-		>
-			${OpacityCheckerboard({
-				...globals,
-				componentOnly: true,
-				customClasses: [`${rootClass}-checkerboard`],
-				content: checkerboardContent,
-				role: 'presentation',
-			})}
-			${ColorHandle({
-				...globals,
-				isDisabled,
-				isFocused,
-				customClasses: [`${rootClass}-handle`],
-				colorHandleStyle,
-			})}
-			<input
-				type="range"
-				class="${rootClass}-slider"
-				min="0"
-				max="100"
-				step="1"
-			/>
-		</div>
-	`;
-};
+}) => html`
+	<div
+		class=${classMap({
+			[rootClass]: true,
+			[`${rootClass}--vertical`]: vertical,
+			"is-disabled": isDisabled,
+			"is-focused": isFocused,
+			...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
+		})}
+	>
+		${OpacityCheckerboard({
+			...globals,
+			customClasses: [`${rootClass}-checkerboard`],
+			content: [
+				when(gradientType === "image",
+					() => html`<img
+						class="${rootClass}-gradient"
+						role="presentation"
+						src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAKAAAAAeCAIAAAAkbYJ/AAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyVpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTQ4IDc5LjE2NDAzNiwgMjAxOS8wOC8xMy0wMTowNjo1NyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIDIxLjAgKE1hY2ludG9zaCkiIHhtcE1NOkluc3RhbmNlSUQ9InhtcC5paWQ6RjNBMTBENzk4QkQzMTFFQThDOTdDN0QyNDNGMUNFMzAiIHhtcE1NOkRvY3VtZW50SUQ9InhtcC5kaWQ6RjNBMTBEN0E4QkQzMTFFQThDOTdDN0QyNDNGMUNFMzAiPiA8eG1wTU06RGVyaXZlZEZyb20gc3RSZWY6aW5zdGFuY2VJRD0ieG1wLmlpZDpGM0ExMEQ3NzhCRDMxMUVBOEM5N0M3RDI0M0YxQ0UzMCIgc3RSZWY6ZG9jdW1lbnRJRD0ieG1wLmRpZDpGM0ExMEQ3ODhCRDMxMUVBOEM5N0M3RDI0M0YxQ0UzMCIvPiA8L3JkZjpEZXNjcmlwdGlvbj4gPC9yZGY6UkRGPiA8L3g6eG1wbWV0YT4gPD94cGFja2V0IGVuZD0iciI/PrmQ8p4AAADbSURBVHja7JFLDsMgDAWNc/9L9h7YiQ0Gou66rGaUWHxegDDN5SPiEm/Uo+3S3LPWIzEy2uqu1Vh1dy3q5TM/ks38yprJbGdXK38GdHwVs94sAtXNas9h/LIK2zE11jlHrI5ksa9a5r+mdJ3E8i+OveISurzCvldr3V/dp91XQLTPvWYdgbFCr/tcp81BqW/bzKxLkz2epxLzPWglS7Y1ERX4axCMYEAwIBgQDAgGBAOCEQwIBgQDggHBgGBAMIIBwYBgQDAgGBAMCAYEIxgQDAgGBAOC4RduAQYALiXYw9aNKvcAAAAASUVORK5CYII="
+					>`,
+					() => html`<div
+						class="${rootClass}-gradient"
+						role="presentation"
+						style=${when(gradientStops && gradientStops.length, () => styleMap({
+							background: `linear-gradient(to ${vertical ? "bottom" : "right"}, ${gradientStops.join(', ')})`,
+						}))}
+					></div>`
+				)
+			],
+			role: 'presentation',
+		})}
+		${ColorHandle({
+			...globals,
+			isDisabled,
+			isFocused,
+			customClasses: [`${rootClass}-handle`],
+			customStyles: colorHandleStyle,
+		})}
+		<input
+			type="range"
+			class="${rootClass}-slider"
+			min="0"
+			max="100"
+			step="1"
+		/>
+	</div>`;

components/colorwheel/stories/template.js

@@ -1,6 +1,6 @@
+import { Template as ColorHandle } from "@spectrum-css/colorhandle/stories/template.js";
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
-import { Template as ColorHandle } from "@spectrum-css/colorhandle/stories/template.js";
 
 import "../index.css";
 
@@ -35,11 +35,11 @@ export const Template = ({
         </div>
       </div>
       ${ColorHandle({
-				...globals,
-				isDisabled,
-				customClasses: [`${rootClass}-handle`],
-				colorHandleStyle,
-			})}
+			...globals,
+			isDisabled,
+			customClasses: [`${rootClass}-handle`],
+			customStyles: colorHandleStyle,
+		})}
       <input type="range" class="${rootClass}-slider" aria-label="hue" min="0" max="360" step="">
     </div>
   </div>

components/opacitycheckerboard/stories/opacitycheckerboard.stories.js

@@ -1,3 +1,7 @@
+import { html } from "lit";
+import { styleMap } from "lit/directives/style-map.js";
+
+
 import { Template } from "./template";
 
 export default {
@@ -6,23 +10,6 @@ export default {
 		"Opacity checkerboard is used with other components to highlight opacity.",
 	component: "OpacityCheckerboard",
 	argTypes: {
-		hasColorOverlay: {
-			name: "Has Color Overlay",
-			type: { name: "boolean" },
-			table: {
-				category: "Component",
-			},
-			control: "boolean",
-		},
-		overlayColor: {
-			name: "Overlay Color",
-			type: { name: "string" },
-			table: {
-				category: "Component",
-			},
-			control: "text",
-			if: { arg: "hasColorOverlay", truthy: true },
-		},
 		backgroundPosition: {
 			name: "Position",
 			type: { name: "string" },
@@ -32,21 +19,10 @@ export default {
 			control: "text",
 			description: "Value for <code>--mod-opacity-checkerboard-position</code>. Accepts any valid CSS background-position property value.",
 		},
-		componentOnly: {
-			name: "Use Component Markup Only",
-			type: { name: "boolean" },
-			table: {
-				disable: true,
-			},
-		},
 	},
 	args: {
 		rootClass: "spectrum-OpacityCheckerboard",
-		hasColorOverlay: false,
-		overlayColor: "rgba(255, 0, 0, 0.5)",
-		backgroundPosition: "top left",
-		componentOnly: false,
-		content: '',
+		backgroundPosition: "top left"
 	},
 	parameters: {
 		actions: {
@@ -58,6 +34,9 @@ export default {
 				: undefined,
 		},
 	},
+	decorators: [
+		(Story, context) => html`<div style=${styleMap({ inlineSize: "100px", blockSize: "100px" })}>${Story(context)}</div>`
+	],
 };
 export const Default = Template.bind({});
 Default.args = {};
@@ -73,4 +52,4 @@ CheckerboardPosition.parameters = {
 				"An example of using the <code>--mod-opacity-checkerboard-position</code> custom property to adjust the position of the checkerboard pattern.",
 		},
 	},
-};
+};