Component theme switcher

[allmarkedup]

Some component libraries (like Primer) offer multiple themes for their components.

To help with previewing components in themed libraries, it should be pretty straightforward to add a 'component theme' dropdown that allows selecting a theme from a configurable list. The name of the selected theme is then passed down to the preview template so that different stylesheets (or classes) can be negotiated in whichever manner works best for the parent project.

Primer currently have one such example of a switcher like this in their Storybook.

(originally suggested by @joelhawksley over email)

[jalyna]

I just stumbled across this today. This would really be a great addition. We probably also would like to use the concept for switching languages (currently we use params per component).

[allmarkedup]

@jalyna that's good to hear - I'm planning on implementing it in as generic a way as possible so that it can be used for themes or languages or any other kind of persistent user-controlled setting. I'll try to let you know when there is something to test out :-)

[jonrohan]

👋🏻 Dropping by on this to hopefully had some insight on where we are with support for it and what would be useful from the library. Maybe a more general plugin framework would work here?

Our color modes work with a set of data attributes to determine theme, etc. I added support for these in our previews here https://github.com/primer/view_components/pull/1451

I think the bit we're missing is some way to add a param option to the top toolbar that would be persisted across previews.

This would allow us to take that data and apply it on the preview templates.

[allmarkedup]

Thanks for the additional detail @jonrohan. This is still very much on my todo list and what you describe is very much in line with my thoughts on the implementation (although I'm thinking of using cookies to persist the settings).

Hopefully I'll have some progress on this soon - I'll update here as soon as there is something to test out!

[allmarkedup]

Hey @jonrohan @jalyna - I thought I'd have a bit of a bash on this and it turned out to be reasonably straightforward to implement something that I think should work for your use cases.

Rather than introducing an entirely new concept I've instead extended the display options feature to provide 'dynamic display options' that you can configure as you like to suit your requirements.

There is more detail in the PR and some first-pass documentation here - I'd be very interested in getting your feedback if you were able to take a look at it!

In time this could certainly be expanded to support different types of inputs (like @param fields do) but I wanted to keep it simple to start with :-)

If you wanted to give it a test you can install directly from the dynamic-display-options branch as follows:

gem 'lookbook', git: 'https://github.com/allmarkedup/lookbook.git', branch: 'dynamic-display-options'

Let me know what you think if you get a chance to take it for a spin.

[allmarkedup]

Hey all - I've just released v1.2 which has added support for 'dynamic' preview options to let you add things like language or theme switchers to you Lookbook instances.

Documentation is here but if you have any questions if/when you try it out just let me know.

Many thanks to @jonrohan for testing and feedback of this new feature!

[jalyna]

Thank you so much 👏🏻 . I anticipated this feature for a while.

I think I found a small issue (sorry for not testing earlier):

Since we have 3 options, we will see the dropdown version of the options which does not autoselect the current option (even though it seems to be stored):

https://user-images.githubusercontent.com/5362483/196119430-a16177ee-255a-4a48-be52-26fddfc57d44.mov

This forbids me to return to the original value (e.g. light)

config.lookbook.preview_display_options = {
  theme: %w[light dark],
  locale: %w[en de ja],
  css_bundle: %w[legacy tailwind]
}

[allmarkedup]

@jalyna thanks for the bug report and video example! I've just released v1.2.1 which should fix the issue. It's not ideal as it results in the dropdown menu closing after a change but I wanted to get a quick fix out and I'll work on making it a bit more user-friendly when I have a little more time.

Let me know how you get on and if it fixes the issue for you :-)

[jalyna]

Hi @allmarkedup That was lighting fast ⚡ Thanks a lot, I've now added this to our project! Thank you so much 🙏🏻

[allmarkedup]

No problems @jalyna, glad it's working out for you :-)