New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Integration: Storybook #2567
Comments
Hi, I was able to get Storybook global styles working using the following approach. I used For dark mode, I used the My config looks like this
|
@fattenap I've tested and confirmed this is working great in practice. Good find about the dark mode plugin. We'll use this instruction when generating the upcoming integration guide for Skeleton v3. |
Note: we have more documentation incoming on this topic soon. But just noting the need for the CSF if you wish to document all Svelte components (including support for slots). |
Describe the feature in detail (code, mocks, or screenshots encouraged)
In order to integrate Skeletons styles into the Storybook framework several steps need to be taken to apply the styles in Storybook.
Requirements to get it working:
@endigo9740 did a full test of the @storybook/addon-themes plugin. Unfortunately the results were mixed:
--> [Bug]: @storybook/addon-themes withThemeByDataAttribute decorator not working storybookjs/storybook#26625
The integration guide will be based around how that pans out. If we can use the plugin, it'll be 1000x easier for most users. If not, then we may look to create a universal wrapper component (the Decorator) that implements this. For most Skeleton users they will need to be able to toggle mode/theme at will
If they stall or don't fix the plugin quickly though we'll likely consider building either a custom Decorator -or- a custom plugin that replicates the required features specifically for Skeleton's use case
(thank you @endigo9740 for doing the actual hard work so far)
What type of pull request would this be?
Docs
Provide relevant links or additional information.
The text was updated successfully, but these errors were encountered: