addon-backgrounds: global context not initially updated with color

Describe the bug When using @storybook/addons-backgrounds in a react project with a custom Decorator, the initial/default background value is not passed to the context.globals.

I have a project performing text contrast logic where I need the initial value to pass to javascript.

To Reproduce

1. Pull down and run this repro here.
2. Go to the primary button story.
3. Notice the console.log of the context.globals shows and empty object.
4. Click on a different background color, notice the context.globals now includes the selected value.

System

Environment Info:

  System:
    OS: macOS 11.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9980HK CPU @ 2.40GHz
  Binaries:
    Node: 14.17.3 - ~/.nvm/versions/node/v14.17.3/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.3/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Firefox: 90.0.1
    Safari: 14.1.1
  npmPackages:
    @storybook/addon-backgrounds: ^6.3.4 => 6.3.4
    @storybook/react: ^6.3.4 => 6.3.4

Additional context Could be related to #14846

[shilman]

this looks like a bug with addon-backgrounds or with core, depending on how you see it cc @yannbf @tmeasday @ghengeveld

also cc @stevensacks since you’re using the same pattern in your i18n work

AFAICT what’s going on here is that the globals code in core assumes that the globals are declared statically, either by the end user or by addons. what that would look like:

// .storybook/preview.js
export const globalTypes = { ... };
export const globals = { ... };

If you don’t declare a globalType, it will infer the type from the data in globals. So the final results union these two.

addon-backgrounds uses a different pattern where the user declares global values as parameters, and then the addon calls updateGlobals on story render. I’m not a fan of this pattern, but it’s what we have for now.

Given this pattern, we could fix the problem:

1. The backgrounds-addon could declare the globalType that it’s about to populate on its first render.
2. The core code could be less strict about what it accepts.

I think the first fix is closer to the design intent of globals. WDYT?

[nickofthyme]

@bytrangle the issue is that it does not capture the initial default value in preview.js here, and pass it to the decorators.

The whole globalTypes vs globals is really confusing when to use one or the other or both. As @shilman said

If you don’t declare a globalType, it will infer the type from the data in globals. So the final results union these two.

Is this not true? If it is I’d think the demo would work as is.

---

All in all how do you make the demo work so that it passes the initial default value to the decorators? In my custom background addon I have to call setGlobals for it to capture the initial value.