storybookjs · seokju-na · Mar 6, 2019 · Mar 6, 2019 · Mar 7, 2019 · Mar 7, 2019
diff --git a/.github/CODEOWNERS b/.github/CODEOWNERS
@@ -1,19 +1,20 @@
-.circleci/ @hypnosphi @ndelangen
+.circleci/ @ndelangen
+.teamcity/ @hypnosphi
 .github/ @danielduan
 
 /addons/a11y/ @jbovenschen
 /addons/actions/ @rhalff
-/addons/backgrounds/ @ndelangen @hypnosphi
+/addons/backgrounds/ @ndelangen
 /addons/centered/ @kazupon
 /addons/events/ @z4o4z @ndelangen
 /addons/graphql/ @mnmtanish
-/addons/info/ @theinterned @z4o4z @UsulPro @hypnosphi @dangreenisrael @danielduan
+/addons/info/ @theinterned @z4o4z @UsulPro @dangreenisrael @danielduan
 /addons/jest/ @renaudtertrais
-/addons/knobs/ @alexandrebodin @theinterned @leonrodenburg @alterx @hypnosphi
-/addons/links/ @hypnosphi @ndelangen
+/addons/knobs/ @alexandrebodin @theinterned @leonrodenburg @alterx
+/addons/links/ @ndelangen
 /addons/notes/ @alexandrebodin
 /addons/options/ @danielduan @UsulPro
-/addons/storyshots/ @igor-dv @thomasbertet @hypnosphi
+/addons/storyshots/ @igor-dv @thomasbertet
 /addons/storysource/ @igor-dv
 /addons/viewport/ @saponifi3d
 
@@ -24,12 +25,12 @@
 /app/vue/ @thomasbertet @kazupon
 /app/svelte/ @plumpNation
 
-/docs/ @ndelangen @shilman @hypnosphi
+/docs/ @ndelangen @shilman
 
 /examples/angular-cli/ @igor-dv @alterx
-/examples/cra-kitchen-sink/ @ndelangen @UsulPro @hypnosphi
+/examples/cra-kitchen-sink/ @ndelangen @UsulPro
 /examples/cra-ts-kitchen-sink/ @mucsi96
-/examples/official-storybook/ @hypnosphi @danielduan @UsulPro
+/examples/official-storybook/ @danielduan @UsulPro
 /examples/polymer-cli/ @naipath @igor-dv
 /examples/vue-kitchen-sink/ @igor-dv @alexandrebodin
 /examples/svelte-kitchen-sink/ @plumpNation
@@ -40,12 +41,12 @@
 /lib/channel-postmessage/ @mnmtanish @ndelangen
 /lib/channel-websocket/ @mnmtanish @ndelangen
 /lib/channels/ @mnmtanish @ndelangen
-/lib/cli/ @hypnosphi @ndelangen @shilman @stijnkoopal
+/lib/cli/ @ndelangen @shilman @stijnkoopal
 /lib/client-logger/ @dangreenisrael
 /lib/codemod/ @aaronmcadam @ndelangen
-/lib/components/ @ndelangen @hypnosphi @tmeasday
+/lib/components/ @ndelangen @tmeasday
 /lib/core/ @tmeasday @igor-dv @alterx
 /lib/node-logger/ @dangreenisrael
-/lib/ui/ @tmeasday @igor-dv @hypnosphi @ndelangen
+/lib/ui/ @tmeasday @igor-dv  @ndelangen
 
-/scripts/ @ndelangen @igor-dv @hypnosphi
+/scripts/ @ndelangen @igor-dv
diff --git a/CHANGELOG.md b/CHANGELOG.md
diff --git a/MIGRATION.md b/MIGRATION.md
@@ -1,5 +1,7 @@
 # Migration
 
+- [From version 5.0.1 to 5.0.2](#from-version-501-to-502)
+  - [Deprecate webpack extend mode](#deprecate-webpack-extend-mode)
 - [From version 4.1.x to 5.0.x](#from-version-41x-to-50x)
   - [Webpack config simplification](#webpack-config-simplification)
   - [Theming overhaul](#theming-overhaul)
@@ -12,6 +14,7 @@
   - [Addon a11y uses parameters](#addon-a11y-uses-parameters-decorator-renamed)
   - [New keyboard shortcuts defaults](#new-keyboard-shortcuts-defaults)
   - [New URL structure](#new-url-structure)
+  - [Vue integration](#vue-integration)
 - [From version 4.0.x to 4.1.x](#from-version-40x-to-41x)
   - [Private addon config](#private-addon-config)
   - [React 15.x](#react-15x)
@@ -49,15 +52,51 @@
   - [Packages renaming](#packages-renaming)
   - [Deprecated embedded addons](#deprecated-embedded-addons)
 
+## From version 5.0.1 to 5.0.2
+
+### Deprecate webpack extend mode
+
+Exporting an object from your custom webpack config puts storybook in "extend mode".
+
+There was a bad bug in `v5.0.0` involving webpack "extend mode" that caused webpack issues for users migrating from `4.x`. We've fixed this problem in `v5.0.2` but it means that extend-mode has a different behavior if you're migrating from `5.0.0` or `5.0.1`. In short, `4.x` extended a base config with the custom config, whereas `5.0.0-1` extended the base with a richer config object that could conflict with the custom config in different ways from `4.x`.
+
+We've also deprecated "extend mode" because it doesn't add a lot of value over "full control mode", but adds more code paths, documentation, user confusion etc. Starting in SB6.0 we will only support "full control mode" customization.
+
+To migrate from extend-mode to full-control mode, if your extend-mode webpack config looks like this:
+
+```js
+module.exports = {
+  module: {
+    rules: [
+      /* ... */
+    ],
+  },
+};
+```
+
+In full control mode, you need modify the default config to have the rules of your liking:
+
+```js
+module.exports = ({ config }) => ({
+  ...config,
+  module: {
+    ...config.module,
+    rules: [
+      /* your own rules "..." here and/or some subset of config.module.rules */
+    ]
+  }
+})
+```
+
+Please refer to the [current custom webpack documentation](https://github.com/storybooks/storybook/blob/next/docs/src/pages/configurations/custom-webpack-config/index.md) for more information on custom webpack config and to [Issue #6081](https://github.com/storybooks/storybook/issues/6081) for more information about the change.
+
 ## From version 4.1.x to 5.0.x
 
 Storybook 5.0 includes sweeping UI changes as well as changes to the addon API and custom webpack configuration. We've tried to keep backwards compatibility in most cases, but there are some notable exceptions documented below.
 
 ## Webpack config simplifcation
 
-The API for custom webpack configuration has been simplifed in 5.0, but it's a breaking change.
-
-Storybook's "full control mode" for webpack allows you to override the webpack config with a function that returns a configuration object.
+The API for custom webpack configuration has been simplifed in 5.0, but it's a breaking change. Storybook's "full control mode" for webpack allows you to override the webpack config with a function that returns a configuration object.
 
 In Storybook 5 there is a single signature for full-control mode that takes a parameters object with the fields `config` and `mode`:
 
@@ -133,6 +172,7 @@ addParameters({
     }),
     isFullscreen: false,
     panelPosition: 'right',
+    isToolshown: true,
   },
 });
 ```
@@ -148,9 +188,12 @@ Here is the mapping from old options to new:
 | showAddonPanel    | showPanel        |
 | addonPanelInRight | panelPosition    |
 | showSearchBox     |                  |
+|                   | isToolshown      |
 
 Storybook v5 removes the search dialog box in favor of a quick search in the navigation view, so `showSearchBox` has been removed.
 
+Storybook v5 introduce a new tool bar above the story view and you can show\hide it with the new `isToolshown` option.
+
 ## Individual story decorators
 
 The behavior of adding decorators to a kind has changed in SB5 ([#5781](https://github.com/storybooks/storybook/issues/5781)).
@@ -164,7 +207,7 @@ storiesOf('Stories', module)
   .add('centered', () => 'Hello');
 ```
 
-The semantics has changed in SB5 so that calling `addDecorator` on a kind adds a decorator to all its stories, no mater the order. So in the previous example, both stories would be centered.
+The semantics has changed in SB5 so that calling `addDecorator` on a kind adds a decorator to all its stories, no matter the order. So in the previous example, both stories would be centered.
 
 To allow for a subset of the stories in a kind to be decorated, we've added the ability to add decorators to individual stories using parameters:
 
@@ -309,6 +352,12 @@ https://url-of-storybook?path=/story/<storyId>
 
 The structure of `storyId` is a slugified `<selectedKind>--<selectedStory>` (slugified = lowercase, hyphen-separated). Each `storyId` must be unique. We plan to build more features into Storybook in upcoming versions based on this new structure.
 
+## Vue integration
+
+The Vue integration was updated, so that every story returned from a story or decorator function is now being normalized with `Vue.extend` **and** is being wrapped by a functional component. Returning a string from a story or decorator function is still supported and is treated as a component with the returned string as the template.
+
+Currently there is no recommended way of accessing the component options of a story inside a decorator.
+
 ## From version 4.0.x to 4.1.x
 
 There are are a few migrations you should be aware of in 4.1, including one unintentionally breaking change for advanced addon usage.

diff --git a/README.md b/README.md
@@ -131,10 +131,10 @@ See [Addon / Framework Support Table](ADDONS_SUPPORT.md)
 
 We have a badge! Link it to your live Storybook example.
 
-![Storybook](https://github.com/storybooks/press/blob/master/badges/storybook.svg)
+![Storybook](https://cdn.jsdelivr.net/gh/storybooks/brand@master/badge/badge-storybook.svg)
 
 ```md
-[![Storybook](https://github.com/storybooks/press/blob/master/badges/storybook.svg)](link to site)
+[![Storybook](https://cdn.jsdelivr.net/gh/storybooks/brand@master/badge/badge-storybook.svg)](link to site)
 ```
 
 If you're looking for material to use in your presentation about storybook, like logo's video material and the colors we use etc, you can find all of that at our [press repo](https://github.com/storybooks/press).
@@ -161,7 +161,7 @@ Looking for a first issue to tackle?
 - [Talk to us](https://discord.gg/sMFvFsG), we'll find something to suits your skills and learning interest.
 
 ### Development scripts
-
+Storybook is organized as a monorepo using [Lerna](https://lernajs.io). Useful scripts include:
 #### `yarn bootstrap`
 
 > Installs package dependencies and links packages together - using lerna

diff --git a/addons/a11y/README.md b/addons/a11y/README.md
@@ -24,7 +24,7 @@ import the `withA11y` decorator to check your stories for violations within your
 
 ```js
 import React from 'react';
-import { storiesOf } from '@storybook/react';
+import { storiesOf, addDecorator } from '@storybook/react';
 import { withA11y } from '@storybook/addon-a11y';
 
 // should only be added once
@@ -58,7 +58,7 @@ addParameters({
   a11y: {
     // ... axe options
     element: '#root', // optional selector which element to inspect
-    config: {} // axe-core configurationOptions (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#parameters-1)
+    config: {}, // axe-core configurationOptions (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#parameters-1)
     options: {} // axe-core optionsParameter (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter)
   },
 });

diff --git a/addons/a11y/package.json b/addons/a11y/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-a11y",
-  "version": "5.0.0",
+  "version": "5.0.11",
   "description": "a11y addon for storybook",
   "keywords": [
     "a11y",
@@ -25,14 +25,14 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.0.0",
-    "@storybook/client-logger": "5.0.0",
-    "@storybook/components": "5.0.0",
-    "@storybook/core-events": "5.0.0",
-    "@storybook/theming": "5.0.0",
+    "@storybook/addons": "5.0.11",
+    "@storybook/client-logger": "5.0.11",
+    "@storybook/components": "5.0.11",
+    "@storybook/core-events": "5.0.11",
+    "@storybook/theming": "5.0.11",
     "axe-core": "^3.1.2",
     "common-tags": "^1.8.0",
-    "core-js": "^2.6.2",
+    "core-js": "^2.6.5",
     "global": "^4.3.2",
     "memoizerific": "^1.11.3",
     "prop-types": "^15.6.2",

diff --git a/addons/a11y/src/components/ColorBlindness.js b/addons/a11y/src/components/ColorBlindness.js
@@ -8,6 +8,16 @@ import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/comp
 
 const getIframe = memoize(1)(() => document.getElementById('storybook-preview-iframe'));
 
+const getFilter = filter => {
+  if (filter === null) {
+    return 'none';
+  }
+  if (filter === 'mono') {
+    return 'grayscale(100%)';
+  }
+  return `url('#${filter}')`;
+};
+
 const ColorIcon = styled.span(
   {
     background: 'linear-gradient(to right, #F44336, #FF9800, #FFEB3B, #8BC34A, #2196F3, #9C27B0)',
@@ -17,7 +27,7 @@ const ColorIcon = styled.span(
     width: '1rem',
   },
   ({ filter }) => ({
-    filter: filter === 'mono' ? 'grayscale(100%)' : `url('#${filter}')`,
+    filter: getFilter(filter),
   }),
   ({ theme }) => ({
     boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
@@ -34,7 +44,7 @@ class ColorBlindness extends Component {
     const iframe = getIframe();
 
     if (iframe) {
-      iframe.style.filter = filter === 'mono' ? 'grayscale(100%)' : `url('#${filter}')`;
+      iframe.style.filter = getFilter(filter);
       this.setState({
         expanded: false,
         filter,
@@ -64,6 +74,7 @@ class ColorBlindness extends Component {
         this.setFilter(i);
       },
       right: <ColorIcon filter={i} />,
+      active: filter === i,
     }));
 
     if (filter !== null) {
@@ -73,6 +84,8 @@ class ColorBlindness extends Component {
           onClick: () => {
             this.setFilter(null);
           },
+          right: undefined,
+          active: false,
         },
         ...colorList,
       ];

diff --git a/addons/a11y/src/components/Report/Item.js b/addons/a11y/src/components/Report/Item.js
@@ -13,6 +13,7 @@ const Wrapper = styled.div();
 const Icon = styled(Icons)(({ theme }) => ({
   height: 10,
   width: 10,
+  minWidth: 10,
   color: theme.color.mediumdark,
   marginRight: '10px',
   transition: 'transform 0.1s ease-in-out',
@@ -28,6 +29,7 @@ const HeaderBar = styled.button(({ theme }) => ({
   border: 0,
   background: 'none',
   color: 'inherit',
+  textAlign: 'left',
 
   borderLeft: '3px solid transparent',
 

diff --git a/addons/a11y/src/components/Report/Rules.js b/addons/a11y/src/components/Report/Rules.js
@@ -40,6 +40,10 @@ const Status = styled.div(({ passes, impact }) => ({
   textAlign: 'center',
   flex: '0 0 16px',
   color: passes ? impactColors.success : impactColors[impact],
+  '& > svg': {
+    height: '16px',
+    width: '16px',
+  },
 }));
 
 const Rule = ({ rule, passes }) => (

diff --git a/addons/a11y/src/register.js b/addons/a11y/src/register.js
@@ -8,7 +8,11 @@ import ColorBlindness from './components/ColorBlindness';
 import { ADDON_ID, PANEL_ID } from './constants';
 
 const Hidden = styled.div(() => ({
-  display: 'none',
+  '&, & svg': {
+    position: 'absolute',
+    width: 0,
+    height: 0,
+  },
 }));
 
 const PreviewWrapper = p => (

diff --git a/addons/actions/package.json b/addons/actions/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@storybook/addon-actions",
-  "version": "5.0.0",
+  "version": "5.0.11",
   "description": "Action Logger addon for storybook",
   "keywords": [
     "storybook"
@@ -20,11 +20,11 @@
     "prepare": "node ../../scripts/prepare.js"
   },
   "dependencies": {
-    "@storybook/addons": "5.0.0",
-    "@storybook/components": "5.0.0",
-    "@storybook/core-events": "5.0.0",
-    "@storybook/theming": "5.0.0",
-    "core-js": "^2.6.2",
+    "@storybook/addons": "5.0.11",
+    "@storybook/components": "5.0.11",
+    "@storybook/core-events": "5.0.11",
+    "@storybook/theming": "5.0.11",
+    "core-js": "^2.6.5",
     "fast-deep-equal": "^2.0.1",
     "global": "^4.3.2",
     "lodash": "^4.17.11",