Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

addon-backgrounds doesn't affect docs-mode

See original GitHub issue

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

Issue Analytics

State:
Created 4 years ago
Reactions:3
Comments:17 (8 by maintainers)

Top GitHub Comments

6reactions

laddi-netappcommented, Feb 17, 2021

Your PR fixes the problem for DocsPage generated documentation, but not for manually written MDX stories in the style described here.

I can confirm that I’m having the exact same problem. Works fine for CSF stories, not for MDX stories…

3reactions

angryzorcommented, Nov 13, 2020

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-story here

This 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?

Top Results From Across the Web

@storybook/addon-backgrounds | Yarn - Package Manager

Storybook Addon Backgrounds can be used to change background colors inside the preview in Storybook.

Backgrounds - Storybook - JS.ORG

The backgrounds toolbar addon allows you to set the background color in which the story renders in the UI: Configuration. By default, the...

How to enable Google Docs dark mode on desktop and mobile

To enable dark mode in the Google Docs app on mobile, go to Settings and switch the theme to Dark. Dark mode is...

Help – Dark Reader

Note: If the toggle button is greyed-out, it means that browser restricts injecting scripts into current page. Filter settings. Filter settings. Adjust the...

Backgrounds - Oxygen Builder

Background blend modes allow you to set how an element's background image should blend with the element's background color or gradient.