storybook: addon-backgrounds doesn't affect docs-mode
Describe the bug addon-backgrounds only works in canvas mode, and has no effect whatsoever in docs-mode.
To Reproduce
- Setup storybook v5.2.0-beta/rc
- Add and configure addon-docs
- Add and configure addon-backgrounds
addParameters({})on config.js with some default backgrounds (As per the addon-backgrounds instructions)- Run storybook
- Switch background color on canvas mode
- Go to docs-mode and notice that there’s no way to switch the background-color and the color defined in canvas mode has no effect
Expected behavior Preview blocks with toolbars should display a button to switch the background color of that block
Screenshots N/A
Code snippets N/A
System:
Environment Info:
System:
OS: macOS 10.14.6
CPU: (4) x64 Intel(R) Core(TM) i5-7360U CPU @ 2.30GHz
Binaries:
Node: 12.4.0 - ~/.asdf/installs/nodejs/12.4.0/bin/node
Yarn: 1.16.0 - ~/.asdf/installs/nodejs/12.4.0/.npm/bin/yarn
npm: 6.9.0 - ~/.asdf/installs/nodejs/12.4.0/bin/npm
Browsers:
Safari: 12.1.2
npmPackages:
@storybook/addon-a11y: 5.2.0-beta.45 => 5.2.0-beta.45
@storybook/addon-actions: 5.2.0-beta.45 => 5.2.0-beta.45
@storybook/addon-backgrounds: 5.2.0-beta.45 => 5.2.0-beta.45
@storybook/addon-docs: 5.2.0-beta.45 => 5.2.0-beta.45
@storybook/addon-knobs: 5.2.0-beta.45 => 5.2.0-beta.45
@storybook/addon-links: 5.2.0-beta.45 => 5.2.0-beta.45
@storybook/addon-viewport: ^5.1.11 => 5.1.11
@storybook/addons: 5.2.0-beta.45 => 5.2.0-beta.45
@storybook/preset-typescript: ^1.1.0 => 1.1.0
@storybook/react: 5.2.0-beta.45 => 5.2.0-beta.45
Additional context N/A
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 3
- Comments: 17 (8 by maintainers)
I can confirm that I’m having the exact same problem. Works fine for CSF stories, not for MDX stories…
Having the same issue here with it not working in MDX. Can (should) this issue be reopened?
Hi @shilman ,
Your PR fixes the problem for DocsPage generated documentation, but not for manually written MDX stories in the style described here.
The code in the PR tries to set styles on the CSS selector
#anchor--${context.id} .docs-storyhereThis works for DocsPage since it generates Anchor components for every story. However this pattern is not documented in the MDX guide above, and actually seems to conflict with the behaviour of the Meta tag here, which generates a single Anchor component at the top of the page for the first Story encountered (which is a bit strange tbh).
Would it be possible to make the background selection work on any story regardless of whether they are contained in an anchor?
Huzzah!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.1.0-alpha.16 containing PR #12368 that references this issue. Upgrade today to try it out!
You can find this prerelease on the
@nextNPM tag.Closing this issue. Please re-open if you think there’s still more to do.
Hey @shilman I can definitely try, just gotta understand exactly what to do.
Is it so that every preview in docs uses the background defined via the backgrounds addon + bring the addon button to the docs tab?
I might be wrong here, so please correct me if I’m wrong (which is likely) but your solution will change the entire background for docs-mode.
I expressed myself wrong on the issue, but I meant a way to only change the Preview block’s background, and not the entire page.
Sounds about right. FYI we changed the name from Preview to Canvas in 6.0!
@yannbf any chance you can contribute this for 6.1?
@Couto Docs can be configured via the theming API: https://storybook.js.org/docs/configurations/theming/
Docs doesn’t support currently interface with addons in the same way as the canvas, so I don’t expect this to happen. There’s an open issue at #6700