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)
@SiAdcock i think having default the background carry over to the iframe popout is a feature request, and a pretty reasonable one. cc @ndelangen