Merge branch 'next' into 10757-better-search

2025-03-17 05:02:23 +08:00 · 2020-10-07 14:11:46 +02:00 · 2020-10-07 14:11:46 +02:00 · 871fe72376
commit 871fe72376
parent fc8e6e226d 543da4527c
320 changed files with 3977 additions and 2002 deletions
--- a/.circleci/config.yml
+++ b/.circleci/config.yml
@ -11,55 +11,94 @@ executors:
    working_directory: /tmp/storybook
    docker:
      - image: circleci/node:10-browsers
+        environment:
+          NODE_OPTIONS: --max_old_space_size=4096
    resource_class: <<parameters.class>>

 jobs:
-  install:
-    executor: sb_node
+  build:
+    executor:
+      class: large
+      name: sb_node
    steps:
      - checkout
+      - run:
+          name: Remove examples
+          command: rm -rf examples/
      - restore_cache:
-          name: Restore core dependencies cache
+          name: Restore Yarn cache
          keys:
-            - core-dependencies-v5-{{ checksum "yarn.lock" }}
-            - core-dependencies-v5-
+            - build-yarn-cache-v1--{{ checksum "yarn.lock" }}
+            - build-yarn-cache-v1--
      - run:
          name: Install dependencies
-          command: yarn install
-      - run:
-          name: Check that yarn.lock is not corrupted
-          command: yarn repo-dirty-check
-      - save_cache:
-          name: Cache core dependencies
-          key: core-dependencies-v5-{{ checksum "yarn.lock" }}
-          paths:
-            - node_modules
-      - persist_to_workspace:
-          root: .
-          paths:
-            - node_modules
-            - examples
-            - addons
-            - dev-kits
-            - app
-            - lib
-  build:
-    executor: sb_node
-    steps:
-      - checkout
-      - attach_workspace:
-          at: .
+          command: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
      - run:
          name: Bootstrap
          command: yarn bootstrap --core
+      - save_cache:
+          name: Save Yarn cache
+          key: build-yarn-cache-v1--{{ checksum "yarn.lock" }}
+          paths:
+            - ~/.cache/yarn
      - persist_to_workspace:
          root: .
          paths:
-            - examples
            - addons
            - dev-kits
            - app
            - lib
+  install-examples-deps:
+    executor:
+      class: large
+      name: sb_node
+    steps:
+      - checkout
+      - restore_cache:
+          name: Restore Yarn cache
+          keys:
+            - install-examples-deps-yarn-cache-v1--{{ checksum "yarn.lock" }}
+            - install-examples-deps-yarn-cache-v1--
+      - run:
+          name: Install dependencies
+          command: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
+      - save_cache:
+          name: Save Yarn cache
+          key: install-examples-deps-yarn-cache-v1--{{ checksum "yarn.lock" }}
+          paths:
+            - ~/.cache/yarn
+      - persist_to_workspace:
+          root: .
+          paths:
+            - examples
+            - node_modules
+  install-e2e-deps:
+    executor:
+      class: large
+      name: sb_node
+    steps:
+      - checkout
+      - run:
+          name: Keep only root package
+          command: rm -rf examples/ && rm -rf addons/ && rm -rf app/ && rm -rf lib/
+      - restore_cache:
+          name: Restore Yarn cache
+          keys:
+            - install-e2e-deps-yarn-cache-v1--{{ checksum "yarn.lock" }}
+            - install-e2e-deps-yarn-cache-v1--
+      - run:
+          name: Install dependencies
+          command: yarn install --frozen-lockfile --cache-folder ~/.cache/yarn
+      - save_cache:
+          name: Save Yarn cache
+          key: install-e2e-deps-yarn-cache-v1--{{ checksum "yarn.lock" }}
+          paths:
+            - ~/.cache/yarn
+      - persist_to_workspace:
+          root: .
+          paths:
+            - examples
+            - node_modules
  chromatic:
    executor: sb_node
    parallelism: 11
@ -72,7 +111,9 @@ jobs:
          command: |
            yarn run-chromatics
  packtracker:
-    executor: sb_node
+    executor:
+      class: medium
+      name: sb_node
    steps:
      - checkout
      - attach_workspace:
@ -83,7 +124,9 @@ jobs:
            cd examples/official-storybook
            yarn packtracker
  examples:
-    executor: sb_node
+    executor:
+      class: large
+      name: sb_node
    parallelism: 11
    steps:
      - checkout
@ -98,7 +141,9 @@ jobs:
          paths:
            - built-storybooks
  publish:
-    executor: sb_node
+    executor:
+      class: large
+      name: sb_node
    steps:
      - checkout
      - attach_workspace:
@ -111,6 +156,9 @@ jobs:
          paths:
            - .verdaccio-cache
  examples-v2:
+    executor:
+      class: large
+      name: sb_node
    docker:
      - image: cypress/included:4.7.0
        environment:
@ -195,7 +243,9 @@ jobs:
          destination: cypress

  smoke-tests:
-    executor: sb_node
+    executor:
+      class: medium
+      name: sb_node
    steps:
      - checkout
      - attach_workspace:
@ -310,30 +360,35 @@ jobs:
          name: Upload coverage
          command: yarn coverage

+
 workflows:
  test:
    jobs:
-      - install
-      - build:
-          requires:
-            - install
+      - build
+      - install-e2e-deps
+      - install-examples-deps
      - lint:
          requires:
+            - install-examples-deps
            - build
      - examples:
          requires:
+            - install-examples-deps
            - build
      - e2e:
          requires:
            - examples
      - smoke-tests:
          requires:
+            - install-examples-deps
            - build
      - packtracker:
          requires:
+            - install-examples-deps
            - build
      - test:
          requires:
+            - install-examples-deps
            - build
      - coverage:
          requires:
@ -343,6 +398,7 @@ workflows:
            - examples
      - publish:
          requires:
+            - install-e2e-deps
            - build
      - examples-v2:
          requires:
--- a/.github/ISSUE_TEMPLATE/bug_report.md
+++ b/.github/ISSUE_TEMPLATE/bug_report.md
@ -23,7 +23,7 @@ If applicable, add screenshots to help explain your problem.
 **Code snippets**
 If applicable, add code samples to help explain your problem.

-**System:**
+**System**
 Please paste the results of `npx sb@next info` here.

 **Additional context**
--- a/.github/ISSUE_TEMPLATE/feature_request.md
+++ b/.github/ISSUE_TEMPLATE/feature_request.md
@ -4,7 +4,7 @@ about: Suggest an idea for this project

 ---

-**Is your feature request related to a problem? Please describe.**
+**Is your feature request related to a problem? Please describe**
 A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

 **Describe the solution you'd like**
@ -13,7 +13,7 @@ A clear and concise description of what you want to happen.
 **Describe alternatives you've considered**
 A clear and concise description of any alternative solutions or features you've considered.

-**Are you able to assist bring the feature to reality?**
+**Are you able to assist to bring the feature to reality?**
 no | yes, I can...

 **Additional context**
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@ -12,7 +12,7 @@ If your answer is yes to any of these, please make sure to include it in your PR

 <!--

-Everybody: Please submit all PRs to the `next` branch unless they are specific to current release. Storybook maintainers cherry-pick bug and documentation fixes into the `master` branch as part of the release process, so you shouldn't need to worry about this.
+Everybody: Please submit all PRs to the `next` branch unless they are specific to the current release. Storybook maintainers cherry-pick bug and documentation fixes into the `master` branch as part of the release process, so you shouldn't need to worry about this.

 Maintainers: Please tag your pull request with at least one of the following:
 `["cleanup", "BREAKING CHANGE", "feature request", "bug", "documentation", "maintenance", "dependencies", "other"]`
--- a/.github/automention.yml
+++ b/.github/automention.yml
@ -1,10 +1,10 @@
-'app: angular': ['kroeder', 'igor-dv', 'MaximSagan', 'Marklb']
-'app: ember': ['gabrielcsapo', 'gossi', 'meirish']
+'app: angular': ['kroeder', 'MaximSagan', 'Marklb']
+'app: ember': ['gabrielcsapo', 'gossi', 'meirish', 'dbendaou']
 'app: html': ['Hypnosphi']
 'app: marko': ['nm123github']
 'app: preact': ['BartWaardenburg']
 'app: rax': ['SoloJiang']
-'app: svelte': ['rixo', 'plumpNation']
+'app: svelte': ['BlackFenix2']
 'app: vue': ['backbone87', 'elevatebart', 'pksunkara', 'Aaron-Pool', 'pocka']
 'app: web-components': ['daKmoR']
 'api: addons': ['ndelangen']
--- a/.spelling
+++ b/.spelling
@ -71,7 +71,6 @@ storybook.js.org
 YuzuJS
 setImmediate
 Malte
-Ubl
 Katić
 Domenic
 Kowal
--- a/.teamcity/settings.kts
+++ b/.teamcity/settings.kts
@ -129,8 +129,7 @@ object Build : BuildType({
                #!/bin/bash
                set -e -x
                
-                yarn install
-                yarn repo-dirty-check
+                yarn install --frozen-lockfile
                yarn bootstrap --core
            """.trimIndent()
            dockerImage = "node:10"
@ -177,7 +176,7 @@ object ExamplesTemplate : Template({
            scriptContent = """
                #!/bin/bash
                set -e -x
-
+                
                yarn install
                rm -rf built-storybooks
                mkdir -p built-storybooks
@ -319,7 +318,7 @@ object E2E : BuildType({
            scriptContent = """
                #!/bin/bash
                set -e -x
-
+                
                yarn install
                yarn cypress install
                yarn serve-storybooks &
@ -366,42 +365,42 @@ object SmokeTests : BuildType({
            scriptContent = """
                #!/bin/bash
                set -e -x
-
+                
                yarn install
-
+                
                cd examples/cra-kitchen-sink
                yarn storybook --smoke-test --quiet
-          
+                
                cd ../cra-ts-kitchen-sink
                yarn storybook --smoke-test --quiet
-          
+                
                cd ../vue-kitchen-sink
                yarn storybook --smoke-test --quiet
-          
+                
                cd ../svelte-kitchen-sink
                yarn storybook --smoke-test --quiet
-          
+                
                cd ../angular-cli
                yarn storybook --smoke-test --quiet
-          
+                
                cd ../ember-cli
                yarn storybook --smoke-test --quiet
-          
+                
                cd ../marko-cli
                yarn storybook --smoke-test --quiet
-          
+                
                cd ../official-storybook
                yarn storybook --smoke-test --quiet
-          
+                
                cd ../mithril-kitchen-sink
                yarn storybook --smoke-test --quiet
-          
+                
                cd ../riot-kitchen-sink
                yarn storybook --smoke-test --quiet
-          
+                
                cd ../preact-kitchen-sink
                yarn storybook --smoke-test --quiet
-          
+                
                cd ../cra-react15
                yarn storybook --smoke-test --quiet
            """.trimIndent()
@ -547,7 +546,7 @@ object Test : BuildType({
                yarn init -y
                yarn add -D jest-teamcity
                cd ..
-                
+
                yarn jest --coverage -w 2 --reporters=${'$'}PWD/temp-jest-teamcity/node_modules/jest-teamcity
            """.trimIndent()
            dockerImage = "node:10"
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@ -1,3 +0,0 @@
-{
-  "deepscan.enable": true
-}
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,152 @@
+## 6.0.26 (October 5, 2020)
+
+### Bug Fixes
+
+- Addon-docs: Fix exotic React components in Source block ([#12638](https://github.com/storybookjs/storybook/pull/12638))
+
+## 6.1.0-alpha.20 (October 5, 2020)
+
+### Bug Fixes
+
+- Addon-docs: Fix exotic React components in Source block ([#12638](https://github.com/storybookjs/storybook/pull/12638))
+- Storyshots: Fix typings of "test"-method ([#12389](https://github.com/storybookjs/storybook/pull/12389))
+- Storyshots: Fix support for test failures in async tests ([#11962](https://github.com/storybookjs/storybook/pull/11962))
+
+### Maintenance
+
+- Storyshots Puppeteer: Fix support for over 1 assertions in async tests ([#12657](https://github.com/storybookjs/storybook/pull/12657))
+
+### Dependency Upgrades
+
+- Marko: Update @marko/webpack and allow Marko 5 peerDepenency ([#12035](https://github.com/storybookjs/storybook/pull/12035))
+
+## 6.0.25 (October 4, 2020)
+
+### Bug Fixes
+
+- CLI: Workaround for react native `sb init` ([#12405](https://github.com/storybookjs/storybook/pull/12405))
+
+## 6.0.24 (October 4, 2020)
+
+Failed NPM publish
+
+## 6.0.23 (October 4, 2020)
+
+Failed NPM publish
+
+## 6.1.0-alpha.19 (October 3, 2020)
+
+### Maintenance
+
+- ArgsTable: Remove the "simple" detection for enum types ([#12587](https://github.com/storybookjs/storybook/pull/12587))
+- Addon-docs: Move summary & detail equality check to createSummaryValue ([#12588](https://github.com/storybookjs/storybook/pull/12588))
+- Essentials: Make controls tab show first ([#12652](https://github.com/storybookjs/storybook/pull/12652))
+- Misc: Clean usage and place in the monorepo of some dependencies ([#12653](https://github.com/storybookjs/storybook/pull/12653))
+
+## 6.1.0-alpha.18 (September 30, 2020)
+
+### Bug Fixes
+
+- Composition: Rename `disabled` parameter => `disable` ([#12603](https://github.com/storybookjs/storybook/pull/12603))
+- UI: Fix page title for non-alpha chars ([#12583](https://github.com/storybookjs/storybook/pull/12583))
+
+### Maintenance
+
+- Fix spelling errors ([#12590](https://github.com/storybookjs/storybook/pull/12590))
+
+## 6.1.0-alpha.17 (September 26, 2020)
+
+### Features
+
+- Addon-docs: Add CSS Shadow Parts to web-component props table ([#10442](https://github.com/storybookjs/storybook/pull/10442))
+
+### Dependency Upgrades
+
+- [Security] Bump bl from 1.2.2 to 1.2.3 ([#12480](https://github.com/storybookjs/storybook/pull/12480))
+- [Security] Bump node-fetch from 2.6.0 to 2.6.1 ([#12448](https://github.com/storybookjs/storybook/pull/12448))
+
+## 6.0.22 (September 26, 2020)
+
+### Bug Fixes
+
+- Addon-docs: Change 2nd argument of transformSource to the storyContext ([#12265](https://github.com/storybookjs/storybook/pull/12265))
+- Angular: Unsubscribe prop subscriptions ([#12514](https://github.com/storybookjs/storybook/pull/12514))
+- React: Fix reactDocgen option when false ([#12492](https://github.com/storybookjs/storybook/pull/12492))
+- CLI: Fix storiesof-to-csf codemod for TypeScript ([#12453](https://github.com/storybookjs/storybook/pull/12453))
+- Addon-docs: Fix missing line-height on TypeSet block ([#12134](https://github.com/storybookjs/storybook/pull/12134))
+- Core: Use the denormed params on the first story for initial options ([#11938](https://github.com/storybookjs/storybook/pull/11938))
+
+### Maintenance
+
+- Build: Disable problematic story in Chromatic ([#12457](https://github.com/storybookjs/storybook/pull/12457))
+
+### Dependency Upgrades
+
+- [Security] Bump node-fetch from 2.6.0 to 2.6.1 ([#12448](https://github.com/storybookjs/storybook/pull/12448))
+
+## 6.1.0-alpha.16 (September 25, 2020)
+
+### Bug Fixes
+
+- Addon-backgrounds: Add docs support and extend grid configuration ([#12368](https://github.com/storybookjs/storybook/pull/12368))
+- Addon-docs: Fix story description to only show when expanded ([#12563](https://github.com/storybookjs/storybook/pull/12563))
+
+### Dependency Upgrades
+
+- Upgrade react-docgen-typescript-plugin to 0.6.0 ([#12577](https://github.com/storybookjs/storybook/pull/12577))
+
+## 6.1.0-alpha.15 (September 24, 2020)
+
+### Features
+
+- Core: Add viewMode to StoryContext ([#12566](https://github.com/storybookjs/storybook/pull/12566))
+- Addon-docs: Add converters between Flow types and storybook types ([#12550](https://github.com/storybookjs/storybook/pull/12550))
+
+### Bug Fixes
+
+- Addon-actions: Fix log flushing when story re-renders ([#12500](https://github.com/storybookjs/storybook/pull/12500))
+- Angular: Unsubscribe prop subscriptions ([#12514](https://github.com/storybookjs/storybook/pull/12514))
+- Addon-docs: Remove leading pipe if using raw value for Flow union ([#12549](https://github.com/storybookjs/storybook/pull/12549))
+
+## 6.1.0-alpha.14 (September 22, 2020)
+
+### Features
+
+- Web Components: Add script tag support ([#12509](https://github.com/storybookjs/storybook/pull/12509))
+
+### Bug Fixes
+
+- React: Fix fast refresh ([#12535](https://github.com/storybookjs/storybook/pull/12535))
+
+### Maintenance
+
+- CLI: Change suggested upgrade command to sb@latest ([#12533](https://github.com/storybookjs/storybook/pull/12533))
+
+## 6.1.0-alpha.13 (September 22, 2020)
+
+Failed NPM publish
+
+## 6.1.0-alpha.12 (September 21, 2020)
+
+### Features
+
+- React: Add react-refresh ([#12470](https://github.com/storybookjs/storybook/pull/12470))
+- Server: Add support for script tags ([#12522](https://github.com/storybookjs/storybook/pull/12522))
+
+### Dependency Upgrades
+
+- Core: Upgrade babel ([#12499](https://github.com/storybookjs/storybook/pull/12499))
+
+## 6.1.0-alpha.11 (September 19, 2020)
+
+### Bug Fixes
+
+- Preact: Keep the story state between rerenders ([#12221](https://github.com/storybookjs/storybook/pull/12221))
+
+### Maintenance
+
+- Addon-controls: Update style of Boolean control ([#12515](https://github.com/storybookjs/storybook/pull/12515))
+
 ## 6.1.0-alpha.10 (September 16, 2020)

 ### Features
@ -287,7 +436,7 @@ Unpublished

 ### Maintenance

- UI:pdate upgrade command in about section ([#11934](https://github.com/storybookjs/storybook/pull/11934))
+- UI: Update upgrade command in about section ([#11934](https://github.com/storybookjs/storybook/pull/11934))
 - Build: Remove documentation scripts and fix README ([#12015](https://github.com/storybookjs/storybook/pull/12015))

 ### Dependency Upgrades
@ -494,7 +643,7 @@ Failed NPM publish
 ### Bug Fixes

 - Addon-docs: Fix docs render layout to always be 'fullscreen' ([#11699](https://github.com/storybookjs/storybook/pull/11699))
- UI: Fix release notes on prduction builds ([#11700](https://github.com/storybookjs/storybook/pull/11700))
+- UI: Fix release notes on production builds ([#11700](https://github.com/storybookjs/storybook/pull/11700))
 - Addon-docs: Apply list styles over reset ([#11281](https://github.com/storybookjs/storybook/pull/11281))

 ### Maintenance
@ -1656,7 +1805,7 @@ Failed publish
 - Server: Simplify server addons ([#9931](https://github.com/storybookjs/storybook/pull/9931))
 - Core: FIX error of load order when using configure in preview|config.js ([#10159](https://github.com/storybookjs/storybook/pull/10159))
 - Build: Experiment to make CircleCI tests a faster and more stable ([#9969](https://github.com/storybookjs/storybook/pull/9969))
- Vue: Fix webpack config when excute 'yarn workspace vue-example dev' ([#9704](https://github.com/storybookjs/storybook/pull/9704))
+- Vue: Fix webpack config when execute 'yarn workspace vue-example dev' ([#9704](https://github.com/storybookjs/storybook/pull/9704))
 - Core: Re-enable failing args tests ([#10126](https://github.com/storybookjs/storybook/pull/10126))
 - Build: Add script & parallelization for running chromatic on examples ([#10125](https://github.com/storybookjs/storybook/pull/10125))

@ -1736,7 +1885,7 @@ NOTE: `6.0.0-alpha.24` broken due to bad merge. Sorry!

 ### Maintenance

- Buidld: Setup TeamCity Cloud ([#9875](https://github.com/storybookjs/storybook/pull/9875))
+- Build: Setup TeamCity Cloud ([#9875](https://github.com/storybookjs/storybook/pull/9875))
 - Tech/improvements ([#10096](https://github.com/storybookjs/storybook/pull/10096))
 - Core: Move event handlers into module init ([#10085](https://github.com/storybookjs/storybook/pull/10085))

@ -2295,7 +2444,7 @@ Storybook 5.3 is here!

 ## 5.3.0-rc.6 (December 31, 2019)

-This is significant change to `main.js` aka tri-config, dramatically simplifying how addons and presets are registered. See the maintenannce PR for details.
+This is significant change to `main.js` aka tri-config, dramatically simplifying how addons and presets are registered. See the maintenance PR for details.

 ### Maintenance

@ -4545,7 +4694,7 @@ Publish failed
 ### Bug Fixes

 - UI: Fix initial bottom panel size ([#6822](https://github.com/storybookjs/storybook/pull/6822))
- UI: Fix syntaxthighlighter themes ([#6814](https://github.com/storybookjs/storybook/pull/6814))
+- UI: Fix syntaxhighlighter themes ([#6814](https://github.com/storybookjs/storybook/pull/6814))
 - Addon-knobs: Fix Boolean knob (#6366) ([#6830](https://github.com/storybookjs/storybook/pull/6830))
 - Theming: Change lib/theming so it no longer depends on react-inspector ([#6818](https://github.com/storybookjs/storybook/pull/6818))
 - Core: Handle loading `.storybook/babel.config.js` (#6633) ([#6634](https://github.com/storybookjs/storybook/pull/6634))
@ -5002,7 +5151,7 @@ NPM publish failed

 - Addon-centered: Fix horizontal scrolling overflow ([#6361](https://github.com/storybookjs/storybook/pull/6361))
 - Angular: Support OnPush change detection for class-specified components ([#6360](https://github.com/storybookjs/storybook/pull/6360))
- Addon-storysource: Reuase clientApi when possible ([#6154](https://github.com/storybookjs/storybook/pull/6154))
+- Addon-storysource: Reuse clientApi when possible ([#6154](https://github.com/storybookjs/storybook/pull/6154))

 ### Bug Fixes

@ -5139,9 +5288,9 @@ Bump version number (same as 5.0.4, but need to make this `latest` again!)

 - UI: Fix tooltip event bindings, logger import ([#6238](https://github.com/storybookjs/storybook/pull/6238))
 - CLI: Fix stories regexp in config.js ([#6180](https://github.com/storybookjs/storybook/pull/6180))
- Accessibilty: Add missing button titles ([#6124](https://github.com/storybookjs/storybook/pull/6124))
+- Accessibility: Add missing button titles ([#6124](https://github.com/storybookjs/storybook/pull/6124))
 - React: Fix forked CRA support on Windows ([#6236](https://github.com/storybookjs/storybook/pull/6236))
- Addon-knkobs: Fix color type button z-index ([#6203](https://github.com/storybookjs/storybook/pull/6203))
+- Addon-knobs: Fix color type button z-index ([#6203](https://github.com/storybookjs/storybook/pull/6203))
 - Angular: Fix typo in demo example ([#6193](https://github.com/storybookjs/storybook/pull/6193))
 - Addon-Info: Restore fonts and color styling ([#6186](https://github.com/storybookjs/storybook/pull/6186))
 - Addon-knobs: Fix ObjectType knob react warning ([#6159](https://github.com/storybookjs/storybook/pull/6159))
@ -5195,7 +5344,7 @@ NPM publish failed

 ### Bug Fixes

- Addon-knkobs: Fix color type button z-index ([#6203](https://github.com/storybookjs/storybook/pull/6203))
+- Addon-knobs: Fix color type button z-index ([#6203](https://github.com/storybookjs/storybook/pull/6203))
 - Angular: Fix typo in demo example ([#6193](https://github.com/storybookjs/storybook/pull/6193))
 - UI: Fix problem with selectedPanel reset ([#6149](https://github.com/storybookjs/storybook/pull/6149))

@ -5243,8 +5392,8 @@ NPM publish failed

 ### Bug Fixes

- Accessibilty: Add aria label to search box ([#6131](https://github.com/storybookjs/storybook/pull/6131))
- Accessibilty: Add missing button titles ([#6124](https://github.com/storybookjs/storybook/pull/6124))
+- Accessibility: Add aria label to search box ([#6131](https://github.com/storybookjs/storybook/pull/6131))
+- Accessibility: Add missing button titles ([#6124](https://github.com/storybookjs/storybook/pull/6124))
 - Addon-cssresources: Fix `STORY_RENDERED` CSS reset ([#6050](https://github.com/storybookjs/storybook/pull/6050))

 ### Maintenance
@ -5920,7 +6069,7 @@ Bad release
 ### Bug Fixes

 - Addon-a11y: RE-ADD deprecated 'configureA11Y' for backwards compatibility ([#5302](https://github.com/storybookjs/storybook/pull/5302))
- UI: FIX navgition issue for `file://` URLs ([#5295](https://github.com/storybookjs/storybook/pull/5295))
+- UI: FIX navigation issue for `file://` URLs ([#5295](https://github.com/storybookjs/storybook/pull/5295))
 - UI: FIX merge mutation ([#5300](https://github.com/storybookjs/storybook/pull/5300))
 - Core: FIX issue where webpack process would hang when manager build failed ([#5290](https://github.com/storybookjs/storybook/pull/5290))

@ -6358,7 +6507,7 @@ Fixes 4.0.9
 ### Features

 - UI: Accessible success/fail colors ([#4843](https://github.com/storybookjs/storybook/pull/4843))
- React-native: add option to set keyboarVerticalOffset ([#4862](https://github.com/storybookjs/storybook/pull/4862))
+- React-native: add option to set keyboardVerticalOffset ([#4862](https://github.com/storybookjs/storybook/pull/4862))
 - Addon-CSSResources: new adddon to dynamically add/remove css ([#4622](https://github.com/storybookjs/storybook/pull/4622))

 ### Bug Fixes
@ -7156,7 +7305,7 @@ NOTE: `3.4.9` publish failed
 #### Features

 - addon-info: Use parameters for info addon [#3697](https://github.com/storybookjs/storybook/pull/3697)
- addon-backgounds: Use parameters for backgrounds addon [#3676](https://github.com/storybookjs/storybook/pull/3676)
+- addon-backgrounds: Use parameters for backgrounds addon [#3676](https://github.com/storybookjs/storybook/pull/3676)
 - storyshots: add renderWithOptions to @addons/storyshots [#3479](https://github.com/storybookjs/storybook/pull/3479)
 - addon-knobs: Make withKnobs accept story parameters [#3675](https://github.com/storybookjs/storybook/pull/3675)

@ -7492,7 +7641,7 @@ Broken release (@storybook/core-events had not been published publicly)
 - Upgraded `gatsby` in `/docs` from "1.9.252" to "1.9.253" [#3478](https://github.com/storybookjs/storybook/pull/3478)
 - Upgrade redux to 4.0.0 [#3470](https://github.com/storybookjs/storybook/pull/3470)
 - Upgrade sass-loader to 7.0.1 & stop bringing node-sass bin to each user [#3467](https://github.com/storybookjs/storybook/pull/3467)
- Upgrate ts-node to 6.0.0 [#3460](https://github.com/storybookjs/storybook/pull/3460)
+- Upgrade ts-node to 6.0.0 [#3460](https://github.com/storybookjs/storybook/pull/3460)
 - Upgrade to json5@1.0.1 [#3466](https://github.com/storybookjs/storybook/pull/3466)
 - Update webpack-hot-middleware to fix HMR [#3463](https://github.com/storybookjs/storybook/pull/3463)

@ -7952,7 +8101,7 @@ Read on for more improvements, fixes. In addition, there are hundreds of depende
 - Fix css warning in angular-cli example [#2789](https://github.com/storybookjs/storybook/pull/2789)
 - Move more things to core [#2788](https://github.com/storybookjs/storybook/pull/2788)
 - Change ng stories dir [#2672](https://github.com/storybookjs/storybook/pull/2672)
- Only update CLI snapsots on postpublish script, skip smoke tests [#2671](https://github.com/storybookjs/storybook/pull/2671)
+- Only update CLI snapshots on postpublish script, skip smoke tests [#2671](https://github.com/storybookjs/storybook/pull/2671)
 - Fix the timezone for example dates [#2654](https://github.com/storybookjs/storybook/pull/2654)
 - Update prereq yarn install level [#2638](https://github.com/storybookjs/storybook/pull/2638)
 - Separate stories in angular-cli example [#2592](https://github.com/storybookjs/storybook/pull/2592)
@ -8544,7 +8693,7 @@ Fix publishing options to use exact versions for cross-dependencies per this cha

 - Addon-storysource: story source in addon pane [#2885](https://github.com/storybookjs/storybook/pull/2885)
 - Addon Storysource improvements [#3040](https://github.com/storybookjs/storybook/pull/3040)
- Add moduleMetdata decorator for supplying common Angular metadata [#2959](https://github.com/storybookjs/storybook/pull/2959)
+- Add moduleMetadata decorator for supplying common Angular metadata [#2959](https://github.com/storybookjs/storybook/pull/2959)
 - `Addon Storysource` Add auto scrolling to the selected story [#3025](https://github.com/storybookjs/storybook/pull/3025)
 - Enable groupId option for knobs to be organized into sub panels. [#2661](https://github.com/storybookjs/storybook/pull/2661)
 - Added beforeScreenshot config option to addons/storyshots, to allow testing of components with mounting animations [#2972](https://github.com/storybookjs/storybook/pull/2972)
@ -9579,7 +9728,7 @@ In addition to the changes listed here, also contains fixes from [3.3.5](#335) a
 4 PRs
 </summary>

- Only update CLI snapsots on postpublish script, skip smoke tests [#2671](https://github.com/storybookjs/storybook/pull/2671)
+- Only update CLI snapshots on postpublish script, skip smoke tests [#2671](https://github.com/storybookjs/storybook/pull/2671)
 - Fix the timezone for example dates [#2654](https://github.com/storybookjs/storybook/pull/2654)
 - Update prereq yarn install level [#2638](https://github.com/storybookjs/storybook/pull/2638)
 - Separate stories in angular-cli example [#2592](https://github.com/storybookjs/storybook/pull/2592)
@ -11281,7 +11430,7 @@ Plus many more features, documentation improvements, and bugfixes below!
 #### Bug Fixes

 - Exit storybook build non-zero on stats errors (e.g. errors in the transpilation pipeline) [#1372](https://github.com/storybookjs/storybook/pull/1372)
- Fixed regression: CSS entries were not picked up for storybook pages (e.g. when using exract-text-webpack-plugin) [#1363](https://github.com/storybookjs/storybook/pull/1363)
+- Fixed regression: CSS entries were not picked up for storybook pages (e.g. when using extract-text-webpack-plugin) [#1363](https://github.com/storybookjs/storybook/pull/1363)

 #### Documentation

@ -11395,7 +11544,7 @@ Minor features including a new "events" addon, as well as the usual bugfixes, cl
 #### Dependency Upgrades

 - Update babel docgen plugin to generate docs for React.createClass and createReactClass [#1206](https://github.com/storybookjs/storybook/pull/1206)
- Update `marksy` dependecy due broken 1.1.0 version [#1204](https://github.com/storybookjs/storybook/pull/1204)
+- Update `marksy` dependency due broken 1.1.0 version [#1204](https://github.com/storybookjs/storybook/pull/1204)

 ## 3.0.1

@ -11556,7 +11705,7 @@ Allow customConfig to override devtool. [PR668](https://github.com/storybookjs/s

 03-January-2017

-Fixes issue [#601](https://github.com/storybookjs/storybook/issues/601) where it throws error when introduce a propType with a hypen. Add a [fix](https://github.com/kadirahq/babel-plugin-react-docgen/pull/23) to [`babel-plugin-react-docgen`](https://github.com/kadirahq/babel-plugin-react-docgen) to fix this issue.
+Fixes issue [#601](https://github.com/storybookjs/storybook/issues/601) where it throws error when introduce a propType with a hyphen. Add a [fix](https://github.com/kadirahq/babel-plugin-react-docgen/pull/23) to [`babel-plugin-react-docgen`](https://github.com/kadirahq/babel-plugin-react-docgen) to fix this issue.

 This release comes with the updated `babel-plugin-react-docgen`.

@ -11818,8 +11967,8 @@ Add some nice development experiment based on suggestion from Dan Abramov.

 21-September-2016

- Move the babel config loading logic into a seperate file. [PR469](https://github.com/storybookjs/storybook/pull/469)
- Update airbnd eslint rules to the latest.
+- Move the babel config loading logic into a separate file. [PR469](https://github.com/storybookjs/storybook/pull/469)
+- Update airbnb eslint rules to the latest.

 ## v2.15.1

--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -197,7 +197,7 @@ Our script leaves the local registry running, for **as long as you keep it runni
 If you've made a change to storybook's codebase and would want this change to be reflected in your app:

 - Ensure the storybook packages are transpiled, by either having run `yarn dev` or `yarn bootstrap --core`.
- Go to the terminal where the local regitry is running and press `<Enter>`. This will kick off a new publish.
+- Go to the terminal where the local registry is running and press `<Enter>`. This will kick off a new publish.
 - Run the install procedure again in your local repo, (you may need to clean out node_modules first).
 - Restart your storybook.

@ -303,7 +303,7 @@ If you're working on one or a few packages, for every change that you make, you
 - Run `yarn build <package-name>` to build that package specifically. \
  For the package name, use its short version. Example: for `@storybook/addon-docs`, run `yarn build addon-docs`.
 - Run `yarn build --all` to build everything.
- Add `--watch` to run automatically in watch more if you are either building a selection of packages by name or building all.
+- Add `--watch` to run automatically in watch mode if you are either building a selection of packages by name or building all.
  Example: `yarn build core addon-docs --watch` or `yarn build --all --watch`.

 ### Working with the kitchen sink apps
--- a/MIGRATION.md
+++ b/MIGRATION.md
@ -3,6 +3,8 @@
 - [From version 6.0.x to 6.1.0](#from-version-60x-to-610)
  - [6.1 deprecations](#61-deprecations)
    - [Deprecated onBeforeRender](#deprecated-onbeforerender)
+    - [Deprecated grid parameter](#deprecated-grid-parameter)
+    - [Deprecated package-composition disabled parameter](#deprecated-package-composition-disabled-parameter)
 - [From version 5.3.x to 6.0.x](#from-version-53x-to-60x)
  - [Hoisted CSF annotations](#hoisted-csf-annotations)
  - [Zero config typescript](#zero-config-typescript)
@ -142,6 +144,43 @@ The `@storybook/addon-docs` previously accepted a `jsx` option called `onBeforeR

 We've renamed it `transformSource` and also allowed it to receive the `StoryContext` in case source rendering requires additional information.

+#### Deprecated grid parameter
+
+Previously when using `@storybook/addon-backgrounds` if you wanted to customize the grid, you would define a parameter like this:
+
+```js
+export const Basic = () => <Button />
+Basic.parameters: {
+  grid: {
+    cellSize: 10
+  }
+},
+```
+
+As grid is not an addon, but rather backgrounds is, the grid configuration was moved to be inside `backgrounds` parameter instead. Also, there are new properties that can be used to further customize the grid. Here's an example with the default values:
+
+```js
+export const Basic = () => <Button />
+Basic.parameters: {
+  backgrounds: {
+    grid: {
+      disable: false,
+      cellSize: 20,
+      opacity: 0.5,
+      cellAmount: 5,
+      offsetX: 16, // default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
+      offsetY: 16, // default is 0 if story has 'fullscreen' layout, 16 if layout is 'padded'
+    }
+  }
+},
+```
+
+#### Deprecated package-composition disabled parameter
+
+Like [Deprecated disabled parameter](#deprecated-disabled-parameter). The `disabled` parameter has been deprecated, please use `disable` instead.
+
+For more information, see the [the related documentation](https://storybook.js.org/docs/react/workflows/package-composition#configuring).
+
 ## From version 5.3.x to 6.0.x

 ### Hoisted CSF annotations
@ -654,7 +693,7 @@ StoryOne.story = {

 #### Removed action decorator APIs

-In 6.0 we removed the actions addon decorate API. Actions handles can be configured globaly, for a collection of stories or per story via parameters. The ability to manipulate the data arguments of an event is only relevant in a few frameworks and is not a common enough usecase to be worth the complexity of supporting.
+In 6.0 we removed the actions addon decorate API. Actions handles can be configured globally, for a collection of stories or per story via parameters. The ability to manipulate the data arguments of an event is only relevant in a few frameworks and is not a common enough usecase to be worth the complexity of supporting.

 #### Removed withA11y decorator

@ -1016,7 +1055,7 @@ addParameters({

 ### Grid toolbar-feature

-The grid feature in the toolbar has been relocated to [addon-background](https://github.com/storybookjs/storybook/tree/next/addons/backgrounds), follow the setup intructions on that addon to get the feature again.
+The grid feature in the toolbar has been relocated to [addon-background](https://github.com/storybookjs/storybook/tree/next/addons/backgrounds), follow the setup instructions on that addon to get the feature again.

 ### Docs mode docgen

@ -1173,7 +1212,7 @@ sortedModules.forEach((key) => {

 ### Webpack config simplification

-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 simplified 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`:

@ -1204,7 +1243,7 @@ In 5.0, we now provide recommended defaults:
 }
 ```

-This means if you use the characters { `|`, `/`, `.` } in your story kinds it will triggger the story hierarchy to appear. For example `storiesOf('UI|Widgets/Basics/Button')` will create a story root called `UI` containing a `Widgets/Basics` group, containing a `Button` component.
+This means if you use the characters { `|`, `/`, `.` } in your story kinds it will trigger the story hierarchy to appear. For example `storiesOf('UI|Widgets/Basics/Button')` will create a story root called `UI` containing a `Widgets/Basics` group, containing a `Button` component.

 If you wish to opt-out of this new behavior and restore the flat UI, set them back to `null` in your storybook config, or remove { `|`, `/`, `.` } from your story kinds:

@ -1423,7 +1462,7 @@ import centered from '@storybook/addon-centered/vue';

 Storybook's keyboard shortcuts are updated in 5.0, but they are configurable via the menu so if you want to set them back you can:

-| Shorctut               | Old         | New   |
+| Shortcut               | Old         | New   |
 | ---------------------- | ----------- | ----- |
 | Toggle sidebar         | cmd-shift-X | S     |
 | Toggle addons panel    | cmd-shift-Z | A     |
--- a/mocks/inject-decorator.ts.txt
+++ b/mocks/inject-decorator.ts.txt
@ -4,7 +4,7 @@ import { storiesOf, moduleMetadata } from '@storybook/angular';

@Component({
  selector: 'storybook-comp-with-store',
-  template: '<div>{{this.getSotreState()}}</div>',
+  template: '<div>{{this.getStoreState()}}</div>',
 })
 class WithStoreComponent {
  private store: Store<any>;
@ -13,7 +13,7 @@ class WithStoreComponent {
    this.store = store;
  }

-  getSotreState(): string {
+  getStoreState(): string {
    return this.store === undefined ? 'Store is NOT injected' : 'Store is injected';
  }
 }
--- a/mocks/inject-decorator.ts.ugly-comments-stories.txt
+++ b/mocks/inject-decorator.ts.ugly-comments-stories.txt
@ -5,7 +5,7 @@ import React from 'react';

@Component({
  selector: 'storybook-comp-with-store',
-  template: '<div>{{this.getSotreState()}}</div>',
+  template: '<div>{{this.getStoreState()}}</div>',
 })
 class WithStoreComponent {
  private store: Store<any>;
@ -14,7 +14,7 @@ class WithStoreComponent {
    this.store = store;
  }

-  getSotreState(): string {
+  getStoreState(): string {
    return this.store === undefined ? 'Store is NOT injected' : 'Store is injected';
  }
 }
--- a/addons/a11y/package.json
+++ b/addons/a11y/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-a11y",
-  "version": "6.1.0-alpha.10",
+  "version": "6.1.0-alpha.20",
  "description": "a11y addon for storybook",
  "keywords": [
    "a11y",
@ -27,20 +27,20 @@
    "README.md",
    "*.js",
    "*.d.ts",
-    "ts3.5/**/*"
+    "ts3.4/**/*"
  ],
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.1.0-alpha.10",
-    "@storybook/api": "6.1.0-alpha.10",
-    "@storybook/channels": "6.1.0-alpha.10",
-    "@storybook/client-api": "6.1.0-alpha.10",
-    "@storybook/client-logger": "6.1.0-alpha.10",
-    "@storybook/components": "6.1.0-alpha.10",
-    "@storybook/core-events": "6.1.0-alpha.10",
-    "@storybook/theming": "6.1.0-alpha.10",
+    "@storybook/addons": "6.1.0-alpha.20",
+    "@storybook/api": "6.1.0-alpha.20",
+    "@storybook/channels": "6.1.0-alpha.20",
+    "@storybook/client-api": "6.1.0-alpha.20",
+    "@storybook/client-logger": "6.1.0-alpha.20",
+    "@storybook/components": "6.1.0-alpha.20",
+    "@storybook/core-events": "6.1.0-alpha.20",
+    "@storybook/theming": "6.1.0-alpha.20",
    "axe-core": "^4.0.1",
    "core-js": "^3.0.1",
    "global": "^4.3.2",
@ -59,11 +59,11 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "57798a108e183d97f94fd4cc396e45e1d4b04d23",
+  "gitHead": "cc1c152e5452d28eabb24330f4ed693cd6782bc1",
  "typesVersions": {
-    "<=3.5": {
+    "<3.8": {
      "*": [
-        "ts3.5/*"
+        "ts3.4/*"
      ]
    }
  }
--- a/addons/a11y/src/a11yHighlight.ts
+++ b/addons/a11y/src/a11yHighlight.ts
@ -3,7 +3,7 @@ import addons from '@storybook/addons';
 import { STORY_CHANGED } from '@storybook/core-events';
 import { EVENTS, HIGHLIGHT_STYLE_ID } from './constants';

-import { higlightStyle } from './highlight';
+import { highlightStyle } from './highlight';

 if (module && module.hot && module.hot.decline) {
  module.hot.decline();
@ -27,7 +27,7 @@ const highlight = (infos: HighlightInfo) => {
    .map(
      (target) =>
        `${target}{ 
-          ${higlightStyle(infos.color)}
+          ${highlightStyle(infos.color)}
         }`
    )
    .join(' ');
--- a/addons/a11y/src/components/Report/HighlightToggle.test.tsx
+++ b/addons/a11y/src/components/Report/HighlightToggle.test.tsx
@ -69,7 +69,7 @@ describe('<HighlightToggle />', () => {
      ${['#root']} | ${['#root']}           | ${false}
      ${['#root']} | ${['#root', '#root1']} | ${true}
    `(
-      'should be triggerd with $expected when highlighted is $highlighted and elementsToHighlight is $elementsToHighlight',
+      'should be triggered with $expected when highlighted is $highlighted and elementsToHighlight is $elementsToHighlight',
      ({ highlighted, elementsToHighlight, expected }) => {
        const { getByRole } = render(
          <A11yContext.Provider
--- a/addons/a11y/src/highlight.ts
+++ b/addons/a11y/src/highlight.ts
@ -1,4 +1,4 @@
-export const higlightStyle = (color: string) => `
+export const highlightStyle = (color: string) => `
  outline: 2px dashed ${color};
  outline-offset: 2px;
  box-shadow: 0 0 0 6px rgba(255,255,255,0.6);
--- a/addons/actions/package.json
+++ b/addons/actions/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-actions",
-  "version": "6.1.0-alpha.10",
+  "version": "6.1.0-alpha.20",
  "description": "Action Logger addon for storybook",
  "keywords": [
    "storybook"
@ -22,18 +22,18 @@
    "README.md",
    "*.js",
    "*.d.ts",
-    "ts3.5/**/*"
+    "ts3.4/**/*"
  ],
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.1.0-alpha.10",
-    "@storybook/api": "6.1.0-alpha.10",
-    "@storybook/client-api": "6.1.0-alpha.10",
-    "@storybook/components": "6.1.0-alpha.10",
-    "@storybook/core-events": "6.1.0-alpha.10",
-    "@storybook/theming": "6.1.0-alpha.10",
+    "@storybook/addons": "6.1.0-alpha.20",
+    "@storybook/api": "6.1.0-alpha.20",
+    "@storybook/client-api": "6.1.0-alpha.20",
+    "@storybook/components": "6.1.0-alpha.20",
+    "@storybook/core-events": "6.1.0-alpha.20",
+    "@storybook/theming": "6.1.0-alpha.20",
    "core-js": "^3.0.1",
    "fast-deep-equal": "^3.1.1",
    "global": "^4.3.2",
@ -56,11 +56,11 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "57798a108e183d97f94fd4cc396e45e1d4b04d23",
+  "gitHead": "cc1c152e5452d28eabb24330f4ed693cd6782bc1",
  "typesVersions": {
-    "<=3.5": {
+    "<3.8": {
      "*": [
-        "ts3.5/*"
+        "ts3.4/*"
      ]
    }
  }
--- a/addons/actions/src/containers/ActionLogger/index.tsx
+++ b/addons/actions/src/containers/ActionLogger/index.tsx
@ -2,7 +2,7 @@ import React, { Component } from 'react';
 import deepEqual from 'fast-deep-equal';

 import { API } from '@storybook/api';
-import { STORY_RENDERED } from '@storybook/core-events';
+import { STORY_CHANGED } from '@storybook/core-events';

 import { ActionLogger as ActionLoggerComponent } from '../../components/ActionLogger';
 import { EVENT_ID } from '../..';
@ -39,14 +39,14 @@ export default class ActionLogger extends Component<ActionLoggerProps, ActionLog
    const { api } = this.props;

    api.on(EVENT_ID, this.addAction);
-    api.on(STORY_RENDERED, this.handleStoryChange);
+    api.on(STORY_CHANGED, this.handleStoryChange);
  }

  componentWillUnmount() {
    this.mounted = false;
    const { api } = this.props;

-    api.off(STORY_RENDERED, this.handleStoryChange);
+    api.off(STORY_CHANGED, this.handleStoryChange);
    api.off(EVENT_ID, this.addAction);
  }

--- a/addons/backgrounds/package.json
+++ b/addons/backgrounds/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-backgrounds",
-  "version": "6.1.0-alpha.10",
+  "version": "6.1.0-alpha.20",
  "description": "A storybook addon to show different backgrounds for your preview",
  "keywords": [
    "addon",
@ -26,23 +26,26 @@
    "README.md",
    "*.js",
    "*.d.ts",
-    "ts3.5/**/*"
+    "ts3.4/**/*"
  ],
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.1.0-alpha.10",
-    "@storybook/api": "6.1.0-alpha.10",
-    "@storybook/client-logger": "6.1.0-alpha.10",
-    "@storybook/components": "6.1.0-alpha.10",
-    "@storybook/core-events": "6.1.0-alpha.10",
-    "@storybook/theming": "6.1.0-alpha.10",
+    "@storybook/addons": "6.1.0-alpha.20",
+    "@storybook/api": "6.1.0-alpha.20",
+    "@storybook/client-logger": "6.1.0-alpha.20",
+    "@storybook/components": "6.1.0-alpha.20",
+    "@storybook/core-events": "6.1.0-alpha.20",
+    "@storybook/theming": "6.1.0-alpha.20",
    "core-js": "^3.0.1",
+    "global": "^4.3.2",
    "memoizerific": "^1.11.3",
    "react": "^16.8.3",
    "react-dom": "^16.8.3",
-    "regenerator-runtime": "^0.13.3"
+    "regenerator-runtime": "^0.13.3",
+    "ts-dedent": "^1.1.1",
+    "util-deprecate": "^1.0.2"
  },
  "devDependencies": {
    "@types/webpack-env": "^1.15.2"
@ -50,11 +53,11 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "57798a108e183d97f94fd4cc396e45e1d4b04d23",
+  "gitHead": "cc1c152e5452d28eabb24330f4ed693cd6782bc1",
  "typesVersions": {
-    "<=3.5": {
+    "<3.8": {
      "*": [
-        "ts3.5/*"
+        "ts3.4/*"
      ]
    }
  }
--- a/addons/backgrounds/src/containers/BackgroundSelector.tsx
+++ b/addons/backgrounds/src/containers/BackgroundSelector.tsx
@ -1,51 +1,14 @@
-import React, { Component, Fragment, ReactElement } from 'react';
+import React, { FunctionComponent, Fragment, useCallback, useMemo, memo } from 'react';
 import memoize from 'memoizerific';

-import { Combo, Consumer, API } from '@storybook/api';
-import { Global, Theme } from '@storybook/theming';
+import { useParameter, useGlobals } from '@storybook/api';
 import { logger } from '@storybook/client-logger';
-
 import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';

-import { PARAM_KEY as BACKGROUNDS_PARAM_KEY, EVENTS } from '../constants';
+import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
 import { ColorIcon } from '../components/ColorIcon';
-
-interface GlobalState {
-  name: string | undefined;
-  selected: string | undefined;
-}
-
-interface Props {
-  api: API;
-}
-
-interface BackgroundSelectorItem {
-  id: string;
-  title: string;
-  onClick: () => void;
-  value: string;
-  right?: ReactElement;
-}
-
-interface Background {
-  name: string;
-  value: string;
-}
-
-interface BackgroundsParameter {
-  default?: string;
-  disable?: boolean;
-  values: Background[];
-}
-
-interface BackgroundsConfig {
-  backgrounds: Background[] | null;
-  selectedBackground: string | null;
-  defaultBackgroundName: string | null;
-  disable: boolean;
-}
-
-const iframeId = 'storybook-preview-iframe';
+import { BackgroundSelectorItem, Background, BackgroundsParameter, GlobalState } from '../types';
+import { getBackgroundColorByName } from '../helpers';

 const createBackgroundSelectorItem = memoize(1000)(
  (
@ -53,7 +16,8 @@ const createBackgroundSelectorItem = memoize(1000)(
    name: string,
    value: string,
    hasSwatch: boolean,
-    change: (arg: { selected: string; name: string }) => void
+    change: (arg: { selected: string; name: string }) => void,
+    active: boolean
  ): BackgroundSelectorItem => ({
    id: id || name,
    title: name,
@ -62,6 +26,7 @@ const createBackgroundSelectorItem = memoize(1000)(
    },
    value,
    right: hasSwatch ? <ColorIcon background={value} /> : undefined,
+    active,
  })
 );

@ -72,12 +37,26 @@ const getDisplayedItems = memoize(10)(
    change: (arg: { selected: string; name: string }) => void
  ) => {
    const backgroundSelectorItems = backgrounds.map(({ name, value }) =>
-      createBackgroundSelectorItem(null, name, value, true, change)
+      createBackgroundSelectorItem(
+        null,
+        name,
+        value,
+        true,
+        change,
+        value === selectedBackgroundColor
+      )
    );

    if (selectedBackgroundColor !== 'transparent') {
      return [
-        createBackgroundSelectorItem('reset', 'Clear background', 'transparent', null, change),
+        createBackgroundSelectorItem(
+          'reset',
+          'Clear background',
+          'transparent',
+          null,
+          change,
+          false
+        ),
        ...backgroundSelectorItems,
      ];
    }
@ -86,131 +65,78 @@ const getDisplayedItems = memoize(10)(
  }
 );

-const getSelectedBackgroundColor = (
-  backgrounds: Background[] = [],
-  currentSelectedValue: string,
-  defaultName: string
-): string => {
-  if (currentSelectedValue === 'transparent') {
-    return 'transparent';
-  }
-
-  if (backgrounds.find((background) => background.value === currentSelectedValue)) {
-    return currentSelectedValue;
-  }
-
-  const defaultBackground = backgrounds.find((background) => background.name === defaultName);
-  if (defaultBackground) {
-    return defaultBackground.value;
-  }
-
-  if (defaultName) {
-    const availableColors = backgrounds.map((background) => background.name).join(', ');
-    logger.warn(
-      `Backgrounds Addon: could not find the default color "${defaultName}".
-      These are the available colors for your story based on your configuration: ${availableColors}`
-    );
-  }
-
-  return 'transparent';
+const DEFAULT_BACKGROUNDS_CONFIG: BackgroundsParameter = {
+  default: null,
+  disable: true,
+  values: [],
 };

-const getBackgroundsConfig = ({ api, state }: Combo): BackgroundsConfig => {
-  const backgroundsParameter = api.getCurrentParameter<BackgroundsParameter>(BACKGROUNDS_PARAM_KEY);
-  const selectedBackgroundValue = state.addons[BACKGROUNDS_PARAM_KEY] || null;
+export const BackgroundSelector: FunctionComponent = memo(() => {
+  const backgroundsConfig = useParameter<BackgroundsParameter>(
+    BACKGROUNDS_PARAM_KEY,
+    DEFAULT_BACKGROUNDS_CONFIG
+  );

-  if (Array.isArray(backgroundsParameter)) {
+  const [globals, updateGlobals] = useGlobals();
+
+  const globalsBackgroundColor = globals[BACKGROUNDS_PARAM_KEY]?.value;
+
+  const selectedBackgroundColor = useMemo(() => {
+    return getBackgroundColorByName(
+      globalsBackgroundColor,
+      backgroundsConfig.values,
+      backgroundsConfig.default
+    );
+  }, [backgroundsConfig, globalsBackgroundColor]);
+
+  if (Array.isArray(backgroundsConfig)) {
    logger.warn(
      'Addon Backgrounds api has changed in Storybook 6.0. Please refer to the migration guide: https://github.com/storybookjs/storybook/blob/next/MIGRATION.md'
    );
  }

-  const isBackgroundsEmpty = !backgroundsParameter?.values?.length;
-  if (backgroundsParameter?.disable || isBackgroundsEmpty) {
-    // other null properties are necessary to keep the same return shape for Consumer memoization
-    return {
-      disable: true,
-      backgrounds: null,
-      selectedBackground: null,
-      defaultBackgroundName: null,
-    };
+  const onBackgroundChange = useCallback(
+    (value: string) => {
+      updateGlobals({ [BACKGROUNDS_PARAM_KEY]: { ...globals[BACKGROUNDS_PARAM_KEY], value } });
+    },
+    [backgroundsConfig, globals, updateGlobals]
+  );
+
+  if (backgroundsConfig.disable) {
+    return null;
  }

-  return {
-    disable: false,
-    backgrounds: backgroundsParameter?.values,
-    selectedBackground: selectedBackgroundValue,
-    defaultBackgroundName: backgroundsParameter?.default,
-  };
-};
-
-export class BackgroundSelector extends Component<Props> {
-  change = ({ selected, name }: GlobalState) => {
-    const { api } = this.props;
-    if (typeof selected === 'string') {
-      api.setAddonState<string>(BACKGROUNDS_PARAM_KEY, selected);
-    }
-    api.emit(EVENTS.UPDATE, { selected, name });
-  };
-
-  render() {
-    return (
-      <Consumer filter={getBackgroundsConfig}>
-        {({
-          disable,
-          backgrounds,
-          selectedBackground,
-          defaultBackgroundName,
-        }: BackgroundsConfig) => {
-          if (disable) {
-            return null;
-          }
-
-          const selectedBackgroundColor = getSelectedBackgroundColor(
-            backgrounds,
-            selectedBackground,
-            defaultBackgroundName
-          );
-
+  return (
+    <Fragment>
+      <WithTooltip
+        placement="top"
+        trigger="click"
+        closeOnClick
+        tooltip={({ onHide }) => {
          return (
-            <Fragment>
-              {selectedBackgroundColor ? (
-                <Global
-                  styles={(theme: Theme) => ({
-                    [`#${iframeId}`]: {
-                      background:
-                        selectedBackgroundColor === 'transparent'
-                          ? theme.background.content
-                          : selectedBackgroundColor,
-                    },
-                  })}
-                />
-              ) : null}
-              <WithTooltip
-                placement="top"
-                trigger="click"
-                closeOnClick
-                tooltip={({ onHide }) => (
-                  <TooltipLinkList
-                    links={getDisplayedItems(backgrounds, selectedBackgroundColor, (i) => {
-                      this.change(i);
-                      onHide();
-                    })}
-                  />
-                )}
-              >
-                <IconButton
-                  key="background"
-                  title="Change the background of the preview"
-                  active={selectedBackgroundColor !== 'transparent'}
-                >
-                  <Icons icon="photo" />
-                </IconButton>
-              </WithTooltip>
-            </Fragment>
+            <TooltipLinkList
+              links={getDisplayedItems(
+                backgroundsConfig.values,
+                selectedBackgroundColor,
+                ({ selected }: GlobalState) => {
+                  if (selectedBackgroundColor !== selected) {
+                    onBackgroundChange(selected);
+                  }
+                  onHide();
+                }
+              )}
+            />
          );
        }}
-      </Consumer>
-    );
-  }
-}
+      >
+        <IconButton
+          key="background"
+          title="Change the background of the preview"
+          active={selectedBackgroundColor !== 'transparent'}
+        >
+          <Icons icon="photo" />
+        </IconButton>
+      </WithTooltip>
+    </Fragment>
+  );
+});
--- a/addons/backgrounds/src/containers/GridSelector.tsx
+++ b/addons/backgrounds/src/containers/GridSelector.tsx
@ -1,51 +1,35 @@
 import React, { FunctionComponent, memo } from 'react';

-import { useAddonState, useParameter } from '@storybook/api';
-import { Global } from '@storybook/theming';
+import { useGlobals, useParameter } from '@storybook/api';
 import { Icons, IconButton } from '@storybook/components';

-import { ADDON_ID, GRID_PARAM_KEY } from '../constants';
-
-export interface BackgroundGridParameters {
-  cellSize: number;
-}
-
-const iframeId = 'storybook-preview-iframe';
+import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';

 export const GridSelector: FunctionComponent = memo(() => {
-  const [state, setState] = useAddonState<boolean>(`${ADDON_ID}/grid`);
-  const { cellSize } = useParameter<BackgroundGridParameters>(GRID_PARAM_KEY, { cellSize: 20 });
+  const [globals, updateGlobals] = useGlobals();
+
+  const { grid } = useParameter(BACKGROUNDS_PARAM_KEY, {
+    grid: { disable: false },
+  });
+
+  if (grid.disable) {
+    return null;
+  }
+
+  const isActive = globals[BACKGROUNDS_PARAM_KEY]?.grid || false;

  return (
    <IconButton
      key="background"
-      active={state}
-      title="Change the background of the preview"
-      onClick={() => setState(!state)}
+      active={isActive}
+      title="Apply a grid to the preview"
+      onClick={() =>
+        updateGlobals({
+          [BACKGROUNDS_PARAM_KEY]: { ...globals[BACKGROUNDS_PARAM_KEY], grid: !isActive },
+        })
+      }
    >
      <Icons icon="grid" />
-      {state ? (
-        <Global
-          styles={{
-            [`#${iframeId}`]: {
-              backgroundSize: [
-                `${cellSize * 5}px ${cellSize * 5}px`,
-                `${cellSize * 5}px ${cellSize * 5}px`,
-                `${cellSize}px ${cellSize}px`,
-                `${cellSize}px ${cellSize}px`,
-              ].join(', '),
-              backgroundPosition: '-1px -1px, -1px -1px, -1px -1px, -1px -1px',
-              backgroundBlendMode: 'difference',
-              backgroundImage: [
-                'linear-gradient(rgba(130, 130, 130, 0.5) 1px, transparent 1px)',
-                'linear-gradient(90deg, rgba(130, 130, 130, 0.5) 1px, transparent 1px)',
-                'linear-gradient(rgba(130, 130, 130, 0.25) 1px, transparent 1px)',
-                'linear-gradient(90deg, rgba(130, 130, 130, 0.25) 1px, transparent 1px)',
-              ].join(', '),
-            },
-          }}
-        />
-      ) : null}
    </IconButton>
  );
 });
--- a/addons/backgrounds/src/decorators/index.ts
+++ b/addons/backgrounds/src/decorators/index.ts
@ -0,0 +1,2 @@
+export * from './withBackground';
+export * from './withGrid';
--- a/addons/backgrounds/src/decorators/withBackground.ts
+++ b/addons/backgrounds/src/decorators/withBackground.ts
@ -0,0 +1,59 @@
+import { StoryFn as StoryFunction, StoryContext, useMemo, useEffect } from '@storybook/addons';
+
+import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
+import { clearStyles, addBackgroundStyle, getBackgroundColorByName } from '../helpers';
+
+export const withBackground = (StoryFn: StoryFunction, context: StoryContext) => {
+  const { globals, parameters } = context;
+  const globalsBackgroundColor = globals[BACKGROUNDS_PARAM_KEY]?.value;
+  const backgroundsConfig = parameters[BACKGROUNDS_PARAM_KEY];
+
+  const selectedBackgroundColor = useMemo(() => {
+    if (backgroundsConfig.disable) {
+      return 'transparent';
+    }
+
+    return getBackgroundColorByName(
+      globalsBackgroundColor,
+      backgroundsConfig.values,
+      backgroundsConfig.default
+    );
+  }, [backgroundsConfig, globalsBackgroundColor]);
+
+  const isActive = useMemo(
+    () => selectedBackgroundColor && selectedBackgroundColor !== 'transparent',
+    [selectedBackgroundColor]
+  );
+
+  const selector =
+    context.viewMode === 'docs' ? `#anchor--${context.id} .docs-story` : '.sb-show-main';
+
+  const backgroundStyles = useMemo(() => {
+    return `
+      ${selector} {
+        background: ${selectedBackgroundColor} !important;
+        transition: background-color 0.3s;
+      }
+    `;
+  }, [selectedBackgroundColor, selector]);
+
+  useEffect(() => {
+    const selectorId =
+      context.viewMode === 'docs'
+        ? `addon-backgrounds-docs-${context.id}`
+        : `addon-backgrounds-color`;
+
+    if (!isActive) {
+      clearStyles(selectorId);
+      return;
+    }
+
+    addBackgroundStyle(
+      selectorId,
+      backgroundStyles,
+      context.viewMode === 'docs' ? context.id : null
+    );
+  }, [isActive, backgroundStyles, context]);
+
+  return StoryFn();
+};
--- a/addons/backgrounds/src/decorators/withGrid.ts
+++ b/addons/backgrounds/src/decorators/withGrid.ts
@ -0,0 +1,79 @@
+import dedent from 'ts-dedent';
+import deprecate from 'util-deprecate';
+import { StoryFn as StoryFunction, StoryContext, useMemo, useEffect } from '@storybook/addons';
+
+import { clearStyles, addGridStyle } from '../helpers';
+import { PARAM_KEY as BACKGROUNDS_PARAM_KEY } from '../constants';
+
+const deprecatedCellSizeWarning = deprecate(
+  () => {},
+  dedent`
+    Backgrounds Addon: The cell size parameter has been changed.
+
+    - parameters.grid.cellSize should now be parameters.backgrounds.grid.cellSize
+    See https://github.com/storybookjs/storybook/blob/next/MIGRATION.md#deprecated-grid-parameter
+  `
+);
+
+export const withGrid = (StoryFn: StoryFunction, context: StoryContext) => {
+  const { globals, parameters } = context;
+  const gridParameters = parameters[BACKGROUNDS_PARAM_KEY].grid;
+  const isActive = globals[BACKGROUNDS_PARAM_KEY]?.grid === true && gridParameters.disable !== true;
+  const { cellAmount, cellSize, opacity } = gridParameters;
+  const isInDocs = context.viewMode === 'docs';
+
+  let gridSize: number;
+  if (parameters.grid?.cellSize) {
+    gridSize = parameters.grid.cellSize;
+    deprecatedCellSizeWarning();
+  } else {
+    gridSize = cellSize;
+  }
+
+  const isLayoutPadded = parameters.layout === undefined || parameters.layout === 'padded';
+  // 16px offset in the grid to account for padded layout
+  const defaultOffset = isLayoutPadded ? 16 : 0;
+  const offsetX = gridParameters.offsetX || isInDocs ? 20 : defaultOffset;
+  const offsetY = gridParameters.offsetY || isInDocs ? 20 : defaultOffset;
+
+  const gridStyles = useMemo(() => {
+    const selector =
+      context.viewMode === 'docs' ? `#anchor--${context.id} .docs-story` : '.sb-show-main';
+
+    const backgroundSize = [
+      `${gridSize * cellAmount}px ${gridSize * cellAmount}px`,
+      `${gridSize * cellAmount}px ${gridSize * cellAmount}px`,
+      `${gridSize}px ${gridSize}px`,
+      `${gridSize}px ${gridSize}px`,
+    ].join(', ');
+
+    return `
+      ${selector} {
+        background-size: ${backgroundSize} !important;
+        background-position: ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px, ${offsetX}px ${offsetY}px !important;
+        background-blend-mode: difference !important;
+        background-image: linear-gradient(rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),
+         linear-gradient(90deg, rgba(130, 130, 130, ${opacity}) 1px, transparent 1px),
+         linear-gradient(rgba(130, 130, 130, ${opacity / 2}) 1px, transparent 1px),
+         linear-gradient(90deg, rgba(130, 130, 130, ${
+           opacity / 2
+         }) 1px, transparent 1px) !important;
+      }
+    `;
+  }, [gridSize]);
+
+  useEffect(() => {
+    const selectorId =
+      context.viewMode === 'docs'
+        ? `addon-backgrounds-grid-docs-${context.id}`
+        : `addon-backgrounds-grid`;
+    if (!isActive) {
+      clearStyles(selectorId);
+      return;
+    }
+
+    addGridStyle(selectorId, gridStyles);
+  }, [isActive, gridStyles, context]);
+
+  return StoryFn();
+};
--- a/addons/backgrounds/src/helpers/index.ts
+++ b/addons/backgrounds/src/helpers/index.ts
@ -0,0 +1,86 @@
+import { document } from 'global';
+import dedent from 'ts-dedent';
+
+import { logger } from '@storybook/client-logger';
+
+import { Background } from '../types';
+
+export const getBackgroundColorByName = (
+  currentSelectedValue: string,
+  backgrounds: Background[] = [],
+  defaultName: string
+): string => {
+  if (currentSelectedValue === 'transparent') {
+    return 'transparent';
+  }
+
+  if (backgrounds.find((background) => background.value === currentSelectedValue)) {
+    return currentSelectedValue;
+  }
+
+  const defaultBackground = backgrounds.find((background) => background.name === defaultName);
+  if (defaultBackground) {
+    return defaultBackground.value;
+  }
+
+  if (defaultName) {
+    const availableColors = backgrounds.map((background) => background.name).join(', ');
+    logger.warn(
+      dedent`
+        Backgrounds Addon: could not find the default color "${defaultName}".
+        These are the available colors for your story based on your configuration:
+        ${availableColors}.
+      `
+    );
+  }
+
+  return 'transparent';
+};
+
+export const clearStyles = (selector: string | string[]) => {
+  const selectors = Array.isArray(selector) ? selector : [selector];
+  selectors.forEach(clearStyle);
+};
+
+const clearStyle = (selector: string) => {
+  const element = document.getElementById(selector) as HTMLElement;
+  if (element) {
+    element.parentElement.removeChild(element);
+  }
+};
+
+export const addGridStyle = (selector: string, css: string) => {
+  const existingStyle = document.getElementById(selector) as HTMLElement;
+  if (existingStyle) {
+    if (existingStyle.innerHTML !== css) {
+      existingStyle.innerHTML = css;
+    }
+  } else {
+    const style = document.createElement('style') as HTMLElement;
+    style.setAttribute('id', selector);
+    style.innerHTML = css;
+    document.head.appendChild(style);
+  }
+};
+
+export const addBackgroundStyle = (selector: string, css: string, storyId: string) => {
+  const existingStyle = document.getElementById(selector) as HTMLElement;
+  if (existingStyle) {
+    if (existingStyle.innerHTML !== css) {
+      existingStyle.innerHTML = css;
+    }
+  } else {
+    const style = document.createElement('style') as HTMLElement;
+    style.setAttribute('id', selector);
+    style.innerHTML = css;
+
+    const gridStyleSelector = `addon-backgrounds-grid${storyId ? `-docs-${storyId}` : ''}`;
+    // If grids already exist, we want to add the style tag BEFORE it so the background doesn't override grid
+    const existingGridStyle = document.getElementById(gridStyleSelector) as HTMLElement;
+    if (existingGridStyle) {
+      existingGridStyle.parentElement.insertBefore(style, existingGridStyle);
+    } else {
+      document.head.appendChild(style);
+    }
+  }
+};
--- a/addons/backgrounds/src/preset/addDecorator.tsx
+++ b/addons/backgrounds/src/preset/addDecorator.tsx
@ -0,0 +1,3 @@
+import { withGrid, withBackground } from '../decorators';
+
+export const decorators = [withGrid, withBackground];
--- a/addons/backgrounds/src/preset/defaultParameters.tsx
+++ b/addons/backgrounds/src/preset/defaultParameters.tsx
@ -1,5 +1,10 @@
 export const parameters = {
  backgrounds: {
+    grid: {
+      cellSize: 20,
+      opacity: 0.5,
+      cellAmount: 5,
+    },
    values: [
      { name: 'light', value: '#F8F8F8' },
      { name: 'dark', value: '#333333' },
--- a/addons/backgrounds/src/preset/index.ts
+++ b/addons/backgrounds/src/preset/index.ts
@ -1,5 +1,5 @@
 export function config(entry: any[] = []) {
-  return [...entry, require.resolve('./defaultParameters')];
+  return [...entry, require.resolve('./addDecorator'), require.resolve('./addParameter')];
 }

 export function managerEntries(entry: any[] = [], options: any) {
--- a/addons/backgrounds/src/register.tsx
+++ b/addons/backgrounds/src/register.tsx
@ -5,14 +5,14 @@ import { ADDON_ID } from './constants';
 import { BackgroundSelector } from './containers/BackgroundSelector';
 import { GridSelector } from './containers/GridSelector';

-addons.register(ADDON_ID, (api) => {
+addons.register(ADDON_ID, () => {
  addons.add(ADDON_ID, {
    title: 'Backgrounds',
    type: types.TOOL,
-    match: ({ viewMode }) => viewMode === 'story',
+    match: ({ viewMode }) => !!(viewMode && viewMode.match(/^(story|docs)$/)),
    render: () => (
      <Fragment>
-        <BackgroundSelector api={api} />
+        <BackgroundSelector />
        <GridSelector />
      </Fragment>
    ),
--- a/addons/backgrounds/src/types/index.ts
+++ b/addons/backgrounds/src/types/index.ts
@ -0,0 +1,33 @@
+import { ReactElement } from 'react';
+
+export interface GlobalState {
+  name: string | undefined;
+  selected: string | undefined;
+}
+
+export interface BackgroundSelectorItem {
+  id: string;
+  title: string;
+  onClick: () => void;
+  value: string;
+  active: boolean;
+  right?: ReactElement;
+}
+
+export interface Background {
+  name: string;
+  value: string;
+}
+
+export interface BackgroundsParameter {
+  default?: string;
+  disable?: boolean;
+  values: Background[];
+}
+
+export interface BackgroundsConfig {
+  backgrounds: Background[] | null;
+  selectedBackgroundName: string | null;
+  defaultBackgroundName: string | null;
+  disable: boolean;
+}
--- a/addons/backgrounds/src/typings.d.ts
+++ b/addons/backgrounds/src/typings.d.ts
@ -0,0 +1 @@
+declare module 'global';
--- a/addons/controls/package.json
+++ b/addons/controls/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-controls",
-  "version": "6.1.0-alpha.10",
+  "version": "6.1.0-alpha.20",
  "description": "Controls for component properties",
  "keywords": [
    "addon",
@ -30,12 +30,12 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.1.0-alpha.10",
-    "@storybook/api": "6.1.0-alpha.10",
-    "@storybook/client-api": "6.1.0-alpha.10",
-    "@storybook/components": "6.1.0-alpha.10",
-    "@storybook/node-logger": "6.1.0-alpha.10",
-    "@storybook/theming": "6.1.0-alpha.10",
+    "@storybook/addons": "6.1.0-alpha.20",
+    "@storybook/api": "6.1.0-alpha.20",
+    "@storybook/client-api": "6.1.0-alpha.20",
+    "@storybook/components": "6.1.0-alpha.20",
+    "@storybook/node-logger": "6.1.0-alpha.20",
+    "@storybook/theming": "6.1.0-alpha.20",
    "core-js": "^3.0.1",
    "react": "^16.8.3",
    "react-dom": "^16.8.3",
@ -44,5 +44,5 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "57798a108e183d97f94fd4cc396e45e1d4b04d23"
+  "gitHead": "cc1c152e5452d28eabb24330f4ed693cd6782bc1"
 }
--- a/addons/cssresources/package.json
+++ b/addons/cssresources/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-cssresources",
-  "version": "6.1.0-alpha.10",
+  "version": "6.1.0-alpha.20",
  "description": "A storybook addon to switch between css resources at runtime for your story",
  "keywords": [
    "addon",
@ -26,17 +26,17 @@
    "README.md",
    "*.js",
    "*.d.ts",
-    "ts3.5/**/*"
+    "ts3.4/**/*"
  ],
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.1.0-alpha.10",
-    "@storybook/api": "6.1.0-alpha.10",
-    "@storybook/components": "6.1.0-alpha.10",
-    "@storybook/core-events": "6.1.0-alpha.10",
-    "@storybook/theming": "6.1.0-alpha.10",
+    "@storybook/addons": "6.1.0-alpha.20",
+    "@storybook/api": "6.1.0-alpha.20",
+    "@storybook/components": "6.1.0-alpha.20",
+    "@storybook/core-events": "6.1.0-alpha.20",
+    "@storybook/theming": "6.1.0-alpha.20",
    "core-js": "^3.0.1",
    "global": "^4.3.2",
    "react": "^16.8.3",
@ -51,11 +51,11 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "57798a108e183d97f94fd4cc396e45e1d4b04d23",
+  "gitHead": "cc1c152e5452d28eabb24330f4ed693cd6782bc1",
  "typesVersions": {
-    "<=3.5": {
+    "<3.8": {
      "*": [
-        "ts3.5/*"
+        "ts3.4/*"
      ]
    }
  }
--- a/addons/design-assets/package.json
+++ b/addons/design-assets/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-design-assets",
-  "version": "6.1.0-alpha.10",
+  "version": "6.1.0-alpha.20",
  "description": "Design asset preview for storybook",
  "keywords": [
    "addon",
@ -28,18 +28,18 @@
    "README.md",
    "*.js",
    "*.d.ts",
-    "ts3.5/**/*"
+    "ts3.4/**/*"
  ],
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.1.0-alpha.10",
-    "@storybook/api": "6.1.0-alpha.10",
-    "@storybook/client-logger": "6.1.0-alpha.10",
-    "@storybook/components": "6.1.0-alpha.10",
-    "@storybook/core-events": "6.1.0-alpha.10",
-    "@storybook/theming": "6.1.0-alpha.10",
+    "@storybook/addons": "6.1.0-alpha.20",
+    "@storybook/api": "6.1.0-alpha.20",
+    "@storybook/client-logger": "6.1.0-alpha.20",
+    "@storybook/components": "6.1.0-alpha.20",
+    "@storybook/core-events": "6.1.0-alpha.20",
+    "@storybook/theming": "6.1.0-alpha.20",
    "core-js": "^3.0.1",
    "global": "^4.3.2",
    "react": "^16.8.3",
@ -51,11 +51,11 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "57798a108e183d97f94fd4cc396e45e1d4b04d23",
+  "gitHead": "cc1c152e5452d28eabb24330f4ed693cd6782bc1",
  "typesVersions": {
-    "<=3.5": {
+    "<3.8": {
      "*": [
-        "ts3.5/*"
+        "ts3.4/*"
      ]
    }
  }
--- a/addons/design-assets/src/panel.tsx
+++ b/addons/design-assets/src/panel.tsx
@ -29,7 +29,7 @@ const Asset = ({ url }: { url: string | undefined }): ReactElement => {
  if (!url) {
    return null;
  }
-  if (url.match(/\.(png|gif|jpeg|tiff|svg|anpg|webp)/)) {
+  if (url.match(/\.(png|apng|gif|jpeg|tiff|svg|webp)/)) {
    // do image viewer
    return <Img alt="" src={url} />;
  }
--- a/addons/docs/docs/multiframework.md
+++ b/addons/docs/docs/multiframework.md
@ -6,6 +6,7 @@ Storybook Docs [provides basic support for all non-RN Storybook view layers](../
 - [Arg tables](#arg-tables)
 - [Component descriptions](#component-descriptions)
 - [Inline story rendering](#inline-story-rendering)
+- [Dynamic source rendering](#dynamic-source-rendering)
 - [More resources](#more-resources)

 ## Framework-specific configuration
@ -70,7 +71,7 @@ For React and Vue, the extraction works as follows:

 For Angular, Web components, and Ember, the extraction works as follows:

- Read JSON file in the user's `.storyboook/preview.json` and story it into a global variable
+- Read JSON file in the user's `.storybook/preview.json` and story it into a global variable
 - The view-layer specific `enhanceArgTypes` function translates that metadata into `ArgTypes`

 However, for your framework you may want to implement this in some other way.
@ -103,6 +104,59 @@ addParameters({

 The input is the story function and the story context (id, parameters, args, etc.), and the output is a React element, because we render docs pages in react. In the case of Vue, all of the work is done by the `@egoist/vue-to-react` library. If there's no analogous library for your framework, you may need to figure it out yourself!

+## Dynamic source rendering
+
+With the release of Storybook 6.0, we've improved how stories are rendered in the [Source doc block](https://storybook.js.org/docs/react/writing-docs/doc-blocks#source). One of such improvements is the `dynamic` source type, which renders a snippet based on the output the story function. 
+
+This dynamic rendering is framework-specific, meaning it needs a custom implementation for each framework.
+
+Let's take a look at the React framework implementation of `dynamic` snippets as a reference for implementing this feature in other frameworks:
+
+```tsx
+import { addons, StoryContext } from '@storybook/addons';
+import { SNIPPET_RENDERED } from '../../shared';
+
+export const jsxDecorator = (storyFn: any, context: StoryContext) => {
+  const story = storyFn();
+
+  // We only need to render JSX if the source block is actually going to
+  // consume it. Otherwise it's just slowing us down.
+  if (skipJsxRender(context)) {
+    return story;
+  }
+
+  const channel = addons.getChannel();
+
+  const options = {}; // retrieve from story parameters
+  const jsx = renderJsx(story, options);
+  channel.emit(SNIPPET_RENDERED, (context || {}).id, jsx);
+
+  return story;
+};
+```
+
+A few key points from the above snippet:
+
+- The **renderJsx** function call is responsible for transforming the output of a story function into a string specific to the framework (in this case React).
+- The returned snippet string is emitted on Storybook's channel through **channel.emit()** and subsequently consumed up by the Source block for any given story, if it exists.
+
+<div class="aside">
+ To learn more and see how it's implemented in context, check out <a href="https://github.com/storybookjs/storybook/blob/next/addons/docs/src/frameworks/react/jsxDecorator.tsx">the code</a> .
+</div>
+
+Now we need a way to configure how it's displayed in the UI:
+
+```tsx
+import { jsxDecorator } from './jsxDecorator';
+export const decorators = [jsxDecorator];
+```
+
+This configures the `jsxDecorator` to be run on every story. 
+
+<div class="aside">
+ To learn more and see how it's implemented in context, check out <a href="https://github.com/storybookjs/storybook/blob/next/addons/docs/src/frameworks/react/jsxDecorator.tsx">the code</a> .
+</div>
+
 ## More resources

 - References: [README](../README.md) / [DocsPage](docspage.md) / [MDX](mdx.md) / [FAQ](faq.md) / [Recipes](recipes.md) / [Theming](theming.md) / [Props](props-tables.md)
--- a/addons/docs/package.json
+++ b/addons/docs/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-docs",
-  "version": "6.1.0-alpha.10",
+  "version": "6.1.0-alpha.20",
  "description": "Superior documentation for your components",
  "keywords": [
    "addon",
@ -32,33 +32,33 @@
    "README.md",
    "*.js",
    "*.d.ts",
-    "ts3.5/**/*"
+    "ts3.4/**/*"
  ],
  "scripts": {
    "createDlls": "node -r esm ./scripts/createDlls.js",
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@babel/generator": "^7.9.6",
-    "@babel/parser": "^7.9.6",
-    "@babel/plugin-transform-react-jsx": "^7.3.0",
-    "@babel/preset-env": "^7.9.6",
+    "@babel/generator": "^7.11.5",
+    "@babel/parser": "^7.11.5",
+    "@babel/plugin-transform-react-jsx": "^7.10.4",
+    "@babel/preset-env": "^7.11.5",
    "@jest/transform": "^26.0.0",
    "@mdx-js/loader": "^1.5.1",
    "@mdx-js/mdx": "^1.5.1",
    "@mdx-js/react": "^1.5.1",
-    "@storybook/addons": "6.1.0-alpha.10",
-    "@storybook/api": "6.1.0-alpha.10",
-    "@storybook/client-api": "6.1.0-alpha.10",
-    "@storybook/client-logger": "6.1.0-alpha.10",
-    "@storybook/components": "6.1.0-alpha.10",
-    "@storybook/core": "6.1.0-alpha.10",
-    "@storybook/core-events": "6.1.0-alpha.10",
+    "@storybook/addons": "6.1.0-alpha.20",
+    "@storybook/api": "6.1.0-alpha.20",
+    "@storybook/client-api": "6.1.0-alpha.20",
+    "@storybook/client-logger": "6.1.0-alpha.20",
+    "@storybook/components": "6.1.0-alpha.20",
+    "@storybook/core": "6.1.0-alpha.20",
+    "@storybook/core-events": "6.1.0-alpha.20",
    "@storybook/csf": "0.0.1",
-    "@storybook/node-logger": "6.1.0-alpha.10",
-    "@storybook/postinstall": "6.1.0-alpha.10",
-    "@storybook/source-loader": "6.1.0-alpha.10",
-    "@storybook/theming": "6.1.0-alpha.10",
+    "@storybook/node-logger": "6.1.0-alpha.20",
+    "@storybook/postinstall": "6.1.0-alpha.20",
+    "@storybook/source-loader": "6.1.0-alpha.20",
+    "@storybook/theming": "6.1.0-alpha.20",
    "acorn": "^7.1.0",
    "acorn-jsx": "^5.1.0",
    "acorn-walk": "^7.0.0",
@ -83,12 +83,12 @@
  },
  "devDependencies": {
    "@angular/core": "^9.1.0",
-    "@babel/core": "^7.9.6",
+    "@babel/core": "^7.11.5",
    "@emotion/core": "^10.0.20",
    "@emotion/styled": "^10.0.17",
-    "@storybook/react": "6.1.0-alpha.10",
-    "@storybook/vue": "6.1.0-alpha.10",
-    "@storybook/web-components": "6.1.0-alpha.10",
+    "@storybook/react": "6.1.0-alpha.20",
+    "@storybook/vue": "6.1.0-alpha.20",
+    "@storybook/web-components": "6.1.0-alpha.20",
    "@types/cross-spawn": "^6.0.1",
    "@types/doctrine": "^0.0.3",
    "@types/enzyme": "^3.10.3",
@ -118,8 +118,8 @@
    "zone.js": "^0.10.2"
  },
  "peerDependencies": {
-    "@babel/core": "^7.0.0-0",
-    "@storybook/vue": "6.1.0-alpha.10",
+    "@babel/core": "^7.11.5",
+    "@storybook/vue": "6.1.0-alpha.20",
    "babel-loader": "^8.0.0",
    "sveltedoc-parser": "^3.0.4",
    "vue": "^2.6.10",
@ -142,11 +142,11 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "57798a108e183d97f94fd4cc396e45e1d4b04d23",
+  "gitHead": "cc1c152e5452d28eabb24330f4ed693cd6782bc1",
  "typesVersions": {
-    "<=3.5": {
+    "<3.8": {
      "*": [
-        "ts3.5/*"
+        "ts3.4/*"
      ]
    }
  }
--- a/addons/docs/src/blocks/DocsStory.tsx
+++ b/addons/docs/src/blocks/DocsStory.tsx
@ -22,13 +22,18 @@ export const DocsStory: FunctionComponent<DocsStoryProps> = ({
  name,
  expanded = true,
  withToolbar = false,
-  parameters,
+  parameters = {},
 }) => {
-  let description = expanded && parameters?.docs?.description?.story;
-  if (!description) {
-    description = parameters?.docs?.storyDescription;
-    if (description) warnStoryDescription();
+  let description;
+  const { docs } = parameters;
+  if (expanded && docs) {
+    description = docs.description?.story;
+    if (!description) {
+      description = docs.storyDescription;
+      if (description) warnStoryDescription();
+    }
  }
+
  const subheading = expanded && name;

  return (
--- a/addons/docs/src/blocks/Story.tsx
+++ b/addons/docs/src/blocks/Story.tsx
@ -56,7 +56,7 @@ export const getStoryProps = (props: StoryProps, context: DocsContextProps): Pur
    return null;
  }

-  // prefer block props, then story parameters defined by the framework-specific settings and optionally overriden by users
+  // prefer block props, then story parameters defined by the framework-specific settings and optionally overridden by users
  const { inlineStories = false, iframeHeight = 100, prepareForInline } = docs;
  const storyIsInline = typeof inline === 'boolean' ? inline : inlineStories;
  if (storyIsInline && !prepareForInline) {
--- a/addons/docs/src/blocks/mdx.tsx
+++ b/addons/docs/src/blocks/mdx.tsx
@ -15,7 +15,7 @@ export const assertIsFn = (val: any) => {
  return val;
 };

-// Hacky utilty for adding mdxStoryToId to the default context
+// Hacky utility for adding mdxStoryToId to the default context
 export const AddContext: FC<DocsContextProps> = (props) => {
  const { children, ...rest } = props;
  const parentContext = React.useContext(DocsContext);
--- a/addons/docs/src/frameworks/angular/testfixtures/doc-button/compodoc.snapshot
+++ b/addons/docs/src/frameworks/angular/testfixtures/doc-button/compodoc.snapshot
@ -132,7 +132,7 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
          "name": "click",
        },
      ],
-      "id": "component-InputComponent-8088cb533b6defa9d43d10841b59ce18",
+      "id": "component-InputComponent-14bbde487c28642f97f1f6c94b65ab31",
      "inputs": Array [],
      "inputsClass": Array [
        Object {
@ -287,16 +287,16 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
              "comment": "<p>Some number you&#39;d like to use.</p>
 ",
              "name": Object {
-                "end": 3219,
+                "end": 3220,
                "escapedText": "x",
                "flags": 0,
-                "pos": 3218,
+                "pos": 3219,
              },
              "tagName": Object {
-                "end": 3217,
+                "end": 3218,
                "escapedText": "param",
                "flags": 0,
-                "pos": 3212,
+                "pos": 3213,
              },
              "type": "number",
            },
@ -304,16 +304,16 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
              "comment": "<p>Some other number or string you&#39;d like to use, will have <code>parseInt()</code> applied before calculation.</p>
 ",
              "name": Object {
-                "end": 3264,
+                "end": 3265,
                "escapedText": "y",
                "flags": 0,
-                "pos": 3263,
+                "pos": 3264,
              },
              "tagName": Object {
-                "end": 3262,
+                "end": 3263,
                "escapedText": "param",
                "flags": 0,
-                "pos": 3257,
+                "pos": 3258,
              },
              "type": "string | number",
            },
@ -341,16 +341,16 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
              "comment": "<p>Some <code>password</code>.</p>
 ",
              "name": Object {
-                "end": 3780,
+                "end": 3781,
                "escapedText": "password",
                "flags": 0,
-                "pos": 3772,
+                "pos": 3773,
              },
              "tagName": Object {
-                "end": 3771,
+                "end": 3772,
                "escapedText": "param",
                "flags": 0,
-                "pos": 3766,
+                "pos": 3767,
              },
              "type": "string",
            },
@ -379,17 +379,17 @@ like <strong>bold</strong>, <em>italic</em>, and <code>inline code</code>.</p>
              "comment": "<p>Some <code>id</code>.</p>
 ",
              "name": Object {
-                "end": 3639,
+                "end": 3640,
                "escapedText": "id",
                "flags": 0,
-                "pos": 3637,
+                "pos": 3638,
              },
              "optional": true,
              "tagName": Object {
-                "end": 3636,
+                "end": 3637,
                "escapedText": "param",
                "flags": 0,
-                "pos": 3631,
+                "pos": 3632,
              },
              "type": "number",
            },
@ -589,7 +589,7 @@ export class InputComponent<T> {
  public onClick = new EventEmitter<Event>();

  /**
-   * This is an internal method that we don't want to document and have added the \`ignore\` annoation to.
+   * This is an internal method that we don't want to document and have added the \`ignore\` annotation to.
   *
   * @ignore
   */
@ -745,7 +745,7 @@ export class InputComponent<T> {
  "interfaces": Array [
    Object {
      "file": "addons/docs/src/frameworks/angular/__testfixtures__/doc-button/input.ts",
-      "id": "interface-ISomeInterface-8088cb533b6defa9d43d10841b59ce18",
+      "id": "interface-ISomeInterface-14bbde487c28642f97f1f6c94b65ab31",
      "indexSignatures": Array [],
      "kind": 150,
      "methods": Array [],
@ -850,7 +850,7 @@ export class InputComponent<T> {
  public onClick = new EventEmitter<Event>();

  /**
-   * This is an internal method that we don't want to document and have added the \`ignore\` annoation to.
+   * This is an internal method that we don't want to document and have added the \`ignore\` annotation to.
   *
   * @ignore
   */
--- a/addons/docs/src/frameworks/angular/testfixtures/doc-button/input.ts
+++ b/addons/docs/src/frameworks/angular/testfixtures/doc-button/input.ts
@ -78,7 +78,7 @@ export class InputComponent<T> {
  public onClick = new EventEmitter<Event>();

  /**
-   * This is an internal method that we don't want to document and have added the `ignore` annoation to.
+   * This is an internal method that we don't want to document and have added the `ignore` annotation to.
   *
   * @ignore
   */
--- a/addons/docs/src/frameworks/react/testfixtures/8894-9511-ts-forward-ref/docgen.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/8894-9511-ts-forward-ref/docgen.snapshot
@ -2,7 +2,7 @@

 exports[`react component properties 8894-9511-ts-forward-ref 1`] = `
 "import React, { forwardRef } from 'react';
-const Button = forwardRef(({
+const Button = /*#__PURE__*/forwardRef(({
  disabled = false,
  variant = 'small',
  children
--- a/addons/docs/src/frameworks/react/testfixtures/9586-js-react-memo/docgen.snapshot
+++ b/addons/docs/src/frameworks/react/testfixtures/9586-js-react-memo/docgen.snapshot
@ -18,7 +18,7 @@ Button.propTypes = {
  label: PropTypes.string.isRequired,
  onClick: PropTypes.func.isRequired
 };
-const MemoButton = React.memo(Button);
+const MemoButton = /*#__PURE__*/React.memo(Button);
 export const component = MemoButton;
 Button.__docgenInfo = {
  \\"description\\": \\"\\",
--- a/addons/docs/src/frameworks/react/jsxDecorator.test.tsx
+++ b/addons/docs/src/frameworks/react/jsxDecorator.test.tsx
@ -106,6 +106,31 @@ describe('renderJsx', () => {
       />
    `);
  });
+
+  it('forwardRef component', () => {
+    const MyExoticComponent = React.forwardRef(function MyExoticComponent(props: any, _ref: any) {
+      return <div>{props.children}</div>;
+    });
+
+    expect(renderJsx(<MyExoticComponent>I'm forwardRef!</MyExoticComponent>, {}))
+      .toMatchInlineSnapshot(`
+        <MyExoticComponent>
+          I'm forwardRef!
+        </MyExoticComponent>
+      `);
+  });
+
+  it('memo component', () => {
+    const MyMemoComponent = React.memo(function MyMemoComponent(props: any) {
+      return <div>{props.children}</div>;
+    });
+
+    expect(renderJsx(<MyMemoComponent>I'm memo!</MyMemoComponent>, {})).toMatchInlineSnapshot(`
+      <MyMemoComponent>
+        I'm memo!
+      </MyMemoComponent>
+    `);
+  });
 });

 // @ts-ignore
--- a/addons/docs/src/frameworks/react/jsxDecorator.tsx
+++ b/addons/docs/src/frameworks/react/jsxDecorator.tsx
@ -87,7 +87,16 @@ export const renderJsx = (code: React.ReactElement, options: JSXOptions) => {
  const displayNameDefaults =
    typeof options.displayName === 'string'
      ? { showFunctions: true, displayName: () => options.displayName }
-      : {};
+      : {
+          // To get exotic component names resolving properly
+          displayName: (el: any): string =>
+            el.type.displayName ||
+            (el.type.name !== '_default' ? el.type.name : null) ||
+            (typeof el.type === 'function' ? 'No Display Name' : null) ||
+            (el.type.$$typeof === Symbol.for('react.forward_ref') ? el.type.render.name : null) ||
+            (el.type.$$typeof === Symbol.for('react.memo') ? el.type.type.name : null) ||
+            el.type,
+        };

  const filterDefaults = {
    filterProps: (value: any, key: string): boolean => value !== undefined,
--- a/addons/docs/src/frameworks/react/lib/defaultValues/createDefaultValue.ts
+++ b/addons/docs/src/frameworks/react/lib/defaultValues/createDefaultValue.ts
@ -15,12 +15,12 @@ import { generateObject } from './generateObject';
 import { generateArray } from './generateArray';
 import { getPrettyIdentifier } from './prettyIdentifier';

-function generateFunc({ inferedType, ast }: InspectionResult): PropDefaultValue {
-  const { identifier } = inferedType as InspectionFunction;
+function generateFunc({ inferredType, ast }: InspectionResult): PropDefaultValue {
+  const { identifier } = inferredType as InspectionFunction;

  if (identifier != null) {
    return createSummaryValue(
-      getPrettyIdentifier(inferedType as InspectionIdentifiableInferedType),
+      getPrettyIdentifier(inferredType as InspectionIdentifiableInferedType),
      generateCode(ast)
    );
  }
@ -38,19 +38,16 @@ function generateElement(
  defaultValue: string,
  inspectionResult: InspectionResult
 ): PropDefaultValue {
-  const { inferedType } = inspectionResult;
-  const { identifier } = inferedType as InspectionElement;
+  const { inferredType } = inspectionResult;
+  const { identifier } = inferredType as InspectionElement;

  if (identifier != null) {
    if (!isHtmlTag(identifier)) {
      const prettyIdentifier = getPrettyIdentifier(
-        inferedType as InspectionIdentifiableInferedType
+        inferredType as InspectionIdentifiableInferedType
      );

-      return createSummaryValue(
-        prettyIdentifier,
-        prettyIdentifier !== defaultValue ? defaultValue : undefined
-      );
+      return createSummaryValue(prettyIdentifier, defaultValue);
    }
  }

@ -63,7 +60,7 @@ export function createDefaultValue(defaultValue: string): PropDefaultValue {
  try {
    const inspectionResult = inspectValue(defaultValue);

-    switch (inspectionResult.inferedType.type) {
+    switch (inspectionResult.inferredType.type) {
      case InspectionType.OBJECT:
        return generateObject(inspectionResult);
      case InspectionType.FUNCTION:
--- a/addons/docs/src/frameworks/react/lib/defaultValues/createFromRawDefaultProp.ts
+++ b/addons/docs/src/frameworks/react/lib/defaultValues/createFromRawDefaultProp.ts
@ -30,7 +30,7 @@ export function extractFunctionName(func: Function, propName: string): string {
  const { name } = func;

  // Comparison with the prop name is to discard inferred function names.
-  if (name !== '' && name !== 'anoynymous' && name !== propName) {
+  if (name !== '' && name !== 'anonymous' && name !== propName) {
    return name;
  }

@ -50,7 +50,7 @@ function generateReactObject(rawDefaultProp: any) {
  if (displayName != null) {
    const prettyIdentifier = getPrettyElementIdentifier(displayName);

-    return createSummaryValue(prettyIdentifier, prettyIdentifier !== jsx ? jsx : undefined);
+    return createSummaryValue(prettyIdentifier, jsx);
  }

  if (isString(type)) {
@ -92,7 +92,7 @@ const functionResolver: TypeResolver = (rawDefaultProp, propDef) => {
  let isElement = false;
  let inspectionResult;

-  // Try to display the name of the component. The body of the component is ommited since the code has been transpiled.
+  // Try to display the name of the component. The body of the component is omitted since the code has been transpiled.
  if (isFunction(rawDefaultProp.render)) {
    isElement = true;
  } else if (rawDefaultProp.prototype != null && isFunction(rawDefaultProp.prototype.render)) {
@ -103,7 +103,7 @@ const functionResolver: TypeResolver = (rawDefaultProp, propDef) => {
    try {
      inspectionResult = inspectValue(rawDefaultProp.toString());

-      const { hasParams, params } = inspectionResult.inferedType as InspectionFunction;
+      const { hasParams, params } = inspectionResult.inferredType as InspectionFunction;
      if (hasParams) {
        // It might be a functional component accepting props.
        if (params.length === 1 && params[0].type === 'ObjectPattern') {
@ -133,7 +133,7 @@ const functionResolver: TypeResolver = (rawDefaultProp, propDef) => {
      inspectionResult = inspectValue(rawDefaultProp.toString());
    }

-    const { hasParams } = inspectionResult.inferedType as InspectionFunction;
+    const { hasParams } = inspectionResult.inferredType as InspectionFunction;

    return createSummaryValue(getPrettyFuncIdentifier(funcName, hasParams));
  }
--- a/addons/docs/src/frameworks/react/lib/defaultValues/generateArray.ts
+++ b/addons/docs/src/frameworks/react/lib/defaultValues/generateArray.ts
@ -4,8 +4,8 @@ import { InspectionResult, InspectionArray } from '../inspection';
 import { createSummaryValue, isTooLongForDefaultValueSummary } from '../../../../lib';
 import { generateArrayCode } from '../generateCode';

-export function generateArray({ inferedType, ast }: InspectionResult): PropDefaultValue {
-  const { depth } = inferedType as InspectionArray;
+export function generateArray({ inferredType, ast }: InspectionResult): PropDefaultValue {
+  const { depth } = inferredType as InspectionArray;

  if (depth <= 2) {
    const compactArray = generateArrayCode(ast, true);
--- a/addons/docs/src/frameworks/react/lib/defaultValues/generateObject.ts
+++ b/addons/docs/src/frameworks/react/lib/defaultValues/generateObject.ts
@ -4,8 +4,8 @@ import { InspectionResult, InspectionArray } from '../inspection';
 import { createSummaryValue, isTooLongForDefaultValueSummary } from '../../../../lib';
 import { generateObjectCode } from '../generateCode';

-export function generateObject({ inferedType, ast }: InspectionResult): PropDefaultValue {
-  const { depth } = inferedType as InspectionArray;
+export function generateObject({ inferredType, ast }: InspectionResult): PropDefaultValue {
+  const { depth } = inferredType as InspectionArray;

  if (depth === 1) {
    const compactObject = generateObjectCode(ast, true);
--- a/addons/docs/src/frameworks/react/lib/defaultValues/prettyIdentifier.ts
+++ b/addons/docs/src/frameworks/react/lib/defaultValues/prettyIdentifier.ts
@ -4,12 +4,12 @@ import {
  InspectionType,
 } from '../inspection';

-export function getPrettyIdentifier(inferedType: InspectionIdentifiableInferedType): string {
-  const { type, identifier } = inferedType;
+export function getPrettyIdentifier(inferredType: InspectionIdentifiableInferedType): string {
+  const { type, identifier } = inferredType;

  switch (type) {
    case InspectionType.FUNCTION:
-      return getPrettyFuncIdentifier(identifier, (inferedType as InspectionFunction).hasParams);
+      return getPrettyFuncIdentifier(identifier, (inferredType as InspectionFunction).hasParams);
    case InspectionType.ELEMENT:
      return getPrettyElementIdentifier(identifier);
    default:
--- a/addons/docs/src/frameworks/react/lib/generateCode.ts
+++ b/addons/docs/src/frameworks/react/lib/generateCode.ts
@ -48,7 +48,7 @@ export function generateArrayCode(ast: any, compact = false): string {
 function generateMultilineArrayCode(ast: any): string {
  let result = generateCode(ast);

-  // escodegen add extra spacing before the closing bracket of a multile line array with a nested object.
+  // escodegen add extra spacing before the closing bracket of a multiple line array with a nested object.
  // Fix it until a better solution is found.
  if (result.endsWith('  }]')) {
    result = dedent(result);
--- a/addons/docs/src/frameworks/react/lib/inspection/acornParser.test.ts
+++ b/addons/docs/src/frameworks/react/lib/inspection/acornParser.test.ts
@ -14,37 +14,37 @@ describe('parse', () => {
  describe('expression', () => {
    it('support HTML element', () => {
      const result = parse('<div>Hello!</div>');
-      const inferedType = result.inferedType as InspectionElement;
+      const inferredType = result.inferredType as InspectionElement;

-      expect(inferedType.type).toBe(InspectionType.ELEMENT);
-      expect(inferedType.identifier).toBe('div');
+      expect(inferredType.type).toBe(InspectionType.ELEMENT);
+      expect(inferredType.identifier).toBe('div');
      expect(result.ast).toBeDefined();
    });

    it('support React declaration', () => {
      const result = parse('<FunctionalComponent />');
-      const inferedType = result.inferedType as InspectionElement;
+      const inferredType = result.inferredType as InspectionElement;

-      expect(inferedType.type).toBe(InspectionType.ELEMENT);
-      expect(inferedType.identifier).toBe('FunctionalComponent');
+      expect(inferredType.type).toBe(InspectionType.ELEMENT);
+      expect(inferredType.identifier).toBe('FunctionalComponent');
      expect(result.ast).toBeDefined();
    });

    it('support anonymous functional React component', () => {
      const result = parse('() => { return <div>Hey!</div>; }');
-      const inferedType = result.inferedType as InspectionElement;
+      const inferredType = result.inferredType as InspectionElement;

-      expect(inferedType.type).toBe(InspectionType.ELEMENT);
-      expect(inferedType.identifier).toBeUndefined();
+      expect(inferredType.type).toBe(InspectionType.ELEMENT);
+      expect(inferredType.identifier).toBeUndefined();
      expect(result.ast).toBeDefined();
    });

    it('support named functional React component', () => {
      const result = parse('function NamedFunctionalComponent() { return <div>Hey!</div>; }');
-      const inferedType = result.inferedType as InspectionElement;
+      const inferredType = result.inferredType as InspectionElement;

-      expect(inferedType.type).toBe(InspectionType.ELEMENT);
-      expect(inferedType.identifier).toBe('NamedFunctionalComponent');
+      expect(inferredType.type).toBe(InspectionType.ELEMENT);
+      expect(inferredType.identifier).toBe('NamedFunctionalComponent');
      expect(result.ast).toBeDefined();
    });

@ -55,55 +55,55 @@ describe('parse', () => {
            return <div>Hey!</div>;
          }
      }`);
-      const inferedType = result.inferedType as InspectionElement;
+      const inferredType = result.inferredType as InspectionElement;

-      expect(inferedType.type).toBe(InspectionType.ELEMENT);
-      expect(inferedType.identifier).toBe('ClassComponent');
+      expect(inferredType.type).toBe(InspectionType.ELEMENT);
+      expect(inferredType.identifier).toBe('ClassComponent');
      expect(result.ast).toBeDefined();
    });

    it('support PropTypes.shape', () => {
      const result = parse('PropTypes.shape({ foo: PropTypes.string })');
-      const inferedType = result.inferedType as InspectionObject;
+      const inferredType = result.inferredType as InspectionObject;

-      expect(inferedType.type).toBe(InspectionType.OBJECT);
-      expect(inferedType.depth).toBe(1);
+      expect(inferredType.type).toBe(InspectionType.OBJECT);
+      expect(inferredType.depth).toBe(1);
      expect(result.ast).toBeDefined();
    });

    it('support deep PropTypes.shape', () => {
      const result = parse('PropTypes.shape({ foo: PropTypes.shape({ bar: PropTypes.string }) })');
-      const inferedType = result.inferedType as InspectionObject;
+      const inferredType = result.inferredType as InspectionObject;

-      expect(inferedType.type).toBe(InspectionType.OBJECT);
-      expect(inferedType.depth).toBe(2);
+      expect(inferredType.type).toBe(InspectionType.OBJECT);
+      expect(inferredType.depth).toBe(2);
      expect(result.ast).toBeDefined();
    });

    it('support shape', () => {
      const result = parse('shape({ foo: string })');
-      const inferedType = result.inferedType as InspectionObject;
+      const inferredType = result.inferredType as InspectionObject;

-      expect(inferedType.type).toBe(InspectionType.OBJECT);
-      expect(inferedType.depth).toBe(1);
+      expect(inferredType.type).toBe(InspectionType.OBJECT);
+      expect(inferredType.depth).toBe(1);
      expect(result.ast).toBeDefined();
    });

    it('support deep shape', () => {
      const result = parse('shape({ foo: shape({ bar: string }) })');
-      const inferedType = result.inferedType as InspectionObject;
+      const inferredType = result.inferredType as InspectionObject;

-      expect(inferedType.type).toBe(InspectionType.OBJECT);
-      expect(inferedType.depth).toBe(2);
+      expect(inferredType.type).toBe(InspectionType.OBJECT);
+      expect(inferredType.depth).toBe(2);
      expect(result.ast).toBeDefined();
    });

    it('support single prop object literal', () => {
      const result = parse('{ foo: PropTypes.string }');
-      const inferedType = result.inferedType as InspectionObject;
+      const inferredType = result.inferredType as InspectionObject;

-      expect(inferedType.type).toBe(InspectionType.OBJECT);
-      expect(inferedType.depth).toBe(1);
+      expect(inferredType.type).toBe(InspectionType.OBJECT);
+      expect(inferredType.depth).toBe(1);
      expect(result.ast).toBeDefined();
    });

@ -113,10 +113,10 @@ describe('parse', () => {
          foo: PropTypes.string,
          bar: PropTypes.string
      }`);
-      const inferedType = result.inferedType as InspectionObject;
+      const inferredType = result.inferredType as InspectionObject;

-      expect(inferedType.type).toBe(InspectionType.OBJECT);
-      expect(inferedType.depth).toBe(1);
+      expect(inferredType.type).toBe(InspectionType.OBJECT);
+      expect(inferredType.depth).toBe(1);
      expect(result.ast).toBeDefined();
    });

@ -131,99 +131,99 @@ describe('parse', () => {
            ho: PropTypes.string
          }
      }`);
-      const inferedType = result.inferedType as InspectionObject;
+      const inferredType = result.inferredType as InspectionObject;

-      expect(inferedType.type).toBe(InspectionType.OBJECT);
-      expect(inferedType.depth).toBe(2);
+      expect(inferredType.type).toBe(InspectionType.OBJECT);
+      expect(inferredType.depth).toBe(2);
      expect(result.ast).toBeDefined();
    });

    it('support required prop', () => {
      const result = parse('{ foo: PropTypes.string.isRequired }');
-      const inferedType = result.inferedType as InspectionObject;
+      const inferredType = result.inferredType as InspectionObject;

-      expect(inferedType.type).toBe(InspectionType.OBJECT);
-      expect(inferedType.depth).toBe(1);
+      expect(inferredType.type).toBe(InspectionType.OBJECT);
+      expect(inferredType.depth).toBe(1);
      expect(result.ast).toBeDefined();
    });

    it('support array', () => {
      const result = parse("['bottom-left', 'botton-center', 'bottom-right']");
-      const inferedType = result.inferedType as InspectionArray;
+      const inferredType = result.inferredType as InspectionArray;

-      expect(inferedType.type).toBe(InspectionType.ARRAY);
-      expect(inferedType.depth).toBe(1);
+      expect(inferredType.type).toBe(InspectionType.ARRAY);
+      expect(inferredType.depth).toBe(1);
      expect(result.ast).toBeDefined();
    });

    it('support deep array', () => {
      const result = parse("['bottom-left', { foo: string }, [['hey', 'ho']]]");
-      const inferedType = result.inferedType as InspectionArray;
+      const inferredType = result.inferredType as InspectionArray;

-      expect(inferedType.type).toBe(InspectionType.ARRAY);
-      expect(inferedType.depth).toBe(3);
+      expect(inferredType.type).toBe(InspectionType.ARRAY);
+      expect(inferredType.depth).toBe(3);
      expect(result.ast).toBeDefined();
    });

    it('support object identifier', () => {
      const result = parse('NAMED_OBJECT');
-      const inferedType = result.inferedType as InspectionIdentifier;
+      const inferredType = result.inferredType as InspectionIdentifier;

-      expect(inferedType.type).toBe(InspectionType.IDENTIFIER);
-      expect(inferedType.identifier).toBe('NAMED_OBJECT');
+      expect(inferredType.type).toBe(InspectionType.IDENTIFIER);
+      expect(inferredType.identifier).toBe('NAMED_OBJECT');
      expect(result.ast).toBeDefined();
    });

    it('support anonymous function', () => {
      const result = parse('() => {}');
-      const inferedType = result.inferedType as InspectionFunction;
+      const inferredType = result.inferredType as InspectionFunction;

-      expect(inferedType.type).toBe(InspectionType.FUNCTION);
-      expect(inferedType.identifier).toBeUndefined();
-      expect(inferedType.hasParams).toBeFalsy();
-      expect(inferedType.params.length).toBe(0);
+      expect(inferredType.type).toBe(InspectionType.FUNCTION);
+      expect(inferredType.identifier).toBeUndefined();
+      expect(inferredType.hasParams).toBeFalsy();
+      expect(inferredType.params.length).toBe(0);
      expect(result.ast).toBeDefined();
    });

    it('support anonymous function with arguments', () => {
      const result = parse('(a, b) => {}');
-      const inferedType = result.inferedType as InspectionFunction;
+      const inferredType = result.inferredType as InspectionFunction;

-      expect(inferedType.type).toBe(InspectionType.FUNCTION);
-      expect(inferedType.identifier).toBeUndefined();
-      expect(inferedType.hasParams).toBeTruthy();
-      expect(inferedType.params.length).toBe(2);
+      expect(inferredType.type).toBe(InspectionType.FUNCTION);
+      expect(inferredType.identifier).toBeUndefined();
+      expect(inferredType.hasParams).toBeTruthy();
+      expect(inferredType.params.length).toBe(2);
      expect(result.ast).toBeDefined();
    });

    it('support named function', () => {
      const result = parse('function concat() {}');
-      const inferedType = result.inferedType as InspectionFunction;
+      const inferredType = result.inferredType as InspectionFunction;

-      expect(inferedType.type).toBe(InspectionType.FUNCTION);
-      expect(inferedType.identifier).toBe('concat');
-      expect(inferedType.hasParams).toBeFalsy();
-      expect(inferedType.params.length).toBe(0);
+      expect(inferredType.type).toBe(InspectionType.FUNCTION);
+      expect(inferredType.identifier).toBe('concat');
+      expect(inferredType.hasParams).toBeFalsy();
+      expect(inferredType.params.length).toBe(0);
      expect(result.ast).toBeDefined();
    });

    it('support named function with arguments', () => {
      const result = parse('function concat(a, b) {}');
-      const inferedType = result.inferedType as InspectionFunction;
+      const inferredType = result.inferredType as InspectionFunction;

-      expect(inferedType.type).toBe(InspectionType.FUNCTION);
-      expect(inferedType.identifier).toBe('concat');
-      expect(inferedType.hasParams).toBeTruthy();
-      expect(inferedType.params.length).toBe(2);
+      expect(inferredType.type).toBe(InspectionType.FUNCTION);
+      expect(inferredType.identifier).toBe('concat');
+      expect(inferredType.hasParams).toBeTruthy();
+      expect(inferredType.params.length).toBe(2);
      expect(result.ast).toBeDefined();
    });

    it('support class', () => {
      const result = parse('class Foo {}');
-      const inferedType = result.inferedType as InspectionFunction;
+      const inferredType = result.inferredType as InspectionFunction;

-      expect(inferedType.type).toBe(InspectionType.CLASS);
-      expect(inferedType.identifier).toBe('Foo');
+      expect(inferredType.type).toBe(InspectionType.CLASS);
+      expect(inferredType.identifier).toBe('Foo');
      expect(result.ast).toBeDefined();
    });

@ -236,18 +236,18 @@ describe('parse', () => {
    ].forEach((x) => {
      it(`support ${x.name}`, () => {
        const result = parse(x.value);
-        const inferedType = result.inferedType as InspectionLiteral;
+        const inferredType = result.inferredType as InspectionLiteral;

-        expect(inferedType.type).toBe(InspectionType.LITERAL);
+        expect(inferredType.type).toBe(InspectionType.LITERAL);
        expect(result.ast).toBeDefined();
      });
    });

    it("returns Unknown when it's not supported", () => {
      const result = parse("Symbol('foo')");
-      const inferedType = result.inferedType as InspectionUnknown;
+      const inferredType = result.inferredType as InspectionUnknown;

-      expect(inferedType.type).toBe(InspectionType.UNKNOWN);
+      expect(inferredType.type).toBe(InspectionType.UNKNOWN);
      expect(result.ast).toBeDefined();
    });
  });
--- a/addons/docs/src/frameworks/react/lib/inspection/acornParser.ts
+++ b/addons/docs/src/frameworks/react/lib/inspection/acornParser.ts
@ -17,7 +17,7 @@ import {
 } from './types';

 interface ParsingResult<T> {
-  inferedType: T;
+  inferredType: T;
  ast: any;
 }

@ -60,7 +60,7 @@ function calculateNodeDepth(node: estree.Expression): number {

 function parseIdentifier(identifierNode: estree.Identifier): ParsingResult<InspectionIdentifier> {
  return {
-    inferedType: {
+    inferredType: {
      type: InspectionType.IDENTIFIER,
      identifier: extractIdentifierName(identifierNode),
    },
@ -70,7 +70,7 @@ function parseIdentifier(identifierNode: estree.Identifier): ParsingResult<Inspe

 function parseLiteral(literalNode: estree.Literal): ParsingResult<InspectionLiteral> {
  return {
-    inferedType: { type: InspectionType.LITERAL },
+    inferredType: { type: InspectionType.LITERAL },
    ast: literalNode,
  };
 }
@ -94,7 +94,7 @@ function parseFunction(

  const isJsx = innerJsxElementNode != null;

-  const inferedType: InspectionFunction | InspectionElement = {
+  const inferredType: InspectionFunction | InspectionElement = {
    type: isJsx ? InspectionType.ELEMENT : InspectionType.FUNCTION,
    params: funcNode.params,
    hasParams: funcNode.params.length !== 0,
@ -102,11 +102,11 @@ function parseFunction(

  const identifierName = extractIdentifierName((funcNode as estree.FunctionExpression).id);
  if (identifierName != null) {
-    inferedType.identifier = identifierName;
+    inferredType.identifier = identifierName;
  }

  return {
-    inferedType,
+    inferredType,
    ast: funcNode,
  };
 }
@ -128,29 +128,29 @@ function parseClass(
    ACORN_WALK_VISITORS
  );

-  const inferedType: any = {
+  const inferredType: any = {
    type: innerJsxElementNode != null ? InspectionType.ELEMENT : InspectionType.CLASS,
    identifier: extractIdentifierName(classNode.id),
  };

  return {
-    inferedType,
+    inferredType,
    ast: classNode,
  };
 }

 function parseJsxElement(jsxElementNode: any): ParsingResult<InspectionElement> {
-  const inferedType: InspectionElement = {
+  const inferredType: InspectionElement = {
    type: InspectionType.ELEMENT,
  };

  const identifierName = extractIdentifierName(jsxElementNode.openingElement.name);
  if (identifierName != null) {
-    inferedType.identifier = identifierName;
+    inferredType.identifier = identifierName;
  }

  return {
-    inferedType,
+    inferredType,
    ast: jsxElementNode,
  };
 }
@ -169,14 +169,14 @@ function parseCall(callNode: estree.CallExpression): ParsingResult<InspectionObj

 function parseObject(objectNode: estree.ObjectExpression): ParsingResult<InspectionObject> {
  return {
-    inferedType: { type: InspectionType.OBJECT, depth: calculateNodeDepth(objectNode) },
+    inferredType: { type: InspectionType.OBJECT, depth: calculateNodeDepth(objectNode) },
    ast: objectNode,
  };
 }

 function parseArray(arrayNode: estree.ArrayExpression): ParsingResult<InspectionArray> {
  return {
-    inferedType: { type: InspectionType.ARRAY, depth: calculateNodeDepth(arrayNode) },
+    inferredType: { type: InspectionType.ARRAY, depth: calculateNodeDepth(arrayNode) },
    ast: arrayNode,
  };
 }
@ -210,7 +210,7 @@ export function parse(value: string): ParsingResult<InspectionInferedType> {
  const ast = (acornParser.parse(`(${value})`) as unknown) as estree.Program;

  let parsingResult: ParsingResult<InspectionUnknown> = {
-    inferedType: { type: InspectionType.UNKNOWN },
+    inferredType: { type: InspectionType.UNKNOWN },
    ast,
  };

--- a/addons/docs/src/frameworks/react/lib/inspection/inspectValue.ts
+++ b/addons/docs/src/frameworks/react/lib/inspection/inspectValue.ts
@ -10,5 +10,5 @@ export function inspectValue(value: string): InspectionResult {
    // do nothing.
  }

-  return { inferedType: { type: InspectionType.UNKNOWN } };
+  return { inferredType: { type: InspectionType.UNKNOWN } };
 }
--- a/addons/docs/src/frameworks/react/lib/inspection/types.ts
+++ b/addons/docs/src/frameworks/react/lib/inspection/types.ts
@ -60,6 +60,6 @@ export type InspectionIdentifiableInferedType =
  | InspectionElement;

 export interface InspectionResult {
-  inferedType: InspectionInferedType;
+  inferredType: InspectionInferedType;
  ast?: any;
 }
--- a/addons/docs/src/frameworks/react/propTypes/createType.ts
+++ b/addons/docs/src/frameworks/react/propTypes/createType.ts
@ -53,7 +53,7 @@ interface TypeDef {
  short: string;
  compact: string;
  full: string;
-  inferedType?: InspectionType;
+  inferredType?: InspectionType;
 }

 function createTypeDef({
@ -61,20 +61,20 @@ function createTypeDef({
  short,
  compact,
  full,
-  inferedType,
+  inferredType,
 }: {
  name: string;
  short: string;
  compact: string;
  full?: string;
-  inferedType?: InspectionType;
+  inferredType?: InspectionType;
 }): TypeDef {
  return {
    name,
    short,
    compact,
    full: full != null ? full : short,
-    inferedType,
+    inferredType,
  };
 }

@ -112,8 +112,8 @@ function getCaptionForInspectionType(type: InspectionType): string {
 }

 function generateTypeFromString(value: string, originalTypeName: string): TypeDef {
-  const { inferedType, ast } = inspectValue(value);
-  const { type } = inferedType;
+  const { inferredType, ast } = inspectValue(value);
+  const { type } = inferredType;

  let short;
  let compact;
@ -126,7 +126,7 @@ function generateTypeFromString(value: string, originalTypeName: string): TypeDe
      compact = value;
      break;
    case InspectionType.OBJECT: {
-      const { depth } = inferedType as InspectionObject;
+      const { depth } = inferredType as InspectionObject;

      short = OBJECT_CAPTION;
      compact = depth === 1 ? prettyObject(ast, true) : null;
@ -134,7 +134,7 @@ function generateTypeFromString(value: string, originalTypeName: string): TypeDe
      break;
    }
    case InspectionType.ELEMENT: {
-      const { identifier } = inferedType as InspectionElement;
+      const { identifier } = inferredType as InspectionElement;

      short = identifier != null && !isHtmlTag(identifier) ? identifier : ELEMENT_CAPTION;
      compact = splitIntoLines(value).length === 1 ? value : null;
@ -142,7 +142,7 @@ function generateTypeFromString(value: string, originalTypeName: string): TypeDe
      break;
    }
    case InspectionType.ARRAY: {
-      const { depth } = inferedType as InspectionArray;
+      const { depth } = inferredType as InspectionArray;

      short = ARRAY_CAPTION;
      compact = depth <= 2 ? prettyArray(ast, true) : null;
@ -161,7 +161,7 @@ function generateTypeFromString(value: string, originalTypeName: string): TypeDe
    short,
    compact,
    full,
-    inferedType: type,
+    inferredType: type,
  });
 }

@ -203,8 +203,8 @@ function generateShape(type: DocgenPropType, extractedProp: ExtractedProp): Type
    .map((key: string) => `${key}: ${generateType(type.value[key], extractedProp).full}`)
    .join(', ');

-  const { inferedType, ast } = inspectValue(`{ ${fields} }`);
-  const { depth } = inferedType as InspectionObject;
+  const { inferredType, ast } = inspectValue(`{ ${fields} }`);
+  const { depth } = inferredType as InspectionObject;

  return createTypeDef({
    name: PropTypesType.SHAPE,
@ -305,10 +305,10 @@ function createArrayOfObjectTypeDef(short: string, compact: string, full: string
 }

 function generateArray(type: DocgenPropType, extractedProp: ExtractedProp): TypeDef {
-  const { name, short, compact, full, inferedType } = generateType(type.value, extractedProp);
+  const { name, short, compact, full, inferredType } = generateType(type.value, extractedProp);

  if (name === PropTypesType.CUSTOM) {
-    if (inferedType === InspectionType.OBJECT) {
+    if (inferredType === InspectionType.OBJECT) {
      return createArrayOfObjectTypeDef(short, compact, full);
    }
  } else if (name === PropTypesType.SHAPE) {
@ -381,7 +381,7 @@ export function createType(extractedProp: ExtractedProp): PropType {
          }
        }

-        return createSummaryValue(short, short !== full ? full : undefined);
+        return createSummaryValue(short, full);
      }
      case PropTypesType.FUNC: {
        const { short, full } = generateType(type, extractedProp);
--- a/addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx
+++ b/addons/docs/src/frameworks/react/propTypes/handleProp.test.tsx
@ -145,7 +145,7 @@ describe('enhancePropTypesProp', () => {
            type: {
              name: 'custom',
              raw:
-                'function InlinedFunctionalComponent() {\n  return <div>Inlined FunctionnalComponent!</div>;\n}',
+                'function InlinedFunctionalComponent() {\n  return <div>Inlined FunctionalComponent!</div>;\n}',
            },
          });

@ -154,7 +154,7 @@ describe('enhancePropTypesProp', () => {
          expect(type.summary).toBe('InlinedFunctionalComponent');

          const expectedDetail = `function InlinedFunctionalComponent() {
-            return <div>Inlined FunctionnalComponent!</div>;
+            return <div>Inlined FunctionalComponent!</div>;
          }`;

          expect(type.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
@ -471,7 +471,7 @@ describe('enhancePropTypesProp', () => {
          name: 'enum',
          value: [
            {
-              value: '() => {\n  return <div>FunctionnalComponent!</div>;\n}',
+              value: '() => {\n  return <div>FunctionalComponent!</div>;\n}',
              computed: true,
            },
            {
@ -488,7 +488,7 @@ describe('enhancePropTypesProp', () => {
      expect(type.summary).toBe('element | ClassComponent');

      const expectedDetail = `() => {
-          return <div>FunctionnalComponent!</div>;
+          return <div>FunctionalComponent!</div>;
        } | class ClassComponent extends React.PureComponent {
          render() {
            return <div>ClassComponent!</div>;
@ -1108,7 +1108,7 @@ describe('enhancePropTypesProp', () => {
    it("should use the name of the React component when it's available", () => {
      const component = createTestComponent(
        createDefaultValue(
-          'function InlinedFunctionalComponent() {\n  return <div>Inlined FunctionnalComponent!</div>;\n}'
+          'function InlinedFunctionalComponent() {\n  return <div>Inlined FunctionalComponent!</div>;\n}'
        )
      );

@ -1117,7 +1117,7 @@ describe('enhancePropTypesProp', () => {
      expect(defaultValue.summary).toBe('<InlinedFunctionalComponent />');

      const expectedDetail = `function InlinedFunctionalComponent() {
-        return <div>Inlined FunctionnalComponent!</div>;
+        return <div>Inlined FunctionalComponent!</div>;
      }`;

      expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
@ -1352,7 +1352,7 @@ describe('enhancePropTypesProp', () => {
          const component = createTestComponent(null, x);

          const { defaultValue } = extractPropDef(component, () => {
-            return <div>Inlined FunctionnalComponent!</div>;
+            return <div>Inlined FunctionalComponent!</div>;
          });

          expect(defaultValue.summary).toBe('element');
@ -1374,7 +1374,7 @@ describe('enhancePropTypesProp', () => {
          const component = createTestComponent(null, x);

          const { defaultValue } = extractPropDef(component, function InlinedFunctionalComponent() {
-            return <div>Inlined FunctionnalComponent!</div>;
+            return <div>Inlined FunctionalComponent!</div>;
          });

          expect(defaultValue.summary).toBe('<InlinedFunctionalComponent />');
--- a/addons/docs/src/frameworks/react/propTypes/rawDefaultPropResolvers.ts
+++ b/addons/docs/src/frameworks/react/propTypes/rawDefaultPropResolvers.ts
@ -12,12 +12,13 @@ const funcResolver: TypeResolver = (rawDefaultProp, { name, type }) => {

  const funcName = extractFunctionName(rawDefaultProp, name);
  if (funcName != null) {
-    // Try to display the name of the component. The body of the component is ommited since the code has been transpiled.
+    // Try to display the name of the component. The body of the component is omitted since the code has been transpiled.
    if (isElement) {
      return createSummaryValue(getPrettyElementIdentifier(funcName));
    }

-    const { hasParams } = inspectValue(rawDefaultProp.toString()).inferedType as InspectionFunction;
+    const { hasParams } = inspectValue(rawDefaultProp.toString())
+      .inferredType as InspectionFunction;

    return createSummaryValue(getPrettyFuncIdentifier(funcName, hasParams));
  }
--- a/addons/docs/src/frameworks/react/typeScript/handleProp.test.tsx
+++ b/addons/docs/src/frameworks/react/typeScript/handleProp.test.tsx
@ -213,7 +213,7 @@ describe('enhanceTypeScriptProp', () => {
    it("should use the name of the React component when it's available", () => {
      const component = createTestComponent(
        createDefaultValue(
-          'function InlinedFunctionalComponent() {\n  return <div>Inlined FunctionnalComponent!</div>;\n}'
+          'function InlinedFunctionalComponent() {\n  return <div>Inlined FunctionalComponent!</div>;\n}'
        )
      );

@ -222,7 +222,7 @@ describe('enhanceTypeScriptProp', () => {
      expect(defaultValue.summary).toBe('<InlinedFunctionalComponent />');

      const expectedDetail = `function InlinedFunctionalComponent() {
-        return <div>Inlined FunctionnalComponent!</div>;
+        return <div>Inlined FunctionalComponent!</div>;
      }`;

      expect(defaultValue.detail.replace(/\s/g, '')).toBe(expectedDetail.replace(/\s/g, ''));
@ -457,7 +457,7 @@ describe('enhanceTypeScriptProp', () => {
          const component = createTestComponent(null, x);

          const { defaultValue } = extractPropDef(component, () => {
-            return <div>Inlined FunctionnalComponent!</div>;
+            return <div>Inlined FunctionalComponent!</div>;
          });

          expect(defaultValue.summary).toBe('element');
@ -479,7 +479,7 @@ describe('enhanceTypeScriptProp', () => {
          const component = createTestComponent(null, x);

          const { defaultValue } = extractPropDef(component, function InlinedFunctionalComponent() {
-            return <div>Inlined FunctionnalComponent!</div>;
+            return <div>Inlined FunctionalComponent!</div>;
          });

          expect(defaultValue.summary).toBe('<InlinedFunctionalComponent />');
--- a/addons/docs/src/frameworks/web-components/testfixtures/lit-element-demo-card/custom-elements.snapshot
+++ b/addons/docs/src/frameworks/web-components/testfixtures/lit-element-demo-card/custom-elements.snapshot
@ -24,6 +24,16 @@ Object {
          "type": "object",
        },
      ],
+      "cssParts": Array [
+        Object {
+          "description": "Front of the card",
+          "name": "front",
+        },
+        Object {
+          "description": "Back of the card",
+          "name": "back",
+        },
+      ],
      "cssProperties": Array [
        Object {
          "description": "Header font size",
--- a/addons/docs/src/frameworks/web-components/testfixtures/lit-element-demo-card/input.js
+++ b/addons/docs/src/frameworks/web-components/testfixtures/lit-element-demo-card/input.js
@ -105,6 +105,8 @@ const demoWcCardStyle = css`
 * @cssprop --demo-wc-card-header-font-size - Header font size
 * @cssprop --demo-wc-card-front-color - Font color for front
 * @cssprop --demo-wc-card-back-color - Font color for back
+ * @csspart front - Front of the card
+ * @csspart back - Back of the card
 */
 export class DemoWcCard extends LitElement {
  static get properties() {
@ -148,7 +150,7 @@ export class DemoWcCard extends LitElement {

  render() {
    return html`
-      <div id="front">
+      <div id="front" part="front">
        <div class="header">
          ${this.header}
        </div>
@ -160,7 +162,7 @@ export class DemoWcCard extends LitElement {
          <button @click=${this.toggle}>></button>
        </div>
      </div>
-      <div id="back">
+      <div id="back" part="back">
        <div class="header">
          ${this.header}
        </div>
--- a/addons/docs/src/frameworks/web-components/testfixtures/lit-element-demo-card/properties.snapshot
+++ b/addons/docs/src/frameworks/web-components/testfixtures/lit-element-demo-card/properties.snapshot
@ -24,7 +24,7 @@ Object {
    "name": "--demo-wc-card-back-color",
    "required": false,
    "table": Object {
-      "category": "css",
+      "category": "css custom properties",
      "defaultValue": Object {
        "summary": undefined,
      },
@ -41,7 +41,7 @@ Object {
    "name": "--demo-wc-card-front-color",
    "required": false,
    "table": Object {
-      "category": "css",
+      "category": "css custom properties",
      "defaultValue": Object {
        "summary": undefined,
      },
@ -58,7 +58,24 @@ Object {
    "name": "--demo-wc-card-header-font-size",
    "required": false,
    "table": Object {
-      "category": "css",
+      "category": "css custom properties",
+      "defaultValue": Object {
+        "summary": undefined,
+      },
+      "type": Object {
+        "summary": undefined,
+      },
+    },
+    "type": Object {
+      "name": "void",
+    },
+  },
+  "back": Object {
+    "description": "Back of the card",
+    "name": "back",
+    "required": false,
+    "table": Object {
+      "category": "css shadow parts",
      "defaultValue": Object {
        "summary": undefined,
      },
@ -104,6 +121,23 @@ Object {
      "name": "boolean",
    },
  },
+  "front": Object {
+    "description": "Front of the card",
+    "name": "front",
+    "required": false,
+    "table": Object {
+      "category": "css shadow parts",
+      "defaultValue": Object {
+        "summary": undefined,
+      },
+      "type": Object {
+        "summary": undefined,
+      },
+    },
+    "type": Object {
+      "name": "void",
+    },
+  },
  "header": Object {
    "description": "Header message",
    "name": "header",
--- a/addons/docs/src/frameworks/web-components/custom-elements.ts
+++ b/addons/docs/src/frameworks/web-components/custom-elements.ts
@ -20,6 +20,7 @@ interface Tag {
  methods?: TagItem[];
  slots?: TagItem[];
  cssProperties?: TagItem[];
+  cssParts?: TagItem[];
 }

 interface CustomElements {
@ -31,7 +32,8 @@ interface Sections {
  properties?: any;
  events?: any;
  slots?: any;
-  css?: any;
+  cssCustomProperties?: any;
+  cssShadowParts?: any;
 }

 function mapData(data: TagItem[], category: string) {
@ -77,7 +79,8 @@ export const extractArgTypesFromElements = (tagName: string, customElements: Cus
      ...mapData(metaData.events, 'events'),
      ...mapData(metaData.methods, 'methods'),
      ...mapData(metaData.slots, 'slots'),
-      ...mapData(metaData.cssProperties, 'css'),
+      ...mapData(metaData.cssProperties, 'css custom properties'),
+      ...mapData(metaData.cssParts, 'css shadow parts'),
    }
  );
 };
--- a/addons/docs/src/lib/convert/flow/convert.ts
+++ b/addons/docs/src/lib/convert/flow/convert.ts
@ -0,0 +1,55 @@
+/* eslint-disable no-case-declarations */
+import { SBType } from '@storybook/client-api';
+import { FlowType, FlowSigType, FlowLiteralType } from './types';
+
+const isLiteral = (type: FlowType) => type.name === 'literal';
+const toEnumOption = (element: FlowLiteralType) => element.value.replace(/['|"]/g, '');
+
+const convertSig = (type: FlowSigType) => {
+  switch (type.type) {
+    case 'function':
+      return { name: 'function' };
+    case 'object':
+      const values: any = {};
+      type.signature.properties.forEach((prop) => {
+        values[prop.key] = convert(prop.value);
+      });
+      return {
+        name: 'object',
+        value: values,
+      };
+    default:
+      throw new Error(`Unknown: ${type}`);
+  }
+};
+
+export const convert = (type: FlowType): SBType | void => {
+  const { name, raw } = type;
+  const base: any = {};
+  if (typeof raw !== 'undefined') base.raw = raw;
+  switch (type.name) {
+    case 'literal':
+      return { ...base, name: 'other', value: type.value };
+    case 'string':
+    case 'number':
+    case 'symbol':
+    case 'boolean': {
+      return { ...base, name };
+    }
+    case 'Array': {
+      return { ...base, name: 'array', value: type.elements.map(convert) };
+    }
+    case 'signature':
+      return { ...base, ...convertSig(type) };
+    case 'union':
+      if (type.elements.every(isLiteral)) {
+        return { ...base, name: 'enum', value: type.elements.map(toEnumOption) };
+      }
+      return { ...base, name, value: type.elements.map(convert) };
+
+    case 'intersection':
+      return { ...base, name, value: type.elements.map(convert) };
+    default:
+      return { ...base, name: 'other', value: name };
+  }
+};
--- a/addons/docs/src/lib/convert/flow/index.ts
+++ b/addons/docs/src/lib/convert/flow/index.ts
@ -0,0 +1,2 @@
+export * from './convert';
+export * from './types';
--- a/addons/docs/src/lib/convert/flow/types.ts
+++ b/addons/docs/src/lib/convert/flow/types.ts
@ -0,0 +1,56 @@
+interface FlowBaseType {
+  name: string;
+  type?: string;
+  raw?: string;
+  required?: boolean;
+}
+
+type FlowArgType = FlowType;
+
+type FlowCombinationType = FlowBaseType & {
+  name: 'union' | 'intersection';
+  elements: FlowType[];
+};
+
+type FlowFuncSigType = FlowBaseType & {
+  name: 'signature';
+  type: 'function';
+  signature: {
+    arguments: FlowArgType[];
+    return: FlowType;
+  };
+};
+
+type FlowObjectSigType = FlowBaseType & {
+  name: 'signature';
+  type: 'object';
+  signature: {
+    properties: {
+      key: string;
+      value: FlowType;
+    }[];
+  };
+};
+
+type FlowScalarType = FlowBaseType & {
+  name: 'any' | 'boolean' | 'number' | 'void' | 'string' | 'symbol';
+};
+
+export type FlowLiteralType = FlowBaseType & {
+  name: 'literal';
+  value: string;
+};
+
+type FlowArrayType = FlowBaseType & {
+  name: 'Array';
+  elements: FlowType[];
+};
+
+export type FlowSigType = FlowObjectSigType | FlowFuncSigType;
+
+export type FlowType =
+  | FlowScalarType
+  | FlowLiteralType
+  | FlowCombinationType
+  | FlowSigType
+  | FlowArrayType;
--- a/addons/docs/src/lib/convert/index.ts
+++ b/addons/docs/src/lib/convert/index.ts
@ -1,11 +1,13 @@
 import { DocgenInfo } from '../docgen/types';
 import { convert as tsConvert, TSType } from './typescript';
+import { convert as flowConvert, FlowType } from './flow';
 import { convert as propTypesConvert } from './proptypes';

 export const convert = (docgenInfo: DocgenInfo) => {
-  const { type, tsType } = docgenInfo;
+  const { type, tsType, flowType } = docgenInfo;
  if (type != null) return propTypesConvert(type);
  if (tsType != null) return tsConvert(tsType as TSType);
+  if (flowType != null) return flowConvert(flowType as FlowType);

  return null;
 };
--- a/addons/docs/src/lib/docgen/flow/createPropDef.test.ts
+++ b/addons/docs/src/lib/docgen/flow/createPropDef.test.ts
@ -317,6 +317,32 @@ describe('type', () => {
    expect(type.summary).toBe('"minimum" | "maximum" | UserSize');
  });

+  it('removes a leading | if raw union value is used', () => {
+    const docgenInfo = createDocgenInfo({
+      flowType: {
+        name: 'union',
+        raw: '| "minimum" | "maximum" | UserSize',
+      },
+    });
+
+    const { type } = createFlowPropDef(PROP_NAME, docgenInfo);
+
+    expect(type.summary).toBe('"minimum" | "maximum" | UserSize');
+  });
+
+  it('even removes extra spaces after a leading | if raw union value is used', () => {
+    const docgenInfo = createDocgenInfo({
+      flowType: {
+        name: 'union',
+        raw: '|     "minimum" | "maximum" | UserSize',
+      },
+    });
+
+    const { type } = createFlowPropDef(PROP_NAME, docgenInfo);
+
+    expect(type.summary).toBe('"minimum" | "maximum" | UserSize');
+  });
+
  it('should support intersection', () => {
    const docgenInfo = createDocgenInfo({
      flowType: {
--- a/addons/docs/src/lib/docgen/flow/createType.ts
+++ b/addons/docs/src/lib/docgen/flow/createType.ts
@ -40,7 +40,8 @@ function generateUnion({ name, raw, elements }: DocgenFlowUnionType): PropType {
  }

  if (raw != null) {
-    return createSummaryValue(raw);
+    // Flow Unions can be defined with or without a leading `|` character, so try to remove it.
+    return createSummaryValue(raw.replace(/^\|\s*/, ''));
  }

  return createSummaryValue(name);
--- a/addons/docs/src/lib/utils.test.ts
+++ b/addons/docs/src/lib/utils.test.ts
@ -0,0 +1,20 @@
+import { createSummaryValue } from './utils';
+
+describe('createSummaryValue', () => {
+  it('creates an object with just summary if detail is not passed', () => {
+    const summary = 'boolean';
+    expect(createSummaryValue(summary)).toEqual({ summary });
+  });
+
+  it('creates an object with summary & detail if passed', () => {
+    const summary = 'MyType';
+    const detail = 'boolean | string';
+    expect(createSummaryValue(summary, detail)).toEqual({ summary, detail });
+  });
+
+  it('creates an object with just summary if details are equal', () => {
+    const summary = 'boolean';
+    const detail = 'boolean';
+    expect(createSummaryValue(summary, detail)).toEqual({ summary });
+  });
+});
--- a/addons/docs/src/lib/utils.ts
+++ b/addons/docs/src/lib/utils.ts
@ -12,6 +12,9 @@ export function isTooLongForDefaultValueSummary(value: string): boolean {
 }

 export function createSummaryValue(summary: string, detail?: string): PropSummaryValue {
+  if (summary === detail) {
+    return { summary };
+  }
  return { summary, detail };
 }

--- a/addons/docs/src/mdx/testfixtures/previews.mdx
+++ b/addons/docs/src/mdx/testfixtures/previews.mdx
@ -18,7 +18,7 @@ Canvases can contain normal components, stories, and story references
  <Story id="welcome--welcome" />
 </Canvas>

-Canvas wthout a story
+Canvas without a story

 <Canvas>
  <Button>Just a button</Button>
--- a/addons/docs/src/mdx/testfixtures/previews.output.snapshot
+++ b/addons/docs/src/mdx/testfixtures/previews.output.snapshot
@ -42,7 +42,7 @@ function MDXContent({ components, ...props }) {
        </Story>
        <Story id=\\"welcome--welcome\\" mdxType=\\"Story\\" />
      </Canvas>
-      <p>{\`Canvas wthout a story\`}</p>
+      <p>{\`Canvas without a story\`}</p>
      <Canvas mdxSource=\\"%0A%3CButton%3EJust%20a%20button%3C/Button%3E%0A\\" mdxType=\\"Canvas\\">
        <Button mdxType=\\"Button\\">Just a button</Button>
      </Canvas>
--- a/addons/docs/src/mdx/mdx-compiler-plugin.js
+++ b/addons/docs/src/mdx/mdx-compiler-plugin.js
@ -140,7 +140,7 @@ function genStoryExport(ast, context) {
    storyCode = bodyParts.map(({ storyCode: code }) => code).join('\n');
    sourceCode = bodyParts.map(({ sourceCode: code }) => code).join('\n');
    const storyReactCode = bodyParts.length > 1 ? `<>\n${storyCode}\n</>` : storyCode;
-    // keep track if an indentifier or function call
+    // keep track if an identifier or function call
    // avoid breaking change for 5.3
    const BIND_REGEX = /\.bind\(.*\)/;
    if (bodyParts.length === 1 && BIND_REGEX.test(bodyParts[0].storyCode)) {
--- a/addons/essentials/package.json
+++ b/addons/essentials/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-essentials",
-  "version": "6.1.0-alpha.10",
+  "version": "6.1.0-alpha.20",
  "description": "Curated addons to bring out the best of Storybook",
  "keywords": [
    "addon",
@ -22,21 +22,21 @@
  "files": [
    "dist/**/*",
    "README.md",
-    "ts3.5/**/*"
+    "ts3.4/**/*"
  ],
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addon-actions": "6.1.0-alpha.10",
-    "@storybook/addon-backgrounds": "6.1.0-alpha.10",
-    "@storybook/addon-controls": "6.1.0-alpha.10",
-    "@storybook/addon-docs": "6.1.0-alpha.10",
-    "@storybook/addon-toolbars": "6.1.0-alpha.10",
-    "@storybook/addon-viewport": "6.1.0-alpha.10",
-    "@storybook/addons": "6.1.0-alpha.10",
-    "@storybook/api": "6.1.0-alpha.10",
-    "@storybook/node-logger": "6.1.0-alpha.10",
+    "@storybook/addon-actions": "6.1.0-alpha.20",
+    "@storybook/addon-backgrounds": "6.1.0-alpha.20",
+    "@storybook/addon-controls": "6.1.0-alpha.20",
+    "@storybook/addon-docs": "6.1.0-alpha.20",
+    "@storybook/addon-toolbars": "6.1.0-alpha.20",
+    "@storybook/addon-viewport": "6.1.0-alpha.20",
+    "@storybook/addons": "6.1.0-alpha.20",
+    "@storybook/api": "6.1.0-alpha.20",
+    "@storybook/node-logger": "6.1.0-alpha.20",
    "core-js": "^3.0.1",
    "react": "^16.8.3",
    "react-dom": "^16.8.3",
@ -46,13 +46,13 @@
  },
  "devDependencies": {
    "@babel/core": "^7.9.6",
-    "@storybook/vue": "6.1.0-alpha.10",
+    "@storybook/vue": "6.1.0-alpha.20",
    "@types/jest": "^25.1.1",
    "@types/webpack-env": "^1.15.2"
  },
  "peerDependencies": {
    "@babel/core": "^7.9.6",
-    "@storybook/vue": "6.1.0-alpha.10",
+    "@storybook/vue": "6.1.0-alpha.20",
    "babel-loader": "^8.0.0",
    "webpack": ">=4"
  },
@ -67,11 +67,11 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "57798a108e183d97f94fd4cc396e45e1d4b04d23",
+  "gitHead": "cc1c152e5452d28eabb24330f4ed693cd6782bc1",
  "typesVersions": {
-    "<=3.5": {
+    "<3.8": {
      "*": [
-        "ts3.5/*"
+        "ts3.4/*"
      ]
    }
  }
--- a/addons/essentials/src/index.ts
+++ b/addons/essentials/src/index.ts
@ -34,7 +34,7 @@ export function addons(options: PresetOptions = {}) {

  const main = requireMain(options.configDir);
  return (
-    ['actions', 'docs', 'controls', 'backgrounds', 'viewport', 'toolbars']
+    ['docs', 'controls', 'actions', 'backgrounds', 'viewport', 'toolbars']
      .filter((key) => (options as any)[key] !== false)
      .map((key) => `@storybook/addon-${key}`)
      .filter((addon) => !checkInstalled(addon, main))
--- a/addons/events/package.json
+++ b/addons/events/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-events",
-  "version": "6.1.0-alpha.10",
+  "version": "6.1.0-alpha.20",
  "description": "Add events to your Storybook stories.",
  "keywords": [
    "addon",
@ -25,17 +25,17 @@
    "README.md",
    "*.js",
    "*.d.ts",
-    "ts3.5/**/*"
+    "ts3.4/**/*"
  ],
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.1.0-alpha.10",
-    "@storybook/api": "6.1.0-alpha.10",
-    "@storybook/client-api": "6.1.0-alpha.10",
-    "@storybook/core-events": "6.1.0-alpha.10",
-    "@storybook/theming": "6.1.0-alpha.10",
+    "@storybook/addons": "6.1.0-alpha.20",
+    "@storybook/api": "6.1.0-alpha.20",
+    "@storybook/client-api": "6.1.0-alpha.20",
+    "@storybook/core-events": "6.1.0-alpha.20",
+    "@storybook/theming": "6.1.0-alpha.20",
    "core-js": "^3.0.1",
    "format-json": "^1.0.3",
    "lodash": "^4.17.15",
@ -52,11 +52,11 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "57798a108e183d97f94fd4cc396e45e1d4b04d23",
+  "gitHead": "cc1c152e5452d28eabb24330f4ed693cd6782bc1",
  "typesVersions": {
-    "<=3.5": {
+    "<3.8": {
      "*": [
-        "ts3.5/*"
+        "ts3.4/*"
      ]
    }
  }
--- a/addons/google-analytics/package.json
+++ b/addons/google-analytics/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-google-analytics",
-  "version": "6.1.0-alpha.10",
+  "version": "6.1.0-alpha.20",
  "description": "Storybook addon for google analytics",
  "keywords": [
    "addon",
@ -20,8 +20,8 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.1.0-alpha.10",
-    "@storybook/core-events": "6.1.0-alpha.10",
+    "@storybook/addons": "6.1.0-alpha.20",
+    "@storybook/core-events": "6.1.0-alpha.20",
    "core-js": "^3.0.1",
    "global": "^4.3.2",
    "react": "^16.8.3",
@ -32,5 +32,5 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "57798a108e183d97f94fd4cc396e45e1d4b04d23"
+  "gitHead": "cc1c152e5452d28eabb24330f4ed693cd6782bc1"
 }
--- a/addons/graphql/package.json
+++ b/addons/graphql/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-graphql",
-  "version": "6.1.0-alpha.10",
+  "version": "6.1.0-alpha.20",
  "description": "Storybook addon to display the GraphiQL IDE",
  "keywords": [
    "addon",
@ -23,16 +23,16 @@
    "README.md",
    "*.js",
    "*.d.ts",
-    "ts3.5/**/*"
+    "ts3.4/**/*"
  ],
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@babel/core": "^7.9.0",
-    "@babel/plugin-transform-classes": "^7.9.2",
-    "@storybook/addons": "6.1.0-alpha.10",
-    "@storybook/api": "6.1.0-alpha.10",
+    "@babel/core": "^7.11.5",
+    "@babel/plugin-transform-classes": "^7.10.4",
+    "@storybook/addons": "6.1.0-alpha.20",
+    "@storybook/api": "6.1.0-alpha.20",
    "@types/webpack": "^4.41.9",
    "babel-loader": "^8.0.6",
    "core-js": "^3.0.1",
@ -48,11 +48,11 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "57798a108e183d97f94fd4cc396e45e1d4b04d23",
+  "gitHead": "cc1c152e5452d28eabb24330f4ed693cd6782bc1",
  "typesVersions": {
-    "<=3.5": {
+    "<3.8": {
      "*": [
-        "ts3.5/*"
+        "ts3.4/*"
      ]
    }
  }
--- a/addons/jest/README.md
+++ b/addons/jest/README.md
@ -152,7 +152,7 @@ defaultView.parameters = {

 ## Usage with Angular

-Assuming that you have created test files `my.component.spec.ts` and `my-other.comonent.spec.ts`
+Assuming that you have created test files `my.component.spec.ts` and `my-other.component.spec.ts`

 Configure Jest with [jest-preset-angular](https://www.npmjs.com/package/jest-preset-angular)

--- a/addons/jest/package.json
+++ b/addons/jest/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-jest",
-  "version": "6.1.0-alpha.10",
+  "version": "6.1.0-alpha.20",
  "description": "React storybook addon that show component jest report",
  "keywords": [
    "addon",
@ -29,17 +29,17 @@
    "README.md",
    "*.js",
    "*.d.ts",
-    "ts3.5/**/*"
+    "ts3.4/**/*"
  ],
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.1.0-alpha.10",
-    "@storybook/api": "6.1.0-alpha.10",
-    "@storybook/components": "6.1.0-alpha.10",
-    "@storybook/core-events": "6.1.0-alpha.10",
-    "@storybook/theming": "6.1.0-alpha.10",
+    "@storybook/addons": "6.1.0-alpha.20",
+    "@storybook/api": "6.1.0-alpha.20",
+    "@storybook/components": "6.1.0-alpha.20",
+    "@storybook/core-events": "6.1.0-alpha.20",
+    "@storybook/theming": "6.1.0-alpha.20",
    "core-js": "^3.0.1",
    "global": "^4.3.2",
    "react": "^16.8.3",
@ -54,11 +54,11 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "57798a108e183d97f94fd4cc396e45e1d4b04d23",
+  "gitHead": "cc1c152e5452d28eabb24330f4ed693cd6782bc1",
  "typesVersions": {
-    "<=3.5": {
+    "<3.8": {
      "*": [
-        "ts3.5/*"
+        "ts3.4/*"
      ]
    }
  }
--- a/addons/knobs/package.json
+++ b/addons/knobs/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-knobs",
-  "version": "6.1.0-alpha.10",
+  "version": "6.1.0-alpha.20",
  "description": "Storybook Addon Prop Editor Component",
  "keywords": [
    "addon",
@ -23,19 +23,19 @@
    "README.md",
    "*.js",
    "*.d.ts",
-    "ts3.5/**/*"
+    "ts3.4/**/*"
  ],
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.1.0-alpha.10",
-    "@storybook/api": "6.1.0-alpha.10",
-    "@storybook/channels": "6.1.0-alpha.10",
-    "@storybook/client-api": "6.1.0-alpha.10",
-    "@storybook/components": "6.1.0-alpha.10",
-    "@storybook/core-events": "6.1.0-alpha.10",
-    "@storybook/theming": "6.1.0-alpha.10",
+    "@storybook/addons": "6.1.0-alpha.20",
+    "@storybook/api": "6.1.0-alpha.20",
+    "@storybook/channels": "6.1.0-alpha.20",
+    "@storybook/client-api": "6.1.0-alpha.20",
+    "@storybook/components": "6.1.0-alpha.20",
+    "@storybook/core-events": "6.1.0-alpha.20",
+    "@storybook/theming": "6.1.0-alpha.20",
    "copy-to-clipboard": "^3.0.8",
    "core-js": "^3.0.1",
    "escape-html": "^1.0.3",
@ -63,11 +63,11 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "57798a108e183d97f94fd4cc396e45e1d4b04d23",
+  "gitHead": "cc1c152e5452d28eabb24330f4ed693cd6782bc1",
  "typesVersions": {
-    "<=3.5": {
+    "<3.8": {
      "*": [
-        "ts3.5/*"
+        "ts3.4/*"
      ]
    }
  }
--- a/addons/links/package.json
+++ b/addons/links/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-links",
-  "version": "6.1.0-alpha.10",
+  "version": "6.1.0-alpha.20",
  "description": "Story Links addon for storybook",
  "keywords": [
    "addon",
@ -23,17 +23,17 @@
    "README.md",
    "*.js",
    "*.d.ts",
-    "ts3.5/**/*"
+    "ts3.4/**/*"
  ],
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.1.0-alpha.10",
-    "@storybook/client-logger": "6.1.0-alpha.10",
-    "@storybook/core-events": "6.1.0-alpha.10",
+    "@storybook/addons": "6.1.0-alpha.20",
+    "@storybook/client-logger": "6.1.0-alpha.20",
+    "@storybook/core-events": "6.1.0-alpha.20",
    "@storybook/csf": "0.0.1",
-    "@storybook/router": "6.1.0-alpha.10",
+    "@storybook/router": "6.1.0-alpha.20",
    "@types/qs": "^6.9.0",
    "core-js": "^3.0.1",
    "global": "^4.3.2",
@ -51,11 +51,11 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "57798a108e183d97f94fd4cc396e45e1d4b04d23",
+  "gitHead": "cc1c152e5452d28eabb24330f4ed693cd6782bc1",
  "typesVersions": {
-    "<=3.5": {
+    "<3.8": {
      "*": [
-        "ts3.5/*"
+        "ts3.4/*"
      ]
    }
  }
--- a/addons/queryparams/package.json
+++ b/addons/queryparams/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-queryparams",
-  "version": "6.1.0-alpha.10",
+  "version": "6.1.0-alpha.20",
  "description": "parameter addon for storybook",
  "keywords": [
    "addon",
@ -24,18 +24,18 @@
    "README.md",
    "*.js",
    "*.d.ts",
-    "ts3.5/**/*"
+    "ts3.4/**/*"
  ],
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.1.0-alpha.10",
-    "@storybook/api": "6.1.0-alpha.10",
-    "@storybook/client-logger": "6.1.0-alpha.10",
-    "@storybook/components": "6.1.0-alpha.10",
-    "@storybook/core-events": "6.1.0-alpha.10",
-    "@storybook/theming": "6.1.0-alpha.10",
+    "@storybook/addons": "6.1.0-alpha.20",
+    "@storybook/api": "6.1.0-alpha.20",
+    "@storybook/client-logger": "6.1.0-alpha.20",
+    "@storybook/components": "6.1.0-alpha.20",
+    "@storybook/core-events": "6.1.0-alpha.20",
+    "@storybook/theming": "6.1.0-alpha.20",
    "core-js": "^3.0.1",
    "global": "^4.3.2",
    "qs": "^6.6.0",
@ -50,11 +50,11 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "57798a108e183d97f94fd4cc396e45e1d4b04d23",
+  "gitHead": "cc1c152e5452d28eabb24330f4ed693cd6782bc1",
  "typesVersions": {
-    "<=3.5": {
+    "<3.8": {
      "*": [
-        "ts3.5/*"
+        "ts3.4/*"
      ]
    }
  }
--- a/addons/storyshots/storyshots-core/README.md
+++ b/addons/storyshots/storyshots-core/README.md
@ -445,7 +445,7 @@ initStoryshots({
 });
 ```

-Or, as a more complex example, if we have a package in our `lerna` project called `app` with the path `./packages/app/src/__tests__/storsyhots.js` and the storybook config directory `./packages/app/.storybook`:
+Or, as a more complex example, if we have a package in our `lerna` project called `app` with the path `./packages/app/src/__tests__/storyshots.js` and the storybook config directory `./packages/app/.storybook`:

 ```js
 import path from 'path';
--- a/addons/storyshots/storyshots-core/package.json
+++ b/addons/storyshots/storyshots-core/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-storyshots",
-  "version": "6.1.0-alpha.10",
+  "version": "6.1.0-alpha.20",
  "description": "StoryShots is a Jest Snapshot Testing Addon for Storybook.",
  "keywords": [
    "addon",
@ -23,7 +23,7 @@
    "README.md",
    "*.js",
    "*.d.ts",
-    "ts3.5/**/*"
+    "ts3.4/**/*"
  ],
  "scripts": {
    "build-storybook": "build-storybook",
@ -33,9 +33,9 @@
  },
  "dependencies": {
    "@jest/transform": "^26.0.0",
-    "@storybook/addons": "6.1.0-alpha.10",
-    "@storybook/client-api": "6.1.0-alpha.10",
-    "@storybook/core": "6.1.0-alpha.10",
+    "@storybook/addons": "6.1.0-alpha.20",
+    "@storybook/client-api": "6.1.0-alpha.20",
+    "@storybook/core": "6.1.0-alpha.20",
    "@types/glob": "^7.1.1",
    "@types/jest": "^25.1.1",
    "@types/jest-specific-snapshot": "^0.5.3",
@ -53,21 +53,35 @@
    "ts-dedent": "^1.1.1"
  },
  "devDependencies": {
-    "@storybook/addon-docs": "6.1.0-alpha.10",
-    "@storybook/react": "6.1.0-alpha.10",
+    "@storybook/addon-docs": "6.1.0-alpha.20",
+    "@storybook/react": "6.1.0-alpha.20",
    "babel-loader": "^8.0.6",
    "enzyme": "^3.11.0",
    "enzyme-to-json": "^3.4.1",
-    "jest-emotion": "^10.0.17"
+    "jest-emotion": "^10.0.17",
+    "jest-preset-angular": "^8.2.0",
+    "jest-vue-preprocessor": "^1.5.0"
+  },
+  "peerDependencies": {
+    "jest-preset-angular": "*",
+    "jest-vue-preprocessor": "*"
+  },
+  "peerDependenciesMeta": {
+    "jest-preset-angular": {
+      "optional": true
+    },
+    "jest-vue-preprocessor": {
+      "optional": true
+    }
  },
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "57798a108e183d97f94fd4cc396e45e1d4b04d23",
+  "gitHead": "cc1c152e5452d28eabb24330f4ed693cd6782bc1",
  "typesVersions": {
-    "<=3.5": {
+    "<3.8": {
      "*": [
-        "ts3.5/*"
+        "ts3.4/*"
      ]
    }
  }
--- a/addons/storyshots/storyshots-core/src/api/StoryshotsOptions.ts
+++ b/addons/storyshots/storyshots-core/src/api/StoryshotsOptions.ts
@ -3,6 +3,24 @@ import { Stories2SnapsConverter } from '../Stories2SnapsConverter';
 import { SupportedFramework } from '../frameworks';
 import { RenderTree } from '../frameworks/Loader';

+export interface TestMethodOptions {
+  story: any;
+  context: any;
+  renderTree: RenderTree;
+  renderShallowTree: RenderTree;
+  stories2snapsConverter: Stories2SnapsConverter;
+  snapshotFileName: string;
+  options: any;
+}
+
+export interface StoryshotsTestMethod {
+  (args: TestMethodOptions): any;
+  beforeAll?: () => void | Promise<void>;
+  beforeEach?: () => void | Promise<void>;
+  afterAll?: () => void | Promise<void>;
+  afterEach?: () => void | Promise<void>;
+}
+
 export interface StoryshotsOptions {
  asyncJest?: boolean;
  config?: (options: any) => void;
@ -12,7 +30,7 @@ export interface StoryshotsOptions {
  storyKindRegex?: RegExp | string;
  storyNameRegex?: RegExp | string;
  framework?: SupportedFramework;
-  test?: (story: any, context: any, renderTree: RenderTree, options?: any) => any;
+  test?: StoryshotsTestMethod;
  renderer?: Function;
  snapshotSerializers?: jest.SnapshotSerializerPlugin[];
  /**
--- a/addons/storyshots/storyshots-core/src/api/snapshotsTestsTemplate.ts
+++ b/addons/storyshots/storyshots-core/src/api/snapshotsTestsTemplate.ts
@ -11,9 +11,9 @@ function snapshotTest({ item, asyncJest, framework, testMethod, testMethodParams
    it(
      name,
      () =>
-        new Promise((done) =>
+        new Promise((resolve, reject) =>
          testMethod({
-            done,
+            done: (error: any) => (error ? reject(error) : resolve()),
            story: item,
            context,
            ...testMethodParams,
--- a/addons/storyshots/storyshots-core/src/frameworks/angular/renderTree.ts
+++ b/addons/storyshots/storyshots-core/src/frameworks/angular/renderTree.ts
@ -1,6 +1,4 @@
-// eslint-disable-next-line import/no-extraneous-dependencies
 import AngularSnapshotSerializer from 'jest-preset-angular/build/AngularSnapshotSerializer';
-// eslint-disable-next-line import/no-extraneous-dependencies
 import HTMLCommentSerializer from 'jest-preset-angular/build/HTMLCommentSerializer';
 // eslint-disable-next-line import/no-extraneous-dependencies
 import { TestBed } from '@angular/core/testing';
--- a/addons/storyshots/storyshots-core/src/frameworks/web-components/loader.ts
+++ b/addons/storyshots/storyshots-core/src/frameworks/web-components/loader.ts
@ -24,9 +24,9 @@ function load(options: StoryshotsOptions) {
  };
 }

-const webComponentsoader: Loader = {
+const webComponentsLoader: Loader = {
  load,
  test,
 };

-export default webComponentsoader;
+export default webComponentsLoader;
--- a/addons/storyshots/storyshots-core/src/test-bodies.ts
+++ b/addons/storyshots/storyshots-core/src/test-bodies.ts
@ -1,105 +1,77 @@
 import 'jest-specific-snapshot';
-import { RenderTree } from './frameworks/Loader';
-import { Stories2SnapsConverter } from './Stories2SnapsConverter';
+import { StoryshotsTestMethod, TestMethodOptions } from './api/StoryshotsOptions';

 const isFunction = (obj: any) => !!(obj && obj.constructor && obj.call && obj.apply);
 const optionsOrCallOptions = (opts: any, story: any) => (isFunction(opts) ? opts(story) : opts);

-export const snapshotWithOptions = (
+type SnapshotsWithOptionsReturnType = (
+  options: Pick<TestMethodOptions, 'story' | 'context' | 'renderTree' | 'snapshotFileName'>
+) => any;
+
+export function snapshotWithOptions(
  options: { renderer?: any; serializer?: any } | Function = {}
-) => ({
-  story,
-  context,
-  renderTree,
-  snapshotFileName,
-}: {
-  story: any;
-  context: any;
-  renderTree: RenderTree;
-  snapshotFileName: string;
-}): Promise<void> | void => {
-  const result = renderTree(story, context, optionsOrCallOptions(options, story));
+): SnapshotsWithOptionsReturnType {
+  return ({ story, context, renderTree, snapshotFileName }) => {
+    const result = renderTree(story, context, optionsOrCallOptions(options, story));

-  function match(tree: any) {
-    let target = tree;
-    const isReact = story.parameters.framework === 'react';
+    function match(tree: any) {
+      let target = tree;
+      const isReact = story.parameters.framework === 'react';

-    if (isReact && typeof tree.childAt === 'function') {
-      target = tree.childAt(0);
-    }
-    if (isReact && Array.isArray(tree.children)) {
-      [target] = tree.children;
+      if (isReact && typeof tree.childAt === 'function') {
+        target = tree.childAt(0);
+      }
+      if (isReact && Array.isArray(tree.children)) {
+        [target] = tree.children;
+      }
+
+      if (snapshotFileName) {
+        expect(target).toMatchSpecificSnapshot(snapshotFileName);
+      } else {
+        expect(target).toMatchSnapshot();
+      }
+
+      if (typeof tree.unmount === 'function') {
+        tree.unmount();
+      }
    }

-    if (snapshotFileName) {
-      expect(target).toMatchSpecificSnapshot(snapshotFileName);
-    } else {
-      expect(target).toMatchSnapshot();
+    if (typeof result.then === 'function') {
+      return result.then(match);
    }

-    if (typeof tree.unmount === 'function') {
-      tree.unmount();
-    }
-  }
+    return match(result);
+  };
+}

-  if (typeof result.then === 'function') {
-    return result.then(match);
-  }
+export function multiSnapshotWithOptions(options = {}): StoryshotsTestMethod {
+  return ({ story, context, renderTree, stories2snapsConverter }) => {
+    const snapshotFileName = stories2snapsConverter.getSnapshotFileName(context);
+    return snapshotWithOptions(options)({ story, context, renderTree, snapshotFileName });
+  };
+}

-  return match(result);
-};
-
-export const multiSnapshotWithOptions = (options = {}) => ({
-  story,
-  context,
-  renderTree,
-  stories2snapsConverter,
-}: {
-  story: any;
-  context: any;
-  renderTree: RenderTree;
-  stories2snapsConverter: Stories2SnapsConverter;
-}) =>
-  snapshotWithOptions(options)({
-    story,
-    context,
-    renderTree,
-    snapshotFileName: stories2snapsConverter.getSnapshotFileName(context),
-  });
-
-export function shallowSnapshot({
+export const shallowSnapshot: StoryshotsTestMethod = ({
  story,
  context,
  renderShallowTree,
  options = {},
-}: {
-  story: any;
-  context: any;
-  renderShallowTree: RenderTree;
-  options: any;
-}) {
+}) => {
  const result = renderShallowTree(story, context, options);
  expect(result).toMatchSnapshot();
-}
-
-export const renderWithOptions = (options = {}) => ({
-  story,
-  context,
-  renderTree,
-}: {
-  story: any;
-  context: any;
-  renderTree: RenderTree;
-}) => {
-  const result = renderTree(story, context, options);
-
-  if (typeof result.then === 'function') {
-    return result;
-  }
-
-  return undefined;
 };

+export function renderWithOptions(options = {}): StoryshotsTestMethod {
+  return ({ story, context, renderTree }) => {
+    const result = renderTree(story, context, options);
+    if (typeof result.then === 'function') {
+      return result;
+    }
+
+    return undefined;
+  };
+}
+
 export const renderOnly = renderWithOptions();

 export const snapshot = snapshotWithOptions();
--- a/addons/storyshots/storyshots-puppeteer/package.json
+++ b/addons/storyshots/storyshots-puppeteer/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-storyshots-puppeteer",
-  "version": "6.1.0-alpha.10",
+  "version": "6.1.0-alpha.20",
  "description": "Image snapshots addition to StoryShots based on puppeteer",
  "keywords": [
    "addon",
@ -23,14 +23,14 @@
    "README.md",
    "*.js",
    "*.d.ts",
-    "ts3.5/**/*"
+    "ts3.4/**/*"
  ],
  "scripts": {
    "prepare": "node ../../../scripts/prepare.js"
  },
  "dependencies": {
    "@storybook/csf": "0.0.1",
-    "@storybook/node-logger": "6.1.0-alpha.10",
+    "@storybook/node-logger": "6.1.0-alpha.20",
    "@types/jest-image-snapshot": "^2.8.0",
    "@wordpress/jest-puppeteer-axe": "^1.5.0",
    "core-js": "^3.0.1",
@ -42,7 +42,7 @@
    "@types/puppeteer": "^2.0.0"
  },
  "peerDependencies": {
-    "@storybook/addon-storyshots": "6.1.0-alpha.10",
+    "@storybook/addon-storyshots": "6.1.0-alpha.20",
    "puppeteer": "^2.0.0 || ^3.0.0"
  },
  "peerDependenciesMeta": {
@ -53,11 +53,11 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "57798a108e183d97f94fd4cc396e45e1d4b04d23",
+  "gitHead": "cc1c152e5452d28eabb24330f4ed693cd6782bc1",
  "typesVersions": {
-    "<=3.5": {
+    "<3.8": {
      "*": [
-        "ts3.5/*"
+        "ts3.4/*"
      ]
    }
  }
--- a/addons/storyshots/storyshots-puppeteer/src/config.ts
+++ b/addons/storyshots/storyshots-puppeteer/src/config.ts
@ -1,5 +1,11 @@
 import { MatchImageSnapshotOptions } from 'jest-image-snapshot';
-import { Base64ScreenShotOptions, Browser, DirectNavigationOptions, Page, ElementHandle } from 'puppeteer';
+import {
+  Base64ScreenShotOptions,
+  Browser,
+  DirectNavigationOptions,
+  Page,
+  ElementHandle,
+} from 'puppeteer';

 export interface Context {
  kind: string;
--- a/addons/storyshots/storyshots-puppeteer/src/imageSnapshot.ts
+++ b/addons/storyshots/storyshots-puppeteer/src/imageSnapshot.ts
@ -11,7 +11,7 @@ export const imageSnapshot = (customConfig: Partial<ImageSnapshotConfig> = {}) =
  return puppeteerTest({
    ...config,
    async testBody(page, options) {
-      expect.assertions(1);
+      expect.hasAssertions();
      const element = await beforeScreenshot(page, options);
      const image = await (element || page).screenshot(getScreenshotOptions(options));
      await afterScreenshot({ image, context: options.context });
--- a/addons/storysource/README.md
+++ b/addons/storysource/README.md
@ -61,7 +61,7 @@ Storysource will automatically use the light or dark syntax theme based on your

 ## Displaying full source

-Storybook 6.0 introduced an unintentional change to `source-loader, in which only the source of the selected story is shown in the addon. To restore the old behavior, pass the`injectStoryParameters: false` option.
+Storybook 6.0 introduced an unintentional change to `source-loader`, in which only the source of the selected story is shown in the addon. To restore the old behavior, pass the`injectStoryParameters: false` option.

 If you're using `addon-docs`:

--- a/addons/storysource/package.json
+++ b/addons/storysource/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-storysource",
-  "version": "6.1.0-alpha.10",
+  "version": "6.1.0-alpha.20",
  "description": "Stories addon for storybook",
  "keywords": [
    "addon",
@ -23,19 +23,19 @@
    "README.md",
    "*.js",
    "*.d.ts",
-    "ts3.5/**/*"
+    "ts3.4/**/*"
  ],
  "scripts": {
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.1.0-alpha.10",
-    "@storybook/api": "6.1.0-alpha.10",
-    "@storybook/client-logger": "6.1.0-alpha.10",
-    "@storybook/components": "6.1.0-alpha.10",
-    "@storybook/router": "6.1.0-alpha.10",
-    "@storybook/source-loader": "6.1.0-alpha.10",
-    "@storybook/theming": "6.1.0-alpha.10",
+    "@storybook/addons": "6.1.0-alpha.20",
+    "@storybook/api": "6.1.0-alpha.20",
+    "@storybook/client-logger": "6.1.0-alpha.20",
+    "@storybook/components": "6.1.0-alpha.20",
+    "@storybook/router": "6.1.0-alpha.20",
+    "@storybook/source-loader": "6.1.0-alpha.20",
+    "@storybook/theming": "6.1.0-alpha.20",
    "core-js": "^3.0.1",
    "estraverse": "^4.2.0",
    "loader-utils": "^2.0.0",
@ -53,5 +53,12 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "57798a108e183d97f94fd4cc396e45e1d4b04d23"
+  "gitHead": "cc1c152e5452d28eabb24330f4ed693cd6782bc1",
+  "typesVersions": {
+    "<3.8": {
+      "*": [
+        "ts3.4/*"
+      ]
+    }
+  }
 }
--- a/addons/storysource/src/StoryPanel.tsx
+++ b/addons/storysource/src/StoryPanel.tsx
@ -87,7 +87,7 @@ export const StoryPanel: React.FC<StoryPanelProps> = ({ api }) => {
        node,
        stylesheet,
        useInlineStyles,
-        key: `code-segement${i}`,
+        key: `code-segment${i}`,
      })
    );

--- a/addons/toolbars/package.json
+++ b/addons/toolbars/package.json
@ -1,6 +1,6 @@
 {
  "name": "@storybook/addon-toolbars",
-  "version": "6.1.0-alpha.10",
+  "version": "6.1.0-alpha.20",
  "description": "Storybook toolbars addon",
  "keywords": [
    "addon",
@ -30,10 +30,10 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@storybook/addons": "6.1.0-alpha.10",
-    "@storybook/api": "6.1.0-alpha.10",
-    "@storybook/client-api": "6.1.0-alpha.10",
-    "@storybook/components": "6.1.0-alpha.10",
+    "@storybook/addons": "6.1.0-alpha.20",
+    "@storybook/api": "6.1.0-alpha.20",
+    "@storybook/client-api": "6.1.0-alpha.20",
+    "@storybook/components": "6.1.0-alpha.20",
    "core-js": "^3.0.1",
    "react": "^16.8.3",
    "react-dom": "^16.8.3"
@ -41,5 +41,5 @@
  "publishConfig": {
    "access": "public"
  },
-  "gitHead": "57798a108e183d97f94fd4cc396e45e1d4b04d23"
+  "gitHead": "cc1c152e5452d28eabb24330f4ed693cd6782bc1"
 }
--- a/Show More
+++ b/Show More