From b9734d0911d6bfd30c00e731a8b82c792a03b648 Mon Sep 17 00:00:00 2001
From: Pieter Janssen <4687577+pajter@users.noreply.github.com>
Date: Thu, 18 Apr 2019 16:45:40 +0200
Subject: [PATCH 1/2] Emit event on updating background

---
 addons/backgrounds/src/constants.ts               |  4 ++++
 .../src/containers/BackgroundSelector.tsx         | 15 +++++++++------
 addons/backgrounds/src/register.tsx               |  4 ++--
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/addons/backgrounds/src/constants.ts b/addons/backgrounds/src/constants.ts
index 503f310a6f5b..8154ba047255 100644
--- a/addons/backgrounds/src/constants.ts
+++ b/addons/backgrounds/src/constants.ts
@@ -1,2 +1,6 @@
 export const ADDON_ID = 'storybook/background';
 export const PARAM_KEY = 'backgrounds';
+
+export const EVENTS = {
+  UPDATE: `${ADDON_ID}/update`,
+};
diff --git a/addons/backgrounds/src/containers/BackgroundSelector.tsx b/addons/backgrounds/src/containers/BackgroundSelector.tsx
index 4e94e4fb768d..a2ce74f77689 100644
--- a/addons/backgrounds/src/containers/BackgroundSelector.tsx
+++ b/addons/backgrounds/src/containers/BackgroundSelector.tsx
@@ -1,12 +1,12 @@
 import React, { Component, Fragment } from 'react';
 import memoize from 'memoizerific';
 
-import { Combo, Consumer } from '@storybook/api';
+import { Combo, Consumer, API } from '@storybook/api';
 import { Global, Theme } from '@storybook/theming';
 
 import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';
 
-import { PARAM_KEY } from '../constants';
+import { PARAM_KEY, EVENTS } from '../constants';
 import { ColorIcon } from '../components/ColorIcon';
 
 interface Item {
@@ -31,12 +31,12 @@ const createBackgroundSelectorItem = memoize(1000)(
     name: string,
     value: string,
     hasSwatch: boolean,
-    change: (arg: { selected: string; expanded: boolean }) => void
+    change: (arg: { selected: string; name: string }) => void
   ): Item => ({
     id: id || name,
     title: name,
     onClick: () => {
-      change({ selected: value, expanded: false });
+      change({ selected: value, name });
     },
     value,
     right: hasSwatch ? <ColorIcon background={value} /> : undefined,
@@ -96,13 +96,16 @@ interface State {
   expanded: boolean;
 }
 
-export class BackgroundSelector extends Component<{}, State> {
+export class BackgroundSelector extends Component<{ api: API }, State> {
   state: State = {
     selected: null,
     expanded: false,
   };
 
-  change = (args: State) => this.setState(args);
+  change = ({ selected, name }: { selected: string; name: string }) => {
+    this.props.api.emit(EVENTS.UPDATE, { selected, name });
+    this.setState({ selected, expanded: false });
+  };
 
   onVisibilityChange = (s: boolean) => {
     if (this.state.expanded !== s) {
diff --git a/addons/backgrounds/src/register.tsx b/addons/backgrounds/src/register.tsx
index 43d43dcae1c9..7dde13f9e169 100644
--- a/addons/backgrounds/src/register.tsx
+++ b/addons/backgrounds/src/register.tsx
@@ -4,11 +4,11 @@ import { addons, types } from '@storybook/addons';
 import { ADDON_ID } from './constants';
 import { BackgroundSelector } from './containers/BackgroundSelector';
 
-addons.register(ADDON_ID, () => {
+addons.register(ADDON_ID, api => {
   addons.add(ADDON_ID, {
     title: 'Backgrounds',
     type: types.TOOL,
     match: ({ viewMode }) => viewMode === 'story',
-    render: () => <BackgroundSelector />,
+    render: () => <BackgroundSelector api={api} />,
   });
 });

From abde7b43c717b8c937f2596abdb53b833b6e4666 Mon Sep 17 00:00:00 2001
From: Pieter Janssen <4687577+pajter@users.noreply.github.com>
Date: Thu, 18 Apr 2019 17:20:12 +0200
Subject: [PATCH 2/2] Update README

---
 addons/backgrounds/README.md | 11 +++++++++++
 1 file changed, 11 insertions(+)

diff --git a/addons/backgrounds/README.md b/addons/backgrounds/README.md
index 77c1f2810e77..810d6a4bc9ca 100644
--- a/addons/backgrounds/README.md
+++ b/addons/backgrounds/README.md
@@ -83,3 +83,14 @@ storiesOf('Button', module)
     backgrounds: { disable: true },
   });
 ```
+
+## Events
+
+If you want to react to a background change—for instance to implement some custom logic in your Storybook—you can subscribe to the `storybook/background/update` event. It will be emitted when the user changes the background.
+
+```js
+addonAPI.getChannel().on('storybook/background/update', (bg) => {
+  console.log('Background color', bg.selected);
+  console.log('Background name', bg.name);
+});
+```