UI Tweaks and bug fixes

2022-09-22 18:09:57 -04:00 · 2022-09-22 18:09:57 -04:00 · 1aeffbf9c4
commit 1aeffbf9c4
parent 613a1cec76
83 changed files with 171 additions and 113 deletions
--- a/.eslintrc.js
+++ b/.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',
      {
--- a/dev-test/backends/test/config.yml
+++ b/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'
--- a/dev-test/config.yml
+++ b/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'
--- a/packages/netlify-cms-app/package.json
+++ b/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",
--- a/packages/netlify-cms-backend-azure/package.json
+++ b/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",
--- a/packages/netlify-cms-backend-bitbucket/package.json
+++ b/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",
--- a/packages/netlify-cms-backend-git-gateway/package.json
+++ b/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",
--- a/packages/netlify-cms-backend-github/package.json
+++ b/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",
--- a/packages/netlify-cms-backend-gitlab/package.json
+++ b/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",
--- a/packages/netlify-cms-backend-proxy/package.json
+++ b/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",
--- a/packages/netlify-cms-backend-test/package.json
+++ b/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",
--- a/packages/netlify-cms-core/index.d.ts
+++ b/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 {
--- a/packages/netlify-cms-core/package.json
+++ b/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",
--- a/packages/netlify-cms-core/src/components/App/App.js
+++ b/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`
--- a/packages/netlify-cms-core/src/components/App/Header.js
+++ b/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 {
--- a/packages/netlify-cms-core/src/components/Collection/ControlButton.js
+++ b/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';

--- a/packages/netlify-cms-core/src/components/Collection/NestedCollection.js
+++ b/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';
--- a/packages/netlify-cms-core/src/components/Collection/Sidebar.js
+++ b/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';
--- a/packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControl.js
+++ b/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`
--- a/packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControlPane.js
+++ b/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,
--- a/packages/netlify-cms-core/src/components/Editor/EditorInterface.js
+++ b/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;
-  top: 10px;
-  right: 28px;
+  position: fixed;
+  bottom: 3px;
+  right: 12px;
  z-index: ${zIndex.zIndex299};
 `;

--- a/packages/netlify-cms-core/src/components/Editor/EditorPreviewPane/EditorPreviewContent.tsx
+++ b/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]);
 };
--- a/packages/netlify-cms-core/src/components/Editor/EditorToolbar.js
+++ b/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';
--- a/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryButtons.js
+++ b/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';
--- a/packages/netlify-cms-core/src/components/UI/Modal.js
+++ b/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';

--- a/packages/netlify-cms-core/src/components/UI/SettingsDropdown.js
+++ b/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';
--- a/packages/netlify-cms-core/src/components/UI/Toast.js
+++ b/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';
--- a/packages/netlify-cms-core/src/components/Workflow/WorkflowCard.js
+++ b/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';
--- a/packages/netlify-cms-core/src/components/Workflow/WorkflowList.js
+++ b/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';
--- a/packages/netlify-cms-core/src/constants/configSchema.js
+++ b/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'],
--- a/packages/netlify-cms-core/src/reducers/entryDraft.js
+++ b/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))) ||
-            !entries.some(e => newMeta.equals(e.get('meta'))),
+          !newData.equals(entries[0].get(...dataPath)) ||
+            !newMeta.equals(entries[0].get('meta')),
        );
      });
    }
--- a/packages/netlify-cms-default-exports/package.json
+++ b/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",
--- a/packages/netlify-cms-default-exports/src/index.js
+++ b/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';
--- a/packages/netlify-cms-lib-util/src/transientOptions.ts
+++ b/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;
--- a/packages/netlify-cms-ui-default/package.json
+++ b/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",
--- a/packages/netlify-cms-ui-default/src/Dropdown.js
+++ b/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';

--- a/packages/netlify-cms-ui-default/src/ListItemTopBar.js
+++ b/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(
+  'div',
+  transientOptions,
+)(
+  ({ $isVariableTypesList, $collapsed }) => `
    display: flex;
    justify-content: space-between;
-  height: 26px;
-  border-radius: ${lengths.borderRadius} ${lengths.borderRadius} 0 0;
+    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;
--- a/packages/netlify-cms-ui-default/src/Loader.js
+++ b/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';
--- a/packages/netlify-cms-ui-default/src/ObjectWidgetTopBar.js
+++ b/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;
--- a/packages/netlify-cms-ui-default/src/Toggle.js
+++ b/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';
--- a/packages/netlify-cms-ui-default/src/styles.js
+++ b/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 = {
--- a/packages/netlify-cms-widget-boolean/package.json
+++ b/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",
--- a/packages/netlify-cms-widget-boolean/src/BooleanControl.js
+++ b/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 }) {
--- a/packages/netlify-cms-widget-code/package.json
+++ b/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",
--- a/packages/netlify-cms-widget-code/src/CodeControl.js
+++ b/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';
--- a/packages/netlify-cms-widget-colorstring/package.json
+++ b/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",
--- a/packages/netlify-cms-widget-date/package.json
+++ b/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",
--- a/packages/netlify-cms-widget-date/src/DateControl.js
+++ b/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';
--- a/packages/netlify-cms-widget-datetime/package.json
+++ b/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"
  },
--- a/packages/netlify-cms-widget-datetime/src/DateTimeControl.js
+++ b/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';
--- a/packages/netlify-cms-widget-file/package.json
+++ b/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",
--- a/packages/netlify-cms-widget-file/src/withFileControl.js
+++ b/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';
--- a/packages/netlify-cms-widget-image/package.json
+++ b/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",
--- a/packages/netlify-cms-widget-list/package.json
+++ b/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",
--- a/packages/netlify-cms-widget-list/src/ListControl.js
+++ b/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 {
-      margin-top: 26px;
+    &:last-of-type {
+      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
--- a/packages/netlify-cms-widget-map/package.json
+++ b/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",
--- a/packages/netlify-cms-widget-map/src/withMapControl.js
+++ b/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';
--- a/packages/netlify-cms-widget-markdown/package.json
+++ b/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",
--- a/packages/netlify-cms-widget-markdown/src/MarkdownControl/RawEditor.js
+++ b/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';
--- a/packages/netlify-cms-widget-markdown/src/MarkdownControl/Toolbar.js
+++ b/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,
--- a/packages/netlify-cms-widget-markdown/src/MarkdownControl/VisualEditor.js
+++ b/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';
--- a/packages/netlify-cms-widget-markdown/src/MarkdownControl/components/Shortcode.js
+++ b/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';

--- a/packages/netlify-cms-widget-markdown/src/MarkdownControl/components/VoidBlock.js
+++ b/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) {
--- a/packages/netlify-cms-widget-markdown/src/MarkdownControl/renderers.js
+++ b/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';

--- a/packages/netlify-cms-widget-object/package.json
+++ b/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",
--- a/packages/netlify-cms-widget-object/src/ObjectControl.js
+++ b/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>
--- a/packages/netlify-cms-widget-relation/package.json
+++ b/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",
--- a/scripts/externals.js
+++ b/scripts/externals.js
@ -42,12 +42,12 @@ module.exports = {
      amd: 'lodash',
      umd: 'lodash',
    },
-    '@emotion/core': {
+    '@emotion/react': {
      root: ['NetlifyCmsDefaultExports', 'EmotionCore'],
-      commonjs2: '@emotion/core',
-      commonjs: '@emotion/core',
-      amd: '@emotion/core',
-      umd: '@emotion/core',
+      commonjs2: '@emotion/react',
+      commonjs: '@emotion/react',
+      amd: '@emotion/react',
+      umd: '@emotion/react',
    },
    '@emotion/styled': {
      root: ['NetlifyCmsDefaultExports', 'EmotionStyled'],
--- a/website/package.json
+++ b/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",
--- a/website/src/cms/cms.js
+++ b/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';
--- a/website/src/components/blog-post-template.js
+++ b/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';
--- a/website/src/components/button.js
+++ b/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';
--- a/website/src/components/community.js
+++ b/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';
--- a/website/src/components/container.js
+++ b/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';
--- a/website/src/components/edit-link.js
+++ b/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 (
--- a/website/src/components/header.js
+++ b/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';
--- a/website/src/components/notification.js
+++ b/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';

--- a/website/src/components/page-hero.js
+++ b/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';
--- a/website/src/components/release.js
+++ b/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';
--- a/website/src/components/sidebar-layout.js
+++ b/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';
--- a/website/src/components/whats-new.js
+++ b/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';
--- a/website/src/pages/blog.js
+++ b/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';
--- a/website/src/pages/index.js
+++ b/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';