diff --git a/.eslintrc.js b/.eslintrc.js index b3ab23c9..5aaf1615 100644 --- 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', { diff --git a/dev-test/backends/test/config.yml b/dev-test/backends/test/config.yml index 91999b72..028e63fe 100644 --- 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' diff --git a/dev-test/config.yml b/dev-test/config.yml index 57613297..bc335659 100644 --- 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' diff --git a/packages/netlify-cms-app/package.json b/packages/netlify-cms-app/package.json index 39b92143..d4d169fd 100644 --- 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", diff --git a/packages/netlify-cms-backend-azure/package.json b/packages/netlify-cms-backend-azure/package.json index efb20de5..76b1e20d 100644 --- 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", diff --git a/packages/netlify-cms-backend-bitbucket/package.json b/packages/netlify-cms-backend-bitbucket/package.json index f3a2941f..cbbcc31c 100644 --- 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", diff --git a/packages/netlify-cms-backend-git-gateway/package.json b/packages/netlify-cms-backend-git-gateway/package.json index 2f038d6c..3433b077 100644 --- 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", diff --git a/packages/netlify-cms-backend-github/package.json b/packages/netlify-cms-backend-github/package.json index 941be3d6..4ec89d77 100644 --- 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", diff --git a/packages/netlify-cms-backend-gitlab/package.json b/packages/netlify-cms-backend-gitlab/package.json index de22fa0f..4ba7d349 100644 --- 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", diff --git a/packages/netlify-cms-backend-proxy/package.json b/packages/netlify-cms-backend-proxy/package.json index ca2500df..fd7f59e0 100644 --- 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", diff --git a/packages/netlify-cms-backend-test/package.json b/packages/netlify-cms-backend-test/package.json index c2bf781b..8cef2e31 100644 --- 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", diff --git a/packages/netlify-cms-core/index.d.ts b/packages/netlify-cms-core/index.d.ts index b205f1c7..428f575a 100644 --- 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 { diff --git a/packages/netlify-cms-core/package.json b/packages/netlify-cms-core/package.json index 899be518..f6d2e24b 100644 --- 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", diff --git a/packages/netlify-cms-core/src/components/App/App.js b/packages/netlify-cms-core/src/components/App/App.js index b3b4f3b5..fd01bc11 100644 --- 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` diff --git a/packages/netlify-cms-core/src/components/App/Header.js b/packages/netlify-cms-core/src/components/App/Header.js index 894238a4..3ee8c74b 100644 --- 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 { diff --git a/packages/netlify-cms-core/src/components/Collection/ControlButton.js b/packages/netlify-cms-core/src/components/Collection/ControlButton.js index 848e3bfc..679e7be5 100644 --- 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'; diff --git a/packages/netlify-cms-core/src/components/Collection/NestedCollection.js b/packages/netlify-cms-core/src/components/Collection/NestedCollection.js index dbc81298..d80bed70 100644 --- 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'; diff --git a/packages/netlify-cms-core/src/components/Collection/Sidebar.js b/packages/netlify-cms-core/src/components/Collection/Sidebar.js index a5ad4318..c817cc45 100644 --- 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'; diff --git a/packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControl.js b/packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControl.js index 11e6fbd6..7e287239 100644 --- 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` diff --git a/packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControlPane.js b/packages/netlify-cms-core/src/components/Editor/EditorControlPane/EditorControlPane.js index 20e9520f..0ffc41fe 100644 --- 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, diff --git a/packages/netlify-cms-core/src/components/Editor/EditorInterface.js b/packages/netlify-cms-core/src/components/Editor/EditorInterface.js index e28d0fd8..8c4c5720 100644 --- 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}; `; diff --git a/packages/netlify-cms-core/src/components/Editor/EditorPreviewPane/EditorPreviewContent.tsx b/packages/netlify-cms-core/src/components/Editor/EditorPreviewPane/EditorPreviewContent.tsx index 90583f21..ce7baeca 100644 --- 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) {children} , element, + 'preview-content' ); }, [previewComponent, previewProps, element]); }; diff --git a/packages/netlify-cms-core/src/components/Editor/EditorToolbar.js b/packages/netlify-cms-core/src/components/Editor/EditorToolbar.js index 9b3f3fb9..a562c423 100644 --- 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'; diff --git a/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryButtons.js b/packages/netlify-cms-core/src/components/MediaLibrary/MediaLibraryButtons.js index 8e894625..25ab12d6 100644 --- 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'; diff --git a/packages/netlify-cms-core/src/components/UI/Modal.js b/packages/netlify-cms-core/src/components/UI/Modal.js index 6e0f2301..98ab6fc5 100644 --- 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'; diff --git a/packages/netlify-cms-core/src/components/UI/SettingsDropdown.js b/packages/netlify-cms-core/src/components/UI/SettingsDropdown.js index 0df8938a..c429af17 100644 --- 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'; diff --git a/packages/netlify-cms-core/src/components/UI/Toast.js b/packages/netlify-cms-core/src/components/UI/Toast.js index 74181049..f0b94530 100644 --- 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'; diff --git a/packages/netlify-cms-core/src/components/Workflow/WorkflowCard.js b/packages/netlify-cms-core/src/components/Workflow/WorkflowCard.js index 0ca914af..7d091ca2 100644 --- 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'; diff --git a/packages/netlify-cms-core/src/components/Workflow/WorkflowList.js b/packages/netlify-cms-core/src/components/Workflow/WorkflowList.js index 7e0a9a7b..2e7aed77 100644 --- 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'; diff --git a/packages/netlify-cms-core/src/constants/configSchema.js b/packages/netlify-cms-core/src/constants/configSchema.js index 31e3711f..c8780b85 100644 --- 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'], diff --git a/packages/netlify-cms-core/src/reducers/entryDraft.js b/packages/netlify-cms-core/src/reducers/entryDraft.js index c82b1ab9..dab7973b 100644 --- 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')), ); }); } diff --git a/packages/netlify-cms-default-exports/package.json b/packages/netlify-cms-default-exports/package.json index 432fa493..3cf3be9c 100644 --- 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", diff --git a/packages/netlify-cms-default-exports/src/index.js b/packages/netlify-cms-default-exports/src/index.js index d1e2cbdc..f4a8e48f 100644 --- 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'; diff --git a/packages/netlify-cms-lib-util/src/transientOptions.ts b/packages/netlify-cms-lib-util/src/transientOptions.ts new file mode 100644 index 00000000..dc67ff16 --- /dev/null +++ b/packages/netlify-cms-lib-util/src/transientOptions.ts @@ -0,0 +1,7 @@ +import type { CreateStyled } from '@emotion/styled'; + +const transientOptions: Parameters[1] = { + shouldForwardProp: (propName: string) => !propName.startsWith('$'), +}; + +export default transientOptions; diff --git a/packages/netlify-cms-ui-default/package.json b/packages/netlify-cms-ui-default/package.json index 4200d64e..eb65bc3f 100644 --- 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", diff --git a/packages/netlify-cms-ui-default/src/Dropdown.js b/packages/netlify-cms-ui-default/src/Dropdown.js index b33a01e9..08e84ac0 100644 --- 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'; diff --git a/packages/netlify-cms-ui-default/src/ListItemTopBar.js b/packages/netlify-cms-ui-default/src/ListItemTopBar.js index 209876b7..7e74e460 100644 --- 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` - display: flex; - justify-content: space-between; - height: 26px; - border-radius: ${lengths.borderRadius} ${lengths.borderRadius} 0 0; - position: relative; -`; +const TopBar = styled( + 'div', + transientOptions, +)( + ({ $isVariableTypesList, $collapsed }) => ` + 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 ; } -function ListItemTopBar({ className, collapsed, onCollapseToggle, onRemove, dragHandleHOC }) { +function ListItemTopBar({ + className, + title, + collapsed, + onCollapseToggle, + onRemove, + dragHandleHOC, + isVariableTypesList, +}) { return ( - + {onCollapseToggle ? ( ) : null} + {title ? {title} : null} {dragHandleHOC ? : null} {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; diff --git a/packages/netlify-cms-ui-default/src/Loader.js b/packages/netlify-cms-ui-default/src/Loader.js index 29e14907..ad2d9bf0 100644 --- 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'; diff --git a/packages/netlify-cms-ui-default/src/ObjectWidgetTopBar.js b/packages/netlify-cms-ui-default/src/ObjectWidgetTopBar.js index a69692bc..2c2d290b 100644 --- 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; diff --git a/packages/netlify-cms-ui-default/src/Toggle.js b/packages/netlify-cms-ui-default/src/Toggle.js index 1296c9e2..ac9314fc 100644 --- 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'; diff --git a/packages/netlify-cms-ui-default/src/styles.js b/packages/netlify-cms-ui-default/src/styles.js index 1a38728d..450c54bb 100644 --- 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 = { diff --git a/packages/netlify-cms-widget-boolean/package.json b/packages/netlify-cms-widget-boolean/package.json index d2b979d2..de7d3154 100644 --- 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", diff --git a/packages/netlify-cms-widget-boolean/src/BooleanControl.js b/packages/netlify-cms-widget-boolean/src/BooleanControl.js index ed6e2e6d..da40f279 100644 --- 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 }) { diff --git a/packages/netlify-cms-widget-code/package.json b/packages/netlify-cms-widget-code/package.json index a038d283..a0179289 100644 --- 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", diff --git a/packages/netlify-cms-widget-code/src/CodeControl.js b/packages/netlify-cms-widget-code/src/CodeControl.js index 20a690ff..056fb0cb 100644 --- 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'; diff --git a/packages/netlify-cms-widget-colorstring/package.json b/packages/netlify-cms-widget-colorstring/package.json index 663841c7..e178b1c7 100644 --- 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", diff --git a/packages/netlify-cms-widget-date/package.json b/packages/netlify-cms-widget-date/package.json index 1e33919b..3be93449 100644 --- 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", diff --git a/packages/netlify-cms-widget-date/src/DateControl.js b/packages/netlify-cms-widget-date/src/DateControl.js index 4ca31959..b8b51e07 100644 --- 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'; diff --git a/packages/netlify-cms-widget-datetime/package.json b/packages/netlify-cms-widget-datetime/package.json index 6b9837f9..825d4173 100644 --- 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" }, diff --git a/packages/netlify-cms-widget-datetime/src/DateTimeControl.js b/packages/netlify-cms-widget-datetime/src/DateTimeControl.js index babebf05..6bb57bfe 100644 --- 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'; diff --git a/packages/netlify-cms-widget-file/package.json b/packages/netlify-cms-widget-file/package.json index e5f956c7..e345c65a 100644 --- 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", diff --git a/packages/netlify-cms-widget-file/src/withFileControl.js b/packages/netlify-cms-widget-file/src/withFileControl.js index 215dcc28..00a9a3b1 100644 --- 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'; diff --git a/packages/netlify-cms-widget-image/package.json b/packages/netlify-cms-widget-image/package.json index 9f8249cd..5536a6dc 100644 --- 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", diff --git a/packages/netlify-cms-widget-list/package.json b/packages/netlify-cms-widget-list/package.json index 9547497e..2d1d2fa6 100644 --- 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", diff --git a/packages/netlify-cms-widget-list/src/ListControl.js b/packages/netlify-cms-widget-list/src/ListControl.js index e4c04595..f5b8574b 100644 --- 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} /> - + {/* {this.objectLabel(item)} - + */} {({ css, cx }) => ( )} -
{this.renderFields(multiFields, singleField)} -
+ )} diff --git a/packages/netlify-cms-widget-relation/package.json b/packages/netlify-cms-widget-relation/package.json index a835fd6d..12f17788 100644 --- 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", diff --git a/scripts/externals.js b/scripts/externals.js index 6066d336..53c6d471 100644 --- 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'], diff --git a/website/package.json b/website/package.json index 59c102c2..d458dc86 100644 --- 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", diff --git a/website/src/cms/cms.js b/website/src/cms/cms.js index 8ab45069..f87dfb51 100644 --- 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'; diff --git a/website/src/components/blog-post-template.js b/website/src/components/blog-post-template.js index cb9a936a..bb18ed54 100644 --- 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'; diff --git a/website/src/components/button.js b/website/src/components/button.js index 4bddc4da..1fda50e9 100644 --- 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'; diff --git a/website/src/components/community.js b/website/src/components/community.js index c6a0c1c4..ffe334e0 100644 --- 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'; diff --git a/website/src/components/container.js b/website/src/components/container.js index c0664f1e..bd9c5f9f 100644 --- 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'; diff --git a/website/src/components/edit-link.js b/website/src/components/edit-link.js index 742a3cb5..557a0e97 100644 --- 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 ( diff --git a/website/src/components/header.js b/website/src/components/header.js index ef9a5d6f..67d6777b 100644 --- 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'; diff --git a/website/src/components/notification.js b/website/src/components/notification.js index 48fe8971..c8ded34f 100644 --- 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'; diff --git a/website/src/components/page-hero.js b/website/src/components/page-hero.js index dd12e271..8c1af706 100644 --- 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'; diff --git a/website/src/components/release.js b/website/src/components/release.js index 39fd971f..d89d133b 100644 --- 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'; diff --git a/website/src/components/sidebar-layout.js b/website/src/components/sidebar-layout.js index 9f5aab6d..234c83d0 100644 --- 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'; diff --git a/website/src/components/whats-new.js b/website/src/components/whats-new.js index 29f0a9d2..bd9be70c 100644 --- 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'; diff --git a/website/src/pages/blog.js b/website/src/pages/blog.js index f5d58bb0..bab7450b 100644 --- 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'; diff --git a/website/src/pages/index.js b/website/src/pages/index.js index b0f670b8..fd0d2496 100644 --- 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';