Storybook: @storybook/addon-backgrounds@next does not work

[Ailrun]

Describe the bug
I'm trying to use storybook@next. After I installed & set @storybook/addon-background, I faced two problems.

1. Background tool is not displayed occasionally.
2. When I tried to set a background (by clicking a color button), it emits the following error.
   TypeError: _this.tooltipRef.current.scheduleHide is not a function

To Reproduce

1. git clone https://github.com/Ailrun/storybook-issue5416
2. npm i
3. npm start
4. Check that there is no background tool just like the screenshot.
   
5. (While running npm start) uncomment line 5-21 of index.js.
   (FYI, I already set the global parameters in .storybook/config.js)
6. Check that there is a background tool.
   (Weirdly...)
7. Open the web dev tool.
8. Click the background tool button.
9. Select grey (or any other colors).
10. See the error.

Expected behavior
Always display the tool, and do not emit any errors.

Screenshots

System:

• OS: Manjaro (Kernel 4.18)
• Device: Desktop
• Browser: Firefox 64
• Framework: React
• Addons: Backgrounds
• Version: 5.0.0-alpha.10

[Ailrun]

Based on my investigation, the error part comes from https://github.com/storybooks/storybook/blob/fe4521c706549d5cb8f197e583f0d4016d5381ea/lib/components/src/menu/popout.js#L143

As you can see in the source code of react-popper-tooltip, their class don't have the method and all other methods are private (i.e., they intended not to use those methods outside of the class). Although changing the invoked method to hideTooltip removes the error, I don't think this is a valid and stable solution.

[Ailrun]

@tmeasday After few searches in this repo, I found following things.

1. The client emits STORY_CHANGED event only when it is rendered again.
   https://github.com/storybooks/storybook/blob/db3bf638840df6ba4d3dc255dc6d983cefac1779/lib/core/src/client/preview/start.js#L141-L143
2. The client emits STORY_CHANGED event only when some stories are changed.
   (Same code)
3. The addon updates its background option only on STORY_CHANGED event.
   https://github.com/storybooks/storybook/blob/6fdbf18db25a0c87844d67902f90508a324d1e76/addons/backgrounds/src/Tool.js#L17-L60
4. The addon does not render anything when background options is empty.
   https://github.com/storybooks/storybook/blob/6fdbf18db25a0c87844d67902f90508a324d1e76/addons/backgrounds/src/Tool.js#L90-L92

I also tried @storybook/addon-options@next, and it has a similar problem from
https://github.com/storybooks/storybook/blob/0c27be92b954e4a434617693f3fd055e31e83dc5/lib/ui/src/core/context.js#L84-L88

I think storybook should emit a single STORY_CHANGED event when it starts. How do you think?

[Ailrun]

Maybe related with #5418.

[tmeasday]

I think @ndelangen has been thinking about this stuff. I would suggest that these addons should be listening to the SET_CURRENT_STORY event or perhaps the STORY_RENDERED event?

[ndelangen]

I'll fix this

[shilman]

Yowza!! I just released https://github.com/storybooks/storybook/releases/tag/v5.0.0-beta.1 containing PR #5439 that references this issue. Upgrade today to try it out!

Because it's a pre-release you can find it on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[Ailrun]

FYI, I cannot reopen this issue for whatever reason.
What I'm curious about is whether the error is fixed or not. If it's not fixed, I think this issue (or my new issue) should be kept opened.

[tmeasday]

@ailrun - AFAICT the addon is working. Here is the latest version build of our storybook: https://next--storybooks-official.netlify.com/?path=/story/addons-backgrounds--story-1

You can try yourself with the @storybook/react@next (5.0.0-beta.1) release. Let us know if it is not fixed.

[Ailrun]

Oh, I notice that it is already fixed in the commit 4687253! It was just not yet released. I will check the lastest version :) I think it will work.

Thank you for all your endeavors to make storybook better!

[Ailrun]

Backgrounds addon works well! (Although options addon doesn't.... :( )

[shilman]

Yo-ho-ho!! I just released https://github.com/storybooks/storybook/releases/tag/v5.0.0-beta.2 containing PR #5452 that references this issue. Upgrade today to try it out!

Because it's a pre-release you can find it on the @next NPM tag.

[JBallin]

@tmeasday, that link currently doesn't change background colors?

Doesn't work at all on Desktop but works on mobile in portrait mode (not landscape).

[tmeasday]

Hmm, doesn't currently work for me at all at that link (on desktop). Shall we re-open @shilman?

[shilman]

I don't think it's currently being deployed at netlify. @ndelangen can you update the docs to reflect the current state?

[ndelangen]

Updated the docs, here's the url for next:
https://monorepo.storybook.now.sh/

[shilman]

@ndelangen if you don't issue a PR with the patch label, these won't make it onto the live site. I'm fine with self-merging uncontroversial documentation-only like this.

https://storybook.js.org/docs/basics/live-examples/