Storybook: [addons/controls]: Docs for global controls

[jlarmstrongiv]

Is your feature request related to a problem? Please describe.
I use global controls for the color theme that applies to all of my components. In addons/knobs, I was able to add a global decorator addDecorator(withKnobs); in preview.js to show the theme controls for every component.

Describe the solution you'd like
Well, I am unsure whether that feature is currently available in addons/controls. If it is, it’d be great to have a line or two in the documentation. If it isn’t, that’d be a great feature to implement.

Describe alternatives you've considered
Delay migrating and stay with addons/knobs.

Are you able to assist bring the feature to reality?
Maybe 😉 if it’s docs, I bet I could handle it

Additional context
An option to cache the values in localStorage across pages would be nice.

[shilman]

@jlarmstrongiv addon-toolbars is the args-based design for global variables. LMK if this is what you had in mind:

https://github.com/storybookjs/storybook/tree/next/addons/toolbars

[jlarmstrongiv]

@shilman thanks for the help! I totally missed addon-toolbars.

Unfortunately, I just don’t feel like the plugin is ready for prime time. Configuring it in the addons array broke storybook with Uncaught TypeError: (0 , _api.useGlobalArgTypes) is not a function and all of the examples I tried had miss-matched braces or missing commas. I tried both the current release and @next versions

I was able to successfully configure the addon-contexts and may use that for the time being. Unfortunately, neither of them seem to allow for custom icons and there doesn’t seem to be an option to permanently display labels either (I find the label on hover to be too hidden).

Anyway, thanks for the help! I appreciate it 😄

[shilman]

@jlarmstrongiv what version of addon-toolbars did you use and did it line up with the other @storybook/* packages you had installed? if not, it should be. it's ready for prime time and a major step up from addon-contexts for all the reasons described in the README. also you should be looking at the Github README not the NPM README.

[jlarmstrongiv]

I assume it’s the latest? I installed both with the @next flag so I assumed they should have been on the same version

[shilman]

We recently renamed useGlobalArgTypes to useGlobalTypes across the codebase in https://github.com/storybookjs/storybook/releases/tag/v6.0.0-beta.39. That failure indicates that some of your packages are earlier versions than that, and some are after. We're going into RC tomorrow, so there shouldn't be anymore breaking changes between now and the 6.0 final release, just bug fixes.

[jlarmstrongiv]

@shilman Turns out installing the @storybook/addon-toolbars@next version does not actually install the latest release. That’s why I had the version mismatch 👍

[shilman]

From now on i recommended npx sb@next upgrade --prerelease which batch upgrades all storybook packages to the latest