diff --git a/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot
index e0a17b8e673..74b0823d8e6 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-actions.stories.storyshot
@@ -113,14 +113,6 @@ exports[`Storyshots Addons|Actions Circular Payload 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Actions Decorated Action (deprecated) 1`] = `
-<button
-  class="css-1qwzad5"
->
-  Native Event
-</button>
-`;
-
 exports[`Storyshots Addons|Actions Decorated action + config 1`] = `
 <button
   class="css-1qwzad5"
@@ -244,3 +236,11 @@ exports[`Storyshots Addons|Actions configureActionsDepth 1`] = `
   Object (configured depth: 2)
 </button>
 `;
+
+exports[`Storyshots Addons|Actions.deprecated Decorated Action 1`] = `
+<button
+  class="css-1qwzad5"
+>
+  Native Event
+</button>
+`;
diff --git a/examples/official-storybook/stories/__snapshots__/addon-backgrounds.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-backgrounds.stories.storyshot
index 129514ebf52..ddcf188c21b 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-backgrounds.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-backgrounds.stories.storyshot
@@ -1,11 +1,23 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Storyshots Addons|Backgrounds disabled via [] 1`] = `
+<button>
+  This one should not use backgrounds
+</button>
+`;
+
 exports[`Storyshots Addons|Backgrounds overriden 1`] = `
 <button>
   This one should have different backgrounds
 </button>
 `;
 
+exports[`Storyshots Addons|Backgrounds skipped via disable:true 1`] = `
+<button>
+  This one should not use backgrounds either
+</button>
+`;
+
 exports[`Storyshots Addons|Backgrounds story 1 1`] = `
 <button>
   You should be able to switch backgrounds for this story
@@ -18,31 +30,19 @@ exports[`Storyshots Addons|Backgrounds story 2 1`] = `
 </button>
 `;
 
-exports[`Storyshots Addons|Backgrounds, parameters disabled via [] 1`] = `
-<button>
-  This one should not use backgrounds
-</button>
-`;
-
-exports[`Storyshots Addons|Backgrounds, parameters overriden 1`] = `
+exports[`Storyshots Addons|Backgrounds.deprecated overriden 1`] = `
 <button>
   This one should have different backgrounds
 </button>
 `;
 
-exports[`Storyshots Addons|Backgrounds, parameters skipped via disable:true 1`] = `
-<button>
-  This one should not use backgrounds either
-</button>
-`;
-
-exports[`Storyshots Addons|Backgrounds, parameters story 1 1`] = `
+exports[`Storyshots Addons|Backgrounds.deprecated story 1 1`] = `
 <button>
   You should be able to switch backgrounds for this story
 </button>
 `;
 
-exports[`Storyshots Addons|Backgrounds, parameters story 2 1`] = `
+exports[`Storyshots Addons|Backgrounds.deprecated story 2 1`] = `
 <button>
   This one too!
 </button>
diff --git a/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot
index ad487ed5f71..33ebbe96475 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-events.stories.storyshot
@@ -13,7 +13,7 @@ exports[`Storyshots Addons|Events Logger 1`] = `
 </div>
 `;
 
-exports[`Storyshots Addons|Events/WithEvents (deprecated) Logger 1`] = `
+exports[`Storyshots Addons|Events.deprecated Logger 1`] = `
 <div
   class="css-1ruxp1v"
 >
diff --git a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
index 04f742dd04c..01124a48a60 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-info.stories.storyshot
@@ -48,7 +48,7 @@ exports[`Storyshots Addons|Info.Decorator Use Info as story decorator 1`] = `
           <div
             style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-size:15px"
           >
-            Info could be used as a global or local decorator as well.
+            Info can take options via the global or local decorator as well.
           </div>
         </div>
         <div>
@@ -816,10 +816,10 @@ exports[`Storyshots Addons|Info.Markdown Displays Markdown in description 1`] =
           style="margin-bottom:0"
         >
           <h4
-            id="you-can-use-markdown-in-your-withinfo()-description."
+            id="you-can-use-markdown-in-your-withinfo-description."
             style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:600;margin:0;padding:0;font-size:20px"
           >
-            You can use markdown in your withInfo() description.
+            You can use markdown in your withInfo description.
           </h4>
           <div
             style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-size:15px"
@@ -6001,10 +6001,10 @@ exports[`Storyshots Addons|Info.Parameters Overwrite the parameters with markdow
           style="margin-bottom:0"
         >
           <h4
-            id="you-can-use-markdown-in-your-withinfo()-description."
+            id="you-can-use-markdown-in-your-withinfo-description."
             style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:600;margin:0;padding:0;font-size:20px"
           >
-            You can use markdown in your withInfo() description.
+            You can use markdown in your withInfo description.
           </h4>
           <div
             style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-size:15px"
@@ -8887,3 +8887,334 @@ exports[`Storyshots Addons|Info.React Docgen Comments from named export componen
   </div>
 </div>
 `;
+
+exports[`Storyshots Addons|Info.deprecated Displays Markdown in description 1`] = `
+<div>
+  <div
+    style="position:relative;z-index:0"
+  >
+    <button>
+      Button
+    </button>
+  </div>
+  <button
+    style="font-family:sans-serif;font-size:12px;display:block;position:fixed;border:none;background:#28c;color:#fff;padding:5px 15px;cursor:pointer;top:0;right:0;border-radius:0 0 0 5px"
+    type="button"
+  >
+    Show Info
+  </button>
+  <div
+    style="position:fixed;background:white;top:0;bottom:0;left:0;right:0;padding:0 40px;overflow:auto;z-index:99999;display:none"
+  >
+    <button
+      style="font-family:sans-serif;font-size:12px;display:block;position:fixed;border:none;background:#28c;color:#fff;padding:5px 15px;cursor:pointer;top:0;right:0;border-radius:0 0 0 5px"
+      type="button"
+    >
+      ×
+    </button>
+    <div>
+      <div
+        style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:300;line-height:1.45;font-size:15px;border:1px solid #eee;padding:20px 40px 40px;border-radius:2px;background-color:#fff;margin-top:20px;margin-bottom:20px"
+      >
+        <div
+          style="border-bottom:1px solid #eee;padding-top:10px;margin-bottom:10px"
+        >
+          <h1
+            style="margin:0;padding:0;font-size:35px"
+          >
+            Addons|Info.deprecated
+          </h1>
+          <h2
+            style="margin:0 0 10px 0;padding:0;font-weight:400;font-size:22px"
+          >
+            Displays Markdown in description
+          </h2>
+        </div>
+        <div
+          style="margin-bottom:0"
+        >
+          <h4
+            id="you-can-use-markdown-in-your-withinfo-description."
+            style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-weight:600;margin:0;padding:0;font-size:20px"
+          >
+            You can use markdown in your withInfo description.
+          </h4>
+          <div
+            style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-size:15px"
+          >
+            Sometimes you might want to manually include some code examples:
+          </div>
+          <pre
+            class="language-js"
+            style="font-family:Menlo, Monaco, \\"Courier New\\", monospace;background-color:#fafafa;padding:.5rem;line-height:1.5;overflow-x:scroll"
+          >
+            <code
+              class="language-js"
+              style="font-family:Menlo, Monaco, \\"Courier New\\", monospace;background-color:#fafafa"
+            >
+              const Button = () =&gt; &lt;button /&gt;;
+            </code>
+          </pre>
+          <div
+            style="font-family:-apple-system, \\".SFNSText-Regular\\", \\"San Francisco\\", BlinkMacSystemFont, \\"Segoe UI\\", \\"Roboto\\", \\"Oxygen\\", \\"Ubuntu\\", \\"Cantarell\\", \\"Fira Sans\\", \\"Droid Sans\\", \\"Helvetica Neue\\", \\"Lucida Grande\\", \\"Arial\\", sans-serif;color:#444;-webkit-font-smoothing:antialiased;font-size:15px"
+          >
+            Maybe include a 
+            <a
+              href="http://storybook.js.org"
+              rel="noopener noreferrer"
+              style="color:#3498db"
+              target="_blank"
+            >
+              link
+            </a>
+             to your project as well.
+          </div>
+        </div>
+        <div>
+          <h1
+            style="margin:20px 0 0 0;padding:0 0 5px 0;font-size:25px;border-bottom:1px solid #EEE"
+          >
+            Story Source
+          </h1>
+          <pre
+            class="css-r8d96o"
+          >
+            <div>
+              <div
+                style="padding-left:18px;padding-right:3px"
+              >
+                <span
+                  style="color:#777"
+                >
+                  &lt;BaseButton
+                </span>
+                <span>
+                  <span>
+                     
+                    <span>
+                      onClick
+                    </span>
+                    <span>
+                      =
+                      <span>
+                        {
+                        <span
+                          style="color:#170"
+                        >
+                          clicked
+                        </span>
+                        }
+                      </span>
+                    </span>
+                  </span>
+                  <span>
+                     
+                    <span>
+                      label
+                    </span>
+                    <span>
+                      =
+                      <span>
+                        "
+                        <span
+                          style="color:#22a;word-break:break-word"
+                        >
+                          Button
+                        </span>
+                        "
+                      </span>
+                    </span>
+                     
+                  </span>
+                </span>
+                <span
+                  style="color:#777"
+                >
+                  /&gt;
+                </span>
+              </div>
+            </div>
+            <button
+              class="css-zvhq5i"
+            >
+              <div
+                class="css-lvl6aa"
+              >
+                <div
+                  style="margin-bottom:6px"
+                >
+                  Copied!
+                </div>
+                <div>
+                  Copy
+                </div>
+              </div>
+            </button>
+          </pre>
+        </div>
+        <div>
+          <h1
+            style="margin:20px 0 0 0;padding:0 0 5px 0;font-size:25px;border-bottom:1px solid #EEE"
+          >
+            Prop Types
+          </h1>
+          <div>
+            <h2
+              style="margin:20px 0 0 0"
+            >
+              "BaseButton" Component
+            </h2>
+            <table
+              class="css-1uhv8nx"
+            >
+              <thead>
+                <tr>
+                  <th
+                    class="css-11b5gui"
+                  >
+                    property
+                  </th>
+                  <th
+                    class="css-11b5gui"
+                  >
+                    propType
+                  </th>
+                  <th
+                    class="css-11b5gui"
+                  >
+                    required
+                  </th>
+                  <th
+                    class="css-11b5gui"
+                  >
+                    default
+                  </th>
+                  <th
+                    class="css-11b5gui"
+                  >
+                    description
+                  </th>
+                </tr>
+              </thead>
+              <tbody>
+                <tr>
+                  <td
+                    class="css-1qcb1f7"
+                  >
+                    disabled
+                  </td>
+                  <td
+                    class="css-1qcb1f7"
+                  >
+                    <span />
+                  </td>
+                  <td
+                    class="css-11b5gui"
+                  >
+                    -
+                  </td>
+                  <td
+                    class="css-11b5gui"
+                  >
+                    <span
+                      style="color:#a11"
+                    >
+                      false
+                    </span>
+                  </td>
+                  <td
+                    class="css-11b5gui"
+                  />
+                </tr>
+                <tr>
+                  <td
+                    class="css-1qcb1f7"
+                  >
+                    label
+                  </td>
+                  <td
+                    class="css-1qcb1f7"
+                  >
+                    <span />
+                  </td>
+                  <td
+                    class="css-11b5gui"
+                  >
+                    yes
+                  </td>
+                  <td
+                    class="css-11b5gui"
+                  >
+                    -
+                  </td>
+                  <td
+                    class="css-11b5gui"
+                  />
+                </tr>
+                <tr>
+                  <td
+                    class="css-1qcb1f7"
+                  >
+                    onClick
+                  </td>
+                  <td
+                    class="css-1qcb1f7"
+                  >
+                    <span />
+                  </td>
+                  <td
+                    class="css-11b5gui"
+                  >
+                    -
+                  </td>
+                  <td
+                    class="css-11b5gui"
+                  >
+                    <span
+                      style="color:#170"
+                    >
+                      onClick
+                    </span>
+                  </td>
+                  <td
+                    class="css-11b5gui"
+                  />
+                </tr>
+                <tr>
+                  <td
+                    class="css-1qcb1f7"
+                  >
+                    style
+                  </td>
+                  <td
+                    class="css-1qcb1f7"
+                  >
+                    <span />
+                  </td>
+                  <td
+                    class="css-11b5gui"
+                  >
+                    -
+                  </td>
+                  <td
+                    class="css-11b5gui"
+                  >
+                    <span
+                      style="color:#666"
+                    >
+                      {}
+                    </span>
+                  </td>
+                  <td
+                    class="css-11b5gui"
+                  />
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/examples/official-storybook/stories/__snapshots__/addon-notes.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-notes.stories.storyshot
index a8dd3941c96..94e74767d4a 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-notes.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-notes.stories.storyshot
@@ -1,17 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Addons|Notes using decorator arguments, withMarkdownNotes 1`] = `
-<button>
-  Button with notes - check the notes panel for details
-</button>
-`;
-
-exports[`Storyshots Addons|Notes using decorator arguments, withNotes 1`] = `
-<button>
-  Button with notes - check the notes panel for details
-</button>
-`;
-
 exports[`Storyshots Addons|Notes with a markdown table 1`] = `
 <button>
   Button with notes - check the notes panel for details
@@ -35,3 +23,15 @@ exports[`Storyshots Addons|Notes withNotes rendering inline, github-flavored mar
   Button with notes - check the notes panel for details
 </button>
 `;
+
+exports[`Storyshots Addons|Notes.deprecated using decorator arguments, withMarkdownNotes 1`] = `
+<button>
+  Button with notes - check the notes panel for details
+</button>
+`;
+
+exports[`Storyshots Addons|Notes.deprecated using decorator arguments, withNotes 1`] = `
+<button>
+  Button with notes - check the notes panel for details
+</button>
+`;
diff --git a/examples/official-storybook/stories/__snapshots__/addon-viewport.stories.storyshot b/examples/official-storybook/stories/__snapshots__/addon-viewport.stories.storyshot
index d9e98e0fad7..9f7e1f3f1f3 100644
--- a/examples/official-storybook/stories/__snapshots__/addon-viewport.stories.storyshot
+++ b/examples/official-storybook/stories/__snapshots__/addon-viewport.stories.storyshot
@@ -20,7 +20,19 @@ exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Inherited 1`]
 </div>
 `;
 
-exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Overridden via "Viewport" component (deprecated) 1`] = `
+exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Overridden via "withViewport" parameterized decorator 1`] = `
+<div
+  class="css-0"
+>
+  I respect my parents but I should be looking good on 
+  <b>
+    iPad
+  </b>
+  .
+</div>
+`;
+
+exports[`Storyshots Addons|Viewport.deprecated Overridden via "Viewport" component 1`] = `
 <div
   class="css-0"
 >
@@ -32,7 +44,7 @@ exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Overridden vi
 </div>
 `;
 
-exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Overridden via "withViewport" decorator (deprecated) 1`] = `
+exports[`Storyshots Addons|Viewport.deprecated Overridden via "withViewport" decorator 1`] = `
 <div
   class="css-0"
 >
@@ -44,18 +56,6 @@ exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Overridden vi
 </div>
 `;
 
-exports[`Storyshots Addons|Viewport.Custom Default (Kindle Fire 2) Overridden via "withViewport" parameterized decorator 1`] = `
-<div
-  class="css-0"
->
-  I respect my parents but I should be looking good on 
-  <b>
-    iPad
-  </b>
-  .
-</div>
-`;
-
 exports[`Storyshots Addons|Viewport.withViewport onViewportChange 1`] = `
 <div
   class="css-1ruxp1v"