feat(storybook): custom properties panel by castastrophe · Pull Request #3166 · adobe/spectrum-css

castastrophe · 2024-09-26T16:19:53Z

Description

Adds a new custom properties panel to the development preview pages for each component that surfaces the modifiable custom properties as sourced from the metadata/metadata.json file (note that this is not a live updated list because metadata.json is not generated by storybook).

This panel allows a visitor to put in their own values and see how it impacts the styling of the component in the view panel.

How and where has this been tested?

Please tag yourself on the tests you've marked complete to confirm the tests have been run by someone other than the author.

Validation steps

Visit the Accordion storybook, expect to see the CSS Custom Properties panel
Click the panel and add a custom color to the --mod-accordion-background-color-default entry; expect to see the background color of the accordion to update live.

To-do list

I have read the contribution guidelines.
I have updated relevant storybook stories and templates.
If my change impacts documentation, I have updated the documentation accordingly.
✨ This pull request is ready to merge. ✨

changeset-bot · 2024-09-26T16:19:57Z

🦋 Changeset detected

Latest commit: 73e0812

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 2 packages

Name	Type
@spectrum-css/generator	Patch
@spectrum-css/preview	Minor

Not sure what this means? Click here to learn what changesets are.

Click here if you're a maintainer who wants to add another changeset to this PR

github-actions · 2024-09-26T16:37:22Z

🚀 Deployed on https://pr-3166--spectrum-css.netlify.app

github-actions · 2024-09-26T16:59:17Z

File metrics

Summary

Total size: 2.25 MB^*

🎉 No changes detected in any packages

* Size is the sum of all main files for packages in the library.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

github-actions · 2025-07-11T16:11:17Z

+  - [What it's for](#what-its-for)
+  - [Getting started](#getting-started)
+    - [Usage](#usage)
+      - [Adding to DocsPage and MDX](#adding-to-docspage-and-mdx)


[markdownlint] _{reported by reviewdog 🐶}
MD051/link-fragments Link fragments should be valid [Context: "Adding to DocsPage and MDX"]

github-actions · 2025-07-11T16:11:17Z

+  - [Getting started](#getting-started)
+    - [Usage](#usage)
+      - [Adding to DocsPage and MDX](#adding-to-docspage-and-mdx)
+      - [DocsPage](#docspage)


[markdownlint] _{reported by reviewdog 🐶}
MD051/link-fragments Link fragments should be valid [Context: "DocsPage"]

github-actions · 2025-07-11T16:11:17Z

+    - [Usage](#usage)
+      - [Adding to DocsPage and MDX](#adding-to-docspage-and-mdx)
+      - [DocsPage](#docspage)
+  - [Advanced configuration](#advanced-configuration)


[markdownlint] _{reported by reviewdog 🐶}
MD051/link-fragments Link fragments should be valid [Context: "Advanced configuration"]

github-actions · 2025-07-11T16:11:17Z

+      - [Adding to DocsPage and MDX](#adding-to-docspage-and-mdx)
+      - [DocsPage](#docspage)
+  - [Advanced configuration](#advanced-configuration)
+  - [Development](#development)


[markdownlint] _{reported by reviewdog 🐶}
MD051/link-fragments Link fragments should be valid [Context: "Development"]

github-actions · 2025-07-11T16:11:18Z

+      - [DocsPage](#docspage)
+  - [Advanced configuration](#advanced-configuration)
+  - [Development](#development)
+  - [TODOs and ideas for the future](#todos-and-ideas-for-the-future)


[markdownlint] _{reported by reviewdog 🐶}
MD051/link-fragments Link fragments should be valid [Context: "TODOs and ideas for the future"]

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

--- Co-authored-by: TarunAdobe <ttomar@adobe.com>

* docs(assetcard): remove MDX file - adds some missing documentation regarding stories, classes and custom properties - corrects sentence-casing of story names * docs(avatar): remove MDX file - adds some missing documentation regarding stories - reorganizes some information to sit with appropriate story/variant - migrates documentation from MDX file to the stories file instead * chore(avatar): fix disabled test arguments * docs(badge): remove MDX file - adds notice badge variants to semantic story - adds sizing story to docs page - migrates documentation in MDX to stories.js instead * docs(badge): pr fixes - remove empty doc block line - remove html wrapper in favor of content array - add notice badge to test coverage

Expanding the existing themes system to support the new S2 mappings. --- Co-authored-by: castastrophe <castastrophe@users.noreply.github.com> Co-authored-by: Patrick Fulton <pfulton@adobe.com> Co-authored-by: Cory Dransfeldt <cdransfeldt@adobe.com> Co-authored-by: Aziz Ramos <azizramos@Azizs-MBP.lan> Co-authored-by: Josh Winn <965114+jawinn@users.noreply.github.com> Co-authored-by: Rise Erpelding <rise@heysparkbox.com> Co-authored-by: Marissa Huysentruyt <marissa.huysentruyt@heysparkbox.com> Co-authored-by: Rajdeep Chandra <rajdeepc@adobe.com> Co-authored-by: TarunAdobe <ttomar@adobe.com> Co-authored-by: Dragan Eror<el22or@users.noreply.github.com>

castastrophe force-pushed the feat-storybook-custom-properties-panel branch 3 times, most recently from 2ed616c to e1f7a95 Compare September 26, 2024 16:28

castastrophe self-assigned this Sep 26, 2024

castastrophe added skip_vrt Add to a PR to skip running VRT (but still pass the action) storybook s1 labels Sep 26, 2024

castastrophe force-pushed the feat-storybook-custom-properties-panel branch from e1f7a95 to 27b6165 Compare September 26, 2024 16:53

castastrophe force-pushed the feat-storybook-custom-properties-panel branch 7 times, most recently from 754b512 to 59656d1 Compare September 27, 2024 00:34

castastrophe force-pushed the feat-storybook-custom-properties-panel branch from 59656d1 to 4c2f600 Compare October 23, 2024 19:30

castastrophe force-pushed the feat-storybook-custom-properties-panel branch from 4c2f600 to d497927 Compare November 1, 2024 19:15

castastrophe force-pushed the feat-storybook-custom-properties-panel branch from d497927 to 82d2f9e Compare December 6, 2024 14:05

castastrophe changed the base branch from main to s2-foundations-redux December 6, 2024 14:05

castastrophe mentioned this pull request Dec 6, 2024

Allow empty values with option to mass reset ljcl/storybook-addon-cssprops#49

Open

castastrophe force-pushed the s2-foundations-redux branch from eb20c09 to 3d14fcc Compare December 11, 2024 00:17

castastrophe force-pushed the feat-storybook-custom-properties-panel branch 3 times, most recently from e66a6ff to df9d5cc Compare December 12, 2024 14:31

castastrophe force-pushed the s2-foundations-redux branch 2 times, most recently from 2eebf01 to 711d4cd Compare December 16, 2024 23:49

castastrophe force-pushed the feat-storybook-custom-properties-panel branch from df9d5cc to ff03881 Compare December 17, 2024 01:52

castastrophe force-pushed the s2-foundations-redux branch 10 times, most recently from b77c8b2 to d020047 Compare January 14, 2025 14:34

castastrophe added the S2 Spectrum 2 label Jan 15, 2025

castastrophe force-pushed the s2-foundations-redux branch 6 times, most recently from 41beabc to 1c62593 Compare January 16, 2025 21:13

github-actions Bot reviewed Jul 11, 2025

View reviewed changes

castastrophe and others added 12 commits July 15, 2025 11:05

feat: bug fixes for reducing theming variables

fa65c01

chore: release (s2-foundations) (#3421)

1798b4d

Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

fix(picker): update background and border color

21609b0

--- Co-authored-by: TarunAdobe <ttomar@adobe.com>

fix(combobox): retain border values for S1

a5a39d5

chore: update dependency versions ava and postcss

8dc21a6

chore: align peerDependencies to local versions

43fd8bf

feat: bug fixes for reducing theming variables

2efef66

feat(storybook): custom properties panel

3ea9d87

feat: fork into custom local add-on

73e0812

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

feat(storybook): custom properties panel#3166

feat(storybook): custom properties panel#3166
castastrophe wants to merge 12 commits intomainfrom
feat-storybook-custom-properties-panel

castastrophe commented Sep 26, 2024 •

edited

Loading

Uh oh!

changeset-bot Bot commented Sep 26, 2024 •

edited

Loading

Uh oh!

github-actions Bot commented Sep 26, 2024 •

edited

Loading

Uh oh!

github-actions Bot commented Sep 26, 2024 •

edited

Loading

Uh oh!

github-actions Bot Jul 11, 2025

Uh oh!

github-actions Bot Jul 11, 2025

Uh oh!

github-actions Bot Jul 11, 2025

Uh oh!

github-actions Bot Jul 11, 2025

Uh oh!

github-actions Bot Jul 11, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Conversation

castastrophe commented Sep 26, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

How and where has this been tested?

Validation steps

To-do list

Uh oh!

changeset-bot Bot commented Sep 26, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

🦋 Changeset detected

Uh oh!

github-actions Bot commented Sep 26, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions Bot commented Sep 26, 2024 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

File metrics

Summary

Uh oh!

github-actions Bot Jul 11, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions Bot Jul 11, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions Bot Jul 11, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions Bot Jul 11, 2025

Choose a reason for hiding this comment

Uh oh!

github-actions Bot Jul 11, 2025

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

castastrophe commented Sep 26, 2024 •

edited

Loading

changeset-bot Bot commented Sep 26, 2024 •

edited

Loading

github-actions Bot commented Sep 26, 2024 •

edited

Loading

github-actions Bot commented Sep 26, 2024 •

edited

Loading