Feature Request: Custom Presenters

[Smolations]

First off, THANK YOU! I have been dreading setting up a custom story that manually displays brand colors via variables, so this add-on really hit home for me. 👏

Now for the feature request, custom presenters. The default presenter for colors is pretty good, but it isn't responsive so I basically need my browser at full width on a 15" screen to see all the info. This could be solved by a custom color presenter (I'd prefer to avoid storybook ui style overrides).

Additionally, some of my components have their own variables that are made available to other components which makes it easier for the latter to compose the former. It would be great to have a "General" or custom presenter to display the variables, descriptions, and values at a component level.

Don't get me wrong; you have a pretty solid set of default presenters already, but having the option of using a custom presenter greatly increases the flexibility of this addon. 😋

[Sqrrl]

Hey. The panel styling definitely needs some work. I‘ll try to come up with something more compact or responsive in the near future.

Regarding the custom presenters, you can skip the @presenter annotation to display tokens without an example column. A system to plug in custom presenter components is definitely on my todo list. I just can‘t find the time right now.

[Smolations]

Oh ok, good to know! To clarify though, any files annotated with @tokens will still show up under the global panel and not in any component-specific panel, right?

[Sqrrl]

Right.

[Sqrrl]

I'm experimenting with a new card based panel design. Would like to hear your opinion. I think this would work better for small viewports.

https://5e566a8a2ae51f01ad105fd5--storybook-design-token.netlify.com/

[Smolations]

@Sqrrl That looks pretty good when the addons panel is on the side, but when it's underneath the canvas the colors and headers span full width, so scrolling is a bit difficult because it's like, black, color, black, color, black, color, etc. Maybe instead of allowing full width you can use a responsive grid setup? Looks like the container is already flexed so you just need to set a max-width on each color container. Just by setting max-width: 20% I see a noticeable improvement:

Might be good to add a lil margin between each color card, but the tiles help see more colors at a glance and would work for both large/small screens for either addons bar orientation, imho. 😁

Also, something irks me about the black header bars, but I don't currently have a better idea for that. I think it's the fact that my eyes just want to see color rectangles for each color token but the black draws my eye away a bit as i scan...

Glad to see some good progress on this issue! 👏

[Sqrrl]

Hey. Thanks for your feedback. The cards should already behave like you described. This is how they look to me:

What browser are you using? Does it work if you resize the addon panel?

[Smolations]

Ahhh, weird, that's not how they appeared at first render, but seems like they are showing up like that now. You didn't push any changes within the last few mins, did you? :smirk:

Anywho, love that you give users the option between card/table view! Now if we could only solve that black header problem...

Also, a nice to have, would be a lil search bar on each token category that would simply filter the cards/table rows shown on some fuzzy matching algorithm. Even a tokenName.includes(searchStr) would be convenient enough as an mvp feature. 😋

Also, any progress for making this addon ie11 compatible? Sorry for issue scope bleed, but compatibility and this issue are the last two pieces left to make my token documentation dreams come true! 😆

[emzarts]

Hello! I would love to hear if there are any updates on the ability to add custom presenters for tokens

[acherkashin]

@emzarts I'm going to continue working on it after a long pause. I need to adapt my changes for v3 and refactor it.

https://github.com/UX-and-I/storybook-design-token/pull/164