Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Knobs: Wrong URI-encoding in torn-away iframe #11641

Closed
asudoh opened this issue Jul 22, 2020 · 3 comments
Closed

Knobs: Wrong URI-encoding in torn-away iframe #11641

asudoh opened this issue Jul 22, 2020 · 3 comments
Labels
addon: knobs bug

Comments

@asudoh
Copy link
Contributor

asudoh commented Jul 22, 2020 •
edited
Loading

Describe the bug
The torn-away <iframe> with a knob value changed has wrong URI-encoding, not properly escaping % character.

To Reproduce
Steps to reproduce the behavior:

  1. Clone https://github.com/asudoh/storybook-knobs-test
  2. yarn install
  3. yarn storybook
  4. Open http://localhost:6006/?path=/story/button--emoji
  5. Replace aria-label knob content with 10% 20% 30%
  6. Click on torn-away button (An icon with square with up arrow)
  7. Inspect aria-label in <span role="img"> with DOM inspector

BUG: aria-label shows 10%%2020%%2030%.

Expected behavior

  1. The aria-label shows 10% 20% 30%.
  2. The URL shows http://localhost:6006/iframe.html?id=button--emoji&knob-aria-label=10%25%2020%25%2030%25 (aria-label having encodeURIComponent('10% 20% 30%')) instead of 10%%2020%%2030%

Screenshots
image
image

System:
Got below unfortunately:

> npx -p @storybook/cli@next sb info

Environment Info:
(node:85942) UnhandledPromiseRejectionWarning: TypeError: e.filter is not a function
...

But hope above provides enough info.
@asudoh asudoh mentioned this issue Jul 22, 2020
Closed
asudoh added a commit to asudoh/storybook that referenced this issue Jul 22, 2020
@asudoh
fix(preview): uri-encode search params
2d8d5fe 
This change applies basic URI encoding to knob keys/values in
`<iframe>` URL and torn-away window URL in preview.

Fixes storybookjs#11641.
@asudoh asudoh mentioned this issue Jul 22, 2020
Merged
@shilman
Copy link
Member

shilman commented Aug 3, 2020 •
edited
Loading

Hi @asudoh! Thanks for filing this and also for the fix. Sorry I missed this first time around, will take a look at the PR now and hopefully get it out with the next release.

@shilman
Copy link
Member

shilman commented Aug 3, 2020

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 don't have a "populate from URL" feature yet, but we plan to add it in the future: #11604

Please upgrade and try them out today!

@shilman shilman closed this as completed in 0fc8d47 Aug 3, 2020
@shilman
Copy link
Member

shilman commented Aug 3, 2020

Yee-haw!! I just released https://github.com/storybookjs/storybook/releases/tag/v6.0.0-rc.24 containing PR #11642 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

@asudoh asudoh mentioned this issue Sep 10, 2020
Closed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
addon: knobs bug
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
2 participants
@shilman @asudoh