-
-
Notifications
You must be signed in to change notification settings - Fork 9.4k
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
Addon: Create @storybook/addon-themes #23524
Conversation
Fantastic job @integrayshaun. Something that would be great is to improve the gif for 7.0 as it still has the old tabs I believe. But not a blocker at all I believe. We can update that later. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@integrayshaun looking great. Left one starter item for you to look at for now. One thing, though, when you address my comment and before pushing the commit, can you run yarn pretty-docs
so that we don't get any errors with the snippets?
Also, a couple of things:
- Don't forget to update the
toc
file to get it referenced in the documentation - As this will be a part of essentials, the introduction page should also be updated to factor in this one.
Let me know once you've addressed the feedback, and we'll take it from there.
@cdedreuille good call on that, but don't worry, I can take care of it and align it with the rest of the videos/gifs we currently have. I'll follow up @integrayshaun on this.
bd5937d
to
3f01f1d
Compare
|
||
Storybook Addon Themes can be used which between multiple themes for components inside the preview in [Storybook](https://storybook.js.org). | ||
|
||
![React Storybook Screenshot](https://user-images.githubusercontent.com/42671/98158421-dada2300-1ea8-11eb-8619-af1e7018e1ec.png) |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I assume this is not the screenshot you want to use?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
No, Joao is going to help me out with an optimized video like we have for the other addons
eb9bf82
to
7f80506
Compare
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Minor nits. Otherwise looking pretty good!
Docs don't turn dark in dark mode The toolbar item doesn't always appear |
@integrayshaun there are two themes registered. As I said, it does not appear in the panel, if the addon is not explicitly mentioned in the addons array in main.ts. Shouldn't it also work with mentioning only @storybook/addon-essentials in the addons array? |
The docs limitation should be mentioned somewhere in the docs, if not already done. |
@valentinpalkovic Weird! It definitely should show even in essentials 🤔 I'll try to test after my planning meeting here. I'll add the docs limitation into the docs as well :) Thank you for testing 🙏 |
You’re welcome :) tested it with next.js in combination with material ui theming |
docs/snippets/common/storybook-addon-themes-classname-decorator.ts-4-9.mdx
Outdated
Show resolved
Hide resolved
docs/snippets/common/storybook-addon-themes-jsx-provider-decorator.js.mdx
Show resolved
Hide resolved
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Docs look good!
Co-authored-by: Valentin Palkovic <valentin@chromatic.com>
Co-authored-by: Kyle Gach <kyle.gach@gmail.com>
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM!
What changed
How to test
Checklist
MIGRATION.MD
Maintainers
ci:normal
,ci:merged
orci:daily
GH label to it to run a specific set of sandboxes. The particular set of sandboxes can be found incode/lib/cli/src/sandbox-templates.ts
["cleanup", "BREAKING CHANGE", "feature request", "bug", "build", "documentation", "maintenance", "dependencies", "other"]