UI: Add URL parameters to SB to tweak visible UI

[JonathanKolnik]

Issue: UI can not be hidden conditionally

What I did

Add the ability to use a comma-separated list query param:

&toolbarExclude=storybook/docs,storybook/viewport,...

Storybook’s addons all use a slash-separated prefix convention, so it uses a prefix match (i.e. storybook/a11y would match storybook/a11y/panel.

This applies to both tabs in addition to toolbar buttons.

How to test

• Is this testable with Jest or Chromatic screenshots?
• Does this need a new example in the kitchen sink apps?
• Does this need an update to the documentation?

If your answer is yes to any of these, please make sure to include it in your PR.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit 2317c2a. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 1 target

• nx run-many --target=prepare --all --parallel --max-parallel=15 -- --optimized

---

Sent with 💌 from NxCloud.

[shilman]

@JonathanKolnik can you add some QA instructions here to help me kick the tires?

[JonathanKolnik]

@shilman sorry for not including QA instructions.

If you build any of the examples and apply the query param &toolbarExclude=canvas,fullscreen,[...any other tool/tab id]

you can also tweak the params here in this story https://github.com/storybookjs/storybook/pull/17891/files#diff-49dbf57f9190dc0ee066badd7466c4ed85ac1797dd09fd0d9a42a86b010be845R173

oh also works in the hosted storybooks (still getting used to how meta this is haha) you can see here how the canvas tab is hidden https://5a375b97f4b14f0020b0cda3-lzkxepkwvd.chromatic.com/?path=/story/ui-preview--with-toolbar-exclusions&toolbarExclude=canvas

it's also worth testing the prefix matching like this https://5a375b97f4b14f0020b0cda3-lzkxepkwvd.chromatic.com/?path=/story/ui-preview--with-toolbar-exclusions&toolbarExclude=storybook/

[shilman]

Did a quick test & it's looking great.

[shilman]

@JonathanKolnik can you check chromatic?

[JonathanKolnik]

@shilman updated by leaving the story the way it was before this branch