UI Tweaks and bug fixes

.eslintrc.js

@@ -44,7 +44,6 @@ module.exports = {
     '@emotion/styled-import': 'error',
     'require-atomic-updates': [0],
     'object-shorthand': ['error', 'always'],
-    'func-style': ['error', 'declaration'],
     'prefer-const': [
       'error',
       {

dev-test/backends/test/config.yml

@@ -70,6 +70,8 @@ collections: # A list of collections the CMS should be able to edit
         label: 'Site Settings'
         file: '_data/settings.json'
         description: 'General Site Settings'
+        editor:
+          preview: true
         fields:
           - { label: 'Global title', name: 'site_title', widget: 'string' }
           - label: 'Post Settings'

dev-test/config.yml

@@ -71,6 +71,8 @@ collections: # A list of collections the CMS should be able to edit
         label: 'Site Settings'
         file: '_data/settings.json'
         description: 'General Site Settings'
+        editor:
+          preview: true
         fields:
           - { label: 'Global title', name: 'site_title', widget: 'string' }
           - label: 'Post Settings'

packages/netlify-cms-app/package.json

@@ -27,7 +27,7 @@
   ],
   "license": "MIT",
   "dependencies": {
-    "@emotion/core": "11.0.0",
+    "@emotion/react": "11.10.4",
     "@emotion/styled": "11.10.4",
     "codemirror": "^5.46.0",
     "immutable": "^3.7.6",

packages/netlify-cms-backend-azure/package.json

@@ -25,7 +25,7 @@
     "semaphore": "^1.1.0"
   },
   "peerDependencies": {
-    "@emotion/core": "11.0.0",
+    "@emotion/react": "11.10.4",
     "@emotion/styled": "11.10.4",
     "immutable": "^3.7.6",
     "lodash": "^4.17.11",

packages/netlify-cms-backend-bitbucket/package.json

@@ -26,7 +26,7 @@
     "what-the-diff": "^0.6.0"
   },
   "peerDependencies": {
-    "@emotion/core": "11.0.0",
+    "@emotion/react": "11.10.4",
     "@emotion/styled": "11.10.4",
     "immutable": "^3.7.6",
     "lodash": "^4.17.11",

packages/netlify-cms-backend-git-gateway/package.json

@@ -27,7 +27,7 @@
     "minimatch": "^3.0.4"
   },
   "peerDependencies": {
-    "@emotion/core": "11.0.0",
+    "@emotion/react": "11.10.4",
     "@emotion/styled": "11.10.4",
     "lodash": "^4.17.11",
     "netlify-cms-backend-bitbucket": "^2.12.8",

packages/netlify-cms-backend-github/package.json

@@ -32,7 +32,7 @@
     "semaphore": "^1.1.0"
   },
   "peerDependencies": {
-    "@emotion/core": "11.0.0",
+    "@emotion/react": "11.10.4",
     "@emotion/styled": "11.10.4",
     "lodash": "^4.17.11",
     "netlify-cms-lib-auth": "^2.3.0",

packages/netlify-cms-backend-gitlab/package.json

@@ -28,7 +28,7 @@
     "semaphore": "^1.1.0"
   },
   "peerDependencies": {
-    "@emotion/core": "11.0.0",
+    "@emotion/react": "11.10.4",
     "@emotion/styled": "11.10.4",
     "immutable": "^3.7.6",
     "lodash": "^4.17.11",

packages/netlify-cms-backend-proxy/package.json

@@ -19,7 +19,7 @@
     "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore \"**/__tests__\" --root-mode upward --extensions \".js,.jsx,.ts,.tsx\""
   },
   "peerDependencies": {
-    "@emotion/core": "11.0.0",
+    "@emotion/react": "11.10.4",
     "@emotion/styled": "11.10.4",
     "netlify-cms-lib-util": "^2.12.3",
     "netlify-cms-ui-default": "^2.12.1",

packages/netlify-cms-backend-test/package.json

@@ -19,7 +19,7 @@
     "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore \"**/__tests__\" --root-mode upward --extensions \".js,.jsx,.ts,.tsx\""
   },
   "peerDependencies": {
-    "@emotion/core": "11.0.0",
+    "@emotion/react": "11.10.4",
     "@emotion/styled": "11.10.4",
     "lodash": "^4.17.11",
     "netlify-cms-lib-util": "^2.12.3",

packages/netlify-cms-core/index.d.ts

@@ -281,6 +281,9 @@ declare module 'netlify-cms-core' {
     i18n?: boolean | CmsI18nConfig;
     media_folder?: string;
     public_folder?: string;
+    editor?: {
+      preview?: boolean;
+    };
   }
 
   export interface ViewFilter {

packages/netlify-cms-core/package.json

@@ -76,7 +76,7 @@
     "yaml": "^1.8.3"
   },
   "peerDependencies": {
-    "@emotion/core": "11.0.0",
+    "@emotion/react": "11.10.4",
     "@emotion/styled": "11.10.4",
     "immutable": "^3.7.6",
     "lodash": "^4.17.11",

packages/netlify-cms-core/src/components/App/App.js

@@ -37,8 +37,9 @@ TopBarProgress.config({
 const AppRoot = styled.div`
   width: 100%;
   min-width: 1200px;
-  min-height: 100vh;
+  height: 100vh;
   position: relative;
+  overflow: hidden;
 `;
 
 const AppWrapper = styled.div`

packages/netlify-cms-core/src/components/App/Header.js

@@ -2,7 +2,7 @@ import PropTypes from 'prop-types';
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { translate } from 'react-polyglot';
 import { NavLink } from 'react-router-dom';
 import {

packages/netlify-cms-core/src/components/Collection/ControlButton.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { buttons, StyledDropdownButton, colors } from 'netlify-cms-ui-default';
 

packages/netlify-cms-core/src/components/Collection/NestedCollection.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import { List } from 'immutable';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { connect } from 'react-redux';
 import { NavLink } from 'react-router-dom';

packages/netlify-cms-core/src/components/Collection/Sidebar.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { translate } from 'react-polyglot';
 import { NavLink } from 'react-router-dom';
 import { Icon, components, colors } from 'netlify-cms-ui-default';

packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControl.js

@@ -3,7 +3,7 @@ import { bindActionCreators } from 'redux';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { translate } from 'react-polyglot';
-import { ClassNames, Global, css as coreCss } from '@emotion/core';
+import { ClassNames, Global, css as coreCss } from '@emotion/react';
 import styled from '@emotion/styled';
 import { partial, uniqueId } from 'lodash';
 import { connect } from 'react-redux';
@@ -77,10 +77,6 @@ const styleStrings = {
 
 const ControlContainer = styled.div`
   margin-top: 16px;
-
-  &:first-of-type {
-    margin-top: 36px;
-  }
 `;
 
 const ControlErrorsList = styled.ul`

packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControlPane.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import {
   buttons,

packages/netlify-cms-core/src/components/Editor/EditorInterface.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { css, Global } from '@emotion/core';
+import { css, Global } from '@emotion/react';
 import styled from '@emotion/styled';
 import {
   colors,
@@ -118,9 +118,9 @@ const ControlPaneContainer = styled(PreviewPaneContainer)`
 `;
 
 const ViewControls = styled.div`
-  position: absolute;
+  position: fixed;
-  top: 10px;
+  bottom: 3px;
-  right: 28px;
+  right: 12px;
   z-index: ${zIndex.zIndex299};
 `;
 

packages/netlify-cms-core/src/components/Editor/EditorPreviewPane/EditorPreviewContent.tsx

@@ -44,6 +44,7 @@ const PreviewContent = ({ previewComponent, previewProps }: PreviewContentProps)
         <StyledPreviewContent className="preview-content">{children}</StyledPreviewContent>
       </ScrollSyncPane>,
       element,
+      'preview-content'
     );
   }, [previewComponent, previewProps, element]);
 };

packages/netlify-cms-core/src/components/Editor/EditorToolbar.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { translate } from 'react-polyglot';
 import { Link } from 'react-router-dom';

packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryButtons.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import copyToClipboard from 'copy-text-to-clipboard';
 import { isAbsolutePath } from 'netlify-cms-lib-util';

packages/netlify-cms-core/src/components/UI/Modal.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { css, Global, ClassNames } from '@emotion/core';
+import { css, Global, ClassNames } from '@emotion/react';
 import ReactModal from 'react-modal';
 import { transitions, shadows, lengths, zIndex } from 'netlify-cms-ui-default';
 

packages/netlify-cms-core/src/components/UI/SettingsDropdown.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { translate } from 'react-polyglot';
 import { Icon, Dropdown, DropdownItem, DropdownButton, colors } from 'netlify-cms-ui-default';

packages/netlify-cms-core/src/components/UI/Toast.js

@@ -1,7 +1,7 @@
 // eslint-disable-next-line no-unused-vars
 import React from 'react';
 import PropTypes from 'prop-types';
-import { css, Global } from '@emotion/core';
+import { css, Global } from '@emotion/react';
 import { translate } from 'react-polyglot';
 import reduxNotificationsStyles from 'redux-notifications/lib/styles.css';
 import { shadows, colors, lengths, zIndex } from 'netlify-cms-ui-default';

packages/netlify-cms-core/src/components/Workflow/WorkflowCard.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { translate } from 'react-polyglot';
 import { Link } from 'react-router-dom';

packages/netlify-cms-core/src/components/Workflow/WorkflowList.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import moment from 'moment';
 import { translate } from 'react-polyglot';

packages/netlify-cms-core/src/constants/configSchema.js

@@ -210,6 +210,12 @@ function getConfigSchema() {
                   file: { type: 'string' },
                   preview_path: { type: 'string' },
                   preview_path_date_field: { type: 'string' },
+                  editor: {
+                    type: 'object',
+                    properties: {
+                      preview: { type: 'boolean' },
+                    },
+                  },
                   fields: fieldsConfig(),
                 },
                 required: ['name', 'label', 'file', 'fields'],

packages/netlify-cms-core/src/reducers/entryDraft.js

@@ -114,10 +114,13 @@ function entryDraftReducer(state = Map(), action) {
         state.mergeDeepIn(['fieldsMetaData'], fromJS(metadata));
         const newData = state.getIn(['entry', ...dataPath]);
         const newMeta = state.getIn(['entry', 'meta']);
+        if (entries.length === 0) {
+          return;
+        }
         state.set(
           'hasChanged',
-          !entries.some(e => newData.equals(e.get(...dataPath))) ||
+          !newData.equals(entries[0].get(...dataPath)) ||
-            !entries.some(e => newMeta.equals(e.get('meta'))),
+            !newMeta.equals(entries[0].get('meta')),
         );
       });
     }

packages/netlify-cms-default-exports/package.json

@@ -20,7 +20,7 @@
     "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore \"**/__tests__\" --root-mode upward"
   },
   "dependencies": {
-    "@emotion/core": "11.0.0",
+    "@emotion/react": "11.10.4",
     "@emotion/styled": "11.10.4",
     "immutable": "^3.7.6",
     "lodash": "^4.17.11",

packages/netlify-cms-default-exports/src/index.js

@@ -8,7 +8,7 @@ import {
   Global,
   keyframes,
   ClassNames,
-} from '@emotion/core';
+} from '@emotion/react';
 import EmotionStyled from '@emotion/styled';
 import Immutable from 'immutable';
 import ImmutablePropTypes from 'react-immutable-proptypes';

packages/netlify-cms-lib-util/src/transientOptions.ts

@@ -0,0 +1,7 @@
+import type { CreateStyled } from '@emotion/styled';
+
+const transientOptions: Parameters<CreateStyled>[1] = {
+  shouldForwardProp: (propName: string) => !propName.startsWith('$'),
+};
+
+export default transientOptions;

packages/netlify-cms-ui-default/package.json

@@ -22,7 +22,7 @@
     "react-transition-group": "^4.0.0"
   },
   "peerDependencies": {
-    "@emotion/core": "11.0.0",
+    "@emotion/react": "11.10.4",
     "@emotion/styled": "11.10.4",
     "lodash": "^4.17.11",
     "prop-types": "^15.7.2",

packages/netlify-cms-ui-default/src/Dropdown.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { Wrapper, Button as DropdownButton, Menu, MenuItem } from 'react-aria-menubutton';
 

packages/netlify-cms-ui-default/src/ListItemTopBar.js

@@ -1,17 +1,27 @@
-import React from 'react';
-import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
+import PropTypes from 'prop-types';
+import React from 'react';
+import transientOptions from 'netlify-cms-lib-util';
 
 import Icon from './Icon';
-import { colors, lengths, buttons } from './styles';
+import { buttons, colors, lengths } from './styles';
 
-const TopBar = styled.div`
+const TopBar = styled(
-  display: flex;
+  'div',
-  justify-content: space-between;
+  transientOptions,
-  height: 26px;
+)(
-  border-radius: ${lengths.borderRadius} ${lengths.borderRadius} 0 0;
+  ({ $isVariableTypesList, $collapsed }) => `
-  position: relative;
+    display: flex;
-`;
+    justify-content: space-between;
+    height: 32px!important;
+    border-radius: ${
+      !$isVariableTypesList
+        ? $collapsed ? lengths.borderRadius : `${lengths.borderRadius} ${lengths.borderRadius} 0 0`
+        : $collapsed ? `0 ${lengths.borderRadius} ${lengths.borderRadius} ${lengths.borderRadius}` : `0 ${lengths.borderRadius} 0 0`
+    }!important;
+    position: relative;
+  `,
+);
 
 const TopBarButton = styled.button`
   ${buttons.button};
@@ -26,6 +36,16 @@ const TopBarButton = styled.button`
   display: flex;
   justify-content: center;
   align-items: center;
+  position: relative;
+`;
+
+const StyledTitle = styled.div`
+  position: absolute;
+  left: 36px;
+  line-height: 30px;
+  white-space: nowrap;
+  cursor: pointer;
+  z-index: 1;
 `;
 
 const TopBarButtonSpan = TopBarButton.withComponent('span');
@@ -44,14 +64,23 @@ function DragHandle({ dragHandleHOC }) {
   return <Handle />;
 }
 
-function ListItemTopBar({ className, collapsed, onCollapseToggle, onRemove, dragHandleHOC }) {
+function ListItemTopBar({
+  className,
+  title,
+  collapsed,
+  onCollapseToggle,
+  onRemove,
+  dragHandleHOC,
+  isVariableTypesList,
+}) {
   return (
-    <TopBar className={className}>
+    <TopBar className={className} $collapsed={collapsed} $isVariableTypesList={isVariableTypesList}>
       {onCollapseToggle ? (
         <TopBarButton onClick={onCollapseToggle}>
           <Icon type="chevron" size="small" direction={collapsed ? 'right' : 'down'} />
         </TopBarButton>
       ) : null}
+      {title ? <StyledTitle onClick={onCollapseToggle}>{title}</StyledTitle> : null}
       {dragHandleHOC ? <DragHandle dragHandleHOC={dragHandleHOC} /> : null}
       {onRemove ? (
         <TopBarButton onClick={onRemove}>
@@ -64,9 +93,11 @@ function ListItemTopBar({ className, collapsed, onCollapseToggle, onRemove, drag
 
 ListItemTopBar.propTypes = {
   className: PropTypes.string,
+  title: PropTypes.node,
   collapsed: PropTypes.bool,
   onCollapseToggle: PropTypes.func,
   onRemove: PropTypes.func,
+  isVariableTypesList: PropTypes.bool,
 };
 
 const StyledListItemTopBar = styled(ListItemTopBar)`
@@ -75,6 +106,7 @@ const StyledListItemTopBar = styled(ListItemTopBar)`
   height: 26px;
   border-radius: ${lengths.borderRadius} ${lengths.borderRadius} 0 0;
   position: relative;
+  border-top-left-radius: 0;
 `;
 
 export default StyledListItemTopBar;

packages/netlify-cms-ui-default/src/Loader.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import { css, keyframes } from '@emotion/core';
+import { css, keyframes } from '@emotion/react';
 import { CSSTransition } from 'react-transition-group';
 
 import { colors, zIndex } from './styles';

packages/netlify-cms-ui-default/src/ObjectWidgetTopBar.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 
 import Icon from './Icon';
@@ -14,7 +14,7 @@ const TopBarContainer = styled.div`
   display: flex;
   justify-content: space-between;
   margin: 0 -14px;
-  padding: 13px;
+  padding: 6px 13px;
 `;
 
 const ExpandButtonContainer = styled.div`
@@ -43,6 +43,7 @@ const ExpandButton = styled.button`
 const AddButton = styled.button`
   ${buttons.button}
   ${buttons.widget}
+  padding: 4px 12px;
 
   ${Icon} {
     margin-left: 6px;

packages/netlify-cms-ui-default/src/Toggle.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import ReactToggled from 'react-toggled';
 
 import { colors, colorsRaw, shadows, transitions } from './styles';

packages/netlify-cms-ui-default/src/styles.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { css, Global } from '@emotion/core';
+import { css, Global } from '@emotion/react';
 
 export const quantifier = '.cms-wrapper';
 
@@ -93,7 +93,7 @@ const lengths = {
   borderWidth: '2px',
   topCardWidth: '682px',
   pageMargin: '28px 18px',
-  objectWidgetTopBarContainerPadding: '0 14px 14px',
+  objectWidgetTopBarContainerPadding: '0 14px 0',
 };
 
 const borders = {

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

@@ -21,7 +21,7 @@
     "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore \"**/__tests__\" --root-mode upward"
   },
   "peerDependencies": {
-    "@emotion/core": "11.0.0",
+    "@emotion/react": "11.10.4",
     "lodash": "^4.17.11",
     "netlify-cms-ui-default": "^2.12.1",
     "prop-types": "^15.7.2",

packages/netlify-cms-widget-boolean/src/BooleanControl.js

@@ -1,7 +1,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { Toggle, ToggleBackground, colors } from 'netlify-cms-ui-default';
 
 function BooleanBackground({ isActive, ...props }) {

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

@@ -25,7 +25,7 @@
     "process:languages": "node ./scripts/process-languages"
   },
   "peerDependencies": {
-    "@emotion/core": "11.0.0",
+    "@emotion/react": "11.10.4",
     "codemirror": "^5.46.0",
     "lodash": "^4.17.11",
     "netlify-cms-ui-default": "^2.12.1",

packages/netlify-cms-widget-code/src/CodeControl.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { ClassNames } from '@emotion/core';
+import { ClassNames } from '@emotion/react';
 import { Map } from 'immutable';
 import { uniq, isEqual, isEmpty } from 'lodash';
 import uuid from 'uuid/v4';

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

@@ -25,7 +25,7 @@
     "validate-color": "^2.1.0"
   },
   "peerDependencies": {
-    "@emotion/core": "11.0.0",
+    "@emotion/react": "11.10.4",
     "@emotion/styled": "11.10.4",
     "netlify-cms-ui-default": "^2.12.1",
     "prop-types": "^15.7.2",

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

@@ -25,7 +25,7 @@
     "react-datetime": "^3.1.1"
   },
   "peerDependencies": {
-    "@emotion/core": "11.0.0",
+    "@emotion/react": "11.10.4",
     "@emotion/styled": "11.10.4",
     "moment": "^2.24.0",
     "netlify-cms-ui-default": "^2.12.1",

packages/netlify-cms-widget-date/src/DateControl.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import reactDateTimeStyles from 'react-datetime/css/react-datetime.css';
 import DateTime from 'react-datetime';
 import moment from 'moment';

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

@@ -23,7 +23,7 @@
     "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore \"**/__tests__\" --root-mode upward"
   },
   "peerDependencies": {
-    "@emotion/core": "11.0.0",
+    "@emotion/react": "11.10.4",
     "netlify-cms-widget-date": "^2.5.7",
     "react": "^16.8.4 || ^17.0.0"
   },

packages/netlify-cms-widget-datetime/src/DateTimeControl.js

@@ -1,7 +1,7 @@
 /** @jsx jsx */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { jsx, css } from '@emotion/core';
+import { jsx, css } from '@emotion/react';
 import reactDateTimeStyles from 'react-datetime/css/react-datetime.css';
 import DateTime from 'react-datetime';
 import moment from 'moment';

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

@@ -28,7 +28,7 @@
     "react-sortable-hoc": "^2.0.0"
   },
   "peerDependencies": {
-    "@emotion/core": "11.0.0",
+    "@emotion/react": "11.10.4",
     "@emotion/styled": "11.10.4",
     "immutable": "^3.7.6",
     "netlify-cms-ui-default": "^2.12.1",

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

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { Map, List } from 'immutable';
 import { once } from 'lodash';
 import uuid from 'uuid/v4';

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

@@ -23,7 +23,7 @@
     "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore \"**/__tests__\" --root-mode upward"
   },
   "peerDependencies": {
-    "@emotion/core": "11.0.0",
+    "@emotion/react": "11.10.4",
     "@emotion/styled": "11.10.4",
     "immutable": "^3.7.6",
     "netlify-cms-ui-default": "^2.12.1",

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

@@ -25,7 +25,7 @@
     "react-sortable-hoc": "^2.0.0"
   },
   "peerDependencies": {
-    "@emotion/core": "11.0.0",
+    "@emotion/react": "11.10.4",
     "@emotion/styled": "11.10.4",
     "immutable": "^3.7.6",
     "lodash": "^4.17.11",

packages/netlify-cms-widget-list/src/ListControl.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import styled from '@emotion/styled';
-import { css, ClassNames } from '@emotion/core';
+import { css, ClassNames } from '@emotion/react';
 import { List, Map, fromJS } from 'immutable';
 import { partial, isEmpty, uniqueId } from 'lodash';
 import uuid from 'uuid/v4';
@@ -39,7 +39,7 @@ const NestedObjectLabel = styled.div`
   border-top: 0;
   color: ${props => (props.error ? colors.errorText : 'inherit')};
   background-color: ${colors.textFieldBorder};
-  padding: 13px;
+  padding: 6px 13px;
   border-radius: 0 0 ${lengths.borderRadius} ${lengths.borderRadius};
 `;
 
@@ -56,13 +56,11 @@ const styles = {
   listControlItem: css`
     margin-top: 18px;
 
-    &:first-of-type {
+    &:last-of-type {
-      margin-top: 26px;
+      margin-bottom: 14px;
     }
   `,
-  listControlItemCollapsed: css`
+
-    padding-bottom: 0;
-  `,
 };
 
 const SortableList = SortableContainer(({ items, renderItem }) => {
@@ -546,10 +544,12 @@ export default class ListControl extends React.Component {
           onRemove={partial(this.handleRemove, index)}
           dragHandleHOC={SortableHandle}
           data-testid={`styled-list-item-top-bar-${key}`}
+          title={collapsed ? this.objectLabel(item) : null}
+          isVariableTypesList={isVariableTypesList}
         />
-        <NestedObjectLabel collapsed={collapsed} error={hasError}>
+        {/* <NestedObjectLabel collapsed={collapsed} error={hasError}>
           {this.objectLabel(item)}
-        </NestedObjectLabel>
+        </NestedObjectLabel> */}
         <ClassNames>
           {({ css, cx }) => (
             <ObjectControl

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

@@ -22,7 +22,7 @@
     "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore \"**/__tests__\" --root-mode upward"
   },
   "peerDependencies": {
-    "@emotion/core": "11.0.0",
+    "@emotion/react": "11.10.4",
     "lodash": "^4.17.11",
     "netlify-cms-ui-default": "^2.12.1",
     "prop-types": "^15.7.2",

packages/netlify-cms-widget-map/src/withMapControl.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { ClassNames } from '@emotion/core';
+import { ClassNames } from '@emotion/react';
 import olStyles from 'ol/ol.css';
 import Map from 'ol/Map.js';
 import View from 'ol/View.js';

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

@@ -42,7 +42,7 @@
     "unist-util-visit-parents": "^2.0.1"
   },
   "peerDependencies": {
-    "@emotion/core": "11.0.0",
+    "@emotion/react": "11.10.4",
     "@emotion/styled": "11.10.4",
     "immutable": "^3.7.6",
     "lodash": "^4.17.11",

packages/netlify-cms-widget-markdown/src/MarkdownControl/RawEditor.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import styled from '@emotion/styled';
-import { ClassNames } from '@emotion/core';
+import { ClassNames } from '@emotion/react';
 import { debounce } from 'lodash';
 import { Value } from 'slate';
 import { Editor as Slate, setEventTransfer } from 'slate-react';

packages/netlify-cms-widget-markdown/src/MarkdownControl/Toolbar.js

@@ -2,7 +2,7 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { List } from 'immutable';
 import {
   Toggle,

packages/netlify-cms-widget-markdown/src/MarkdownControl/VisualEditor.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { fromJS } from 'immutable';
 import styled from '@emotion/styled';
-import { css as coreCss, ClassNames } from '@emotion/core';
+import { css as coreCss, ClassNames } from '@emotion/react';
 import { get, isEmpty, debounce } from 'lodash';
 import { Value, Document, Block, Text } from 'slate';
 import { Editor as Slate } from 'slate-react';

packages/netlify-cms-widget-markdown/src/MarkdownControl/components/Shortcode.js

@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { Map, fromJS } from 'immutable';
 import { omit } from 'lodash';
 

packages/netlify-cms-widget-markdown/src/MarkdownControl/components/VoidBlock.js

@@ -1,6 +1,6 @@
 /* eslint-disable react/prop-types */
 import React from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import { zIndex } from 'netlify-cms-ui-default';
 
 function InsertionPoint(props) {

packages/netlify-cms-widget-markdown/src/MarkdownControl/renderers.js

@@ -1,6 +1,6 @@
 /* eslint-disable react/display-name */
 import React from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 import { colors, lengths } from 'netlify-cms-ui-default';
 

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

@@ -23,7 +23,7 @@
     "build:esm": "cross-env NODE_ENV=esm babel src --out-dir dist/esm --ignore \"**/__tests__\" --root-mode upward"
   },
   "peerDependencies": {
-    "@emotion/core": "11.0.0",
+    "@emotion/react": "11.10.4",
     "@emotion/styled": "11.10.4",
     "immutable": "^3.7.6",
     "lodash": "^4.17.11",

packages/netlify-cms-widget-object/src/ObjectControl.js

@@ -1,14 +1,15 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import { ClassNames } from '@emotion/core';
+import { ClassNames } from '@emotion/react';
+import styled from '@emotion/styled';
 import { List, Map } from 'immutable';
 import { colors, lengths, ObjectWidgetTopBar } from 'netlify-cms-ui-default';
 import { stringTemplate } from 'netlify-cms-lib-widgets';
 
 const styleStrings = {
   nestedObjectControl: `
-    padding: 6px 14px 14px;
+    padding: 6px 14px 0;
     border-top: 0;
     border-top-left-radius: 0;
     border-top-right-radius: 0;
@@ -21,6 +22,10 @@ const styleStrings = {
   `,
 };
 
+const StyledFieldsBox = styled.div`
+  padding-bottom: 14px;
+`;
+
 export default class ObjectControl extends React.Component {
   componentValidate = {};
 
@@ -175,7 +180,7 @@ export default class ObjectControl extends React.Component {
                   t={t}
                 />
               )}
-              <div
+              <StyledFieldsBox
                 className={cx({
                   [css`
                     ${styleStrings.collapsedObjectControl}
@@ -183,7 +188,7 @@ export default class ObjectControl extends React.Component {
                 })}
               >
                 {this.renderFields(multiFields, singleField)}
-              </div>
+              </StyledFieldsBox>
             </div>
           )}
         </ClassNames>

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

@@ -27,7 +27,7 @@
     "react-window": "^1.8.5"
   },
   "peerDependencies": {
-    "@emotion/core": "11.0.0",
+    "@emotion/react": "11.10.4",
     "@emotion/styled": "11.10.4",
     "immutable": "^3.7.6",
     "lodash": "^4.17.11",

scripts/externals.js

@@ -42,12 +42,12 @@ module.exports = {
       amd: 'lodash',
       umd: 'lodash',
     },
-    '@emotion/core': {
+    '@emotion/react': {
       root: ['NetlifyCmsDefaultExports', 'EmotionCore'],
-      commonjs2: '@emotion/core',
+      commonjs2: '@emotion/react',
-      commonjs: '@emotion/core',
+      commonjs: '@emotion/react',
-      amd: '@emotion/core',
+      amd: '@emotion/react',
-      umd: '@emotion/core',
+      umd: '@emotion/react',
     },
     '@emotion/styled': {
       root: ['NetlifyCmsDefaultExports', 'EmotionStyled'],

website/package.json

@@ -15,7 +15,7 @@
   "license": "MIT",
   "dependencies": {
     "@emotion/cache": "11.10.3",
-    "@emotion/core": "11.0.0",
+    "@emotion/react": "11.10.4",
     "@emotion/styled": "11.10.4",
     "dayjs": "^1.8.23",
     "emotion-theming": "^10.0.27",

website/src/cms/cms.js

@@ -2,7 +2,7 @@ import React from 'react';
 import CMS from 'netlify-cms-app';
 import dayjs from 'dayjs';
 import Prism from 'prismjs';
-import { CacheProvider } from '@emotion/core';
+import { CacheProvider } from '@emotion/react';
 import createCache from '@emotion/cache';
 
 import BlogPostTemplate from '../components/blog-post-template';

website/src/components/blog-post-template.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 
 import Container from './container';
 import Markdown from './markdown';

website/src/components/button.js

@@ -1,4 +1,4 @@
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import theme from '../theme';

website/src/components/community.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 
 import Markdownify from './markdownify';
 import PageHero from './page-hero';

website/src/components/container.js

@@ -1,5 +1,5 @@
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 
 import { mq } from '../utils';
 import theme from '../theme';

website/src/components/edit-link.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 
 function EditLink({ collection, filename }) {
   return (

website/src/components/header.js

@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from 'react';
 import { Link, graphql, StaticQuery } from 'gatsby';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import GitHubButton from 'react-github-btn';
 
 import Container from './container';

website/src/components/notification.js

@@ -1,6 +1,6 @@
 import React from 'react';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 
 import theme from '../theme';
 

website/src/components/page-hero.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 
 import Container from './container';
 import theme from '../theme';

website/src/components/release.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import moment from 'moment';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 
 import Markdownify from '../components/markdownify';
 import theme from '../theme';

website/src/components/sidebar-layout.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 import styled from '@emotion/styled';
 
 import Page from './page';

website/src/components/whats-new.js

@@ -1,5 +1,5 @@
 import React from 'react';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 
 import Container from './container';
 import Release from './release';

website/src/pages/blog.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Helmet } from 'react-helmet';
 import { Link, graphql } from 'gatsby';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 
 import Layout from '../components/layout';
 import Container from '../components/container';

website/src/pages/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { graphql } from 'gatsby';
 import styled from '@emotion/styled';
-import { css } from '@emotion/core';
+import { css } from '@emotion/react';
 
 import Layout from '../components/layout';
 import Markdownify from '../components/markdownify';