Is there a way to create a custom viewType? #213
struers-gmo
started this conversation in
Ideas
Replies: 0 comments
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
First, I want to thank You for the addon and it´s capabilities. It is smooth and slick:)
But I have a encountered a problem. Inside my design tokens I also have spacing ones. My problem is it´s values are too big to fit the rendered presenter inside the "card" or row in a "table" viewType (see pictures). This lead me to the idea - is it possible to create new viewType or to override one of the default ones?


I know about creating custom presenters, but that´s not enough. In order to style it appropriately for my tokens, I would need to get access a few levels higher in the vDOM and change some parent components. But as far as I can see, it is not possible.
The only hack I´ve come around (in the card viewType) is to target the parent that is affecting the width of the card. Than, changing it´s grid-template-columns property inside preview-head.html like this:

The solution in card viewType looks like this:

But that is not ideal. From the name of the div
css-11igmw9
I can see that its classname has been associated dynamically during build. In a new release of storybook-design-token this could change so it would break my fix.Also, it is now targeting all card type presenters. In some other design tokens I don´t want it to be that wide.
Is there anything I can do about it? If not, it would be great to have a way to create custom viewType.
Thank You in advance!
Beta Was this translation helpful? Give feedback.
All reactions