Storybook: Knobs not working for iframe (Storybook v6)

[abeledovictor]

Describe the bug
Knobs via url are not being set for iframe view on storybook. Tested in safari and chrome, the bug happens intermittently.

To Reproduce
Steps to reproduce the behavior:

1. Go to any story with knobs
2. Change some knobs for that story
3. Open iframe view
4. Knobs changed are not reflected on iframe view

Expected behavior
Knobs changed are reflected on iframe view

System:

Environment Info:

System:
OS: macOS 10.15.4
CPU: (8) x64 Intel(R) Core(TM) i5-8257U CPU @ 1.40GHz
Binaries:
Node: 12.18.2 - ~/.nvm/versions/node/v12.18.2/bin/node
Yarn: 1.22.4 - ~/.yarn/bin/yarn
npm: 6.14.6 - ~/.nvm/versions/node/v12.18.2/bin/npm
Browsers:
Chrome: 84.0.4147.135
Firefox: 77.0.1
Safari: 13.1
npmPackages:
@storybook/addon-a11y: ~6.0.13 => 6.0.19
@storybook/addon-console: ~1.2.1 => 1.2.1
@storybook/addon-essentials: ~6.0.13 => 6.0.19
@storybook/addon-events: ~6.0.13 => 6.0.19
@storybook/addon-knobs: ~6.0.13 => 6.0.19
@storybook/addon-links: ~6.0.13 => 6.0.19
@storybook/addon-storysource: ~6.0.13 => 6.0.19
@storybook/addons: ~6.0.13 => 6.0.19
@storybook/client-logger: ~6.0.13 => 6.0.19
@storybook/react: ~6.0.13 => 6.0.19
@storybook/theming: ~6.0.13 => 6.0.19

Knobs on iframe were working with the first migration to version 6

[shilman]

FYI, we’ve released addon-controls in Storybook 6.0. Controls are portable, auto-generated knobs that are intended to replace addon-knobs long term.

• Controls documentation
• Migration instructions

Please upgrade and try them out today!

[shilman]

Can you bisect to figure out which version broke it?

[abeledovictor]

The problem with _controls_ is that they don't have a way to set their values via URL params and we are using that feature for e2e testing. Is there any plan in place to add that feature?

I'll try to find the specific version which breaks the knobs.

[shilman]

@abeledovictor yup, we're planning to add URL support for both args and globals, hopefully in 6.1: https://github.com/storybookjs/storybook/issues/12291 https://github.com/storybookjs/storybook/issues/11604

Thanks for tracking down the knobs break

[metasean]

Possibly related, the storybook-addon-preview uses knobs as the basis for their preview.

The display _only_ shows the Controls panel values, but the preview code is based solely on the Knobs panel values, which will be really problematic for our designers.

Is there any way that we can have a transition period where Storybook devs can exclusively use Knobs _instead of Controls_, while plug-in devs upgrade their plug-ins to use Controls?

[shilman]

@metasean why? our plan is to deprecate knobs and replace them with controls. we're giving notice now so that it doesn't come as a surprise. in the meantime knobs are not deprecated and you're welcome to use them.

[metasean]

@shilman - There are two immediate reasons. First, while we can still use Knobs in v6, they aren't displaying in the iframe (hence, why I added my comment to this issue instead of opening another one) and second, the Controls panel still displays (at least, I haven't found a config setting to turn off the display), which effectively makes the storybook-addon-preview and by extension, Storybook, not particularly useful for our target audience until the addon is upgraded to use the v6 Controls.

(I really liked that the Controls came by default with a new v6 repo, and feel confident that plugins will upgrade, but until they do, having Knobs continue to _completely_ work, including working in the iframe, is important. Specifically, I'd much rather have to adapt to Knobs in an otherwise v6 Storybook, then to have to spin up a new v5 repo, only to have to update it to v6 further down the line.)

[shilman]

@metasean you can disable controls if you don't want to use them

https://storybook.js.org/docs/react/essentials/introduction#disabling-addons

[inthegreenwild]

@metasean you can disable controls if you don't want to use them

https://storybook.js.org/docs/react/essentials/introduction#disabling-addons

This disables the "controls" tab but the "knobs" tab is still missing

Edit: it shows up if I add it to the main "composer" of all the other storybooks. Is this expected behavior? If the main storybook doesn't have an add-on, a child using that add-on won't have access to it?

[shilman]

@inthegreenwild sounds like that could be a bug with the new composition feature. any chance you can file an issue with a public repro?

[inthegreenwild]

12468

[stale[bot]]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!