storybook: addon-backgrounds doesn't work in iframe.html

Describe the bug

addon-backgrounds does not work in iframe.html that is generated by build-storybook. When setting a default background colour for a particular story, this background colour does not show up.

To Reproduce Please follow the instructions here: https://github.com/SiAdcock/storybook-playground

Code snippets

// index.stories.js

import React from "react"
import { storiesOf } from "@storybook/react"
import { Button } from "@storybook/react/demo"

storiesOf("Button", module)
  .add("with text", () => <Button>Hello Button</Button>)
  .add(
    "with some emoji",
    () => (
      <Button>
        <span role="img" aria-label="so cool">
          😀 😎 👍 💯
        </span>
      </Button>
    ),
    {
      backgrounds: [
        {
          name: "red",
          value: "rgba(255, 0, 0)",
          default: true
        }
      ]
    }
  )

Expected behavior The background colour in iframe.html?id=button--with-some-emoji ought to be red

System:

  System:
    OS: macOS 10.14.3
    CPU: (12) x64 Intel(R) Core(TM) i9-8950HK CPU @ 2.90GHz
  Binaries:
    Node: 12.10.0 - /usr/local/bin/node
    Yarn: 1.17.3 - /usr/local/bin/yarn
    npm: 6.11.3 - /usr/local/bin/npm
  Browsers:
    Chrome: 76.0.3809.132
    Firefox: 68.0.1
    Safari: 12.0.3
  npmPackages:
    @storybook/addon-backgrounds: ^5.2.1 => 5.2.1
    @storybook/react: ^5.2.1 => 5.2.1

Additional context I believe this is a bug or limitation with addons in iframe.html in general. addon-links does not appear to work in iframe.html either - I can probably knock up a minimal reproduction of this if necessary.

About this issue

  • Original URL
  • State: closed
  • Created 5 years ago
  • Reactions: 2
  • Comments: 16 (7 by maintainers)

Most upvoted comments

@SiAdcock i think having default the background carry over to the iframe popout is a feature request, and a pretty reasonable one. cc @ndelangen