Merge branch 'next' into 5597-toolbar-separators

2025-04-06 15:31:16 +08:00 · 2019-02-22 14:41:01 +08:00 · 2019-02-22 14:41:01 +08:00 · e6a1d2cf8d
commit e6a1d2cf8d
parent 845491bb66 66cc7fdd00
22 changed files with 617 additions and 252 deletions
--- 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/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/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/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/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
@ -2641,7 +2641,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",
@ -2811,6 +2823,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;
@ -3504,29 +3544,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);
@ -3551,6 +3568,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;
@ -4035,29 +4075,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);
@ -4082,6 +4099,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;
--- a/lib/channel-postmessage/package.json
+++ b/lib/channel-postmessage/package.json
@ -22,6 +22,7 @@
  },
  "dependencies": {
    "@storybook/channels": "5.0.0-beta.3",
+    "@storybook/client-logger": "5.0.0-beta.3",
    "global": "^4.3.2",
    "telejson": "^1.0.1"
  },
--- 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/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/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/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
@ -254,6 +254,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);
--- 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
@ -51,7 +51,7 @@ Array [
  margin-right: 15px;
 }

-.emotion-2 {
+.emotion-16 {
  height: 40px;
  background: none;
  color: inherit;
@ -64,16 +64,22 @@ Array [
  transition: color 0.2s linear,border-bottom-color 0.2s linear;
 }

-.emotion-2:hover,
-.emotion-2:focus {
+.emotion-16:hover,
+.emotion-16:focus {
  outline: 0 none;
  color: #1EA7FD;
 }

-.emotion-2 > svg {
+.emotion-16 > svg {
  width: 15px;
 }

+@media (max-width:599px) {
+  .emotion-16 {
+    display: none;
+  }
+}
+
 .emotion-1 {
  shape-rendering: inherit;
  -webkit-transform: translate3d(0,0,0);
@ -165,6 +171,29 @@ Array [
  visibility: hidden;
 }

+.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;
@ -500,7 +529,7 @@ Array [
  margin-right: 15px;
 }

-.emotion-8 {
+.emotion-22 {
  height: 40px;
  background: none;
  color: inherit;
@ -513,16 +542,22 @@ Array [
  transition: color 0.2s linear,border-bottom-color 0.2s linear;
 }

-.emotion-8:hover,
-.emotion-8:focus {
+.emotion-22:hover,
+.emotion-22:focus {
  outline: 0 none;
  color: #1EA7FD;
 }

-.emotion-8 > svg {
+.emotion-22 > svg {
  width: 15px;
 }

+@media (max-width:599px) {
+  .emotion-22 {
+    display: none;
+  }
+}
+
 .emotion-7 {
  shape-rendering: inherit;
  -webkit-transform: translate3d(0,0,0);
@ -614,6 +649,29 @@ Array [
  visibility: hidden;
 }

+.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;
--- a/lib/ui/src/components/preview/preview.js
+++ b/lib/ui/src/components/preview/preview.js
@ -3,6 +3,7 @@ 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, Separator } from '@storybook/components';
@ -18,6 +19,13 @@ import { Grid, Background, BackgroundProvider, BackgroundConsumer } from './back

 import { IFrame } from './iframe';

+const DesktopOnlyIconButton = styled(IconButton)({
+  // 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"
@ -128,13 +136,13 @@ const getTools = memoize(10)(
      {
        match: p => p.viewMode === 'story',
        render: () => (
-          <IconButton
-            key="opener"
-            onClick={() => window.open(`${baseUrl}?id=${storyId}`)}
-            title="Open story in new tab"
+          <DesktopOnlyIconButton
+            key="full"
+            onClick={actions.toggleFullscreen}
+            title="Go full screen"
          >
-            <Icons icon="share" />
-          </IconButton>
+            <Icons icon={options.isFullscreen ? 'close' : 'expand'} />
+          </DesktopOnlyIconButton>
        ),
      },
      {
--- a/lib/ui/src/settings/snapshots/about.stories.storyshot
+++ b/lib/ui/src/settings/snapshots/about.stories.storyshot
@ -186,29 +186,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);
@ -233,6 +210,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;
@ -753,29 +753,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);
@ -800,6 +777,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;
@ -2139,29 +2139,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);
@ -2186,6 +2163,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;