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
Uh oh!
There was an error while loading. Please reload this page.
-
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-11igmw9I 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