Merge branch 'next' into simplebar-scrollbars

2025-04-05 08:01:20 +08:00 · 2019-02-25 13:45:40 -05:00 · 2019-02-25 13:45:40 -05:00 · de59f6c1c8
commit de59f6c1c8
parent 94d23b0c11 c77438918c
67 changed files with 5039 additions and 2261 deletions
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@ -1,3 +1,31 @@
+## 5.0.0-rc.6 (February 25, 2019)
+
+### Bug Fixes
+
+* Addon-actions: FIX performance by upgrading to telejson 2.1 ([#5751](https://github.com/storybooks/storybook/pull/5751))
+* UI: FIX bad treeview mockdata ([#5741](https://github.com/storybooks/storybook/pull/5741))
+* UI: About page styling fixes ([#5732](https://github.com/storybooks/storybook/pull/5732))
+* UI: Restore the toolbar eject button ([#5737](https://github.com/storybooks/storybook/pull/5737))
+
+## 5.0.0-rc.5 (February 23, 2019)
+
+### Bug Fixes
+
+* UI: Fix `/` search hotkey so it doesn't type into the input ([#5702](https://github.com/storybooks/storybook/pull/5702))
+* Addon-a11y: Fix a11y setup being undefined ([#5724](https://github.com/storybooks/storybook/pull/5724))
+* UI: Fix duplicate theming packages ([#5722](https://github.com/storybooks/storybook/pull/5722))
+* Core: Clean up debug logging ([#5705](https://github.com/storybooks/storybook/pull/5705))
+* UI: Minor addon ux tweaks ([#5712](https://github.com/storybooks/storybook/pull/5712))
+* Addon-a11y: Fix story scrolling ([#5713](https://github.com/storybooks/storybook/pull/5713))
+* UI: Fix mobile styling ([#5709](https://github.com/storybooks/storybook/pull/5709))
+* UI: Fix tooltip bugs ([#5692](https://github.com/storybooks/storybook/pull/5692))
+* UI: Fix toolbar separators ([#5711](https://github.com/storybooks/storybook/pull/5711))
+
+### Maintenance
+
+* Typescript: migrate addon-backgrounds ([#5535](https://github.com/storybooks/storybook/pull/5535))
+* Typescript: fix typings for addon-backgrounds ([#5730](https://github.com/storybooks/storybook/pull/5730))
+
 ## 5.0.0-rc.4 (February 21, 2019)

 ### Features
--- a/README.md
+++ b/README.md
@ -131,10 +131,10 @@ See [Addon / Framework Support Table](ADDONS_SUPPORT.md)

 We have a badge! Link it to your live Storybook example.

-![Storybook](https://github.com/storybooks/press/blob/master/badges/storybook.svg)
+![Storybook](https://github.com/storybooks/brand/blob/master/badge/badge-storybook.svg)

 ```md
-[![Storybook](https://github.com/storybooks/press/blob/master/badges/storybook.svg)](link to site)
+[![Storybook](https://github.com/storybooks/brand/blob/master/badge/badge-storybook.svg)](link to site)
 ```

 If you're looking for material to use in your presentation about storybook, like logo's video material and the colors we use etc, you can find all of that at our [press repo](https://github.com/storybooks/press).
--- a/addons/a11y/README.md
+++ b/addons/a11y/README.md
@ -58,10 +58,11 @@ addParameters({
  a11y: {
    // ... axe options
    element: '#root', // optional selector which element to inspect
+    config: {} // axe-core configurationOptions (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#parameters-1)
+    options: {} // axe-core optionsParameter (https://github.com/dequelabs/axe-core/blob/develop/doc/API.md#options-parameter)
  },
 });

-
 storiesOf('button', module)
  .add('Accessible', () => (
    <button style={{ backgroundColor: 'black', color: 'white', }}>
--- a/addons/a11y/package.json
+++ b/addons/a11y/package.json
@ -38,7 +38,6 @@
    "memoizerific": "^1.11.3",
    "prop-types": "^15.6.2",
    "react": "^16.8.2",
-    "react-dom": "^16.8.1",
    "util-deprecate": "^1.0.2"
  },
  "publishConfig": {
--- a/addons/a11y/src/components/ColorBlindness.js
+++ b/addons/a11y/src/components/ColorBlindness.js
@ -18,6 +18,9 @@ const ColorIcon = styled.span(
  },
  ({ filter }) => ({
    filter: filter === 'mono' ? 'grayscale(100%)' : `url('#${filter}')`,
+  }),
+  ({ theme }) => ({
+    boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
  })
 );

--- a/addons/a11y/src/index.js
+++ b/addons/a11y/src/index.js
@ -9,7 +9,7 @@ import EVENTS, { PARAM_KEY } from './constants';

 const channel = addons.getChannel();
 let progress = Promise.resolve();
-let options;
+let setup = {};

 const getElement = () => {
  const storyRoot = document.getElementById('story-root');
@ -24,13 +24,20 @@ const report = input => {
  channel.emit(EVENTS.RESULT, input);
 };

-const run = o => {
+const run = (c, o) => {
  progress = progress.then(() => {
    axe.reset();
-    if (o) {
-      axe.configure(o);
+    if (c) {
+      axe.configure(c);
    }
-    return axe.run(getElement()).then(report);
+    return axe
+      .run(
+        getElement(),
+        o || {
+          restoreScroll: true,
+        }
+      )
+      .then(report);
  });
 };

@ -41,14 +48,14 @@ export const withA11Y = makeDecorator({
  allowDeprecatedUsage: false,

  wrapper: (getStory, context, opt) => {
-    options = opt.parameters || opt.options;
+    setup = opt.parameters || opt.options || {};

    return getStory(context);
  },
 });

-channel.on(STORY_RENDERED, () => run(options));
-channel.on(EVENTS.REQUEST, () => run(options));
+channel.on(STORY_RENDERED, () => run(setup.config, setup.options));
+channel.on(EVENTS.REQUEST, () => run(setup.config, setup.options));

 if (module && module.hot && module.hot.decline) {
  module.hot.decline();
@ -63,7 +70,7 @@ export const checkA11y = deprecate(
 // TODO: REMOVE at v6.0.0
 export const configureA11y = deprecate(
  config => {
-    options = config;
+    setup = config;
  },
  stripIndents`
    configureA11y is deprecated, please configure addon-a11y using the addParameter api:
--- a/addons/actions/package.json
+++ b/addons/actions/package.json
@ -29,9 +29,8 @@
    "fast-deep-equal": "^2.0.1",
    "global": "^4.3.2",
    "lodash": "^4.17.11",
-    "make-error": "^1.3.5",
-    "polished": "^2.3.3",
    "prop-types": "^15.6.2",
+    "polished": "^2.3.3",
    "react": "^16.8.2",
    "react-inspector": "^2.3.0",
    "uuid": "^3.3.2"
--- a/addons/backgrounds/src/components/ColorIcon.tsx
+++ b/addons/backgrounds/src/components/ColorIcon.tsx
@ -1,9 +1,14 @@
 import { styled } from '@storybook/theming';

-export const ColorIcon = styled.span(({ background }: { background: string }) => ({
-  borderRadius: '1rem',
-  display: 'block',
-  height: '1rem',
-  width: '1rem',
-  background,
-}));
+export const ColorIcon = styled.span(
+  ({ background }: { background: string }) => ({
+    borderRadius: '1rem',
+    display: 'block',
+    height: '1rem',
+    width: '1rem',
+    background,
+  }),
+  ({ theme }) => ({
+    boxShadow: `${theme.appBorderColor} 0 0 0 1px inset`,
+  }),
+);
--- a/addons/backgrounds/src/containers/BackgroundSelector.tsx
+++ b/addons/backgrounds/src/containers/BackgroundSelector.tsx
@ -8,7 +8,7 @@ import { SET_STORIES } from '@storybook/core-events';
 import { Icons, IconButton, WithTooltip, TooltipLinkList } from '@storybook/components';

 import { PARAM_KEY } from '../constants';
-import { ColorIcon } from '../components';
+import { ColorIcon } from '../components/ColorIcon';
 import { BackgroundConfig, BackgroundSelectorItem } from '../models';

 const iframeId = 'storybook-preview-background';
--- a/addons/backgrounds/src/index.ts
+++ b/addons/backgrounds/src/index.ts
@ -1,4 +1,4 @@
-import { addons, makeDecorator } from '@storybook/addons';
+import { addons, makeDecorator, StoryContext, StoryGetter, WrapperSettings } from '@storybook/addons';
 import deprecate from 'util-deprecate';

 import { REGISTER_SUBSCRIPTION } from '@storybook/core-events';
@ -17,7 +17,7 @@ export const withBackgrounds = makeDecorator({
  parameterName: 'backgrounds',
  skipIfNoParametersOrOptions: true,
  allowDeprecatedUsage: true,
-  wrapper: (getStory, context, { options, parameters }) => {
+  wrapper: (getStory: StoryGetter, context: StoryContext, { options, parameters }: WrapperSettings) => {
    const data = parameters || options || [];
    const backgrounds = Array.isArray(data) ? data : Object.values(data);

--- a/addons/cssresources/package.json
+++ b/addons/cssresources/package.json
@ -25,18 +25,12 @@
    "prepare": "node ../../scripts/prepare.js"
  },
  "dependencies": {
-    "@emotion/styled": "10.0.6",
    "@storybook/addons": "5.0.0-beta.3",
-    "@storybook/channels": "5.0.0-beta.3",
    "@storybook/components": "5.0.0-beta.3",
    "@storybook/core-events": "5.0.0-beta.3",
    "core-js": "^2.6.2",
    "global": "^4.3.2",
-    "prop-types": "^15.6.2",
-    "react": "^16.8.2",
-    "react-dom": "^16.8.1",
-    "react-syntax-highlighter": "^8.0.1",
-    "util-deprecate": "^1.0.2"
+    "react": "^16.8.2"
  },
  "peerDependencies": {
    "react": "*"
--- a/addons/info/package.json
+++ b/addons/info/package.json
@ -33,8 +33,7 @@
    "prop-types": "^15.6.2",
    "react": "^16.8.2",
    "react-addons-create-fragment": "^15.5.3",
-    "react-element-to-jsx-string": "^14.0.2",
-    "react-is": "^16.8.1",
+    "react-is": "^16.8.3",
    "react-lifecycles-compat": "^3.0.4",
    "util-deprecate": "^1.0.2"
  },
--- a/addons/info/src/components/PropTable/style.css
+++ b/addons/info/src/components/PropTable/style.css
@ -1,3 +1,7 @@
+.info-table {
+  width: 100%;
+}
+
 .info-table, .info-table td, .info-table th {
  border-collapse: collapse;
  border: 1px solid #cccccc;
--- a/addons/jest/package.json
+++ b/addons/jest/package.json
@ -29,7 +29,6 @@
  },
  "dependencies": {
    "@storybook/addons": "5.0.0-beta.3",
-    "@storybook/components": "5.0.0-beta.3",
    "@storybook/core-events": "5.0.0-beta.3",
    "@storybook/theming": "5.0.0-beta.3",
    "core-js": "^2.6.2",
--- a/addons/knobs/package.json
+++ b/addons/knobs/package.json
@ -35,8 +35,7 @@
    "qs": "^6.5.2",
    "react-color": "^2.17.0",
    "react-lifecycles-compat": "^3.0.4",
-    "react-select": "^2.3.0",
-    "util-deprecate": "^1.0.2"
+    "react-select": "^2.3.0"
  },
  "peerDependencies": {
    "react": "*"
--- a/addons/ondevice-knobs/package.json
+++ b/addons/ondevice-knobs/package.json
@ -26,7 +26,7 @@
    "deep-equal": "^1.0.1",
    "prop-types": "^15.6.2",
    "react-native-color-picker": "^0.4.0",
-    "react-native-modal-datetime-picker": "^5.1.0",
+    "react-native-modal-datetime-picker": "^6.0.0",
    "react-native-modal-selector": "^1.0.2",
    "react-native-switch": "^1.5.0"
  },
--- a/addons/storyshots/storyshots-core/package.json
+++ b/addons/storyshots/storyshots-core/package.json
@ -35,6 +35,7 @@
  },
  "devDependencies": {
    "enzyme-to-json": "^3.3.4",
+    "jest-emotion": "^10.0.6",
    "react": "^16.8.2"
  },
  "publishConfig": {
--- a/addons/viewport/src/Tool.js
+++ b/addons/viewport/src/Tool.js
@ -20,7 +20,7 @@ const createItem = memoize(1000)((id, name, value, change) => ({
  onClick: () => {
    change({ selected: id, expanded: false });
  },
-  right: `${value.width}-${value.height}`,
+  right: `${value.width.replace('px', '')}x${value.height.replace('px', '')}`,
  value,
 }));

--- a/app/angular/package.json
+++ b/app/angular/package.json
@ -32,8 +32,6 @@
    "core-js": "^2.6.2",
    "fork-ts-checker-webpack-plugin": "^0.5.2",
    "global": "^4.3.2",
-    "react": "^16.8.2",
-    "react-dom": "^16.8.1",
    "regenerator-runtime": "^0.12.1",
    "sass-loader": "^7.1.0",
    "ts-loader": "^5.3.2",
--- a/app/ember/package.json
+++ b/app/ember/package.json
@ -28,8 +28,6 @@
    "common-tags": "^1.8.0",
    "core-js": "^2.6.2",
    "global": "^4.3.2",
-    "react": "^16.8.2",
-    "react-dom": "^16.8.1",
    "regenerator-runtime": "^0.12.1"
  },
  "peerDependencies": {
--- a/app/html/package.json
+++ b/app/html/package.json
@ -30,8 +30,6 @@
    "core-js": "^2.6.2",
    "global": "^4.3.2",
    "html-loader": "^0.5.5",
-    "react": "^16.8.2",
-    "react-dom": "^16.8.1",
    "regenerator-runtime": "^0.12.1"
  },
  "peerDependencies": {
--- a/app/marko/package.json
+++ b/app/marko/package.json
@ -32,8 +32,6 @@
    "global": "^4.3.2",
    "marko-loader": "^1.3.3",
    "raw-loader": "^1.0.0",
-    "react": "^16.8.2",
-    "react-dom": "^16.8.1",
    "regenerator-runtime": "^0.12.1"
  },
  "peerDependencies": {
--- a/app/mithril/package.json
+++ b/app/mithril/package.json
@ -31,8 +31,6 @@
    "common-tags": "^1.8.0",
    "core-js": "^2.6.2",
    "global": "^4.3.2",
-    "react": "^16.8.2",
-    "react-dom": "^16.8.1",
    "regenerator-runtime": "^0.12.1"
  },
  "devDependencies": {
--- a/app/polymer/package.json
+++ b/app/polymer/package.json
@ -30,8 +30,6 @@
    "common-tags": "^1.8.0",
    "core-js": "^2.6.2",
    "global": "^4.3.2",
-    "react": "^16.8.2",
-    "react-dom": "^16.8.1",
    "regenerator-runtime": "^0.12.1",
    "webpack": "^4.29.3"
  },
--- a/app/preact/package.json
+++ b/app/preact/package.json
@ -31,8 +31,6 @@
    "common-tags": "^1.8.0",
    "core-js": "^2.6.2",
    "global": "^4.3.2",
-    "react": "^16.8.2",
-    "react-dom": "^16.8.1",
    "regenerator-runtime": "^0.12.1"
  },
  "devDependencies": {
--- a/app/react/package.json
+++ b/app/react/package.json
@ -31,9 +31,8 @@
    "@babel/preset-react": "^7.0.0",
    "@storybook/core": "5.0.0-beta.3",
    "@storybook/node-logger": "5.0.0-beta.3",
-    "@storybook/theming": "5.0.0-beta.3",
    "@svgr/webpack": "^4.0.3",
-    "babel-plugin-named-asset-import": "^0.3.0",
+    "babel-plugin-named-asset-import": "^0.3.1",
    "babel-plugin-react-docgen": "^2.0.2",
    "babel-preset-react-app": "^7.0.1",
    "common-tags": "^1.8.0",
--- a/app/riot/package.json
+++ b/app/riot/package.json
@ -30,8 +30,6 @@
    "core-js": "^2.6.2",
    "global": "^4.3.2",
    "raw-loader": "^1.0.0",
-    "react": "^16.8.2",
-    "react-dom": "^16.8.1",
    "regenerator-runtime": "^0.12.1"
  },
  "devDependencies": {
--- a/app/svelte/package.json
+++ b/app/svelte/package.json
@ -30,8 +30,6 @@
    "common-tags": "^1.8.0",
    "core-js": "^2.6.2",
    "global": "^4.3.2",
-    "react": "^16.8.2",
-    "react-dom": "^16.8.1",
    "regenerator-runtime": "^0.12.1"
  },
  "devDependencies": {
--- a/app/vue/package.json
+++ b/app/vue/package.json
@ -30,8 +30,6 @@
    "common-tags": "^1.8.0",
    "core-js": "^2.6.2",
    "global": "^4.3.2",
-    "react": "^16.8.2",
-    "react-dom": "^16.8.1",
    "regenerator-runtime": "^0.12.1"
  },
  "devDependencies": {
--- a/docs/static/versions.json
+++ b/docs/static/versions.json
@ -1,8 +1,8 @@
 {
  "next": {
-    "version": "5.0.0-rc.4",
+    "version": "5.0.0-rc.6",
    "info": {
-      "plain": "### Features\n\n* Handle prerelease versions in version check ([#5641](https://github.com/storybooks/storybook/pull/5641))\n\n### Bug Fixes\n\n* UI: Fix scrollbar persistence ([#5689](https://github.com/storybooks/storybook/pull/5689))\n* UI: Fix keyboard shortcuts of toggleNav & togglePanel ([#5677](https://github.com/storybooks/storybook/pull/5677))\n* Core: Fix singleton module issue for manager & theme ([#5679](https://github.com/storybooks/storybook/pull/5679))\n* Addon-storysource: Fix source not updating ([#5672](https://github.com/storybooks/storybook/pull/5672))\n* Core: Fix broken error reporting ([#5678](https://github.com/storybooks/storybook/pull/5678))\n* Compare component name to story name, not story fn ([#5649](https://github.com/storybooks/storybook/pull/5649))\n\n### Maintenance\n\n* CLI: Cleanup version notice ([#5699](https://github.com/storybooks/storybook/pull/5699))\n* Core: Fix story fn consistency ([#5669](https://github.com/storybooks/storybook/pull/5669))"
+      "plain": "### Bug Fixes\n\n* Addon-actions: FIX performance by upgrading to telejson 2.1 ([#5751](https://github.com/storybooks/storybook/pull/5751))\n* UI: FIX bad treeview mockdata ([#5741](https://github.com/storybooks/storybook/pull/5741))\n* UI: About page styling fixes ([#5732](https://github.com/storybooks/storybook/pull/5732))\n* UI: Restore the toolbar eject button ([#5737](https://github.com/storybooks/storybook/pull/5737))"
    }
  },
  "latest": {
--- a/examples/official-storybook/config.js
+++ b/examples/official-storybook/config.js
@ -41,7 +41,13 @@ addDecorator(storyFn => (
 ));

 addParameters({
-  a11y: {},
+  a11y: {
+    configure: {},
+    options: {
+      checks: { 'color-contrast': { options: { noScroll: true } } },
+      restoreScroll: true,
+    },
+  },
  options: {
    name: 'Storybook',
    hierarchySeparator: /\/|\./,
--- a/examples/official-storybook/stories/core/scroll.stories.js
+++ b/examples/official-storybook/stories/core/scroll.stories.js
@ -0,0 +1,29 @@
+import React from 'react';
+
+export default {
+  title: 'Core|Scroll',
+};
+
+export const story1 = () => (
+  <div>
+    <pre>START, when switching stories, you should be able to read this at the top of the page</pre>
+    <div style={{ height: '100vh' }} />
+    <pre>
+      END, this text should be below the scroll "fold" and therefore only be readable after
+      scrolling
+    </pre>
+  </div>
+);
+story1.title = 'story with 100vh padding 1';
+
+export const story2 = () => (
+  <div>
+    <pre>START, when switching stories, you should be able to read this at the top of the page</pre>
+    <div style={{ height: '100vh' }} />
+    <pre>
+      END, this text should be below the scroll "fold" and therefore only be readable after
+      scrolling
+    </pre>
+  </div>
+);
+story2.title = 'story with 100vh padding 2';
--- a/examples/official-storybook/tests/snapshots/storyshots.test.js.snap
+++ b/examples/official-storybook/tests/snapshots/storyshots.test.js.snap
@ -2833,7 +2833,19 @@ exports[`Storyshots Core|Parameters passed to story 1`] = `
    "hierarchySeparator": {},
    "name": "Storybook"
  },
-  "a11y": {},
+  "a11y": {
+    "configure": {},
+    "options": {
+      "checks": {
+        "color-contrast": {
+          "options": {
+            "noScroll": true
+          }
+        }
+      },
+      "restoreScroll": true
+    }
+  },
  "viewports": {
    "iphone5": {
      "name": "iPhone 5",
@ -3003,6 +3015,34 @@ exports[`Storyshots Core|Parameters passed to story 1`] = `
 </pre>
 `;

+exports[`Storyshots Core|Scroll story with 100vh padding 1 1`] = `
+<div>
+  <pre>
+    START, when switching stories, you should be able to read this at the top of the page
+  </pre>
+  <div
+    style="height:100vh"
+  />
+  <pre>
+    END, this text should be below the scroll "fold" and therefore only be readable after scrolling
+  </pre>
+</div>
+`;
+
+exports[`Storyshots Core|Scroll story with 100vh padding 2 1`] = `
+<div>
+  <pre>
+    START, when switching stories, you should be able to read this at the top of the page
+  </pre>
+  <div
+    style="height:100vh"
+  />
+  <pre>
+    END, this text should be below the scroll "fold" and therefore only be readable after scrolling
+  </pre>
+</div>
+`;
+
 exports[`Storyshots UI|Notifications/NotificationItem longText 1`] = `
 .emotion-1 {
  display: block;
@ -3640,29 +3680,6 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
  margin-right: 15px;
 }

-.emotion-5 {
-  height: 40px;
-  background: none;
-  color: inherit;
-  padding: 0;
-  cursor: pointer;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  transition: color 0.2s linear,border-bottom-color 0.2s linear;
-}
-
-.emotion-5:hover,
-.emotion-5:focus {
-  outline: 0 none;
-  color: #1EA7FD;
-}
-
-.emotion-5 > svg {
-  width: 15px;
-}
-
 .emotion-4 {
  shape-rendering: inherit;
  -webkit-transform: translate3d(0,0,0);
@ -3687,6 +3704,29 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
  width: 100%;
 }

+.emotion-5 {
+  height: 40px;
+  background: none;
+  color: inherit;
+  padding: 0;
+  cursor: pointer;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+}
+
+.emotion-5:hover,
+.emotion-5:focus {
+  outline: 0 none;
+  color: #1EA7FD;
+}
+
+.emotion-5 > svg {
+  width: 15px;
+}
+
 .emotion-96 {
  display: -webkit-box;
  display: -webkit-flex;
@ -4115,29 +4155,6 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
  margin-right: 15px;
 }

-.emotion-5 {
-  height: 40px;
-  background: none;
-  color: inherit;
-  padding: 0;
-  cursor: pointer;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  transition: color 0.2s linear,border-bottom-color 0.2s linear;
-}
-
-.emotion-5:hover,
-.emotion-5:focus {
-  outline: 0 none;
-  color: #1EA7FD;
-}
-
-.emotion-5 > svg {
-  width: 15px;
-}
-
 .emotion-4 {
  shape-rendering: inherit;
  -webkit-transform: translate3d(0,0,0);
@ -4162,6 +4179,29 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
  width: 100%;
 }

+.emotion-5 {
+  height: 40px;
+  background: none;
+  color: inherit;
+  padding: 0;
+  cursor: pointer;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+}
+
+.emotion-5:hover,
+.emotion-5:focus {
+  outline: 0 none;
+  color: #1EA7FD;
+}
+
+.emotion-5 > svg {
+  width: 15px;
+}
+
 .emotion-96 {
  display: -webkit-box;
  display: -webkit-flex;
@ -4467,7 +4507,7 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
 >
  <div
    class="emotion-8"
-    title="bar"
+    title="flexbar"
  >
    <div
      data-simplebar="true"
@ -4496,7 +4536,6 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
              >
                <div
                  class="emotion-2"
-                  title="side left"
                >
                  <div
                    class="emotion-1"
@ -4513,7 +4552,6 @@ exports[`Storyshots UI|Settings/ShortcutsScreen default shortcuts 1`] = `
                </div>
                <div
                  class="emotion-6"
-                  title="side right"
                >
                  <button
                    class="emotion-5"
--- a/lib/channel-postmessage/package.json
+++ b/lib/channel-postmessage/package.json
@ -22,11 +22,9 @@
  },
  "dependencies": {
    "@storybook/channels": "5.0.0-beta.3",
+    "@storybook/client-logger": "5.0.0-beta.3",
    "global": "^4.3.2",
-    "telejson": "^1.0.1"
-  },
-  "devDependencies": {
-    "@types/json-stringify-safe": "^5.0.0"
+    "telejson": "^2.1.1"
  },
  "publishConfig": {
    "access": "public"
--- a/lib/channel-postmessage/src/index.ts
+++ b/lib/channel-postmessage/src/index.ts
@ -1,5 +1,7 @@
 import { window, document } from 'global';
 import Channel, { ChannelEvent, ChannelHandler } from '@storybook/channels';
+import { logger } from '@storybook/client-logger';
+
 import { isJSON, parse, stringify } from 'telejson';

 interface RawEvent {
@ -90,15 +92,12 @@ export class PostmsgTransport {
      const { data } = rawEvent;
      const { key, event } = typeof data === 'string' && isJSON(data) ? parse(data) : data;
      if (key === KEY) {
-        // tslint:disable-next-line no-console
-        console.debug(`message arrived at ${this.config.page}`, event.type, ...event.args);
+        logger.debug(`message arrived at ${this.config.page}`, event.type, ...event.args);
        this.handler(event);
      }
    } catch (error) {
-      // tslint:disable-next-line no-console
-      console.error(error);
-      // tslint:disable-next-line no-debugger
-      debugger;
+      logger.error(error);
+      // debugger;
    }
  }
 }
--- a/lib/client-logger/src/index.test.ts
+++ b/lib/client-logger/src/index.test.ts
@ -3,17 +3,29 @@ import { logger } from '.';
 describe('client-logger', () => {
  const initialConsole = { ...global.console };
  beforeEach(() => {
+    global.console.debug = jest.fn();
    global.console.log = jest.fn();
+    global.console.info = jest.fn();
    global.console.warn = jest.fn();
    global.console.error = jest.fn();
  });
  afterAll(() => {
    global.console = initialConsole;
  });
+  it('should have an debug method that displays the message in red, with a trace', () => {
+    const message = 'debug message';
+    logger.debug(message);
+    expect(global.console.debug).toHaveBeenCalledWith(message);
+  });
+  it('should have an log method that displays the message in red, with a trace', () => {
+    const message = 'log message';
+    logger.log(message);
+    expect(global.console.log).toHaveBeenCalledWith(message);
+  });
  it('should have an info method that displays the message', () => {
    const message = 'information';
    logger.info(message);
-    expect(global.console.log).toHaveBeenCalledWith(message);
+    expect(global.console.info).toHaveBeenCalledWith(message);
  });
  it('should have a warning method that displays the message in yellow, with a trace', () => {
    const message = 'warning message';
--- a/lib/client-logger/src/index.ts
+++ b/lib/client-logger/src/index.ts
@ -1,7 +1,11 @@
 const { console } = global;

+/* tslint:disable: no-console */
+
 export const logger = {
-  info: (message: any, ...rest: any[]): void => console.log(message, ...rest),
+  debug: (message: any, ...rest: any[]): void => console.debug(message, ...rest),
+  log: (message: any, ...rest: any[]): void => console.log(message, ...rest),
+  info: (message: any, ...rest: any[]): void => console.info(message, ...rest),
  warn: (message: any, ...rest: any[]): void => console.warn(message, ...rest),
  error: (message: any, ...rest: any[]): void => console.error(message, ...rest),
 };
--- a/lib/components/package.json
+++ b/lib/components/package.json
@ -27,10 +27,7 @@
    "@storybook/router": "5.0.0-beta.3",
    "@storybook/theming": "5.0.0-beta.3",
    "global": "^4.3.2",
-    "immer": "^2.0.0",
    "js-beautify": "^1.8.9",
-    "lodash.pick": "^4.4.0",
-    "lodash.throttle": "^4.1.1",
    "memoizerific": "^1.11.3",
    "polished": "^2.3.3",
    "prop-types": "^15.6.2",
@ -38,13 +35,10 @@
    "react-dom": "^16.8.1",
    "react-focus-lock": "^1.17.7",
    "react-helmet-async": "^0.2.0",
-    "react-inspector": "^2.3.0",
    "react-popper-tooltip": "^2.8.0",
    "react-syntax-highlighter": "^8.0.1",
    "react-textarea-autosize": "^7.0.4",
-    "reactjs-popup": "^1.3.2",
    "recompose": "^0.30.0",
-    "render-fragment": "^0.1.1",
    "simplebar-react": "^0.1.4"
  },
  "peerDependencies": {
--- a/lib/components/src/bar/bar.js
+++ b/lib/components/src/bar/bar.js
@ -61,22 +61,16 @@ const BarInner = styled.div({
 export const FlexBar = ({ children, ...rest }) => {
  const [left, right] = Children.toArray(children);
  return (
-    <Bar {...rest} title="bar">
+    <Bar {...rest}>
      {/* TODO:
        - Fix vertical scrollbar when we only want to see the horizontal bar
-        - Likely caused because we're appending toolbar icons after the initial load 
+        - Likely caused because we're appending toolbar icons after the initial load
        - https://github.com/Grsmto/simplebar#notifying-the-plugin-of-content-changes
       */}
      <ScrollArea>
        <BarInner>
-          <Side left title="side left">
-            {left}
-          </Side>
-          {right ? (
-            <Side right title="side right">
-              {right}
-            </Side>
-          ) : null}
+          <Side left>{left}</Side>
+          {right ? <Side right>{right}</Side> : null}
        </BarInner>
      </ScrollArea>
    </Bar>
--- a/lib/components/src/bar/separator.js
+++ b/lib/components/src/bar/separator.js
@ -31,12 +31,6 @@ export const Separator = styled.span(
          '& + &': {
            display: 'none',
          },
-          '&:first-of-type': {
-            display: 'none',
-          },
-          '&:last-of-type': {
-            display: 'none',
-          },
        }
 );
 Separator.displayName = 'Separator';
--- a/lib/components/src/tabs/snapshots/tabs.stories.storyshot
+++ b/lib/components/src/tabs/snapshots/tabs.stories.storyshot
@ -166,7 +166,7 @@ exports[`Storyshots Basics|Tabs stateful - dynamic 1`] = `
  >
    <div
      class="emotion-9"
-      title="bar"
+      title="flexbar"
    >
      <div
        data-simplebar="true"
@ -195,7 +195,6 @@ exports[`Storyshots Basics|Tabs stateful - dynamic 1`] = `
                >
                  <div
                    class="emotion-7"
-                    title="side left"
                  >
                    <div
                      class="emotion-6"
@ -505,7 +504,7 @@ exports[`Storyshots Basics|Tabs stateful - no initial 1`] = `
  >
    <div
      class="emotion-9"
-      title="bar"
+      title="flexbar"
    >
      <div
        data-simplebar="true"
@ -534,7 +533,6 @@ exports[`Storyshots Basics|Tabs stateful - no initial 1`] = `
                >
                  <div
                    class="emotion-7"
-                    title="side left"
                  >
                    <div
                      class="emotion-6"
@ -796,7 +794,7 @@ exports[`Storyshots Basics|Tabs stateful - static 1`] = `
  >
    <div
      class="emotion-5"
-      title="bar"
+      title="flexbar"
    >
      <div
        data-simplebar="true"
@ -825,7 +823,6 @@ exports[`Storyshots Basics|Tabs stateful - static 1`] = `
                >
                  <div
                    class="emotion-3"
-                    title="side left"
                  >
                    <div
                      class="emotion-2"
@ -1070,7 +1067,7 @@ exports[`Storyshots Basics|Tabs stateless - absolute 1`] = `
  >
    <div
      class="emotion-9"
-      title="bar"
+      title="flexbar"
    >
      <div
        data-simplebar="true"
@ -1099,7 +1096,6 @@ exports[`Storyshots Basics|Tabs stateless - absolute 1`] = `
                >
                  <div
                    class="emotion-7"
-                    title="side left"
                  >
                    <div
                      class="emotion-6"
@ -1411,7 +1407,7 @@ exports[`Storyshots Basics|Tabs stateless - bordered 1`] = `
  >
    <div
      class="emotion-9"
-      title="bar"
+      title="flexbar"
    >
      <div
        data-simplebar="true"
@ -1440,7 +1436,6 @@ exports[`Storyshots Basics|Tabs stateless - bordered 1`] = `
                >
                  <div
                    class="emotion-7"
-                    title="side left"
                  >
                    <div
                      class="emotion-6"
@ -1779,7 +1774,7 @@ exports[`Storyshots Basics|Tabs stateless - no scrolling 1`] = `
  >
    <div
      class="emotion-9"
-      title="bar"
+      title="flexbar"
    >
      <div
        data-simplebar="true"
@ -1808,7 +1803,6 @@ exports[`Storyshots Basics|Tabs stateless - no scrolling 1`] = `
                >
                  <div
                    class="emotion-7"
-                    title="side left"
                  >
                    <div
                      class="emotion-6"
@ -2137,7 +2131,7 @@ exports[`Storyshots Basics|Tabs stateless - with tools 1`] = `
  >
    <div
      class="emotion-10"
-      title="bar"
+      title="flexbar"
    >
      <div
        data-simplebar="true"
@ -2166,7 +2160,6 @@ exports[`Storyshots Basics|Tabs stateless - with tools 1`] = `
                >
                  <div
                    class="emotion-7"
-                    title="side left"
                  >
                    <div
                      class="emotion-6"
@ -2218,7 +2211,6 @@ exports[`Storyshots Basics|Tabs stateless - with tools 1`] = `
                  </div>
                  <div
                    class="emotion-8"
-                    title="side right"
                  >
                    <button
                      type="button"
--- a/lib/core/package.json
+++ b/lib/core/package.json
@ -31,7 +31,6 @@
    "@storybook/client-logger": "5.0.0-beta.3",
    "@storybook/core-events": "5.0.0-beta.3",
    "@storybook/node-logger": "5.0.0-beta.3",
-    "@storybook/theming": "5.0.0-beta.3",
    "@storybook/router": "5.0.0-beta.3",
    "@storybook/ui": "5.0.0-beta.3",
    "airbnb-js-shims": "^1 || ^2",
@ -39,12 +38,10 @@
    "babel-plugin-add-react-displayname": "^0.0.5",
    "babel-plugin-emotion": "^10.0.7",
    "babel-plugin-macros": "^2.4.5",
-    "babel-preset-env": "^1.7.0",
    "babel-preset-minify": "^0.5.0 || 0.6.0-alpha.5",
    "boxen": "^2.1.0",
    "case-sensitive-paths-webpack-plugin": "^2.2.0",
    "chalk": "^2.4.2",
-    "child-process-promise": "^2.2.1",
    "cli-table3": "0.5.1",
    "commander": "^2.19.0",
    "common-tags": "^1.8.0",
@ -66,12 +63,11 @@
    "json5": "^2.1.0",
    "lazy-universal-dotenv": "^2.0.0",
    "node-fetch": "^2.2.0",
-    "object.omit": "^3.0.0",
    "opn": "^5.4.0",
    "postcss-flexbugs-fixes": "^4.1.0",
    "postcss-loader": "^3.0.0",
    "pretty-hrtime": "^1.0.3",
-    "prop-types": "^15.6.2",
+    "qs": "^6.5.2",
    "raw-loader": "^1.0.0",
    "react-dev-utils": "^7.0.0",
    "regenerator-runtime": "^0.12.1",
@ -80,9 +76,7 @@
    "semver": "^5.6.0",
    "serve-favicon": "^2.5.0",
    "shelljs": "^0.8.2",
-    "spawn-promise": "^0.1.8",
    "style-loader": "^0.23.1",
-    "svg-url-loader": "^2.3.2",
    "terser-webpack-plugin": "^1.2.2",
    "url-loader": "^1.1.2",
    "util-deprecate": "^1.0.2",
@ -91,7 +85,6 @@
    "webpack-hot-middleware": "^2.24.3"
  },
  "devDependencies": {
-    "flush-promises": "^1.0.2",
    "mock-fs": "^4.7.0"
  },
  "peerDependencies": {
--- a/lib/core/src/client/preview/start.js
+++ b/lib/core/src/client/preview/start.js
@ -131,11 +131,6 @@ export default function start(render, { decorateStory } = {}) {
        return;
      }

-      if (!forceRender) {
-        // Scroll to top of the page when changing story
-        document.documentElement.scrollTop = 0;
-      }
-
      if (!forceRender && previousKind && previousStory) {
        addons.getChannel().emit(Events.STORY_CHANGED, id);
      }
@ -155,6 +150,10 @@ export default function start(render, { decorateStory } = {}) {
    previousRevision = revision;
    previousKind = kind;
    previousStory = name;
+
+    if (!forceRender) {
+      document.documentElement.scrollTop = 0;
+    }
  };

  // initialize the UI
--- a/lib/core/src/server/common/babel-loader.js
+++ b/lib/core/src/server/common/babel-loader.js
@ -11,25 +11,3 @@ export default options => ({
  include: includePaths,
  exclude: excludePaths,
 });
-
-export const nodeModulesBabelLoader = {
-  test: /\.js$/,
-  include: /\/node_modules\/safe-eval\//,
-  use: [
-    {
-      loader: 'babel-loader',
-      options: {
-        cacheDirectory: true,
-        babelrc: false,
-        presets: [
-          [
-            'env',
-            {
-              modules: 'commonjs',
-            },
-          ],
-        ],
-      },
-    },
-  ],
-};
--- a/lib/core/src/server/manager/manager-webpack.config.js
+++ b/lib/core/src/server/manager/manager-webpack.config.js
@ -10,21 +10,12 @@ import findCacheDir from 'find-cache-dir';
 import { version } from '../../../package.json';
 import { getManagerHeadHtml } from '../utils/template';
 import { loadEnv } from '../config/utils';
-import babelLoader, { nodeModulesBabelLoader } from '../common/babel-loader';
+import babelLoader from '../common/babel-loader';

 const coreDirName = path.dirname(require.resolve('@storybook/core/package.json'));
 const context = path.join(coreDirName, '../../node_modules');
 const cacheDir = findCacheDir({ name: 'storybook' });

-const storybookPackages = [
-  '@storybook/router',
-  '@storybook/theming',
-  '@storybook/channels',
-  '@storybook/client-api',
-  '@storybook/core',
-  '@storybook/ui',
-];
-
 export default ({ configDir, configType, entries, dll, outputDir, cache, babelOptions }) => {
  const { raw, stringified } = loadEnv();
  const isProd = configType === 'PRODUCTION';
@ -68,20 +59,12 @@ export default ({ configDir, configType, entries, dll, outputDir, cache, babelOp
      new Dotenv({ silent: true }),
    ].filter(Boolean),
    module: {
-      rules: [babelLoader(babelOptions), nodeModulesBabelLoader],
+      rules: [babelLoader(babelOptions)],
    },
    resolve: {
      extensions: ['.mjs', '.js', '.jsx', '.json'],
      modules: ['node_modules'].concat(raw.NODE_PATH || []),
      alias: {
-        'core-js': path.dirname(require.resolve('core-js/package.json')),
-        ...storybookPackages.reduce(
-          (acc, i) =>
-            Object.assign(acc, {
-              [i]: path.dirname(require.resolve(`${i}/package.json`)),
-            }),
-          {}
-        ),
        ...uiPaths,
      },
    },
--- a/lib/core/src/server/preview/iframe-webpack.config.js
+++ b/lib/core/src/server/preview/iframe-webpack.config.js
@ -7,7 +7,7 @@ import WatchMissingNodeModulesPlugin from 'react-dev-utils/WatchMissingNodeModul
 import TerserWebpackPlugin from 'terser-webpack-plugin';
 import resolveFrom from 'resolve-from';

-import babelLoader, { nodeModulesBabelLoader } from '../common/babel-loader';
+import babelLoader from '../common/babel-loader';
 import { nodeModulesPaths, loadEnv } from '../config/utils';
 import { getPreviewHeadHtml, getPreviewBodyHtml } from '../utils/template';

@ -68,7 +68,6 @@ export default ({
    module: {
      rules: [
        babelLoader(babelOptions),
-        nodeModulesBabelLoader,
        {
          test: /\.md$/,
          use: [
--- a/lib/router/package.json
+++ b/lib/router/package.json
@ -22,7 +22,6 @@
  "dependencies": {
    "@reach/router": "^1.2.1",
    "@storybook/theming": "5.0.0-beta.3",
-    "global": "^4.3.2",
    "memoizerific": "^1.11.3",
    "qs": "^6.5.2"
  },
--- a/lib/theming/package.json
+++ b/lib/theming/package.json
@ -22,7 +22,7 @@
  },
  "dependencies": {
    "@emotion/core": "^10.0.7",
-    "@emotion/styled": "^10.0.5",
+    "@emotion/styled": "^10.0.7",
    "@storybook/client-logger": "5.0.0-beta.3",
    "common-tags": "^1.8.0",
    "deep-object-diff": "^1.1.0",
--- a/lib/ui/package.json
+++ b/lib/ui/package.json
@ -28,19 +28,12 @@
    "@storybook/core-events": "5.0.0-beta.3",
    "@storybook/router": "5.0.0-beta.3",
    "@storybook/theming": "5.0.0-beta.3",
-    "eventemitter3": "^3.1.0",
-    "fast-deep-equal": "^2.0.1",
-    "fuse.js": "^3.4.2",
    "fuzzy-search": "^3.0.1",
    "global": "^4.3.2",
-    "history": "^4.7.2",
-    "keycode": "^2.2.0",
    "lodash.debounce": "^4.0.8",
    "lodash.isequal": "^4.5.0",
    "lodash.mergewith": "^4.6.1",
    "lodash.pick": "^4.4.0",
-    "lodash.sortby": "^4.7.0",
-    "lodash.throttle": "^4.1.1",
    "markdown-to-jsx": "^6.9.1",
    "memoizerific": "^1.11.3",
    "polished": "^2.3.3",
@ -51,15 +44,13 @@
    "react-draggable": "^3.1.1",
    "react-helmet-async": "^0.2.0",
    "react-hotkeys": "2.0.0-pre4",
-    "react-lifecycles-compat": "^3.0.4",
-    "react-modal": "^3.8.1",
    "react-resize-detector": "^3.2.1",
    "recompose": "^0.30.0",
    "semver": "^5.6.0",
-    "to-camel-case": "^1.0.0",
    "util-deprecate": "^1.0.2"
  },
  "devDependencies": {
+    "flush-promises": "^1.0.2",
    "terser-webpack-plugin": "^1.2.2",
    "webpack": "^4.29.3"
  },
--- a/lib/ui/paths.js
+++ b/lib/ui/paths.js
@ -3,6 +3,18 @@ const { dirname } = require('path');
 // These paths need to be aliased in the manager webpack config to ensure that all
 // code running inside the manager uses the *same* version of react[-dom] that we use.
 module.exports = {
+  '@emotion/core': dirname(require.resolve('@emotion/core/package.json')),
+  '@emotion/styled': dirname(require.resolve('@emotion/styled/package.json')),
+  '@storybook/addons': dirname(require.resolve('@storybook/addons/package.json')),
+  '@storybook/channels': dirname(require.resolve('@storybook/channels/package.json')),
+  '@storybook/components': dirname(require.resolve('@storybook/components/package.json')),
+  '@storybook/core-events': dirname(require.resolve('@storybook/core-events/package.json')),
+  '@storybook/router': dirname(require.resolve('@storybook/router/package.json')),
+  '@storybook/theming': dirname(require.resolve('@storybook/theming/package.json')),
+  '@storybook/ui': dirname(require.resolve('@storybook/ui/package.json')),
+  'core-js': dirname(require.resolve('core-js/package.json')),
+  'emotion-theming': dirname(require.resolve('emotion-theming/package.json')),
+  'prop-types': dirname(require.resolve('prop-types/package.json')),
  react: dirname(require.resolve('react/package.json')),
  'react-dom': dirname(require.resolve('react-dom/package.json')),
 };
--- a/lib/ui/scripts/createDlls.js
+++ b/lib/ui/scripts/createDlls.js
@ -20,6 +20,8 @@ const run = () =>
    config({
      entry: {
        storybook_ui: [
+          '@emotion/core',
+          '@emotion/styled',
          '@storybook/addons',
          '@storybook/core-events',
          '@storybook/theming',
@ -27,6 +29,7 @@ const run = () =>
          'airbnb-js-shims',
          'core-js/es6/symbol',
          'core-js/fn/array/iterator',
+          'emotion-theming',
          'prop-types',
          'react-dom',
          'react',
--- a/lib/ui/src/components/layout/snapshots/layout.stories.storyshot
+++ b/lib/ui/src/components/layout/snapshots/layout.stories.storyshot
@ -326,6 +326,51 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 0 1`] = `
  border-bottom-color: #1EA7FD;
 }

+.emotion-8 {
+  white-space: normal;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  overflow: hidden;
+  vertical-align: top;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  text-align: center;
+  -webkit-text-decoration: none;
+  text-decoration: none;
+  padding: 0 15px;
+  text-transform: capitalize;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  height: 40px;
+  line-height: 12px;
+  cursor: pointer;
+  background: transparent;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  font-weight: bold;
+  font-size: 13px;
+  color: #1EA7FD;
+  border-bottom-color: #1EA7FD;
+}
+
+.emotion-8:empty {
+  display: none;
+}
+
+.emotion-8:focus {
+  outline: 0 none;
+  border-bottom-color: #1EA7FD;
+}
+
 .emotion-11 {
  position: fixed;
  left: 0;
@ -350,6 +395,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 0 1`] = `
  position: absolute;
  top: 0;
  height: 100%;
+  background: #FFFFFF;
  width: 80vw;
  -webkit-transform: translateX(-80vw);
  -ms-transform: translateX(-80vw);
@ -357,6 +403,14 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 0 1`] = `
  left: 0;
 }

+.emotion-1:nth-of-type(1) {
+  border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-1:nth-of-type(3) {
+  border-left: 1px solid rgba(0,0,0,.1);
+}
+
 .emotion-0 {
  background: hotpink;
  position: absolute;
@ -388,6 +442,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 0 1`] = `
  position: absolute;
  top: 0;
  height: 100%;
+  background: #FFFFFF;
  width: 100%;
  -webkit-transform: translateX(0) scale(1);
  -ms-transform: translateX(0) scale(1);
@ -395,6 +450,14 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 0 1`] = `
  left: 0;
 }

+.emotion-3:nth-of-type(1) {
+  border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-3:nth-of-type(3) {
+  border-left: 1px solid rgba(0,0,0,.1);
+}
+
 .emotion-2 {
  background: deepskyblue;
  position: absolute;
@ -426,6 +489,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 0 1`] = `
  position: absolute;
  top: 0;
  height: 100%;
+  background: #FFFFFF;
  width: 80vw;
  -webkit-transform: translateX(80vw);
  -ms-transform: translateX(80vw);
@ -433,6 +497,14 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 0 1`] = `
  right: 0;
 }

+.emotion-5:nth-of-type(1) {
+  border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-5:nth-of-type(3) {
+  border-left: 1px solid rgba(0,0,0,.1);
+}
+
 .emotion-4 {
  background: orangered;
  position: absolute;
@ -467,6 +539,8 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 0 1`] = `
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
+  box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
+  background: #FFFFFF;
 }

 .emotion-10 > * {
@ -528,22 +602,20 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 0 1`] = `
    <div
      class="emotion-5"
    >
-      <div>
-        <div
-          class="emotion-4"
-          color="orangered"
+      <div
+        class="emotion-4"
+        color="orangered"
+      >
+        <h2
+          style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
        >
-          <h2
-            style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-          >
-            1
-          </h2>
-          <pre>
-            {
+          1
+        </h2>
+        <pre>
+          {
  "hidden": false
 }
-          </pre>
-        </div>
+        </pre>
      </div>
    </div>
  </div>
@ -553,17 +625,17 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 0 1`] = `
    <button
      class="emotion-7"
    >
-      Nav
+      Sidebar
+    </button>
+    <button
+      class="emotion-8"
+    >
+      Canvas
    </button>
    <button
      class="emotion-7"
    >
-      Preview
-    </button>
-    <button
-      class="emotion-7"
-    >
-      Panel
+      Addons
    </button>
  </nav>
 </div>
@ -639,6 +711,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 1 1`] = `
  position: absolute;
  top: 0;
  height: 100%;
+  background: #FFFFFF;
  width: 80vw;
  -webkit-transform: translateX(-80vw);
  -ms-transform: translateX(-80vw);
@ -646,6 +719,14 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 1 1`] = `
  left: 0;
 }

+.emotion-1:nth-of-type(1) {
+  border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-1:nth-of-type(3) {
+  border-left: 1px solid rgba(0,0,0,.1);
+}
+
 .emotion-0 {
  background: hotpink;
  position: absolute;
@ -677,6 +758,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 1 1`] = `
  position: absolute;
  top: 0;
  height: 100%;
+  background: #FFFFFF;
  width: 100%;
  -webkit-transform: translateX(0) scale(1);
  -ms-transform: translateX(0) scale(1);
@ -684,6 +766,14 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 1 1`] = `
  left: 0;
 }

+.emotion-3:nth-of-type(1) {
+  border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-3:nth-of-type(3) {
+  border-left: 1px solid rgba(0,0,0,.1);
+}
+
 .emotion-2 {
  background: deepskyblue;
  position: absolute;
@ -715,6 +805,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 1 1`] = `
  position: absolute;
  top: 0;
  height: 100%;
+  background: #FFFFFF;
  width: 80vw;
  -webkit-transform: translateX(80vw);
  -ms-transform: translateX(80vw);
@ -722,6 +813,14 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 1 1`] = `
  right: 0;
 }

+.emotion-5:nth-of-type(1) {
+  border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-5:nth-of-type(3) {
+  border-left: 1px solid rgba(0,0,0,.1);
+}
+
 .emotion-4 {
  background: orangered;
  position: absolute;
@ -756,6 +855,8 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 1 1`] = `
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
+  box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
+  background: #FFFFFF;
 }

 .emotion-10 > * {
@ -817,22 +918,20 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 1 1`] = `
    <div
      class="emotion-5"
    >
-      <div>
-        <div
-          class="emotion-4"
-          color="orangered"
+      <div
+        class="emotion-4"
+        color="orangered"
+      >
+        <h2
+          style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
        >
-          <h2
-            style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-          >
-            1
-          </h2>
-          <pre>
-            {
+          1
+        </h2>
+        <pre>
+          {
  "hidden": false
 }
-          </pre>
-        </div>
+        </pre>
      </div>
    </div>
  </div>
@ -842,17 +941,17 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 1 1`] = `
    <button
      class="emotion-7"
    >
-      Nav
+      Sidebar
    </button>
    <button
      class="emotion-7"
    >
-      Preview
+      Canvas
    </button>
    <button
      class="emotion-7"
    >
-      Panel
+      Addons
    </button>
  </nav>
 </div>
@ -928,6 +1027,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 2 1`] = `
  position: absolute;
  top: 0;
  height: 100%;
+  background: #FFFFFF;
  width: 80vw;
  -webkit-transform: translateX(-80vw);
  -ms-transform: translateX(-80vw);
@ -935,6 +1035,14 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 2 1`] = `
  left: 0;
 }

+.emotion-1:nth-of-type(1) {
+  border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-1:nth-of-type(3) {
+  border-left: 1px solid rgba(0,0,0,.1);
+}
+
 .emotion-0 {
  background: hotpink;
  position: absolute;
@ -966,6 +1074,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 2 1`] = `
  position: absolute;
  top: 0;
  height: 100%;
+  background: #FFFFFF;
  width: 100%;
  -webkit-transform: translateX(0) scale(1);
  -ms-transform: translateX(0) scale(1);
@ -973,6 +1082,14 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 2 1`] = `
  left: 0;
 }

+.emotion-3:nth-of-type(1) {
+  border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-3:nth-of-type(3) {
+  border-left: 1px solid rgba(0,0,0,.1);
+}
+
 .emotion-2 {
  background: deepskyblue;
  position: absolute;
@ -1004,6 +1121,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 2 1`] = `
  position: absolute;
  top: 0;
  height: 100%;
+  background: #FFFFFF;
  width: 80vw;
  -webkit-transform: translateX(80vw);
  -ms-transform: translateX(80vw);
@ -1011,6 +1129,14 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 2 1`] = `
  right: 0;
 }

+.emotion-5:nth-of-type(1) {
+  border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-5:nth-of-type(3) {
+  border-left: 1px solid rgba(0,0,0,.1);
+}
+
 .emotion-4 {
  background: orangered;
  position: absolute;
@ -1045,6 +1171,8 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 2 1`] = `
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
+  box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
+  background: #FFFFFF;
 }

 .emotion-10 > * {
@ -1106,22 +1234,20 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 2 1`] = `
    <div
      class="emotion-5"
    >
-      <div>
-        <div
-          class="emotion-4"
-          color="orangered"
+      <div
+        class="emotion-4"
+        color="orangered"
+      >
+        <h2
+          style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
        >
-          <h2
-            style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-          >
-            1
-          </h2>
-          <pre>
-            {
+          1
+        </h2>
+        <pre>
+          {
  "hidden": false
 }
-          </pre>
-        </div>
+        </pre>
      </div>
    </div>
  </div>
@ -1131,17 +1257,17 @@ exports[`Storyshots UI|Layout/Mobile (mocked) initial 2 1`] = `
    <button
      class="emotion-7"
    >
-      Nav
+      Sidebar
    </button>
    <button
      class="emotion-7"
    >
-      Preview
+      Canvas
    </button>
    <button
      class="emotion-7"
    >
-      Panel
+      Addons
    </button>
  </nav>
 </div>
@ -1217,6 +1343,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) page 1`] = `
  position: absolute;
  top: 0;
  height: 100%;
+  background: #FFFFFF;
  width: 80vw;
  -webkit-transform: translateX(-80vw);
  -ms-transform: translateX(-80vw);
@ -1224,6 +1351,14 @@ exports[`Storyshots UI|Layout/Mobile (mocked) page 1`] = `
  left: 0;
 }

+.emotion-1:nth-of-type(1) {
+  border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-1:nth-of-type(3) {
+  border-left: 1px solid rgba(0,0,0,.1);
+}
+
 .emotion-0 {
  background: hotpink;
  position: absolute;
@ -1255,6 +1390,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) page 1`] = `
  position: absolute;
  top: 0;
  height: 100%;
+  background: #FFFFFF;
  width: 100%;
  -webkit-transform: translateX(0) scale(1);
  -ms-transform: translateX(0) scale(1);
@ -1262,6 +1398,14 @@ exports[`Storyshots UI|Layout/Mobile (mocked) page 1`] = `
  left: 0;
 }

+.emotion-4:nth-of-type(1) {
+  border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-4:nth-of-type(3) {
+  border-left: 1px solid rgba(0,0,0,.1);
+}
+
 .emotion-2 {
  background: deepskyblue;
  position: absolute;
@ -1293,6 +1437,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) page 1`] = `
  position: absolute;
  top: 0;
  height: 100%;
+  background: #FFFFFF;
  width: 80vw;
  -webkit-transform: translateX(80vw);
  -ms-transform: translateX(80vw);
@ -1300,6 +1445,14 @@ exports[`Storyshots UI|Layout/Mobile (mocked) page 1`] = `
  right: 0;
 }

+.emotion-6:nth-of-type(1) {
+  border-right: 1px solid rgba(0,0,0,.1);
+}
+
+.emotion-6:nth-of-type(3) {
+  border-left: 1px solid rgba(0,0,0,.1);
+}
+
 .emotion-5 {
  background: orangered;
  position: absolute;
@ -1334,6 +1487,8 @@ exports[`Storyshots UI|Layout/Mobile (mocked) page 1`] = `
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
+  box-shadow: 0 1px 5px 0 rgba(0,0,0,0.1);
+  background: #FFFFFF;
 }

 .emotion-10 > * {
@ -1434,23 +1589,19 @@ exports[`Storyshots UI|Layout/Mobile (mocked) page 1`] = `
      class="emotion-6"
    >
      <div
-        hidden=""
+        class="emotion-5"
+        color="orangered"
      >
-        <div
-          class="emotion-5"
-          color="orangered"
+        <h2
+          style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
        >
-          <h2
-            style="position:absolute;bottom:0;right:0;color:rgba(0,0,0,0.2);font-size:150px;line-height:150px;margin:-20px"
-          >
-            1
-          </h2>
-          <pre>
-            {
+          1
+        </h2>
+        <pre>
+          {
  "hidden": true
 }
-          </pre>
-        </div>
+        </pre>
      </div>
    </div>
  </div>
@ -1460,7 +1611,7 @@ exports[`Storyshots UI|Layout/Mobile (mocked) page 1`] = `
    <button
      class="emotion-8"
    >
-      Nav
+      Sidebar
    </button>
    <button
      class="emotion-8"
--- a/lib/ui/src/components/layout/container.js
+++ b/lib/ui/src/components/layout/container.js
@ -68,7 +68,7 @@ const Pane = styled.div(
    animate
      ? {
          transition: ['width', 'height', 'top', 'left', 'background', 'opacity', 'transform']
-            .map(p => `${p} 0.09s ease-out`)
+            .map(p => `${p} 0.1s ease-out`)
            .join(','),
        }
      : {}
--- a/lib/ui/src/components/layout/mobile.js
+++ b/lib/ui/src/components/layout/mobile.js
@ -12,6 +12,15 @@ const Pane = styled.div(
    top: 0,
    height: '100%',
  },
+  ({ theme }) => ({
+    background: theme.background.content,
+    '&:nth-of-type(1)': {
+      borderRight: `1px solid ${theme.appBorderColor}`,
+    },
+    '&:nth-of-type(3)': {
+      borderLeft: `1px solid ${theme.appBorderColor}`,
+    },
+  }),
  ({ index }) => {
    switch (index) {
      case 0: {
@ -93,18 +102,24 @@ Panels.Container = styled.div({
  height: 'calc(100% - 40px)',
 });

-const Bar = styled.nav({
-  position: 'fixed',
-  bottom: 0,
-  left: 0,
-  width: '100vw',
-  height: 40,
-  display: 'flex',
+const Bar = styled.nav(
+  {
+    position: 'fixed',
+    bottom: 0,
+    left: 0,
+    width: '100vw',
+    height: 40,
+    display: 'flex',
+    boxShadow: '0 1px 5px 0 rgba(0, 0, 0, 0.1)',

-  '& > *': {
-    flex: 1,
+    '& > *': {
+      flex: 1,
+    },
  },
-});
+  ({ theme }) => ({
+    background: theme.barBg,
+  })
+);

 // eslint-disable-next-line react/no-multi-comp
 class Mobile extends Component {
@ -138,20 +153,25 @@ class Mobile extends Component {
              <Route key={key}>{content()}</Route>
            ))}
          </div>
-          <div hidden={!viewMode}>
-            <Panel hidden={!viewMode} />
-          </div>
+          <Panel hidden={!viewMode} />
        </Panels>
        <Bar active={active}>
-          <TabButton onClick={() => this.setState({ active: 0 })}>Nav</TabButton>
-          <TabButton onClick={() => this.setState({ active: 1 })}>
-            {viewMode ? 'Preview' : null}
+          <TabButton onClick={() => this.setState({ active: 0 })} active={active === 0}>
+            Sidebar
+          </TabButton>
+          <TabButton
+            onClick={() => this.setState({ active: 1 })}
+            active={active === 1 || active === false}
+          >
+            {viewMode ? 'Canvas' : null}
            {pages.map(({ key, route: Route }) => (
              <Route key={key}>{key}</Route>
            ))}
          </TabButton>
          {viewMode ? (
-            <TabButton onClick={() => this.setState({ active: 2 })}>Panel</TabButton>
+            <TabButton onClick={() => this.setState({ active: 2 })} active={active === 2}>
+              Addons
+            </TabButton>
          ) : null}
        </Bar>
      </Root>
--- a/lib/ui/src/components/panel/snapshots/panel.stories.storyshot
+++ b/lib/ui/src/components/panel/snapshots/panel.stories.storyshot
@ -198,6 +198,12 @@ exports[`Storyshots UI|Panel default 1`] = `
  width: 15px;
 }

+@media (max-width:599px) {
+  .emotion-6 {
+    display: none;
+  }
+}
+
 .emotion-5 {
  shape-rendering: inherit;
  -webkit-transform: translate3d(0,0,0);
@ -229,7 +235,7 @@ exports[`Storyshots UI|Panel default 1`] = `
 >
  <div
    class="emotion-12"
-    title="bar"
+    title="flexbar"
  >
    <div
      data-simplebar="true"
@ -258,7 +264,6 @@ exports[`Storyshots UI|Panel default 1`] = `
              >
                <div
                  class="emotion-3"
-                  title="side left"
                >
                  <div
                    class="emotion-2"
@ -282,7 +287,6 @@ exports[`Storyshots UI|Panel default 1`] = `
                </div>
                <div
                  class="emotion-10"
-                  title="side right"
                >
                  <button
                    class="emotion-6"
--- a/lib/ui/src/components/panel/panel.js
+++ b/lib/ui/src/components/panel/panel.js
@ -1,7 +1,15 @@
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
+import { styled } from '@storybook/theming';
 import { Tabs, Icons, IconButton } from '@storybook/components';

+const DesktopOnlyIconButton = styled(IconButton)({
+  // Hides full screen icon at mobile breakpoint defined in app.js
+  '@media (max-width: 599px)': {
+    display: 'none',
+  },
+});
+
 class SafeTab extends Component {
  constructor(props) {
    super(props);
@ -45,12 +53,20 @@ const AddonPanel = React.memo(({ panels, actions, selectedPanel, panelPosition }
    flex
    tools={
      <Fragment>
-        <IconButton key="position" onClick={actions.togglePosition} title="Change orientation">
+        <DesktopOnlyIconButton
+          key="position"
+          onClick={actions.togglePosition}
+          title="Change orientation"
+        >
          <Icons icon={panelPosition === 'bottom' ? 'bottombar' : 'sidebaralt'} />
-        </IconButton>
-        <IconButton key="visibility" onClick={actions.toggleVisibility} title="Hide addons">
+        </DesktopOnlyIconButton>
+        <DesktopOnlyIconButton
+          key="visibility"
+          onClick={actions.toggleVisibility}
+          title="Hide addons"
+        >
          <Icons icon="close" />
-        </IconButton>
+        </DesktopOnlyIconButton>
      </Fragment>
    }
    id="storybook-panel-root"
--- a/lib/ui/src/components/preview/snapshots/preview.stories.storyshot
+++ b/lib/ui/src/components/preview/snapshots/preview.stories.storyshot
@ -55,29 +55,6 @@ Array [
  margin-right: 15px;
 }

-.emotion-2 {
-  height: 40px;
-  background: none;
-  color: inherit;
-  padding: 0;
-  cursor: pointer;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  transition: color 0.2s linear,border-bottom-color 0.2s linear;
-}
-
-.emotion-2:hover,
-.emotion-2:focus {
-  outline: 0 none;
-  color: #1EA7FD;
-}
-
-.emotion-2 > svg {
-  width: 15px;
-}
-
 .emotion-1 {
  shape-rendering: inherit;
  -webkit-transform: translate3d(0,0,0);
@ -109,6 +86,29 @@ Array [
  tranform: translateY(0px);
 }

+.emotion-2 {
+  height: 40px;
+  background: none;
+  color: inherit;
+  padding: 0;
+  cursor: pointer;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+}
+
+.emotion-2:hover,
+.emotion-2:focus {
+  outline: 0 none;
+  color: #1EA7FD;
+}
+
+.emotion-2 > svg {
+  width: 15px;
+}
+
 .emotion-9 {
  width: 1px;
  height: 24px;
@ -120,17 +120,14 @@ Array [
  display: none;
 }

-.emotion-9:first-of-type {
-  display: none;
-}
-
-.emotion-9:last-of-type {
-  display: none;
+@media (max-width:599px) {
+  .emotion-17 {
+    display: none;
+  }
 }

 <div
    class="emotion-23"
-    title="bar"
  >
    <div
      data-simplebar="true"
@ -159,7 +156,6 @@ Array [
              >
                <div
                  class="emotion-13"
-                  title="side left"
                >
                  <button
                    class="emotion-2"
@ -223,28 +219,27 @@ Array [
                </div>
                <div
                  class="emotion-21"
-                  title="side right"
                >
-                  <button
-                    class="emotion-2"
-                    title="Go full screen"
-                  >
-                    <svg
-                      class="emotion-1"
-                      viewBox="0 0 1024 1024"
-                    >
-                      <path
-                        class="emotion-0"
-                        d="M959.688 920.068l0.31-176c0.040-22.094-17.84-40.032-39.93-40.070-22.092-0.040-40.032 17.838-40.070 39.93l-0.142 79.672-235.734-235.732c-15.622-15.622-40.948-15.622-56.57 0s-15.622 40.948 0 56.568l235.442 235.442-78.946-0.1c-22.092-0.028-40.022 17.86-40.050 39.952-0.014 11.064 4.464 21.084 11.714 28.334 7.228 7.224 17.208 11.702 28.236 11.714l175.688 0.22c22.086 0.028 40.014-17.846 40.052-39.93zM920.178 64.228l-176-0.308c-22.094-0.040-40.032 17.84-40.070 39.93-0.040 22.092 17.838 40.032 39.93 40.070l79.672 0.14-235.732 235.734c-15.622 15.622-15.622 40.948 0 56.568s40.948 15.622 56.568 0l235.442-235.442-0.1 78.946c-0.028 22.092 17.86 40.022 39.952 40.050 11.064 0.014 21.084-4.464 28.334-11.714 7.224-7.228 11.702-17.208 11.714-28.236l0.22-175.688c0.026-22.082-17.846-40.010-39.93-40.050zM64.236 103.742l-0.308 176c-0.040 22.094 17.84 40.032 39.93 40.070 22.092 0.040 40.032-17.84 40.070-39.93l0.14-79.672 235.734 235.73c15.622 15.622 40.948 15.622 56.568 0s15.622-40.946 0-56.566l-235.442-235.442 78.946 0.098c22.092 0.028 40.022-17.86 40.050-39.95 0.014-11.066-4.464-21.086-11.714-28.336-7.228-7.222-17.208-11.7-28.236-11.714l-175.688-0.218c-22.084-0.026-40.012 17.844-40.050 39.93zM103.748 959.766l176 0.308c22.094 0.040 40.032-17.84 40.070-39.93 0.040-22.092-17.84-40.032-39.93-40.070l-79.672-0.14 235.73-235.734c15.622-15.622 15.622-40.948 0-56.568s-40.946-15.622-56.566 0l-235.442 235.442 0.098-78.946c0.028-22.092-17.86-40.022-39.95-40.050-11.066-0.014-21.086 4.464-28.336 11.714-7.222 7.228-11.7 17.208-11.714 28.236l-0.218 175.688c-0.026 22.082 17.844 40.010 39.93 40.050z"
-                      />
-                    </svg>
-                  </button>
                  <span
-                    class="emotion-9"
-                  />
+                    class="emotion-17"
+                  >
+                    <button
+                      class="emotion-2"
+                      title="Go full screen"
+                    >
+                      <svg
+                        class="emotion-1"
+                        viewBox="0 0 1024 1024"
+                      >
+                        <path
+                          class="emotion-0"
+                          d="M959.688 920.068l0.31-176c0.040-22.094-17.84-40.032-39.93-40.070-22.092-0.040-40.032 17.838-40.070 39.93l-0.142 79.672-235.734-235.732c-15.622-15.622-40.948-15.622-56.57 0s-15.622 40.948 0 56.568l235.442 235.442-78.946-0.1c-22.092-0.028-40.022 17.86-40.050 39.952-0.014 11.064 4.464 21.084 11.714 28.334 7.228 7.224 17.208 11.702 28.236 11.714l175.688 0.22c22.086 0.028 40.014-17.846 40.052-39.93zM920.178 64.228l-176-0.308c-22.094-0.040-40.032 17.84-40.070 39.93-0.040 22.092 17.838 40.032 39.93 40.070l79.672 0.14-235.732 235.734c-15.622 15.622-15.622 40.948 0 56.568s40.948 15.622 56.568 0l235.442-235.442-0.1 78.946c-0.028 22.092 17.86 40.022 39.952 40.050 11.064 0.014 21.084-4.464 28.334-11.714 7.224-7.228 11.702-17.208 11.714-28.236l0.22-175.688c0.026-22.082-17.846-40.010-39.93-40.050zM64.236 103.742l-0.308 176c-0.040 22.094 17.84 40.032 39.93 40.070 22.092 0.040 40.032-17.84 40.070-39.93l0.14-79.672 235.734 235.73c15.622 15.622 40.948 15.622 56.568 0s15.622-40.946 0-56.566l-235.442-235.442 78.946 0.098c22.092 0.028 40.022-17.86 40.050-39.95 0.014-11.066-4.464-21.086-11.714-28.336-7.228-7.222-17.208-11.7-28.236-11.714l-175.688-0.218c-22.084-0.026-40.012 17.844-40.050 39.93zM103.748 959.766l176 0.308c22.094 0.040 40.032-17.84 40.070-39.93 0.040-22.092-17.84-40.032-39.93-40.070l-79.672-0.14 235.73-235.734c15.622-15.622 15.622-40.948 0-56.568s-40.946-15.622-56.566 0l-235.442 235.442 0.098-78.946c0.028-22.092-17.86-40.022-39.95-40.050-11.066-0.014-21.086 4.464-28.336 11.714-7.222 7.228-11.7 17.208-11.714 28.236l-0.218 175.688c-0.026 22.082 17.844 40.010 39.93 40.050z"
+                        />
+                      </svg>
+                    </button>
+                  </span>
                  <button
                    class="emotion-2"
-                    title="Open component in new tab"
                  >
                    <svg
                      class="emotion-1"
@ -289,6 +284,8 @@ Array [
  bottom: 0;
  top: 40px;
  z-index: 3;
+  -webkit-transition: all 0.1s linear;
+  transition: all 0.1s linear;
  height: calc(100% - 40px);
  background: transparent;
 }
@ -506,29 +503,6 @@ Array [
  margin-right: 15px;
 }

-.emotion-8 {
-  height: 40px;
-  background: none;
-  color: inherit;
-  padding: 0;
-  cursor: pointer;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  transition: color 0.2s linear,border-bottom-color 0.2s linear;
-}
-
-.emotion-8:hover,
-.emotion-8:focus {
-  outline: 0 none;
-  color: #1EA7FD;
-}
-
-.emotion-8 > svg {
-  width: 15px;
-}
-
 .emotion-7 {
  shape-rendering: inherit;
  -webkit-transform: translate3d(0,0,0);
@ -560,6 +534,29 @@ Array [
  tranform: translateY(0px);
 }

+.emotion-8 {
+  height: 40px;
+  background: none;
+  color: inherit;
+  padding: 0;
+  cursor: pointer;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+}
+
+.emotion-8:hover,
+.emotion-8:focus {
+  outline: 0 none;
+  color: #1EA7FD;
+}
+
+.emotion-8 > svg {
+  width: 15px;
+}
+
 .emotion-5 {
  width: 1px;
  height: 24px;
@ -571,12 +568,10 @@ Array [
  display: none;
 }

-.emotion-5:first-of-type {
-  display: none;
-}
-
-.emotion-5:last-of-type {
-  display: none;
+@media (max-width:599px) {
+  .emotion-23 {
+    display: none;
+  }
 }

 .emotion-1 {
@ -588,7 +583,6 @@ Array [

 <div
    class="emotion-29"
-    title="bar"
  >
    <div
      data-simplebar="true"
@ -617,7 +611,6 @@ Array [
              >
                <div
                  class="emotion-19"
-                  title="side left"
                >
                  <div
                    class="emotion-4"
@ -708,28 +701,27 @@ Array [
                </div>
                <div
                  class="emotion-27"
-                  title="side right"
                >
-                  <button
-                    class="emotion-8"
-                    title="Go full screen"
-                  >
-                    <svg
-                      class="emotion-7"
-                      viewBox="0 0 1024 1024"
-                    >
-                      <path
-                        class="emotion-6"
-                        d="M959.688 920.068l0.31-176c0.040-22.094-17.84-40.032-39.93-40.070-22.092-0.040-40.032 17.838-40.070 39.93l-0.142 79.672-235.734-235.732c-15.622-15.622-40.948-15.622-56.57 0s-15.622 40.948 0 56.568l235.442 235.442-78.946-0.1c-22.092-0.028-40.022 17.86-40.050 39.952-0.014 11.064 4.464 21.084 11.714 28.334 7.228 7.224 17.208 11.702 28.236 11.714l175.688 0.22c22.086 0.028 40.014-17.846 40.052-39.93zM920.178 64.228l-176-0.308c-22.094-0.040-40.032 17.84-40.070 39.93-0.040 22.092 17.838 40.032 39.93 40.070l79.672 0.14-235.732 235.734c-15.622 15.622-15.622 40.948 0 56.568s40.948 15.622 56.568 0l235.442-235.442-0.1 78.946c-0.028 22.092 17.86 40.022 39.952 40.050 11.064 0.014 21.084-4.464 28.334-11.714 7.224-7.228 11.702-17.208 11.714-28.236l0.22-175.688c0.026-22.082-17.846-40.010-39.93-40.050zM64.236 103.742l-0.308 176c-0.040 22.094 17.84 40.032 39.93 40.070 22.092 0.040 40.032-17.84 40.070-39.93l0.14-79.672 235.734 235.73c15.622 15.622 40.948 15.622 56.568 0s15.622-40.946 0-56.566l-235.442-235.442 78.946 0.098c22.092 0.028 40.022-17.86 40.050-39.95 0.014-11.066-4.464-21.086-11.714-28.336-7.228-7.222-17.208-11.7-28.236-11.714l-175.688-0.218c-22.084-0.026-40.012 17.844-40.050 39.93zM103.748 959.766l176 0.308c22.094 0.040 40.032-17.84 40.070-39.93 0.040-22.092-17.84-40.032-39.93-40.070l-79.672-0.14 235.73-235.734c15.622-15.622 15.622-40.948 0-56.568s-40.946-15.622-56.566 0l-235.442 235.442 0.098-78.946c0.028-22.092-17.86-40.022-39.95-40.050-11.066-0.014-21.086 4.464-28.336 11.714-7.222 7.228-11.7 17.208-11.714 28.236l-0.218 175.688c-0.026 22.082 17.844 40.010 39.93 40.050z"
-                      />
-                    </svg>
-                  </button>
                  <span
-                    class="emotion-5"
-                  />
+                    class="emotion-23"
+                  >
+                    <button
+                      class="emotion-8"
+                      title="Go full screen"
+                    >
+                      <svg
+                        class="emotion-7"
+                        viewBox="0 0 1024 1024"
+                      >
+                        <path
+                          class="emotion-6"
+                          d="M959.688 920.068l0.31-176c0.040-22.094-17.84-40.032-39.93-40.070-22.092-0.040-40.032 17.838-40.070 39.93l-0.142 79.672-235.734-235.732c-15.622-15.622-40.948-15.622-56.57 0s-15.622 40.948 0 56.568l235.442 235.442-78.946-0.1c-22.092-0.028-40.022 17.86-40.050 39.952-0.014 11.064 4.464 21.084 11.714 28.334 7.228 7.224 17.208 11.702 28.236 11.714l175.688 0.22c22.086 0.028 40.014-17.846 40.052-39.93zM920.178 64.228l-176-0.308c-22.094-0.040-40.032 17.84-40.070 39.93-0.040 22.092 17.838 40.032 39.93 40.070l79.672 0.14-235.732 235.734c-15.622 15.622-15.622 40.948 0 56.568s40.948 15.622 56.568 0l235.442-235.442-0.1 78.946c-0.028 22.092 17.86 40.022 39.952 40.050 11.064 0.014 21.084-4.464 28.334-11.714 7.224-7.228 11.702-17.208 11.714-28.236l0.22-175.688c0.026-22.082-17.846-40.010-39.93-40.050zM64.236 103.742l-0.308 176c-0.040 22.094 17.84 40.032 39.93 40.070 22.092 0.040 40.032-17.84 40.070-39.93l0.14-79.672 235.734 235.73c15.622 15.622 40.948 15.622 56.568 0s15.622-40.946 0-56.566l-235.442-235.442 78.946 0.098c22.092 0.028 40.022-17.86 40.050-39.95 0.014-11.066-4.464-21.086-11.714-28.336-7.228-7.222-17.208-11.7-28.236-11.714l-175.688-0.218c-22.084-0.026-40.012 17.844-40.050 39.93zM103.748 959.766l176 0.308c22.094 0.040 40.032-17.84 40.070-39.93 0.040-22.092-17.84-40.032-39.93-40.070l-79.672-0.14 235.73-235.734c15.622-15.622 15.622-40.948 0-56.568s-40.946-15.622-56.566 0l-235.442 235.442 0.098-78.946c0.028-22.092-17.86-40.022-39.95-40.050-11.066-0.014-21.086 4.464-28.336 11.714-7.222 7.228-11.7 17.208-11.714 28.236l-0.218 175.688c-0.026 22.082 17.844 40.010 39.93 40.050z"
+                        />
+                      </svg>
+                    </button>
+                  </span>
                  <button
                    class="emotion-8"
-                    title="Open component in new tab"
                  >
                    <svg
                      class="emotion-7"
@ -774,6 +766,8 @@ Array [
  bottom: 0;
  top: 40px;
  z-index: 3;
+  -webkit-transition: all 0.1s linear;
+  transition: all 0.1s linear;
  height: calc(100% - 40px);
  background: transparent;
 }
--- a/lib/ui/src/components/preview/components.js
+++ b/lib/ui/src/components/preview/components.js
@ -27,7 +27,8 @@ export const FrameWrap = styled.div(({ offset }) => ({
  bottom: 0,
  top: offset,
  zIndex: 3,
-  height: offset ? `calc(100% - ${offset}px)` : '100%',
+  transition: 'all 0.1s linear',
+  height: `calc(100% - ${offset}px)`,
  background: 'transparent',
 }));

--- a/lib/ui/src/components/preview/preview.js
+++ b/lib/ui/src/components/preview/preview.js
@ -1,11 +1,12 @@
-import { window } from 'global';
+import window from 'global';
 import React, { Component, Fragment } from 'react';
 import PropTypes from 'prop-types';
 import memoize from 'memoizerific';

+import { styled } from '@storybook/theming';
 import { SET_CURRENT_STORY } from '@storybook/core-events';
 import { types } from '@storybook/addons';
-import { Icons, IconButton, TabButton, TabBar, interleaveSeparators } from '@storybook/components';
+import { Icons, IconButton, TabButton, TabBar, Separator } from '@storybook/components';

 import Helmet from 'react-helmet-async';

@ -18,6 +19,13 @@ import { Grid, Background, BackgroundProvider, BackgroundConsumer } from './back

 import { IFrame } from './iframe';

+const DesktopOnly = styled.span({
+  // Hides full screen icon at mobile breakpoint defined in app.js
+  '@media (max-width: 599px)': {
+    display: 'none',
+  },
+});
+
 const renderIframe = (storyId, id, baseUrl) => (
  <IFrame
    key="iframe"
@ -75,28 +83,34 @@ const getTools = memoize(10)(
      panels.filter(p => p.id !== 'canvas').length
        ? {
            render: () => (
-              <TabBar key="tabs" scroll={false}>
-                {panels.map((t, index) => {
-                  const to = t.route({ storyId, viewMode, path, location });
-                  const isActive = t.match({ storyId, viewMode, path, location });
-                  return (
-                    <S.UnstyledLink key={t.id || `l${index}`} to={to}>
-                      <TabButton active={isActive}>{t.title}</TabButton>
-                    </S.UnstyledLink>
-                  );
-                })}
-              </TabBar>
+              <Fragment>
+                <TabBar key="tabs" scroll={false}>
+                  {panels.map((t, index) => {
+                    const to = t.route({ storyId, viewMode, path, location });
+                    const isActive = t.match({ storyId, viewMode, path, location });
+                    return (
+                      <S.UnstyledLink key={t.id || `l${index}`} to={to}>
+                        <TabButton active={isActive}>{t.title}</TabButton>
+                      </S.UnstyledLink>
+                    );
+                  })}
+                </TabBar>
+                <Separator />
+              </Fragment>
            ),
          }
        : null,
      {
        match: p => p.viewMode === 'story',
        render: () => (
-          <ZoomConsumer>
-            {({ set, value }) => (
-              <Zoom key="zoom" current={value} set={v => set(value * v)} reset={() => set(1)} />
-            )}
-          </ZoomConsumer>
+          <Fragment>
+            <ZoomConsumer>
+              {({ set, value }) => (
+                <Zoom key="zoom" current={value} set={v => set(value * v)} reset={() => set(1)} />
+              )}
+            </ZoomConsumer>
+            <Separator />
+          </Fragment>
        ),
      },
      {
@ -122,19 +136,21 @@ const getTools = memoize(10)(
      {
        match: p => p.viewMode === 'story',
        render: () => (
-          <IconButton key="full" onClick={actions.toggleFullscreen} title="Go full screen">
-            <Icons icon={options.isFullscreen ? 'close' : 'expand'} />
-          </IconButton>
+          <DesktopOnly>
+            <IconButton
+              key="full"
+              onClick={actions.toggleFullscreen}
+              title={options.isFullscreen ? 'Exit full screen' : 'Go full screen'}
+            >
+              <Icons icon={options.isFullscreen ? 'close' : 'expand'} />
+            </IconButton>
+          </DesktopOnly>
        ),
      },
      {
        match: p => p.viewMode === 'story',
        render: () => (
-          <IconButton
-            key="opener"
-            onClick={() => window.open(`${baseUrl}?id=${storyId}`)}
-            title="Open component in new tab"
-          >
+          <IconButton key="opener" onClick={() => window.open(`${baseUrl}?id=${storyId}`)}>
            <Icons icon="share" />
          </IconButton>
        ),
@ -144,8 +160,22 @@ const getTools = memoize(10)(
    const filter = item =>
      item && (!item.match || item.match({ storyId, viewMode, location, path }));

-    const left = interleaveSeparators(tools.filter(filter));
-    const right = interleaveSeparators(extraTools.filter(filter));
+    const displayItems = list =>
+      list.reduce(
+        (acc, item, index) =>
+          item ? (
+            <Fragment key={item.id || item.key || `f-${index}`}>
+              {acc}
+              {item.render() || item}
+            </Fragment>
+          ) : (
+            acc
+          ),
+        null
+      );
+
+    const left = displayItems(tools.filter(filter));
+    const right = displayItems(extraTools.filter(filter));

    return { left, right };
  }
--- a/lib/ui/src/components/sidebar/treeview/treeview.mockdata.js
+++ b/lib/ui/src/components/sidebar/treeview/treeview.mockdata.js
@ -66,8 +66,8 @@ export const mockDataset = {
    },
    '2-22': {
      isRoot: false,
-      isLeaf: false,
-      isComponent: true,
+      isLeaf: true,
+      isComponent: false,
      id: '2-22',
      depth: 1,
      name: 'Child B2',
--- a/lib/ui/src/components/sidebar/treeview/utils.js
+++ b/lib/ui/src/components/sidebar/treeview/utils.js
@ -3,6 +3,8 @@ import FuzzySearch from 'fuzzy-search';

 export const prevent = e => e.preventDefault();

+const toList = memoize(1)(dataset => Object.values(dataset));
+
 export const keyEventToAction = ({ keyCode, ctrlKey, shiftKey, altKey, metaKey }) => {
  if (shiftKey || metaKey || ctrlKey || altKey) {
    return false;
@ -52,7 +54,7 @@ export const getParents = memoize(1000)((id, dataset) => {
 });

 export const getMains = memoize(1)(dataset =>
-  Object.values(dataset)
+  toList(dataset)
    .filter(m => m.depth === 0)
    .sort((a, b) => {
      if (a.isRoot && b.isRoot) {
@ -163,16 +165,24 @@ export const getNext = ({ id, dataset, expanded }) => {

 const toHayStack = memoize(2)(
  dataset =>
-    new FuzzySearch(Object.values(dataset), [
-      'kind',
-      'name',
-      'parameters.fileName',
-      'parameters.notes',
-    ])
+    new FuzzySearch(toList(dataset), ['kind', 'name', 'parameters.fileName', 'parameters.notes'])
 );
+
+const exactMatch = memoize(1)(filter => i =>
+  (i.kind && i.kind.includes(filter)) ||
+  (i.name && i.name.includes(filter)) ||
+  (i.parameters && i.parameters.fileName && i.parameters.fileName.includes(filter)) ||
+  (i.parameters && typeof i.parameters.notes === 'string' && i.parameters.notes.includes(filter))
+);
+
 export const toId = (base, addition) => (base === '' ? `${addition}` : `${base}-${addition}`);
 export const toFiltered = (dataset, filter) => {
-  const found = toHayStack(dataset).search(filter);
+  let found;
+  if (filter.length && filter.length > 2) {
+    found = toHayStack(dataset).search(filter);
+  } else {
+    found = toList(dataset).filter(exactMatch(filter));
+  }

  // get all parents for all results
  const result = found.reduce((acc, item) => {
--- a/lib/ui/src/core/shortcuts.js
+++ b/lib/ui/src/core/shortcuts.js
@ -101,11 +101,14 @@ export default function initShortcuts({ store }) {
          if (!showNav) {
            fullApi.toggleNav();
          }
-          const element = document.getElementById('storybook-explorer-searchfield');

-          if (element) {
-            element.focus();
-          }
+          setTimeout(() => {
+            const element = document.getElementById('storybook-explorer-searchfield');
+
+            if (element) {
+              element.focus();
+            }
+          }, 0);
          break;
        }

--- a/lib/ui/src/keyboard/keyCodes.ts
+++ b/lib/ui/src/keyboard/keyCodes.ts
@ -1,5 +1,4 @@
 // tslint:disable-next-line:no-implicit-dependencies
-import { _STORE_REDUCERS } from '@ngrx/store';
 import { OperatingSystem } from './platform';

 export const enum KeyCode {
--- a/lib/ui/src/settings/snapshots/about.stories.storyshot
+++ b/lib/ui/src/settings/snapshots/about.stories.storyshot
@ -130,29 +130,6 @@ exports[`Storyshots UI|Settings/AboutScreen failed to fetch new version 1`] = `
  margin-right: 15px;
 }

-.emotion-5 {
-  height: 40px;
-  background: none;
-  color: inherit;
-  padding: 0;
-  cursor: pointer;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  transition: color 0.2s linear,border-bottom-color 0.2s linear;
-}
-
-.emotion-5:hover,
-.emotion-5:focus {
-  outline: 0 none;
-  color: #1EA7FD;
-}
-
-.emotion-5 > svg {
-  width: 15px;
-}
-
 .emotion-4 {
  shape-rendering: inherit;
  -webkit-transform: translate3d(0,0,0);
@ -177,6 +154,29 @@ exports[`Storyshots UI|Settings/AboutScreen failed to fetch new version 1`] = `
  width: 100%;
 }

+.emotion-5 {
+  height: 40px;
+  background: none;
+  color: inherit;
+  padding: 0;
+  cursor: pointer;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+}
+
+.emotion-5:hover,
+.emotion-5:focus {
+  outline: 0 none;
+  color: #1EA7FD;
+}
+
+.emotion-5 > svg {
+  width: 15px;
+}
+
 .emotion-14 {
  display: inline-block;
  -webkit-transition: all 150ms ease-out;
@ -340,8 +340,10 @@ exports[`Storyshots UI|Settings/AboutScreen failed to fetch new version 1`] = `
  background: #FEDED2;
  color: #FF4400;
  font-weight: 700;
+  font-size: 14px;
  padding: 10px 20px;
  margin-bottom: 24px;
+  border-radius: 4px;
  border: 1px solid rgba(0,0,0,.1);
  text-align: center;
 }
@ -357,7 +359,7 @@ exports[`Storyshots UI|Settings/AboutScreen failed to fetch new version 1`] = `
 >
  <div
    class="emotion-8"
-    title="bar"
+    title="flexbar"
  >
    <div
      data-simplebar="true"
@ -386,7 +388,6 @@ exports[`Storyshots UI|Settings/AboutScreen failed to fetch new version 1`] = `
              >
                <div
                  class="emotion-2"
-                  title="side left"
                >
                  <div
                    class="emotion-1"
@ -403,7 +404,6 @@ exports[`Storyshots UI|Settings/AboutScreen failed to fetch new version 1`] = `
                </div>
                <div
                  class="emotion-6"
-                  title="side right"
                >
                  <button
                    class="emotion-5"
@ -687,29 +687,6 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
  margin-right: 15px;
 }

-.emotion-5 {
-  height: 40px;
-  background: none;
-  color: inherit;
-  padding: 0;
-  cursor: pointer;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  transition: color 0.2s linear,border-bottom-color 0.2s linear;
-}
-
-.emotion-5:hover,
-.emotion-5:focus {
-  outline: 0 none;
-  color: #1EA7FD;
-}
-
-.emotion-5 > svg {
-  width: 15px;
-}
-
 .emotion-4 {
  shape-rendering: inherit;
  -webkit-transform: translate3d(0,0,0);
@ -734,6 +711,29 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
  width: 100%;
 }

+.emotion-5 {
+  height: 40px;
+  background: none;
+  color: inherit;
+  padding: 0;
+  cursor: pointer;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+}
+
+.emotion-5:hover,
+.emotion-5:focus {
+  outline: 0 none;
+  color: #1EA7FD;
+}
+
+.emotion-5 > svg {
+  width: 15px;
+}
+
 .emotion-38 {
  display: -webkit-box;
  display: -webkit-flex;
@ -851,6 +851,11 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-bottom: .75rem;
 }

 .emotion-11 {
@ -1378,15 +1383,16 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
  background: #E1FFD4;
  color: #66BF3C;
  font-weight: 700;
+  font-size: 14px;
  padding: 10px 20px;
  margin-bottom: 24px;
+  border-radius: 4px;
  border: 1px solid rgba(0,0,0,.1);
  text-align: center;
 }

 .emotion-31 {
  margin-top: 20px;
-  padding-bottom: 20px;
  border-top: 1px solid rgba(0,0,0,.1);
 }

@ -1627,7 +1633,7 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
 >
  <div
    class="emotion-8"
-    title="bar"
+    title="flexbar"
  >
    <div
      data-simplebar="true"
@ -1656,7 +1662,6 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
              >
                <div
                  class="emotion-2"
-                  title="side left"
                >
                  <div
                    class="emotion-1"
@ -1673,7 +1678,6 @@ exports[`Storyshots UI|Settings/AboutScreen new version required 1`] = `
                </div>
                <div
                  class="emotion-6"
-                  title="side right"
                >
                  <button
                    class="emotion-5"
@ -2063,29 +2067,6 @@ exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = `
  margin-right: 15px;
 }

-.emotion-5 {
-  height: 40px;
-  background: none;
-  color: inherit;
-  padding: 0;
-  cursor: pointer;
-  border: 0 solid transparent;
-  border-top: 3px solid transparent;
-  border-bottom: 3px solid transparent;
-  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
-  transition: color 0.2s linear,border-bottom-color 0.2s linear;
-}
-
-.emotion-5:hover,
-.emotion-5:focus {
-  outline: 0 none;
-  color: #1EA7FD;
-}
-
-.emotion-5 > svg {
-  width: 15px;
-}
-
 .emotion-4 {
  shape-rendering: inherit;
  -webkit-transform: translate3d(0,0,0);
@ -2110,6 +2091,29 @@ exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = `
  width: 100%;
 }

+.emotion-5 {
+  height: 40px;
+  background: none;
+  color: inherit;
+  padding: 0;
+  cursor: pointer;
+  border: 0 solid transparent;
+  border-top: 3px solid transparent;
+  border-bottom: 3px solid transparent;
+  -webkit-transition: color 0.2s linear,border-bottom-color 0.2s linear;
+  transition: color 0.2s linear,border-bottom-color 0.2s linear;
+}
+
+.emotion-5:hover,
+.emotion-5:focus {
+  outline: 0 none;
+  color: #1EA7FD;
+}
+
+.emotion-5 > svg {
+  width: 15px;
+}
+
 .emotion-24 {
  display: -webkit-box;
  display: -webkit-flex;
@ -2222,8 +2226,10 @@ exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = `
  background: #EAF3FC;
  color: #333333;
  font-weight: 700;
+  font-size: 14px;
  padding: 10px 20px;
  margin-bottom: 24px;
+  border-radius: 4px;
  border: 1px solid rgba(0,0,0,.1);
  text-align: center;
 }
@ -2237,6 +2243,11 @@ exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = `
  -webkit-justify-content: space-between;
  -ms-flex-pack: justify;
  justify-content: space-between;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  margin-bottom: .75rem;
 }

 .emotion-11 {
@ -2766,7 +2777,7 @@ exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = `
 >
  <div
    class="emotion-8"
-    title="bar"
+    title="flexbar"
  >
    <div
      data-simplebar="true"
@ -2795,7 +2806,6 @@ exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = `
              >
                <div
                  class="emotion-2"
-                  title="side left"
                >
                  <div
                    class="emotion-1"
@ -2812,7 +2822,6 @@ exports[`Storyshots UI|Settings/AboutScreen up to date 1`] = `
                </div>
                <div
                  class="emotion-6"
-                  title="side right"
                >
                  <button
                    class="emotion-5"
--- a/lib/ui/src/settings/about.js
+++ b/lib/ui/src/settings/about.js
@ -50,6 +50,8 @@ const SubheadingLink = styled(Link)(({ theme }) => ({
 const Subheader = styled.div({
  display: 'flex',
  justifyContent: 'space-between',
+  alignItems: 'center',
+  marginBottom: '.75rem',
 });

 const UpdateMessage = styled.div(
@ -65,9 +67,10 @@ const UpdateMessage = styled.div(

  ({ theme }) => ({
    fontWeight: theme.typography.weight.bold,
+    fontSize: theme.typography.size.s2,
    padding: '10px 20px',
    marginBottom: 24,
-    borderRadius: theme.borderRadius,
+    borderRadius: theme.appBorderRadius,
    border: `1px solid ${theme.appBorderColor}`,
    textAlign: 'center',
  })
@ -80,7 +83,6 @@ const ErrorMessage = styled.div(({ theme }) => ({

 const Upgrade = styled.div(({ theme }) => ({
  marginTop: 20,
-  paddingBottom: 20,
  borderTop: `1px solid ${theme.appBorderColor}`,
 }));

--- a/package.json
+++ b/package.json
@ -88,7 +88,7 @@
    "concurrently": "^4.0.1",
    "core-js": "^2.6.2",
    "cross-env": "^5.2.0",
-    "danger": "^7.0.13",
+    "danger": "^7.0.14",
    "enzyme": "^3.7.0",
    "enzyme-adapter-react-16": "^1.9.1",
    "eslint": "^5.14.1",
@ -96,7 +96,7 @@
    "eslint-config-prettier": "^4.0.0",
    "eslint-plugin-import": "^2.16.0",
    "eslint-plugin-jest": "^22.2.2",
-    "eslint-plugin-json": "^1.2.1",
+    "eslint-plugin-json": "^1.4.0",
    "eslint-plugin-jsx-a11y": "^6.2.1",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-react": "^7.12.4",
--- a/yarn.lock
+++ b/yarn.lock