Storybook: addon-backgrounds doesn't affect docs-mode

[Couto]

Describe the bug
addon-backgrounds only works in canvas mode, and has no effect whatsoever in docs-mode.

To Reproduce

1. Setup storybook v5.2.0-beta/rc
2. Add and configure addon-docs
3. Add and configure addon-backgrounds
4. addParameters({}) on config.js with some default backgrounds (As per the addon-backgrounds instructions)
5. Run storybook
6. Switch background color on canvas mode
7. 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

[shilman]

@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

[Couto]

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.

[shilman]

Ok that makes more sense to me. For now, we'll do that via theming as well. Once we have figure out addon support for the Preview in #6700 then we might get backgrounds support "for free". I'll re-open this in the meantime. Thanks!

[TurtleWolfe]

I just figured out how to add dark theme a few days ago and then added docs this morning.. not sure if it's related, but I have dark theme everywhere else in my storybook. But docs are just a plain white background

[shilman]

@TurtleWolf Docs are themed separately from the rest of the app as of 5.3

https://github.com/storybookjs/storybook/blob/master/addons/docs/docs/theming.md#storybook-theming

[deadcoder0904]

@shilman It isn't working for me. I want to give a background color to docs.

I have the following code:

import { addParameters } from '@storybook/react';

const themes = {
  dark: '#33354C',
};

addParameters({
  options: {
    theme: themes.dark,
  },
  backgrounds: [{ name: 'dark', value: themes.dark, default: true }],
});

I even tried directly:

import { addParameters } from '@storybook/react';

addParameters({
  options: {
    theme: '#33354C',
  },
  backgrounds: [{ name: 'dark', value: '#33354C', default: true }],
});

Am I doing anything wrong?

I get the error:

Error: Passed an incorrect argument to a color function, please pass a string representation of a color.

at parseToRgb (http://localhost:6006/vendors~main.a4321a35f2910f1804b5.bundle.js:113474:11)
at opacify (http://localhost:6006/vendors~main.a4321a35f2910f1804b5.bundle.js:114381:21)
at fn (http://localhost:6006/vendors~main.a4321a35f2910f1804b5.bundle.js:113908:42)
at convert (http://localhost:6006/vendors~main.a4321a35f2910f1804b5.bundle.js:21344:42)
at ensure (http://localhost:6006/vendors~main.a4321a35f2910f1804b5.bundle.js:21468:31)
at DocsContainer (http://localhost:6006/vendors~main.a4321a35f2910f1804b5.bundle.js:3481:35)
at renderWithHooks (http://localhost:6006/vendors~main.a4321a35f2910f1804b5.bundle.js:136067:18)
at mountIndeterminateComponent (http://localhost:6006/vendors~main.a4321a35f2910f1804b5.bundle.js:138746:13)
at beginWork (http://localhost:6006/vendors~main.a4321a35f2910f1804b5.bundle.js:139860:16)
at HTMLUnknownElement.callCallback (http://localhost:6006/vendors~main.a4321a35f2910f1804b5.bundle.js:121452:14)

[deadcoder0904]

Alright, I got it. Gotta create a theme myself as said in https://storybook.js.org/docs/configurations/theming/ :)

[deadcoder0904]

Apparently, it doesn't work for me. Not sure if I'm doing anything wrong. It's the same error:

Error: Passed an incorrect argument to a color function, please pass a string representation of a color.

Here are my files:

.storybook/main.js

module.exports = {
  stories: ['../stories/**/*.stories.(ts|tsx)'],
  addons: [
    '@storybook/addon-actions',
    '@storybook/addon-links',
    '@storybook/addon-docs',
    '@storybook/addon-backgrounds/register',
  ],
  webpackFinal: async config => {
    config.module.rules.push({
      test: /\.(ts|tsx)$/,
      use: [
        {
          loader: require.resolve('ts-loader'),
          options: {
            transpileOnly: true,
          },
        },
        {
          loader: require.resolve('react-docgen-typescript-loader'),
        },
      ],
    });

    config.resolve.extensions.push('.ts', '.tsx');

    return config;
  },
};

.storybook/manager.js

import { addons } from '@storybook/addons';
import theme from './theme';

addons.setConfig({
  theme,
});

.storybook/preview.js

import { addParameters } from '@storybook/react';
import { themes } from '@storybook/theming';

addParameters({
  options: {
    theme: {
      base: themes.dark,
    },
  },
  backgrounds: [{ name: 'dark', value: themes.dark, default: true }],
});

.storybook/theme.js

import { create } from '@storybook/theming/create';
import { typography, color } from '@storybook/theming';

const theme = create({
  base: 'dark',

  // Storybook-specific color palette
  colorPrimary: '#FF4785', // coral
  colorSecondary: '#1EA7FD', // ocean

  // UI
  appBg: '#33354C',
  appContentBg: '#33354C',
  appBorderColor: '#FBDB47',
  appBorderRadius: 10,

  // Fonts
  fontBase: typography.fonts.base,
  fontCode: typography.fonts.mono,

  // Text colors
  textColor: color.lightest,
  textInverseColor: color.darkest,

  // Toolbar default and active colors
  barTextColor: '#999999',
  barSelectedColor: color.secondary,
  barBg: color.darkest,

  // Form colors
  inputBg: '#3f3f3f',
  inputBorder: 'rgba(0,0,0,.3)',
  inputTextColor: color.lightest,
  inputBorderRadius: 4,
});

export default theme;

Exactly followed the guide above so Idk what I am doing wrong? 🤔

[deadcoder0904]

Alright finally got it.

I was using preview.js wrong. Finally focused on the error till it clicked. Had to do the following:

.storybook/preview.js

import { addParameters } from '@storybook/react';
import theme from './theme';

addParameters({
  options: {
    theme,
  },
  backgrounds: [{ name: 'dark', value: '#33354C', default: true }],
});

[shilman]

@yannbf any chance you can contribute this for 6.1?

[yannbf]

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?

[shilman]

Sounds about right. FYI we changed the name from Preview to Canvas in 6.0!

[shilman]

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 @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[angryzor]

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?

[shilman]

Cc @yannbf