Merge pull request #5514 from pgoforth/defect/addon-notes_onload

[bug] `addon-notes` and `addon-cssresources` unavailable on initial load
storybookjs · Feb 8, 2019 · ee81ab7 · ee81ab7
2 parents b5b0784 + e914c98
commit ee81ab7
Show file tree

Hide file tree

Showing 4 changed files with 26 additions and 27 deletions.
diff --git a/addons/cssresources/README.md b/addons/cssresources/README.md
@@ -28,26 +28,27 @@ You need add the all the css resources at compile time using the `withCssResourc
 
 ```js
 // Import from @storybook/X where X is your framework
-import { configure, addDecorator, storiesOf } from '@storybook/react';
+import { configure, addDecorator, addParameters, storiesOf } from '@storybook/react';
 import { withCssResources } from '@storybook/addon-cssresources';
 
 // global
-addDecorator(
-  withCssResources({
-    cssresources: [{
-        id: `bluetheme`,
-        code: `<style>body { background-color: lightblue; }</style>`,
-        picked: false,
-      },
-    ],
-  })
-);
+addDecorator(withCssResources)
+addParameters({
+  cssresources: [{
+      id: `bluetheme`,
+      code: `<style>body { background-color: lightblue; }</style>`,
+      picked: false,
+    },
+  ],
+});
+
+You can use the `cssresources` parameter to override resources on each story individually:
 
 // per story
 storiesOf('Addons|Cssresources', module)
-  .addDecorator(
-    withCssResources({
-      cssresources: [{
+  .add('Camera Icon', () => <i className="fa fa-camera-retro"> Camera Icon</i>, {
+      cssresources: [
+        {
           id: `fontawesome`,
           code: `<link rel="stylesheet" type="text/css" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css"></link>`,
           picked: true,
@@ -57,7 +58,5 @@ storiesOf('Addons|Cssresources', module)
           picked: true,
         },
       ],
-    })
-  )
-  .add('Camera Icon', () => <i className="fa fa-camera-retro"> Camera Icon</i>);
+  });
 ```
diff --git a/addons/cssresources/src/css-resource-panel.tsx b/addons/cssresources/src/css-resource-panel.tsx
@@ -1,6 +1,6 @@
 import React, { Component, Fragment } from 'react';
 import { SyntaxHighlighter } from '@storybook/components';
-import Eventtypes, { STORY_CHANGED } from '@storybook/core-events';
+import Eventtypes, { STORY_RENDERED } from '@storybook/core-events';
 
 import { EVENTS, PARAM_KEY } from './constants';
 import { CssResource } from './CssResource';
@@ -32,12 +32,12 @@ export class CssResourcePanel extends Component<CssResourcePanelProps, CssResour
 
   componentDidMount() {
     const { api } = this.props;
-    api.on(STORY_CHANGED, this.onStoryChange);
+    api.on(STORY_RENDERED, this.onStoryChange);
   }
 
   componentWillUnmount() {
     const { api } = this.props;
-    api.off(STORY_CHANGED, this.onStoryChange);
+    api.off(STORY_RENDERED, this.onStoryChange);
   }
 
   onStoryChange = (id: string) => {

diff --git a/addons/notes/src/Panel.tsx b/addons/notes/src/Panel.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import * as PropTypes from 'prop-types';
 import { types } from '@storybook/addons';
 import { styled } from '@storybook/theming';
-import { STORY_CHANGED } from '@storybook/core-events';
+import { STORY_RENDERED } from '@storybook/core-events';
 
 import { SyntaxHighlighter as SyntaxHighlighterBase, Placeholder } from '@storybook/components';
 import Giphy from './giphy';
@@ -73,12 +73,12 @@ export default class NotesPanel extends React.Component<Props, NotesPanelState>
 
   componentDidMount() {
     const { api } = this.props;
-    api.on(STORY_CHANGED, this.onStoryChange);
+    api.on(STORY_RENDERED, this.onStoryChange);
   }
 
   componentWillUnmount() {
     const { api } = this.props;
-    api.off(STORY_CHANGED, this.onStoryChange);
+    api.off(STORY_RENDERED, this.onStoryChange);
   }
 
   onStoryChange = (id: string) => {

diff --git a/docs/src/pages/addons/writing-addons/index.md b/docs/src/pages/addons/writing-addons/index.md
@@ -73,13 +73,13 @@ class MyPanel extends React.Component {
   componentDidMount() {
     const { api } = this.props;
 
-    api.on(STORY_CHANGED, this.onStoryChange);
+    api.on(STORY_RENDERED, this.onStoryChange);
   }
 
   componentWillUnmount() {
     const { api } = this.props;
 
-    api.off(STORY_CHANGED, this.onStoryChange);
+    api.off(STORY_RENDERED, this.onStoryChange);
   }
 
   onStoryChange = id => {
@@ -184,12 +184,12 @@ class MyPanel extends React.Component {
   componentDidMount() {
     const { api } = this.props;
     api.on('foo/doSomeAction', this.onSomeAction);
-    api.on(STORY_CHANGED, this.onStoryChange);
+    api.on(STORY_RENDERED this.onStoryChange);
   }
   componentWillUnmount() {
     const { api } = this.props;
     api.off('foo/doSomeAction', this.onSomeAction);
-    api.off(STORY_CHANGED, this.onStoryChange);
+    api.off(STORY_RENDERED, this.onStoryChange);
   }
 
   render() {