search

phenixdigital / phoenix_storybook

A pluggable storybook for your Phoenix components.
MIT License
696 stars 54 forks source link

Make selected theme available on root/different element #509

Open sarasilvaworkera opened 1 week ago

sarasilvaworkera commented 1 week ago

Currently, we want to display components in different themes in Storybook, but there is a mismatch between Storybook theming strategy and our current one: in our application we basically inject the selected theme in the root element and use the css selector :root to make the necessary UI changes. On Storybook this theme class is applied only to the wrapper div of the component which makes it impossible to keep our system strategy consistent with Storybook strategy.

image Example

My suggestion: make it possible to customize where the theme class will be applied in Storybook, particularly make it available on body or on upper level on variations pages.

sarasilvaworkera commented 1 week ago

Just a note: I think theme injection in the root element is a best-practice and a standard in theming management (correct me if I'm wrong 😅 ) so I suggest that we add this to the root element <html>. I have downloaded the repo and I was able to make this work - the only thing that required functional change is that switching themes requires a full reload, but I don't foresee that as an issue in Storybook. Let me know if you want me to open a PR for you to take a look 🙇

cblavier commented 1 day ago

Hey Sara, please open a PR, I'd be happy to have a look