feat: upgrade to Emotion 10 (#2166)

packages/netlify-cms-widget-file/package.json

@@ -27,16 +27,16 @@
   },
   "devDependencies": {
     "cross-env": "^5.2.0",
-    "webpack": "^4.16.1",
-    "webpack-cli": "^3.1.0"
+    "webpack": "^4.29.6",
+    "webpack-cli": "^3.2.3"
   },
   "peerDependencies": {
-    "emotion": "^9.2.6",
+    "@emotion/core": "^10.0.9",
+    "@emotion/styled": "^10.0.9",
     "immutable": "^3.7.6",
     "netlify-cms-ui-default": "^2.0.0",
     "prop-types": "^15.5.10",
     "react": "^16.4.1",
-    "react-emotion": "^9.2.6",
     "react-immutable-proptypes": "^2.1.0"
   }
 }

packages/netlify-cms-widget-file/src/FilePreview.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import { List } from 'immutable';
 import { WidgetPreviewContainer } from 'netlify-cms-ui-default';
 

packages/netlify-cms-widget-file/src/withFileControl.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import styled from 'react-emotion';
+import styled from '@emotion/styled';
 import { Map, List } from 'immutable';
 import { once } from 'lodash';
 import uuid from 'uuid/v4';
@@ -33,12 +33,6 @@ const MultiImageWrapper = styled.div`
   flex-wrap: wrap;
 `;
 
-const FileInfo = styled.div`
-  button:not(:first-child) {
-    margin-top: 12px;
-  }
-`;
-
 const FileLink = styled.a`
   margin-bottom: 20px;
   font-weight: normal;
@@ -51,6 +45,10 @@ const FileLink = styled.a`
   }
 `;
 
+const FileLinks = styled.div`
+  margin-bottom: 12px;
+`;
+
 const FileLinkList = styled.ul`
   list-style-type: none;
 `;
@@ -63,6 +61,7 @@ const FileWidgetButton = styled.button`
 const FileWidgetButtonRemove = styled.button`
   ${buttons.button};
   ${components.badgeDanger};
+  margin-top: 12px;
 `;
 
 function isMultiple(value) {
@@ -192,14 +191,16 @@ export default function withFileControl({ forImage } = {}) {
 
       if (isMultiple(value)) {
         return (
-          <FileLinkList>
-            {value.map(val => (
-              <li key={val}>{this.renderFileLink(val)}</li>
-            ))}
-          </FileLinkList>
+          <FileLinks>
+            <FileLinkList>
+              {value.map(val => (
+                <li key={val}>{this.renderFileLink(val)}</li>
+              ))}
+            </FileLinkList>
+          </FileLinks>
         );
       }
-      return this.renderFileLink(value);
+      return <FileLinks>{this.renderFileLink(value)}</FileLinks>;
     };
 
     renderImages = () => {
@@ -225,7 +226,7 @@ export default function withFileControl({ forImage } = {}) {
     renderSelection = subject => (
       <div>
         {forImage ? this.renderImages() : null}
-        <FileInfo>
+        <div>
           {forImage ? null : this.renderFileLinks()}
           <FileWidgetButton onClick={this.handleChange}>
             Choose different {subject}
@@ -233,7 +234,7 @@ export default function withFileControl({ forImage } = {}) {
           <FileWidgetButtonRemove onClick={this.handleRemove}>
             Remove {subject}
           </FileWidgetButtonRemove>
-        </FileInfo>
+        </div>
       </div>
     );