Completely move to emotion 10

app/react/package.json

@@ -35,7 +35,6 @@
     "@storybook/core": "4.0.0-alpha.21",
     "babel-plugin-react-docgen": "^2.0.0-babel7.0",
     "common-tags": "^1.8.0",
-    "emotion": "^9.2.6",
     "global": "^4.3.2",
     "lodash.flattendeep": "^4.4.0",
     "prop-types": "^15.6.2",

docs/src/pages/addons/writing-addons/index.md

@@ -118,7 +118,7 @@ Then add the following code to the register.js.
 ```js
 import React from 'react';
 import addons from '@storybook/addons';
-import styled from 'emotion';
+import styled from '@emotion/styled';
 
 const NotesPanel = styled.div({
   margin: 10,

lib/ui/package.json

@@ -35,7 +35,6 @@
     "@storybook/podda": "^1.2.3",
     "@storybook/react-komposer": "^2.0.4",
     "deep-equal": "^1.0.1",
-    "emotion": "^9.2.8",
     "events": "^3.0.0",
     "fuse.js": "^3.2.1",
     "global": "^4.3.2",

lib/ui/src/modules/ui/components/search_box.js

@@ -5,8 +5,7 @@ import { polyfill } from 'react-lifecycles-compat';
 
 import ReactModal from 'react-modal';
 import FuzzySearch from 'react-fuzzy';
-import { withCSSContext } from '@emotion/core';
+import { css, withCSSContext } from '@emotion/core';
-import { css } from 'emotion';
 
 const formatStories = stories => {
   const formattedStories = [];
@@ -102,12 +101,15 @@ class SearchBox extends React.Component {
         isOpen={showSearchBox}
         onAfterOpen={this.onModalOpen}
         onRequestClose={onClose}
-        className={css({
+        className={
+          css({
             fontSize: theme.mainTextColor,
             fontFamily: theme.mainTextFace,
             color: theme.mainTextColor,
-        })}
+          }).name
-        overlayClassName={css({
+        }
+        overlayClassName={
+          css({
             position: 'fixed',
             height: '100vh',
             width: '100vw',
@@ -120,7 +122,8 @@ class SearchBox extends React.Component {
             bottom: 0,
             background: theme.overlayBackground,
             zIndex: 1,
-        })}
+          }).name
+        }
         contentLabel="Search"
         shouldReturnFocusAfterClose={false}
       >

lib/ui/src/modules/ui/components/shortcuts_help.js

@@ -1,10 +1,9 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import styled from '@emotion/styled';
-import { withCSSContext } from '@emotion/core';
-import { css } from 'emotion';
 
 import ReactModal from 'react-modal';
+import { css, withCSSContext } from '@emotion/core';
 
 const Command = styled.b(
   ({ isLast, isFirst, theme }) => {
@@ -140,7 +139,8 @@ function ShortcutsHelp({ isOpen, onClose, platform }, { theme }) {
     <ReactModal
       isOpen={isOpen}
       onRequestClose={onClose}
-      className={css({
+      className={
+        css({
           position: 'absolute',
           border: theme.mainBorder,
           borderRadius: theme.mainBorderRadius,
@@ -156,8 +156,10 @@ function ShortcutsHelp({ isOpen, onClose, platform }, { theme }) {
           fontSize: theme.mainTextColor,
           fontFamily: theme.mainTextFace,
           color: theme.mainTextColor,
-      })}
+        }).name
-      overlayClassName={css({
+      }
+      overlayClassName={
+        css({
           position: 'fixed',
           top: 0,
           left: 0,
@@ -165,7 +167,8 @@ function ShortcutsHelp({ isOpen, onClose, platform }, { theme }) {
           bottom: 0,
           background: theme.overlayBackground,
           zIndex: 1,
-      })}
+        }).name
+      }
       contentLabel="Shortcuts"
     >
       <Shortcuts appShortcuts={getShortcuts(platform)} />

yarn.lock

@@ -6741,7 +6741,7 @@ emojis-list@^2.0.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/emojis-list/-/emojis-list-2.1.0.tgz#4daa4d9db00f9819880c79fa457ae5b09a1fd389"
 
-emotion@9.2.8, emotion@^9.2.6, emotion@^9.2.8:
+emotion@9.2.8:
   version "9.2.8"
   resolved "https://registry.yarnpkg.com/emotion/-/emotion-9.2.8.tgz#b89e754be1a109f4e47ff0031928f94e40d7984a"
   dependencies: