Global types does not work as documented for HTML components

Describe the bug The documented examples for exporting globalTypes in preview.js do not produce the documented results “you should see a new dropdown in your toolbar”. My hunch is this is down to @storybook/html not supporting this feature.

To Reproduce See repro here: https://github.com/maslade/storybook-toolbar-defect

1. Clone above git repo, which is a bare HTML @storybook/html project with the sample code copied into preview.js.
2. npm install && npm start
3. Wait for Storybook to start

Expected behavior From the documentation:

When you start your Storybook, you should see a new dropdown in your toolbar with options light and dark.

Code snippets See git.

System Environment Info:

System: OS: Windows 10 10.0.18363 CPU: (8) x64 Intel® Core™ i7-2700K CPU @ 3.50GHz Binaries: Node: 14.7.0 - C:\Program Files\nodejs\node.EXE npm: 6.14.7 - C:\Program Files\nodejs\npm.CMD Browsers: Chrome: 87.0.4280.88 Edge: Spartan (44.18362.449.0) npmPackages: @storybook/html: ^6.1.11 => 6.1.11

Additional context The documentation I’m referring to is here: https://storybook.js.org/docs/html/essentials/toolbars-and-globals#global-types-and-the-toolbar-annotation

I see that @storybook/html doesn’t support controls - could this be why? If so - what is a good alternative for adding a global configuration?

My use case: my project has multiple SASS entry points, reflecting different brands. At the moment I’m importing one in preview.js, and editing the code (remembering not to commit) when I want to see a different brand. I’d like to put this in the UI so users can swap brands without

[maslade]

Will do - thanks to you both. I’ll send something through this weekend. Happy holidays.

[jonniebigodes]

Closing this as it’s fixed.