Merge pull request #6561 from pajter/feature/addon-backgrounds-emit-e…

…vent

Emit event on updating background

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);
+});
+```

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`,
+};

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) {

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} />,
   });
 });