feat(storybook): custom properties panel

Author: castastrophe

.changeset/eleven-plants-grow.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/generator": patch
+---
+
+Update story templates to include the cssprops imports

.changeset/new-bulldogs-add.md

@@ -0,0 +1,5 @@
+---
+"@spectrum-css/preview": minor
+---
+
+New feature: Custom properties panel added to the development preview showing a list of modifiable custom properties as loaded from the metadata/metadata.json resource in each component.

.storybook/main.js

@@ -45,6 +45,8 @@ export default {
 		"@chromaui/addon-visual-tests",
 		// https://storybook.js.org/addons/@storybook/addon-designs/
 		"@storybook/addon-designs",
+		// https://github.com/ljcl/storybook-addon-cssprops
+		"@ljcl/storybook-addon-cssprops",
 	],
 	core: {
 		disableTelemetry: true,

.storybook/package.json

@@ -37,6 +37,7 @@
 		"@babel/core": "^7.25.2",
 		"@chromaui/addon-visual-tests": "^1.0.0",
 		"@etchteam/storybook-addon-status": "^5.0.0",
+		"@ljcl/storybook-addon-cssprops": "^4.0.0",
 		"@storybook/addon-a11y": "^8.3.2",
 		"@storybook/addon-actions": "^8.3.2",
 		"@storybook/addon-console": "^3.0.0",

components/accordion/stories/accordion.stories.js

@@ -2,6 +2,7 @@ import { Template as Link } from "@spectrum-css/link/stories/template.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { size } from "@spectrum-css/preview/types";
 import { Template as Typography } from "@spectrum-css/typography/stories/template.js";
+import data from "../metadata/metadata.json";
 import pkgJson from "../package.json";
 import { AccordionGroup } from "./accordion.test.js";
 import { Template } from "./template.js";
@@ -57,6 +58,17 @@ export default {
 		},
 		chromatic: { disableSnapshot: true },
 		packageJson: pkgJson,
+		cssprops: {
+			...data.modifiers.reduce((collection, item) => {
+				const key = item.replace(/^--/, "");
+				collection[key] = {
+					category: "Modifiers",
+					control: key.includes("color") ? "color" : "text",
+					value: key.includes("color") ? undefined : " ",
+				};
+				return collection;
+			}, {})
+		},
 	},
 	tags: ["!autodocs"],
 };

components/actionbar/stories/actionbar.stories.js

@@ -3,7 +3,9 @@ import { default as CloseButton } from "@spectrum-css/closebutton/stories/closeb
 import { default as Popover } from "@spectrum-css/popover/stories/popover.stories.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isEmphasized, isOpen } from "@spectrum-css/preview/types";
+import data from "../metadata/metadata.json";
 import pkgJson from "../package.json";
+
 import { ActionBarGroup } from "./actionbar.test.js";
 import { Template } from "./template.js";
 
@@ -67,6 +69,17 @@ export default {
 			url: "https://www.figma.com/file/MPtRIVRzPp2VHiEplwXL2X/S-%2F-Manual?node-id=465%3A3127&t=xbooxCWItOFgG2xM-1",
 		},
 		packageJson: pkgJson,
+		cssprops: {
+			...data.modifiers.reduce((collection, item) => {
+				const key = item.replace(/^--/, "");
+				collection[key] = {
+					category: "Modifiers",
+					control: key.includes("color") ? "color" : "text",
+					value: key.includes("color") ? undefined : " ",
+				};
+				return collection;
+			}, {})
+		},
 	},
 	tags: ["!autodocs"],
 };

components/actionbutton/stories/actionbutton.stories.js

@@ -1,7 +1,9 @@
 import { default as IconStories } from "@spectrum-css/icon/stories/icon.stories.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isActive, isDisabled, isEmphasized, isFocused, isHovered, isQuiet, isSelected, size, staticColor } from "@spectrum-css/preview/types";
+import data from "../metadata/metadata.json";
 import pkgJson from "../package.json";
+
 import { ActionButtonGroup, ActionButtons } from "./actionbutton.test.js";
 
 /**
@@ -73,6 +75,17 @@ export default {
 			handles: ["click .spectrum-ActionButton:not([disabled])"],
 		},
 		packageJson: pkgJson,
+		cssprops: {
+			...data.modifiers.reduce((collection, item) => {
+				const key = item.replace(/^--/, "");
+				collection[key] = {
+					category: "Modifiers",
+					control: key.includes("color") ? "color" : "text",
+					value: key.includes("color") ? undefined : " ",
+				};
+				return collection;
+			}, {})
+		},
 		docs: {
 			story: {
 				height: "auto",

components/actiongroup/stories/actiongroup.stories.js

@@ -1,7 +1,9 @@
 import { default as ActionButton } from "@spectrum-css/actionbutton/stories/actionbutton.stories.js";
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { size } from "@spectrum-css/preview/types";
+import data from "../metadata/metadata.json";
 import pkgJson from "../package.json";
+
 import { ActionGroups } from "./actiongroup.test.js";
 
 /**
@@ -61,6 +63,17 @@ export default {
 			],
 		},
 		packageJson: pkgJson,
+		cssprops: {
+			...data.modifiers.reduce((collection, item) => {
+				const key = item.replace(/^--/, "");
+				collection[key] = {
+					category: "Modifiers",
+					control: key.includes("color") ? "color" : "text",
+					value: key.includes("color") ? undefined : " ",
+				};
+				return collection;
+			}, {})
+		},
 	},
 };
 

components/actionmenu/stories/actionmenu.stories.js

@@ -5,6 +5,7 @@ import { default as Popover } from "@spectrum-css/popover/stories/popover.storie
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isOpen } from "@spectrum-css/preview/types";
 import pkgJson from "../package.json";
+
 import { ActionMenuGroup } from "./actionmenu.test.js";
 
 /**
@@ -49,6 +50,11 @@ export default {
 			],
 		},
 		packageJson: pkgJson,
+		cssprops: {
+			...(Popover?.parameters?.cssprops ?? {}),
+			...(ActionButton?.parameters?.cssprops ?? {}),
+			...(Menu.parameters?.cssprops ?? {}),
+		},
 		docs: {
 			story: {
 				height: "200px",

components/alertbanner/stories/alertbanner.stories.js

@@ -1,6 +1,8 @@
 import { disableDefaultModes } from "@spectrum-css/preview/modes";
 import { isOpen } from "@spectrum-css/preview/types";
+import data from "../metadata/metadata.json";
 import pkgJson from "../package.json";
+
 import { AlertBannerGroup } from "./alertbanner.test.js";
 import { ActionableOptionsTemplate, Template, TextOverflowTemplate } from "./template.js";
 
@@ -69,6 +71,17 @@ export default {
 			handles: ["click .spectrum-AlertBanner button"],
 		},
 		packageJson: pkgJson,
+		cssprops: {
+			...data.modifiers.reduce((collection, item) => {
+				const key = item.replace(/^--/, "");
+				collection[key] = {
+					category: "Modifiers",
+					control: key.includes("color") ? "color" : "text",
+					value: key.includes("color") ? undefined : " ",
+				};
+				return collection;
+			}, {})
+		},
 	},
 };