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.

.eslintrc

@@ -8,6 +8,11 @@
 	"parserOptions": {
 		"sourceType": "module"
 	},
+	"settings": {
+	  "react": {
+		"version": "detect"
+	  }
+	},
 	"extends": "eslint:recommended",
 	"rules": {
 		"brace-style": ["warn", "stroustrup", { "allowSingleLine": true }],
@@ -17,7 +22,8 @@
 		"no-console": ["warn", { "allow": ["warn", "error"] }],
 		"quotes": ["warn", "double"],
 		"semi": ["warn", "always"],
-		"space-before-blocks": ["warn", "always"]
+		"space-before-blocks": ["warn", "always"],
+		"react/jsx-filename-extension": [1, { "extensions": [".js", ".jsx"] }]
 	},
 	"overrides": [
 		{
@@ -172,8 +178,10 @@
 			"files": [
 				"components/*/stories/*.js",
 				".storybook/*.js",
-				".storybook/**/*.js"
+				".storybook/**/*.js",
+				"plugins/storybook-addon-*/*.js"
 			],
+			"extends": ["plugin:react/recommended", "plugin:react/jsx-runtime"],
 			"parserOptions": {
 				"ecmaVersion": "latest",
 				"sourceType": "module",

.storybook/decorators/utilities.js

@@ -556,12 +556,12 @@ export const renderContent = (content = [], {
 	if (content.length === 0) return nothing;
 
 	return html`
-		${content.map((c) => {
+		${content.map((c, idx) => {
 			if (typeof c === "undefined") return nothing;
 
 			/* If the content is an object (but not a lit object), we need to merge the object with the template */
 			if (typeof c !== "string" && (typeof c === "object" && !c._$litType$)) {
-				return callback({ ...args, ...c }, context);
+				return callback({ ...args, ...c, idx }, context);
 			}
 
 			if (typeof c === "function") {

.storybook/main.js

@@ -63,6 +63,8 @@ export default {
 			name: "@storybook/addon-actions",
 			options: {},
 		},
+		// https://github.com/ljcl/storybook-addon-cssprops
+		"@ljcl/storybook-addon-cssprops",
 		// https://www.npmjs.com/package/@whitespace/storybook-addon-html
 		"@whitespace/storybook-addon-html",
 		// https://github.com/storybookjs/storybook/tree/next/code/addons/a11y

.storybook/package.json

@@ -49,6 +49,7 @@
 		"@babel/core": "^7.28.0",
 		"@chromatic-com/storybook": "^3.2.7",
 		"@etchteam/storybook-addon-status": "^5.0.0",
+		"@ljcl/storybook-addon-cssprops": "4.0.0",
 		"@storybook/addon-a11y": "8.4.7",
 		"@storybook/addon-actions": "8.4.7",
 		"@storybook/addon-designs": "^8.2.1",
@@ -66,7 +67,7 @@
 		"@storybook/web-components-vite": "8.4.7",
 		"@whitespace/storybook-addon-html": "^7.0.0",
 		"chromatic": "^13.1.2",
-		"lit": "^3.3.1",
+		"lit": "^3.3.0",
 		"lodash-es": "^4.17.21",
 		"npm-registry-fetch": "^18.0.2",
 		"postcss": "^8.5.6",

components/accordion/index.css

@@ -44,10 +44,10 @@
 	--spectrum-accordion-item-content-line-height: var(--spectrum-line-height-100);
 
 	/* Colors */
-	--spectrum-accordion-background-color-default: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-default));
-	--spectrum-accordion-background-color-hover: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-hover));
-	--spectrum-accordion-background-color-down: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-down));
-	--spectrum-accordion-background-color-key-focus: rgba(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-key-focus));
+	--spectrum-accordion-background-color-default: rgb(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-default));
+	--spectrum-accordion-background-color-hover: rgb(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-hover));
+	--spectrum-accordion-background-color-down: rgb(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-down));
+	--spectrum-accordion-background-color-key-focus: rgb(var(--spectrum-gray-900-rgb), var(--spectrum-background-opacity-key-focus));
 
 	/* Label */
 	--spectrum-accordion-item-header-color-default: var(--spectrum-neutral-content-color-default);
@@ -72,6 +72,7 @@
 	&:lang(ja),
 	&:lang(zh),
 	&:lang(ko) {
+		/* @description When the language is CJK, update line-height values to prevent cut off diacritics */
 		--spectrum-accordion-item-header-line-height: var(--spectrum-cjk-line-height-100);
 		--spectrum-accordion-item-content-line-height: var(--spectrum-cjk-line-height-100);
 	}

components/accordion/stories/accordion.stories.js

@@ -3,11 +3,13 @@ import { Sizes } from "@spectrum-css/preview/decorators";
 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 metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { AccordionGroup } from "./accordion.test.js";
 import { Template } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * The accordion element contains a list of items that can be expanded or collapsed to reveal additional content or information associated with each item. There can be zero expanded items, exactly one expanded item, or more than one item expanded at a time, depending on the configuration. This list of items is defined by child accordion item elements.
  *
@@ -68,6 +70,18 @@ export default {
 		},
 		packageJson,
 		metadata,
+		cssprops: {
+			...metadata.modifiers.reduce((acc, modifier) => {
+				const name = modifier.replace(/^--/, "");
+				acc[name] = {
+					category: "Modifier",
+					description: "",
+					value: undefined,
+					control: name.includes("color") ? "color" : "text",
+				};
+				return acc;
+			}, {}),
+		},
 	},
 };
 

components/actionbar/stories/actionbar.stories.js

@@ -3,11 +3,13 @@ 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 metadata from "../dist/metadata.json";
-import packageJson from "../package.json";
 import { ActionBarGroup } from "./actionbar.test.js";
 import { BehavioralTemplate } from "./template.js";
 
+// Local assets to render the component styles and structure
+import metadata from "../dist/metadata.json";
+import packageJson from "../package.json";
+
 /**
  * The action bar component is a floating full width bar that appears upon selection. Action bars are used for single and bulk selection patterns, when a user needs to perform actions on either a single or multiple items at the same time.
  *
@@ -72,6 +74,18 @@ export default {
 		},
 		packageJson,
 		metadata,
+		cssprops: {
+			...metadata.modifiers.reduce((acc, modifier) => {
+				const name = modifier.replace(/^--/, "");
+				acc[name] = {
+					category: "Modifier",
+					description: "",
+					value: undefined,
+					control: name.includes("color") ? "color" : "text",
+				};
+				return acc;
+			}, {}),
+		},
 	},
 };
 

components/actionbar/stories/template.js

@@ -1,10 +1,11 @@
-import { Container } from "@spectrum-css/preview/decorators";
 import { Template as ActionGroup } from "@spectrum-css/actiongroup/stories/template.js";
 import { Template as CloseButton } from "@spectrum-css/closebutton/stories/template.js";
 import { Template as FieldLabel } from "@spectrum-css/fieldlabel/stories/template.js";
 import { Template as Popover } from "@spectrum-css/popover/stories/template.js";
+import { Container, getRandomId } from "@spectrum-css/preview/decorators";
 import { html } from "lit";
 import { classMap } from "lit/directives/class-map.js";
+import { ifDefined } from "lit/directives/if-defined.js";
 import { styleMap } from "lit/directives/style-map.js";
 
 import "../index.css";
@@ -14,6 +15,7 @@ import "../themes/express.css";
 
 export const Template = ({
 	rootClass = "spectrum-ActionBar",
+	id = getRandomId("action-bar"),
 	size = "m",
 	isOpen = true,
 	isEmphasized = false,
@@ -36,6 +38,7 @@ export const Template = ({
 				"is-open": isOpen,
 				...customClasses.reduce((a, c) => ({ ...a, [c]: true }), {}),
 			})}
+			id=${ifDefined(id)}
 			style=${styleMap(customStyles)}
 		>
 			${Popover({