diff --git a/examples/html-kitchen-sink/tests/__snapshots__/htmlshots.test.js.snap b/examples/html-kitchen-sink/tests/__snapshots__/htmlshots.test.js.snap
index eb7e582bd34..ca0e2dec3aa 100644
--- a/examples/html-kitchen-sink/tests/__snapshots__/htmlshots.test.js.snap
+++ b/examples/html-kitchen-sink/tests/__snapshots__/htmlshots.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addons|Actions Decorated actions + config 1`] = `
+exports[`Storyshots Addons|Actions story1 1`] = `
 <button
   type="button"
 >
@@ -8,7 +8,7 @@ exports[`Storyshots Addons|Actions Decorated actions + config 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Actions Decorated actions 1`] = `
+exports[`Storyshots Addons|Actions story2 1`] = `
 <button
   type="button"
 >
@@ -16,7 +16,7 @@ exports[`Storyshots Addons|Actions Decorated actions 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Actions Hello World 1`] = `
+exports[`Storyshots Addons|Actions story3 1`] = `
 <button
   type="button"
 >
@@ -24,7 +24,7 @@ exports[`Storyshots Addons|Actions Hello World 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Actions Multiple actions + config 1`] = `
+exports[`Storyshots Addons|Actions story4 1`] = `
 <button
   type="button"
 >
@@ -32,36 +32,36 @@ exports[`Storyshots Addons|Actions Multiple actions + config 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Actions Multiple actions 1`] = `
-<button
-  type="button"
->
-  Hello World
-</button>
-`;
-
-exports[`Storyshots Addons|Actions Multiple actions, object + config 1`] = `
-<button
-  type="button"
->
-  Hello World
-</button>
-`;
-
-exports[`Storyshots Addons|Actions Multiple actions, object 1`] = `
-<button
-  type="button"
->
-  Hello World
-</button>
-`;
-
-exports[`Storyshots Addons|Actions Multiple actions, selector 1`] = `
+exports[`Storyshots Addons|Actions story5 1`] = `
 
         
 `;
 
-exports[`Storyshots Addons|Backgrounds story 1 1`] = `
+exports[`Storyshots Addons|Actions story6 1`] = `
+<button
+  type="button"
+>
+  Hello World
+</button>
+`;
+
+exports[`Storyshots Addons|Actions story7 1`] = `
+<button
+  type="button"
+>
+  Hello World
+</button>
+`;
+
+exports[`Storyshots Addons|Actions story8 1`] = `
+<button
+  type="button"
+>
+  Hello World
+</button>
+`;
+
+exports[`Storyshots Addons|Backgrounds story1 1`] = `
 <span
   style="color: white"
 >
@@ -69,7 +69,7 @@ exports[`Storyshots Addons|Backgrounds story 1 1`] = `
 </span>
 `;
 
-exports[`Storyshots Addons|Backgrounds story 2 1`] = `
+exports[`Storyshots Addons|Backgrounds story2 1`] = `
 <span
   style="color: white"
 >
@@ -77,7 +77,7 @@ exports[`Storyshots Addons|Backgrounds story 2 1`] = `
 </span>
 `;
 
-exports[`Storyshots Addons|Centered button in center 1`] = `
+exports[`Storyshots Addons|Centered story1 1`] = `
 <div
   id="sb-addon-centered-wrapper"
   style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;"
@@ -98,9 +98,29 @@ exports[`Storyshots Addons|Events Logger 1`] = `
     
 `;
 
-exports[`Storyshots Addons|Jest With Tests 1`] = `This story shows test results`;
+exports[`Storyshots Addons|Jest withTests 1`] = `This story shows test results`;
 
-exports[`Storyshots Addons|Knobs All knobs 1`] = `
+exports[`Storyshots Addons|Knobs DOM 1`] = `
+<p>
+  John Doe
+</p>
+`;
+
+exports[`Storyshots Addons|Knobs Simple 1`] = `
+<div>
+  I am John Doe and I'm 44 years old.
+</div>
+`;
+
+exports[`Storyshots Addons|Knobs story3 1`] = `
+<p
+  style="transition: color 0.5s ease-out; color: orangered;"
+>
+  John Doe
+</p>
+`;
+
+exports[`Storyshots Addons|Knobs story4 1`] = `
 <div
   style="border: 2px dotted deeppink; padding: 8px 22px; border-radius: 8px"
 >
@@ -147,29 +167,9 @@ exports[`Storyshots Addons|Knobs All knobs 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addons|Knobs CSS transitions 1`] = `
-<p
-  style="transition: color 0.5s ease-out; color: orangered;"
->
-  John Doe
-</p>
-`;
+exports[`Storyshots Addons|Knobs story5 1`] = `&lt;img src=x onerror="alert('XSS Attack')" &gt;`;
 
-exports[`Storyshots Addons|Knobs DOM 1`] = `
-<p>
-  John Doe
-</p>
-`;
-
-exports[`Storyshots Addons|Knobs Simple 1`] = `
-<div>
-  I am John Doe and I'm 44 years old.
-</div>
-`;
-
-exports[`Storyshots Addons|Knobs XSS safety 1`] = `&lt;img src=x onerror="alert('XSS Attack')" &gt;`;
-
-exports[`Storyshots Addons|Notes Simple note 1`] = `
+exports[`Storyshots Addons|Notes story1 1`] = `
 <p>
   
       
@@ -185,8 +185,6 @@ exports[`Storyshots Addons|Notes Simple note 1`] = `
 
 exports[`Storyshots Addons|a11y Default 1`] = `<button />`;
 
-exports[`Storyshots Addons|a11y Delayed render 1`] = `<div />`;
-
 exports[`Storyshots Addons|a11y Disabled 1`] = `
 <button
   disabled=""
@@ -195,27 +193,29 @@ exports[`Storyshots Addons|a11y Disabled 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|a11y Invalid contrast 1`] = `
-<button
-  style="color: black; background-color: brown;"
->
-  Testing the a11y addon
-</button>
-`;
-
 exports[`Storyshots Addons|a11y Label 1`] = `
 <button>
   Testing the a11y addon
 </button>
 `;
 
-exports[`Storyshots Demo Button 1`] = `
+exports[`Storyshots Addons|a11y story4 1`] = `
+<button
+  style="color: black; background-color: brown;"
+>
+  Testing the a11y addon
+</button>
+`;
+
+exports[`Storyshots Addons|a11y story5 1`] = `<div />`;
+
+exports[`Storyshots Demo button 1`] = `
 <button>
   Hello Button
 </button>
 `;
 
-exports[`Storyshots Demo Effect 1`] = `
+exports[`Storyshots Demo effect 1`] = `
 <button
   id="button"
 >
@@ -223,13 +223,13 @@ exports[`Storyshots Demo Effect 1`] = `
 </button>
 `;
 
-exports[`Storyshots Demo Heading 1`] = `
+exports[`Storyshots Demo heading 1`] = `
 <h1>
   Hello World
 </h1>
 `;
 
-exports[`Storyshots Demo Headings 1`] = `
+exports[`Storyshots Demo headings 1`] = `
 <section>
   <h1>
     Hello World
diff --git a/examples/official-storybook/config.js b/examples/official-storybook/config.js
index 7cabbbb918d..2e61f87c49d 100644
--- a/examples/official-storybook/config.js
+++ b/examples/official-storybook/config.js
@@ -1,4 +1,5 @@
 import React from 'react';
+import startCase from 'lodash/startCase';
 import { configure, addDecorator, addParameters } from '@storybook/react';
 import { Global, ThemeProvider, themes, createReset, convert } from '@storybook/theming';
 import { withCssResources } from '@storybook/addon-cssresources';
@@ -52,6 +53,7 @@ addParameters({
     theme: themes.light, // { base: 'dark', brandTitle: 'Storybook!' },
     storySort: (a, b) =>
       a[1].kind === b[1].kind ? 0 : a[1].id.localeCompare(b[1].id, { numeric: true }),
+    displayName: key => startCase(key).toLowerCase(),
   },
   backgrounds: [
     { name: 'storybook app', value: themes.light.appBg, default: true },
diff --git a/examples/official-storybook/package.json b/examples/official-storybook/package.json
index 14112945214..8e138f93799 100644
--- a/examples/official-storybook/package.json
+++ b/examples/official-storybook/package.json
@@ -53,6 +53,7 @@
     "global": "^4.3.2",
     "graphql": "^14.1.1",
     "jest-emotion": "^10.0.11",
+    "lodash": "^4.17.11",
     "paths.macro": "^2.0.2",
     "prop-types": "^15.7.2",
     "react": "^16.8.3",
diff --git a/examples/preact-kitchen-sink/__snapshots__/preactshots.test.js.snap b/examples/preact-kitchen-sink/__snapshots__/preactshots.test.js.snap
index b2a8566165f..03e16240ac8 100644
--- a/examples/preact-kitchen-sink/__snapshots__/preactshots.test.js.snap
+++ b/examples/preact-kitchen-sink/__snapshots__/preactshots.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addons|Actions Action and method 1`] = `
+exports[`Storyshots Addons|Actions actionAndMethod 1`] = `
 <button
   class="button"
   onclick={[Function]}
@@ -9,7 +9,7 @@ exports[`Storyshots Addons|Actions Action and method 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Actions Action only 1`] = `
+exports[`Storyshots Addons|Actions actionOnly 1`] = `
 <button
   class="button"
   onclick={[Function]}
@@ -18,7 +18,7 @@ exports[`Storyshots Addons|Actions Action only 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Actions Multiple actions 1`] = `
+exports[`Storyshots Addons|Actions multipleActions 1`] = `
 <button
   class="button"
   onclick={[Function]}
@@ -28,7 +28,7 @@ exports[`Storyshots Addons|Actions Multiple actions 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Actions Multiple actions, object 1`] = `
+exports[`Storyshots Addons|Actions multipleActionsObject 1`] = `
 <button
   class="button"
   onclick={[Function]}
@@ -38,7 +38,7 @@ exports[`Storyshots Addons|Actions Multiple actions, object 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Backgrounds Example 1 1`] = `
+exports[`Storyshots Addons|Backgrounds example1 1`] = `
 <button
   class="button"
 >
@@ -46,7 +46,7 @@ exports[`Storyshots Addons|Backgrounds Example 1 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Backgrounds Example 2 1`] = `
+exports[`Storyshots Addons|Backgrounds example2 1`] = `
 <button
   class="button"
 >
@@ -54,7 +54,7 @@ exports[`Storyshots Addons|Backgrounds Example 2 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Centered Button  1`] = `
+exports[`Storyshots Addons|Centered button 1`] = `
 <div
   style={
     Object {
@@ -86,7 +86,7 @@ exports[`Storyshots Addons|Centered Button  1`] = `
 </div>
 `;
 
-exports[`Storyshots Addons|Contexts Simple CSS Theming 1`] = `
+exports[`Storyshots Addons|Contexts simpleCssTheming 1`] = `
 <div
   style={
     Object {
@@ -103,7 +103,13 @@ exports[`Storyshots Addons|Contexts Simple CSS Theming 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addons|Knobs All knobs 1`] = `
+exports[`Storyshots Addons|Knobs Simple 1`] = `
+<div>
+  I am John Doe and I'm 44 years old.
+</div>
+`;
+
+exports[`Storyshots Addons|Knobs allKnobs 1`] = `
 <div
   style="border:2px dotted deeppink; padding: 8px 22px; border-radius: 8px"
 >
@@ -136,13 +142,7 @@ exports[`Storyshots Addons|Knobs All knobs 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addons|Knobs Simple 1`] = `
-<div>
-  I am John Doe and I'm 44 years old.
-</div>
-`;
-
-exports[`Storyshots Addons|Links Go to welcome 1`] = `
+exports[`Storyshots Addons|Links goToWelcome 1`] = `
 <button
   class="button"
   onclick={[Function]}
@@ -151,7 +151,7 @@ exports[`Storyshots Addons|Links Go to welcome 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Notes Note with HTML 1`] = `
+exports[`Storyshots Addons|Notes noteWithHtml 1`] = `
 <p>
   <span>
     🤔😳😯😮
@@ -167,7 +167,7 @@ exports[`Storyshots Addons|Notes Note with HTML 1`] = `
 </p>
 `;
 
-exports[`Storyshots Addons|Notes Simple note 1`] = `
+exports[`Storyshots Addons|Notes simpleNote 1`] = `
 <p>
   <strong>
     Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.
@@ -175,7 +175,7 @@ exports[`Storyshots Addons|Notes Simple note 1`] = `
 </p>
 `;
 
-exports[`Storyshots Button with some emoji 1`] = `
+exports[`Storyshots Button withSomeEmoji 1`] = `
 <button
   class="button"
   onclick={[Function]}
@@ -189,7 +189,7 @@ exports[`Storyshots Button with some emoji 1`] = `
 </button>
 `;
 
-exports[`Storyshots Button with text 1`] = `
+exports[`Storyshots Button withText 1`] = `
 <button
   class="button"
   onclick={[Function]}
@@ -198,7 +198,7 @@ exports[`Storyshots Button with text 1`] = `
 </button>
 `;
 
-exports[`Storyshots Welcome to Storybook 1`] = `
+exports[`Storyshots Welcome toStorybook 1`] = `
 <article
   style={
     Object {
diff --git a/examples/riot-kitchen-sink/__snapshots__/riotshots.test.js.snap b/examples/riot-kitchen-sink/__snapshots__/riotshots.test.js.snap
index 30ef3f9f04b..08882fbc306 100644
--- a/examples/riot-kitchen-sink/__snapshots__/riotshots.test.js.snap
+++ b/examples/riot-kitchen-sink/__snapshots__/riotshots.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon|Actions Action only 1`] = `
+exports[`Storyshots Addon|Actions actionOnly 1`] = `
 <div
   data-is="my-button"
   id="root"
@@ -14,7 +14,7 @@ exports[`Storyshots Addon|Actions Action only 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon|Actions Multiple actions 1`] = `
+exports[`Storyshots Addon|Actions multipleActions 1`] = `
 <div
   data-is="my-button"
   id="root"
@@ -28,7 +28,7 @@ exports[`Storyshots Addon|Actions Multiple actions 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon|Backgrounds story 1 1`] = `
+exports[`Storyshots Addon|Backgrounds story1 1`] = `
 <div
   data-is="root"
   id="root"
@@ -44,7 +44,7 @@ exports[`Storyshots Addon|Backgrounds story 1 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon|Backgrounds story 2 1`] = `
+exports[`Storyshots Addon|Backgrounds story2 1`] = `
 <div
   data-is="root"
   id="root"
@@ -60,7 +60,18 @@ exports[`Storyshots Addon|Backgrounds story 2 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon|Knobs All knobs 1`] = `
+exports[`Storyshots Addon|Knobs Simple 1`] = `
+<div
+  data-is="root"
+  id="root"
+>
+  <div>
+    I am John Doe and I'm 44 years old.
+  </div>
+</div>
+`;
+
+exports[`Storyshots Addon|Knobs allKnobs 1`] = `
 <div
   data-is="root"
   id="root"
@@ -115,18 +126,7 @@ exports[`Storyshots Addon|Knobs All knobs 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon|Knobs Simple 1`] = `
-<div
-  data-is="root"
-  id="root"
->
-  <div>
-    I am John Doe and I'm 44 years old.
-  </div>
-</div>
-`;
-
-exports[`Storyshots Addon|Knobs XSS safety 1`] = `
+exports[`Storyshots Addon|Knobs xssSafety 1`] = `
 <div
   data-is="root"
   id="root"
@@ -137,7 +137,7 @@ exports[`Storyshots Addon|Knobs XSS safety 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon|Links Go to welcome 1`] = `
+exports[`Storyshots Addon|Links goToWelcome 1`] = `
 <div
   data-is="my-button"
   id="root"
@@ -151,7 +151,7 @@ exports[`Storyshots Addon|Links Go to welcome 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon|Notes Note with HTML 1`] = `
+exports[`Storyshots Addon|Notes noteWithHtml 1`] = `
 <div
   data-is="root"
   id="root"
@@ -168,7 +168,7 @@ exports[`Storyshots Addon|Notes Note with HTML 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon|Notes Simple note 1`] = `
+exports[`Storyshots Addon|Notes simpleNote 1`] = `
 <div
   data-is="root"
   id="root"
@@ -181,18 +181,18 @@ exports[`Storyshots Addon|Notes Simple note 1`] = `
 </div>
 `;
 
-exports[`Storyshots Core|Parameters passed to story 1`] = `
+exports[`Storyshots Core|Parameters passedToStory 1`] = `
 <div
   data-is="parameters"
   id="root"
 >
   <div>
-    Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"globalParameter":"globalParameter","framework":"riot","chapterParameter":"chapterParameter","storyParameter":"storyParameter","id":"root","dataIs":"parameters"}
+    Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{}},"globalParameter":"globalParameter","framework":"riot","chapterParameter":"chapterParameter","displayName":"passed to story","storyParameter":"storyParameter","id":"root","dataIs":"parameters"}
   </div>
 </div>
 `;
 
-exports[`Storyshots Story|How to create a story built as string 1`] = `
+exports[`Storyshots Story|How to create a story builtAsString 1`] = `
 <div
   data-is="root"
   id="root"
@@ -205,7 +205,7 @@ exports[`Storyshots Story|How to create a story built as string 1`] = `
 </div>
 `;
 
-exports[`Storyshots Story|How to create a story built from raw import 1`] = `
+exports[`Storyshots Story|How to create a story builtFromRawImport 1`] = `
 <div
   data-is="simpletest"
   id="root"
@@ -216,7 +216,7 @@ exports[`Storyshots Story|How to create a story built from raw import 1`] = `
 </div>
 `;
 
-exports[`Storyshots Story|How to create a story built from tags and template 1`] = `
+exports[`Storyshots Story|How to create a story builtFromTagsAndTemplate 1`] = `
 <div
   data-is="root"
   id="root"
@@ -231,7 +231,7 @@ exports[`Storyshots Story|How to create a story built from tags and template 1`]
 </div>
 `;
 
-exports[`Storyshots Story|How to create a story built from the precompilation 1`] = `
+exports[`Storyshots Story|How to create a story builtFromThePrecompilation 1`] = `
 <div
   data-is="anothertest"
   id="root"
@@ -242,7 +242,7 @@ exports[`Storyshots Story|How to create a story built from the precompilation 1`
 </div>
 `;
 
-exports[`Storyshots Story|How to create a story built with tag 1`] = `
+exports[`Storyshots Story|How to create a story builtWithTag 1`] = `
 <div
   data-is="test"
   id="root"
@@ -253,7 +253,7 @@ exports[`Storyshots Story|How to create a story built with tag 1`] = `
 </div>
 `;
 
-exports[`Storyshots Story|How to create a story tags, template and tagConstructor at once 1`] = `
+exports[`Storyshots Story|How to create a story tagsTemplateAndTagConstructorAtOnce 1`] = `
 <div
   data-is="root"
   id="root"
@@ -269,7 +269,7 @@ exports[`Storyshots Story|How to create a story tags, template and tagConstructo
 </div>
 `;
 
-exports[`Storyshots Story|How to create a story the mount instruction is not necessary 1`] = `
+exports[`Storyshots Story|How to create a story theMountInstructionIsNotNecessary 1`] = `
 <div
   data-is="anothertest"
   id="root"
@@ -280,7 +280,7 @@ exports[`Storyshots Story|How to create a story the mount instruction is not nec
 </div>
 `;
 
-exports[`Storyshots Story|How to create a story the opts value is not necessary 1`] = `
+exports[`Storyshots Story|How to create a story theOptsValueIsNotNecessary 1`] = `
 <div
   data-is="anothertest"
   id="root"
@@ -349,7 +349,7 @@ exports[`Storyshots Story|Nest tags Matriochka 1`] = `
 </div>
 `;
 
-exports[`Storyshots Story|Nest tags Three tags 1`] = `
+exports[`Storyshots Story|Nest tags threeTags 1`] = `
 <div
   data-is="root"
   id="root"
diff --git a/examples/svelte-kitchen-sink/__snapshots__/svelteshots.test.js.snap b/examples/svelte-kitchen-sink/__snapshots__/svelteshots.test.js.snap
index c732d5c30a8..097fee75a55 100644
--- a/examples/svelte-kitchen-sink/__snapshots__/svelteshots.test.js.snap
+++ b/examples/svelte-kitchen-sink/__snapshots__/svelteshots.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon|Actions Action on component method 1`] = `
+exports[`Storyshots Addon|Actions actionOnComponentMethod 1`] = `
 <section
   class="storybook-snapshot-container"
 >
@@ -19,7 +19,7 @@ exports[`Storyshots Addon|Actions Action on component method 1`] = `
 </section>
 `;
 
-exports[`Storyshots Addon|Actions Action on view method 1`] = `
+exports[`Storyshots Addon|Actions actionOnViewMethod 1`] = `
 <section
   class="storybook-snapshot-container"
 >
@@ -61,7 +61,7 @@ exports[`Storyshots Addon|Actions Action on view method 1`] = `
 </section>
 `;
 
-exports[`Storyshots Addon|Backgrounds story 1 1`] = `
+exports[`Storyshots Addon|Backgrounds story1 1`] = `
 <section
   class="storybook-snapshot-container"
 >
@@ -103,7 +103,7 @@ exports[`Storyshots Addon|Backgrounds story 1 1`] = `
 </section>
 `;
 
-exports[`Storyshots Addon|Centered Rounded 1`] = `
+exports[`Storyshots Addon|Centered rounded 1`] = `
 <section
   class="storybook-snapshot-container"
 >
@@ -122,7 +122,7 @@ exports[`Storyshots Addon|Centered Rounded 1`] = `
 </section>
 `;
 
-exports[`Storyshots Addon|Centered with action 1`] = `
+exports[`Storyshots Addon|Centered withAction 1`] = `
 <section
   class="storybook-snapshot-container"
 >
@@ -155,7 +155,7 @@ exports[`Storyshots Addon|Knobs Simple 1`] = `
 </section>
 `;
 
-exports[`Storyshots Addon|Links Go to welcome view 1`] = `
+exports[`Storyshots Addon|Links goToWelcomeView 1`] = `
 <section
   class="storybook-snapshot-container"
 >
@@ -183,7 +183,7 @@ exports[`Storyshots Addon|Links Go to welcome view 1`] = `
 </section>
 `;
 
-exports[`Storyshots Addon|Notes Note with HTML 1`] = `
+exports[`Storyshots Addon|Notes noteWithHtml 1`] = `
 <section
   class="storybook-snapshot-container"
 >
@@ -225,7 +225,7 @@ exports[`Storyshots Addon|Notes Note with HTML 1`] = `
 </section>
 `;
 
-exports[`Storyshots Addon|Notes Simple note 1`] = `
+exports[`Storyshots Addon|Notes simpleNote 1`] = `
 <section
   class="storybook-snapshot-container"
 >
@@ -267,7 +267,7 @@ exports[`Storyshots Addon|Notes Simple note 1`] = `
 </section>
 `;
 
-exports[`Storyshots Button Rounded 1`] = `
+exports[`Storyshots Button rounded 1`] = `
 <section
   class="storybook-snapshot-container"
 >
@@ -309,7 +309,7 @@ exports[`Storyshots Button Rounded 1`] = `
 </section>
 `;
 
-exports[`Storyshots Button Square 1`] = `
+exports[`Storyshots Button square 1`] = `
 <section
   class="storybook-snapshot-container"
 >
diff --git a/examples/vue-kitchen-sink/__snapshots__/vueshots.test.js.snap b/examples/vue-kitchen-sink/__snapshots__/vueshots.test.js.snap
index bc0b461c448..159ad8a0a3f 100644
--- a/examples/vue-kitchen-sink/__snapshots__/vueshots.test.js.snap
+++ b/examples/vue-kitchen-sink/__snapshots__/vueshots.test.js.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addon|Actions Action and method 1`] = `
+exports[`Storyshots Addon|Actions actionAndMethod 1`] = `
 <button
   class="button"
   style="color: rgb(66, 185, 131); border-color: #42b983;"
@@ -9,7 +9,7 @@ exports[`Storyshots Addon|Actions Action and method 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addon|Actions Action only 1`] = `
+exports[`Storyshots Addon|Actions actionOnly 1`] = `
 <button
   class="button"
   style="color: rgb(66, 185, 131); border-color: #42b983;"
@@ -18,7 +18,7 @@ exports[`Storyshots Addon|Actions Action only 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addon|Actions Multiple actions 1`] = `
+exports[`Storyshots Addon|Actions multipleActions 1`] = `
 <button
   class="button"
   style="color: rgb(66, 185, 131); border-color: #42b983;"
@@ -27,7 +27,7 @@ exports[`Storyshots Addon|Actions Multiple actions 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addon|Actions Multiple actions, object 1`] = `
+exports[`Storyshots Addon|Actions multipleActionsObject 1`] = `
 <button
   class="button"
   style="color: rgb(66, 185, 131); border-color: #42b983;"
@@ -36,19 +36,19 @@ exports[`Storyshots Addon|Actions Multiple actions, object 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addon|Backgrounds story 1 1`] = `
+exports[`Storyshots Addon|Backgrounds story1 1`] = `
 <button>
   You should be able to switch backgrounds for this story
 </button>
 `;
 
-exports[`Storyshots Addon|Backgrounds story 2 1`] = `
+exports[`Storyshots Addon|Backgrounds story2 1`] = `
 <button>
   This one too!
 </button>
 `;
 
-exports[`Storyshots Addon|Centered Rounded 1`] = `
+exports[`Storyshots Addon|Centered rounded 1`] = `
 <div
   style="position: fixed; top: 0px; left: 0px; bottom: 0px; right: 0px; display: flex; align-items: center; overflow: auto;"
 >
@@ -77,7 +77,7 @@ exports[`Storyshots Addon|Contexts Languages 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon|Contexts Simple CSS Theming 1`] = `
+exports[`Storyshots Addon|Contexts simpleCssTheming 1`] = `
 <div
   style="color: white; background: rgb(23, 63, 95); height: 100vh; padding: 10px;"
 >
@@ -87,7 +87,13 @@ exports[`Storyshots Addon|Contexts Simple CSS Theming 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon|Knobs All knobs 1`] = `
+exports[`Storyshots Addon|Knobs Simple 1`] = `
+<div>
+  I am John Doe and I'm 40 years old.
+</div>
+`;
+
+exports[`Storyshots Addon|Knobs allKnobs 1`] = `
 <div
   style="border: 2px dotted; padding: 8px 22px; border-radius: 8px; border-color: deeppink;"
 >
@@ -125,19 +131,13 @@ exports[`Storyshots Addon|Knobs All knobs 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addon|Knobs Simple 1`] = `
-<div>
-  I am John Doe and I'm 40 years old.
-</div>
-`;
-
-exports[`Storyshots Addon|Knobs XSS safety 1`] = `
+exports[`Storyshots Addon|Knobs xssSafety 1`] = `
 <div>
   &lt;img src=x onerror="alert('XSS Attack')" &gt;
 </div>
 `;
 
-exports[`Storyshots Addon|Links Go to welcome 1`] = `
+exports[`Storyshots Addon|Links goToWelcome 1`] = `
 <button
   class="button rounded"
   style="color: rgb(66, 185, 131); border-color: #42b983;"
@@ -146,7 +146,7 @@ exports[`Storyshots Addon|Links Go to welcome 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addon|Notes Note with HTML 1`] = `
+exports[`Storyshots Addon|Notes noteWithHtml 1`] = `
 <p>
   🤔😳😯😮
   <br />
@@ -156,7 +156,7 @@ exports[`Storyshots Addon|Notes Note with HTML 1`] = `
 </p>
 `;
 
-exports[`Storyshots Addon|Notes Simple note 1`] = `
+exports[`Storyshots Addon|Notes simpleNote 1`] = `
 <p>
   <strong>
     Etiam vulputate elit eu venenatis eleifend. Duis nec lectus augue. Morbi egestas diam sed vulputate mollis. Fusce egestas pretium vehicula. Integer sed neque diam. Donec consectetur velit vitae enim varius, ut placerat arcu imperdiet. Praesent sed faucibus arcu. Nullam sit amet nibh a enim eleifend rhoncus. Donec pretium elementum leo at fermentum. Nulla sollicitudin, mauris quis semper tempus, sem metus tristique diam, efficitur pulvinar mi urna id urna.
@@ -164,7 +164,7 @@ exports[`Storyshots Addon|Notes Simple note 1`] = `
 </p>
 `;
 
-exports[`Storyshots App App 1`] = `
+exports[`Storyshots App app 1`] = `
 <div
   id="app"
 >
@@ -260,7 +260,7 @@ exports[`Storyshots App App 1`] = `
 </div>
 `;
 
-exports[`Storyshots Button Rounded 1`] = `
+exports[`Storyshots Button rounded 1`] = `
 <button
   class="button rounded"
   style="color: rgb(66, 185, 131); border-color: #42b983;"
@@ -269,7 +269,7 @@ exports[`Storyshots Button Rounded 1`] = `
 </button>
 `;
 
-exports[`Storyshots Button Square 1`] = `
+exports[`Storyshots Button square 1`] = `
 <button
   class="button"
   style="color: rgb(66, 185, 131); border-color: #42b983;"
@@ -278,13 +278,13 @@ exports[`Storyshots Button Square 1`] = `
 </button>
 `;
 
-exports[`Storyshots Core|Parameters passed to story 1`] = `
+exports[`Storyshots Core|Parameters passedToStory 1`] = `
 <div>
-  Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{},"docs":{"iframeHeight":"60px"}},"globalParameter":"globalParameter","framework":"vue","chapterParameter":"chapterParameter","storyParameter":"storyParameter"}
+  Parameters are {"options":{"hierarchyRootSeparator":{},"hierarchySeparator":{},"docs":{"iframeHeight":"60px"}},"globalParameter":"globalParameter","framework":"vue","chapterParameter":"chapterParameter","storyParameter":"storyParameter","displayName":"passed to story"}
 </div>
 `;
 
-exports[`Storyshots Core|Template string only 1`] = `
+exports[`Storyshots Core|Template stringOnly 1`] = `
 <button
   class="button"
   style="color: rgb(66, 185, 131); border-color: #42b983;"
@@ -293,7 +293,7 @@ exports[`Storyshots Core|Template string only 1`] = `
 </button>
 `;
 
-exports[`Storyshots Custom|Decorator for Vue Render 1`] = `
+exports[`Storyshots Custom|Decorator for Vue render 1`] = `
 <div
   style="border: medium solid blue;"
 >
@@ -310,7 +310,7 @@ exports[`Storyshots Custom|Decorator for Vue Render 1`] = `
 </div>
 `;
 
-exports[`Storyshots Custom|Decorator for Vue Template 1`] = `
+exports[`Storyshots Custom|Decorator for Vue template 1`] = `
 <div
   style="border: medium solid blue;"
 >
@@ -327,7 +327,7 @@ exports[`Storyshots Custom|Decorator for Vue Template 1`] = `
 </div>
 `;
 
-exports[`Storyshots Custom|Decorator for Vue With Data 1`] = `
+exports[`Storyshots Custom|Decorator for Vue withData 1`] = `
 <div
   style="border: medium solid blue;"
 >
@@ -336,10 +336,10 @@ exports[`Storyshots Custom|Decorator for Vue With Data 1`] = `
   >
     <pre>
       {
-  "id": "custom-decorator-for-vue--with-data",
+  "id": "custom-decorator-for-vue--withdata",
   "kind": "Custom|Decorator for Vue",
-  "name": "With Data",
-  "story": "With Data",
+  "name": "withData",
+  "story": "withData",
   "customContext": 52,
   "parameters": {
     "options": {
@@ -351,6 +351,7 @@ exports[`Storyshots Custom|Decorator for Vue With Data 1`] = `
     },
     "globalParameter": "globalParameter",
     "framework": "vue",
+    "displayName": "With Data",
     "customParameter": 42
   }
 }
@@ -368,25 +369,7 @@ exports[`Storyshots Custom|Method for rendering Vue JSX 1`] = `
 </button>
 `;
 
-exports[`Storyshots Custom|Method for rendering Vue Render 1`] = `
-<div>
-  renders a div with some text in it..
-</div>
-`;
-
-exports[`Storyshots Custom|Method for rendering Vue Template 1`] = `
-<div>
-  <h1>
-    A template
-  </h1>
-   
-  <p>
-    rendered in vue in storybook
-  </p>
-</div>
-`;
-
-exports[`Storyshots Custom|Method for rendering Vue pre-registered component 1`] = `
+exports[`Storyshots Custom|Method for rendering Vue preRegisteredComponent 1`] = `
 <p>
   <em>
     This component was pre-registered in .storybook/config.js
@@ -402,7 +385,13 @@ exports[`Storyshots Custom|Method for rendering Vue pre-registered component 1`]
 </p>
 `;
 
-exports[`Storyshots Custom|Method for rendering Vue render + component 1`] = `
+exports[`Storyshots Custom|Method for rendering Vue render 1`] = `
+<div>
+  renders a div with some text in it..
+</div>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue renderComponent 1`] = `
 <button
   class="button"
   style="color: pink; border-color: pink;"
@@ -411,7 +400,19 @@ exports[`Storyshots Custom|Method for rendering Vue render + component 1`] = `
 </button>
 `;
 
-exports[`Storyshots Custom|Method for rendering Vue template + component 1`] = `
+exports[`Storyshots Custom|Method for rendering Vue template 1`] = `
+<div>
+  <h1>
+    A template
+  </h1>
+   
+  <p>
+    rendered in vue in storybook
+  </p>
+</div>
+`;
+
+exports[`Storyshots Custom|Method for rendering Vue templateComponent 1`] = `
 <button
   class="button"
   style="color: rgb(66, 185, 131); border-color: #42b983;"
@@ -420,7 +421,7 @@ exports[`Storyshots Custom|Method for rendering Vue template + component 1`] = `
 </button>
 `;
 
-exports[`Storyshots Custom|Method for rendering Vue template + methods 1`] = `
+exports[`Storyshots Custom|Method for rendering Vue templateMethods 1`] = `
 <p>
   <em>
     Clicking the button will navigate to another story using the 'addon-links'
@@ -436,7 +437,7 @@ exports[`Storyshots Custom|Method for rendering Vue template + methods 1`] = `
 </p>
 `;
 
-exports[`Storyshots Custom|Method for rendering Vue vuex + actions 1`] = `
+exports[`Storyshots Custom|Method for rendering Vue vuexActions 1`] = `
 <button
   class="button"
   style="color: rgb(66, 185, 131); border-color: #42b983;"
@@ -445,7 +446,7 @@ exports[`Storyshots Custom|Method for rendering Vue vuex + actions 1`] = `
 </button>
 `;
 
-exports[`Storyshots Custom|Method for rendering Vue whatever you want 1`] = `
+exports[`Storyshots Custom|Method for rendering Vue whateverYouWant 1`] = `
 <button
   class="button"
   style="color: rgb(66, 185, 131); border-color: #42b983;"
@@ -454,7 +455,7 @@ exports[`Storyshots Custom|Method for rendering Vue whatever you want 1`] = `
 </button>
 `;
 
-exports[`Storyshots Welcome Welcome 1`] = `
+exports[`Storyshots Welcome welcome 1`] = `
 <div
   class="main"
 >
diff --git a/lib/core/src/client/preview/start.js b/lib/core/src/client/preview/start.js
index a867d96a3f2..a33fed58da9 100644
--- a/lib/core/src/client/preview/start.js
+++ b/lib/core/src/client/preview/start.js
@@ -417,7 +417,10 @@ export default function start(render, { decorateStory } = {}) {
             `${kindName} => ${name || key}: story.parameters.decorators is deprecated; use story.decorators instead.`)();
           }
           const decoratorParams = decorators ? { decorators } : null;
-          kind.add(name || displayName(key), storyFn, { ...parameters, ...decoratorParams });
+          const displayNameParams = {
+            displayName: name || displayName(key),
+          };
+          kind.add(key, storyFn, { ...parameters, ...decoratorParams, ...displayNameParams });
         }
       });
     });
diff --git a/lib/ui/src/components/sidebar/SidebarItem.tsx b/lib/ui/src/components/sidebar/SidebarItem.tsx
index 7673a82f007..36767a03062 100644
--- a/lib/ui/src/components/sidebar/SidebarItem.tsx
+++ b/lib/ui/src/components/sidebar/SidebarItem.tsx
@@ -135,6 +135,9 @@ const SidebarItem = ({
     iconName = 'folder';
   }
 
+  // eslint-disable-next-line react/destructuring-assignment
+  const displayName = (props.parameters && props.parameters.displayName) || name;
+
   return (
     <Item
       isSelected={isSelected}
@@ -143,7 +146,7 @@ const SidebarItem = ({
     >
       <Expander className="sidebar-expander" isExpandable={!isLeaf} isExpanded={isExpanded} />
       <Icon className="sidebar-svg-icon" icon={iconName} isSelected={isSelected} />
-      <span>{name}</span>
+      <span>{displayName}</span>
     </Item>
   );
 };