Storybook: add-backgrounds doesn't seem to show configured default background

Created on 30 May 2019 · 8Comments · Source: storybookjs/storybook

Describe the bug
The configured background only seems to 'appear' when I'm resizing the window.

Expected behavior
I expect the backgrounds add on to show the background that I've set as default in config.js

Screenshots
https://gyazo.com/692513518902f8e403036d29b4ee5c28

Code snippets

addParameters({
  backgrounds: [
    { name: "E3 Darker Orange", value: "#F15C29", default: true}
  ]
})

System:

OS: MacOS
Device: macbook pro 2015
Browser: chrome
Framework: react
Addons: addon-backgrounds

    "@storybook/addon-actions": "^5.0.11",
    "@storybook/addon-backgrounds": "^5.0.11",
    "@storybook/addon-links": "^5.0.11",
    "@storybook/addons": "^5.0.11",
    "@storybook/react": "^5.0.11",
    "react": "^16.8.6",
    "react-dom": "^16.8.6",

Additional context
Add any other context about the problem here.

backgrounds bug client-api has workaround todo

Source

KadenLNelson

Most helpful comment

I solved this for myself by calling addParameters before configure.

Will try this later

This did not work

example:

addDecorator(withKnobs);
addDecorator(withInfo);

// add backgrounds and viewports
addParameters({
  backgrounds: [
    { name: "Black", value: "#888888", default: true}
  ],
  viewport: {
    viewports: {
      ...INITIAL_VIEWPORTS,
      ...newViewports
    }
  }
})

// configure storybook
configure(loadStories, module);

KadenLNelson on 26 Jul 2019

👍4

All 8 comments

I have the same issue setting backgrounds in .storybook/config.js in a TypeScript project. However, the background is not showing even when resizing the window.

It works fine when adding background parameters to individual stories.

djgrant on 5 Jun 2019

I solved this for myself by calling addParameters before configure.

djgrant on 5 Jun 2019

😕1 👍1

I solved this for myself by calling addParameters before configure.

Will try this later

KadenLNelson on 6 Jun 2019

Thanks, that works. Should probably be mentioned in the documentation? Currently it just says "You can add the backgrounds to all stories with addParameters in .storybook/config.js".

graup on 11 Jun 2019

If @KadenLNelson could confirm that this solves their issue we can close this.

graup on 2 Jul 2019

This is indicative of a bug:

Global decorators and parameters must currently be set BEFORE the configure call.

ndelangen on 23 Jul 2019

I solved this for myself by calling addParameters before configure.

Will try this later

This did not work

example:

addDecorator(withKnobs);
addDecorator(withInfo);

// add backgrounds and viewports
addParameters({
  backgrounds: [
    { name: "Black", value: "#888888", default: true}
  ],
  viewport: {
    viewports: {
      ...INITIAL_VIEWPORTS,
      ...newViewports
    }
  }
})

// configure storybook
configure(loadStories, module);

KadenLNelson on 26 Jul 2019

👍4

Backgrounds has been overhauled in 6.0 and works properly now https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#backgrounds-addon-has-a-new-api