storybook-design-token icon indicating copy to clipboard operation
storybook-design-token copied to clipboard

Published 20 hours ago • verified publisher icon UX-and-I

Feature request: Ability to mofify values directly in storybook

Open vinceumo opened this issue 5 years ago • 6 comments

Hi, I was playing with this add-on and it is great!

It would be awesome to be able to interact with the value directly in storybook, would be really handy for non tech stakeholders.

Ability to save and load the custom presets as json? file would be amazing

It would be something similar to the material UI add-on

Thanks a lot

vinceumo avatar Nov 27 '19 16:11 vinceumo

Hey. I will definitely look into the interaction thing. Not sure how to implement this with preprocessed styles, but should be straight forward with css variables.

Regarding the json serialization. There are some efforts for design token specifications (e.g. https://github.com/design-tokens/community-group/issues/1) that look interesting. Idea behind this addon was to generate the token docs directly from your stylesheets. Using some kind of formal spec to generate your token styles and docs sounds nice but kind of defeats the purpose of this addon.

Sqrrl avatar Nov 28 '19 07:11 Sqrrl

I've put together a quick PoC. Would like to hear your feedback. https://5de0ea3fde0c3500088752a4--storybook-design-token.netlify.com/

Sqrrl avatar Nov 29 '19 10:11 Sqrrl

That's amazing Philip, really like that you can revert back to the original value quite easily. In my use case the json would be really handy or a way to retain the value in a local storage maybe. Other than that this feature as it is, is already super handy

vinceumo avatar Dec 13 '19 16:12 vinceumo

The first iteration is released as part of 0.5.0. I will look into the preset and persistence thingy next year.

Sqrrl avatar Dec 19 '19 12:12 Sqrrl

Hi, I am using the storybook-design-token in my project now but I don't have the option to modify the values in Storybook. I just see a fixed value. This seems like something that you have already added. Any ideas why I'm not seeing this?

sagr-a avatar Mar 30 '22 11:03 sagr-a

Hi, I am using the storybook-design-token in my project now but I don't have the option to modify the values in Storybook. I just see a fixed value. This seems like something that you have already added. Any ideas why I'm not seeing this?

I'm assuming you are using scss or less. For now the live editing is only available for CSS tokens (using setProperty). I'm not aware of a reasonable implementation that works for variables in pre-processed styles.

Sqrrl avatar Mar 30 '22 13:03 Sqrrl