Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat(storybook): custom properties panel #3166

Draft
wants to merge 1 commit into
base: main
Choose a base branch
from

Conversation

castastrophe
Copy link
Collaborator

@castastrophe castastrophe commented Sep 26, 2024

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.

Screenshot 2024-09-26 at 12 39 46 PM

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. ✨

Copy link

changeset-bot bot commented Sep 26, 2024

🦋 Changeset detected

Latest commit: 59656d1

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

@castastrophe 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 castastrophe self-assigned this Sep 26, 2024
@castastrophe castastrophe added skip_vrt Add to a PR to skip running VRT (but still pass the action) storybook s1 labels Sep 26, 2024
Copy link
Contributor

github-actions bot commented Sep 26, 2024

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

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

github-actions bot commented Sep 26, 2024

File metrics

Summary

Total size: 4.31 MB*

🎉 No changes detected in any packages

* Size determined by adding together the size of the main file for all packages in the library.
* Results are not gzipped or minified.
* An ASCII character in UTF-8 is 8 bits or 1 byte.

@castastrophe castastrophe force-pushed the feat-storybook-custom-properties-panel branch 6 times, most recently from 6ef4d69 to 754b512 Compare September 27, 2024 00:05
@castastrophe castastrophe force-pushed the feat-storybook-custom-properties-panel branch from 754b512 to 59656d1 Compare September 27, 2024 00:34
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
s1 skip_vrt Add to a PR to skip running VRT (but still pass the action) storybook
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant