[Backgrounds addon] Set a different default background for a specific story

Is your feature request related to a problem? Please describe. I have a component prop that controls whether the component is visible on a dark background or a light background. In the dark-background story, I’d like to default to the dark background by name, rather than overriding all the backgrounds for that component.

Describe the solution you’d like Something like:

storiesOf("Logo", module)
  .add("horizontal", () => <Logo layout="horizontal" />)
  .add("vertical", () => <Logo layout="vertical" />)
  .add("horizontal - inverted", () => <Logo layout="horizontal" inverted/>, {defaultBackground: "primary"})
  .add("vertical - inverted", () => <Logo layout="vertical" inverted/>, {defaultBackground: "primary"});

Describe alternatives you’ve considered I saw on the documentation page that you can override the background for a component, but I don’t see a way to leave the other options and just change which one is the default. It may be possible, but I don’t see how in the documentation.

Are you able to assist bring the feature to reality? Maybe; I’m not sure if I can.

[shilman]

Turns out that #9219 doesn’t really apply. Here’s what I’m thinking for a better backgrounds API. We can deprecate the old API in 6.0 and remove it in 7.0:

// preview.js
addParameters({
  backgrounds: {
    default: 'white',
    values: [
      { name: 'white', value: '#ffffff' }, 
      { name: 'black', value: '#000000' },
    ]
  }
}

// Foo.stories.js
export const Foo = ...
Foo.story = {
  parameters: {
    backgrounds: { default: 'black' },
  }
}

[iansan5653]

The defaultBackground method looks perfect! It’s exactly what I was thinking of.