search

storybookjs / addon-knobs

Storybook addon prop editor component
MIT License
12 stars 17 forks source link

Knobs not working for iframe (Storybook v6) #22

Open abeledovictor opened 4 years ago

abeledovictor commented 4 years ago

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 commented 4 years ago

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.

Please upgrade and try them out today!

shilman commented 4 years ago

Can you bisect to figure out which version broke it?

abeledovictor commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

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 commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

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

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

inthegreenwild commented 4 years ago

@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 commented 4 years ago

@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 commented 4 years ago

storybookjs/storybook#12468

stale[bot] commented 4 years ago

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!