@atlaskit/editor-plugin-extension 5.1.1 → 5.1.2

package/CHANGELOG.md

@@ -1,5 +1,17 @@
 # @atlaskit/editor-plugin-extension
 
+## 5.1.2
+
+### Patch Changes
+
+- [#131500](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/131500)
+  [`0afe8d0b15393`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/0afe8d0b15393) -
+  ENGHEALTH-23697 Iconography uplift for editor-plugin-extension
+- [#135110](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/pull-requests/135110)
+  [`be99401173db3`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/be99401173db3) -
+  [ux] Move copy and delete button out of toobar overflow menu for macro
+- Updated dependencies
+
 ## 5.1.1
 
 ### Patch Changes

package/dist/cjs/pm-plugins/toolbar.js

@@ -18,13 +18,8 @@ var _contentWidthNarrow = _interopRequireDefault(require("@atlaskit/icon/core/co
 var _contentWidthWide = _interopRequireDefault(require("@atlaskit/icon/core/content-width-wide"));
 var _copy = _interopRequireDefault(require("@atlaskit/icon/core/copy"));
 var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
-var _edit = _interopRequireDefault(require("@atlaskit/icon/core/edit"));
 var _expandHorizontal = _interopRequireDefault(require("@atlaskit/icon/core/expand-horizontal"));
-var _edit2 = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/edit"));
-var _mediaCenter = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/media-center"));
-var _mediaFullWidth = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/media-full-width"));
-var _mediaWide = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/media-wide"));
-var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
+var _editEditorEdit = _interopRequireDefault(require("@atlaskit/icon/core/migration/edit--editor-edit"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _experiments = require("@atlaskit/tmp-editor-statsig/experiments");
 var _actions = require("../editor-actions/actions");
@@ -78,24 +73,39 @@ var breakoutButtonListOptions = function breakoutButtonListOptions(state, format
     var layout = nodeWithPos.node.attrs.layout;
     return [{
       type: 'button',
-      icon: _contentWidthNarrow.default,
-      iconFallback: _mediaCenter.default,
+      icon: function icon() {
+        return /*#__PURE__*/_react.default.createElement(_contentWidthNarrow.default, {
+          label: formatMessage(_messages.default.layoutFixedWidth),
+          spacing: "spacious"
+        });
+      },
+      iconFallback: _contentWidthNarrow.default,
       onClick: (0, _commands.updateExtensionLayout)('default', editorAnalyticsAPI),
       selected: layout === 'default',
       title: formatMessage(_messages.default.layoutFixedWidth),
       tabIndex: null
     }, {
       type: 'button',
-      icon: _contentWidthWide.default,
-      iconFallback: _mediaWide.default,
+      icon: function icon() {
+        return /*#__PURE__*/_react.default.createElement(_contentWidthWide.default, {
+          label: formatMessage(_messages.default.layoutWide),
+          spacing: "spacious"
+        });
+      },
+      iconFallback: _contentWidthWide.default,
       onClick: (0, _commands.updateExtensionLayout)('wide', editorAnalyticsAPI),
       selected: layout === 'wide',
       title: formatMessage(_messages.default.layoutWide),
       tabIndex: null
     }, {
       type: 'button',
-      icon: _expandHorizontal.default,
-      iconFallback: _mediaFullWidth.default,
+      icon: function icon() {
+        return /*#__PURE__*/_react.default.createElement(_expandHorizontal.default, {
+          label: formatMessage(_messages.default.layoutFullWidth),
+          spacing: "spacious"
+        });
+      },
+      iconFallback: _expandHorizontal.default,
       onClick: (0, _commands.updateExtensionLayout)('full-width', editorAnalyticsAPI),
       selected: layout === 'full-width',
       title: formatMessage(_messages.default.layoutFullWidth),
@@ -185,8 +195,8 @@ var editButton = function editButton(formatMessage, extensionState, applyChangeT
   var editButtonItems = [{
     id: 'editor.extension.edit',
     type: 'button',
-    icon: _edit.default,
-    iconFallback: _edit2.default,
+    icon: _editEditorEdit.default,
+    iconFallback: _editEditorEdit.default,
     testId: 'extension-toolbar-edit-button',
     // Taking the latest `updateExtension` from plugin state to avoid race condition @see ED-8501
     onClick: function onClick(state, dispatch, view) {
@@ -319,7 +329,7 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(_ref
       onPositionCalculated: function onPositionCalculated(editorView, nextPos) {
         return calculateToolbarPosition(editorView, nextPos, state, extensionObj);
       },
-      items: [].concat((0, _toConsumableArray2.default)(editButtonItems), (0, _toConsumableArray2.default)(breakoutItems), (0, _toConsumableArray2.default)((0, _experiments.editorExperiment)('platform_editor_controls', 'control') ? [{
+      items: [].concat((0, _toConsumableArray2.default)(editButtonItems), (0, _toConsumableArray2.default)(breakoutItems), (0, _toConsumableArray2.default)((0, _experiments.editorExperiment)('platform_editor_controls', 'control') || (0, _platformFeatureFlags.fg)('platform_editor_controls_patch_2') ? [{
         type: 'separator',
         hidden: editButtonItems.length === 0 && breakoutItems.length === 0
       }, {
@@ -337,8 +347,13 @@ var getToolbarConfig = exports.getToolbarConfig = function getToolbarConfig(_ref
       }, {
         id: 'editor.extension.delete',
         type: 'button',
-        icon: _delete.default,
-        iconFallback: _remove.default,
+        icon: function icon() {
+          return /*#__PURE__*/_react.default.createElement(_delete.default, {
+            label: formatMessage(_messages.default.remove),
+            spacing: "spacious"
+          });
+        },
+        iconFallback: _delete.default,
         appearance: 'danger',
         onClick: (0, _commands.removeExtension)(editorAnalyticsAPI),
         onMouseEnter: (_hoverDecoration5 = hoverDecoration) === null || _hoverDecoration5 === void 0 ? void 0 : _hoverDecoration5(nodeType, true),

package/dist/cjs/ui/ConfigPanel/Fields/Expand.js

@@ -12,8 +12,8 @@ var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _new = require("@atlaskit/button/new");
 var _extensions = require("@atlaskit/editor-common/extensions");
-var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
-var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right"));
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/chevron-down"));
+var _chevronRight = _interopRequireDefault(require("@atlaskit/icon/utility/chevron-right"));
 var _colors = require("@atlaskit/theme/colors");
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
 function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { default: e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n.default = e, t && t.set(e, n), n; }

package/dist/cjs/ui/ConfigPanel/Fields/Fieldset.js

@@ -21,7 +21,7 @@ var _reactIntlNext = require("react-intl-next");
 var _new = _interopRequireDefault(require("@atlaskit/button/new"));
 var _extensions = require("@atlaskit/editor-common/extensions");
 var _heading = _interopRequireDefault(require("@atlaskit/heading"));
-var _addCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/add-circle"));
+var _addAddCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/add--add-circle"));
 var _primitives = require("@atlaskit/primitives");
 var _sectionMessage = _interopRequireDefault(require("@atlaskit/section-message"));
 var _select = _interopRequireDefault(require("@atlaskit/select"));
@@ -204,11 +204,12 @@ var FieldsetField = /*#__PURE__*/function (_React$Component) {
         testId: "add-more",
         appearance: "subtle",
         iconBefore: function iconBefore(iconProps) {
-          return (0, _react2.jsx)(_addCircle.default
+          return (0, _react2.jsx)(_addAddCircle.default
           // Ignored via go/ees005
           // eslint-disable-next-line react/jsx-props-no-spreading
           , (0, _extends2.default)({}, iconProps, {
-            size: "small",
+            LEGACY_size: "small",
+            spacing: "none",
             label: intl.formatMessage(_extensions.configPanelMessages.addField)
           }));
         },

package/dist/cjs/ui/ConfigPanel/NestedForms/RemovableField.js

@@ -9,7 +9,7 @@ var _react = _interopRequireDefault(require("react"));
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _extensions = require("@atlaskit/editor-common/extensions");
-var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-circle"));
+var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/cross-circle"));
 var _colors = require("@atlaskit/theme/colors");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 /**
@@ -63,7 +63,8 @@ var RemovableField = function RemovableField(_ref) {
     content: intl.formatMessage(_extensions.configPanelMessages.removeField),
     position: "left"
   }, (0, _react2.jsx)(_crossCircle.default, {
-    size: "small",
+    LEGACY_size: "small",
+    spacing: "none",
     label: intl.formatMessage(_extensions.configPanelMessages.removeField)
   }))));
 };

package/dist/cjs/ui/SaveIndicator/SaveIndicator.js

@@ -10,7 +10,7 @@ var _react = require("react");
 var _react2 = require("@emotion/react");
 var _reactIntlNext = require("react-intl-next");
 var _extensions = require("@atlaskit/editor-common/extensions");
-var _checkCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/check-circle"));
+var _successCheckCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/success--check-circle"));
 var _primitives = require("@atlaskit/primitives");
 var _colors = require("@atlaskit/theme/colors");
 /**
@@ -75,10 +75,11 @@ var SaveIndicator = exports.SaveIndicator = function SaveIndicator(_ref) {
   }, (0, _react2.jsx)("div", {
     css: saveIndicatorContentStyles,
     "data-testid": "save-indicator-content"
-  }, (0, _react2.jsx)(_checkCircle.default, {
+  }, (0, _react2.jsx)(_successCheckCircle.default, {
     label: "Saving",
-    primaryColor: "var(--ds-icon-success, ".concat(_colors.G300, ")"),
-    size: "small"
+    color: "var(--ds-icon-success, ".concat(_colors.G300, ")"),
+    LEGACY_size: "small",
+    spacing: "none"
   }), (0, _react2.jsx)(_primitives.Box, {
     xcss: saveIndicatorTextStyles
   }, (0, _react2.jsx)(_primitives.Text, null, (0, _react2.jsx)(_reactIntlNext.FormattedMessage

package/dist/es2019/pm-plugins/toolbar.js

@@ -9,13 +9,8 @@ import ContentWidthNarrowIcon from '@atlaskit/icon/core/content-width-narrow';
 import ContentWidthWideIcon from '@atlaskit/icon/core/content-width-wide';
 import CopyIcon from '@atlaskit/icon/core/copy';
 import DeleteIcon from '@atlaskit/icon/core/delete';
-import EditIcon from '@atlaskit/icon/core/edit';
 import ExpandHorizontalIcon from '@atlaskit/icon/core/expand-horizontal';
-import LegacyEditIcon from '@atlaskit/icon/glyph/editor/edit';
-import CenterIcon from '@atlaskit/icon/glyph/editor/media-center';
-import FullWidthIcon from '@atlaskit/icon/glyph/editor/media-full-width';
-import WideIcon from '@atlaskit/icon/glyph/editor/media-wide';
-import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
+import EditIcon from '@atlaskit/icon/core/migration/edit--editor-edit';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { editExtension } from '../editor-actions/actions';
@@ -80,24 +75,33 @@ const breakoutButtonListOptions = (state, formatMessage, extensionState, breakou
     } = nodeWithPos.node.attrs;
     return [{
       type: 'button',
-      icon: ContentWidthNarrowIcon,
-      iconFallback: CenterIcon,
+      icon: () => /*#__PURE__*/React.createElement(ContentWidthNarrowIcon, {
+        label: formatMessage(commonMessages.layoutFixedWidth),
+        spacing: "spacious"
+      }),
+      iconFallback: ContentWidthNarrowIcon,
       onClick: updateExtensionLayout('default', editorAnalyticsAPI),
       selected: layout === 'default',
       title: formatMessage(commonMessages.layoutFixedWidth),
       tabIndex: null
     }, {
       type: 'button',
-      icon: ContentWidthWideIcon,
-      iconFallback: WideIcon,
+      icon: () => /*#__PURE__*/React.createElement(ContentWidthWideIcon, {
+        label: formatMessage(commonMessages.layoutWide),
+        spacing: "spacious"
+      }),
+      iconFallback: ContentWidthWideIcon,
       onClick: updateExtensionLayout('wide', editorAnalyticsAPI),
       selected: layout === 'wide',
       title: formatMessage(commonMessages.layoutWide),
       tabIndex: null
     }, {
       type: 'button',
-      icon: ExpandHorizontalIcon,
-      iconFallback: FullWidthIcon,
+      icon: () => /*#__PURE__*/React.createElement(ExpandHorizontalIcon, {
+        label: formatMessage(commonMessages.layoutFullWidth),
+        spacing: "spacious"
+      }),
+      iconFallback: ExpandHorizontalIcon,
       onClick: updateExtensionLayout('full-width', editorAnalyticsAPI),
       selected: layout === 'full-width',
       title: formatMessage(commonMessages.layoutFullWidth),
@@ -188,7 +192,7 @@ const editButton = (formatMessage, extensionState, applyChangeToContextPanel, ed
     id: 'editor.extension.edit',
     type: 'button',
     icon: EditIcon,
-    iconFallback: LegacyEditIcon,
+    iconFallback: EditIcon,
     testId: 'extension-toolbar-edit-button',
     // Taking the latest `updateExtension` from plugin state to avoid race condition @see ED-8501
     onClick: (state, dispatch, view) => {
@@ -317,7 +321,7 @@ export const getToolbarConfig = ({
     getDomRef: () => extensionState.element.parentElement || undefined,
     nodeType,
     onPositionCalculated: (editorView, nextPos) => calculateToolbarPosition(editorView, nextPos, state, extensionObj),
-    items: [...editButtonItems, ...breakoutItems, ...(editorExperiment('platform_editor_controls', 'control') ? [{
+    items: [...editButtonItems, ...breakoutItems, ...(editorExperiment('platform_editor_controls', 'control') || fg('platform_editor_controls_patch_2') ? [{
       type: 'separator',
       hidden: editButtonItems.length === 0 && breakoutItems.length === 0
     }, {
@@ -335,8 +339,11 @@ export const getToolbarConfig = ({
     }, {
       id: 'editor.extension.delete',
       type: 'button',
-      icon: DeleteIcon,
-      iconFallback: RemoveIcon,
+      icon: () => /*#__PURE__*/React.createElement(DeleteIcon, {
+        label: formatMessage(commonMessages.remove),
+        spacing: "spacious"
+      }),
+      iconFallback: DeleteIcon,
       appearance: 'danger',
       onClick: removeExtension(editorAnalyticsAPI),
       onMouseEnter: (_hoverDecoration5 = hoverDecoration) === null || _hoverDecoration5 === void 0 ? void 0 : _hoverDecoration5(nodeType, true),

package/dist/es2019/ui/ConfigPanel/Fields/Expand.js

@@ -9,8 +9,8 @@ import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { IconButton } from '@atlaskit/button/new';
 import { configPanelMessages as messages } from '@atlaskit/editor-common/extensions';
-import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
-import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
+import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
+import ChevronRightIcon from '@atlaskit/icon/utility/chevron-right';
 import { N40 } from '@atlaskit/theme/colors';
 const expandContainerStyles = css({
   borderBottom: `1px solid ${`var(--ds-border, ${N40})`}`

package/dist/es2019/ui/ConfigPanel/Fields/Fieldset.js

@@ -12,7 +12,7 @@ import { injectIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/new';
 import { configPanelMessages as messages } from '@atlaskit/editor-common/extensions';
 import Heading from '@atlaskit/heading';
-import AddCircleIcon from '@atlaskit/icon/glyph/add-circle';
+import AddCircleIcon from '@atlaskit/icon/core/migration/add--add-circle';
 import { Box, Text, xcss } from '@atlaskit/primitives';
 import SectionMessage from '@atlaskit/section-message';
 import Select from '@atlaskit/select';
@@ -171,7 +171,8 @@ class FieldsetField extends React.Component {
         // Ignored via go/ees005
         // eslint-disable-next-line react/jsx-props-no-spreading
         , _extends({}, iconProps, {
-          size: "small",
+          LEGACY_size: "small",
+          spacing: "none",
           label: intl.formatMessage(messages.addField)
         })),
         onClick: () => this.setIsAdding(true)

package/dist/es2019/ui/ConfigPanel/NestedForms/RemovableField.js

@@ -8,7 +8,7 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { configPanelMessages as messages } from '@atlaskit/editor-common/extensions';
-import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
+import CrossCircleIcon from '@atlaskit/icon/core/migration/cross-circle';
 import { N80, R300 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 const removableFieldWrapperStyles = css({
@@ -54,7 +54,8 @@ const RemovableField = ({
     content: intl.formatMessage(messages.removeField),
     position: "left"
   }, jsx(CrossCircleIcon, {
-    size: "small",
+    LEGACY_size: "small",
+    spacing: "none",
     label: intl.formatMessage(messages.removeField)
   }))));
 };

package/dist/es2019/ui/SaveIndicator/SaveIndicator.js

@@ -8,7 +8,7 @@ import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '@atlaskit/editor-common/extensions';
-import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
+import CheckCircleIcon from '@atlaskit/icon/core/migration/success--check-circle';
 import { Box, Text, xcss } from '@atlaskit/primitives';
 import { G300, N0 } from '@atlaskit/theme/colors';
 const noop = () => {};
@@ -63,8 +63,9 @@ export const SaveIndicator = ({
     "data-testid": "save-indicator-content"
   }, jsx(CheckCircleIcon, {
     label: "Saving",
-    primaryColor: `var(--ds-icon-success, ${G300})`,
-    size: "small"
+    color: `var(--ds-icon-success, ${G300})`,
+    LEGACY_size: "small",
+    spacing: "none"
   }), jsx(Box, {
     xcss: saveIndicatorTextStyles
   }, jsx(Text, null, jsx(FormattedMessage

package/dist/esm/pm-plugins/toolbar.js

@@ -13,13 +13,8 @@ import ContentWidthNarrowIcon from '@atlaskit/icon/core/content-width-narrow';
 import ContentWidthWideIcon from '@atlaskit/icon/core/content-width-wide';
 import CopyIcon from '@atlaskit/icon/core/copy';
 import DeleteIcon from '@atlaskit/icon/core/delete';
-import EditIcon from '@atlaskit/icon/core/edit';
 import ExpandHorizontalIcon from '@atlaskit/icon/core/expand-horizontal';
-import LegacyEditIcon from '@atlaskit/icon/glyph/editor/edit';
-import CenterIcon from '@atlaskit/icon/glyph/editor/media-center';
-import FullWidthIcon from '@atlaskit/icon/glyph/editor/media-full-width';
-import WideIcon from '@atlaskit/icon/glyph/editor/media-wide';
-import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
+import EditIcon from '@atlaskit/icon/core/migration/edit--editor-edit';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { editorExperiment } from '@atlaskit/tmp-editor-statsig/experiments';
 import { editExtension } from '../editor-actions/actions';
@@ -72,24 +67,39 @@ var breakoutButtonListOptions = function breakoutButtonListOptions(state, format
     var layout = nodeWithPos.node.attrs.layout;
     return [{
       type: 'button',
-      icon: ContentWidthNarrowIcon,
-      iconFallback: CenterIcon,
+      icon: function icon() {
+        return /*#__PURE__*/React.createElement(ContentWidthNarrowIcon, {
+          label: formatMessage(commonMessages.layoutFixedWidth),
+          spacing: "spacious"
+        });
+      },
+      iconFallback: ContentWidthNarrowIcon,
       onClick: updateExtensionLayout('default', editorAnalyticsAPI),
       selected: layout === 'default',
       title: formatMessage(commonMessages.layoutFixedWidth),
       tabIndex: null
     }, {
       type: 'button',
-      icon: ContentWidthWideIcon,
-      iconFallback: WideIcon,
+      icon: function icon() {
+        return /*#__PURE__*/React.createElement(ContentWidthWideIcon, {
+          label: formatMessage(commonMessages.layoutWide),
+          spacing: "spacious"
+        });
+      },
+      iconFallback: ContentWidthWideIcon,
       onClick: updateExtensionLayout('wide', editorAnalyticsAPI),
       selected: layout === 'wide',
       title: formatMessage(commonMessages.layoutWide),
       tabIndex: null
     }, {
       type: 'button',
-      icon: ExpandHorizontalIcon,
-      iconFallback: FullWidthIcon,
+      icon: function icon() {
+        return /*#__PURE__*/React.createElement(ExpandHorizontalIcon, {
+          label: formatMessage(commonMessages.layoutFullWidth),
+          spacing: "spacious"
+        });
+      },
+      iconFallback: ExpandHorizontalIcon,
       onClick: updateExtensionLayout('full-width', editorAnalyticsAPI),
       selected: layout === 'full-width',
       title: formatMessage(commonMessages.layoutFullWidth),
@@ -180,7 +190,7 @@ var editButton = function editButton(formatMessage, extensionState, applyChangeT
     id: 'editor.extension.edit',
     type: 'button',
     icon: EditIcon,
-    iconFallback: LegacyEditIcon,
+    iconFallback: EditIcon,
     testId: 'extension-toolbar-edit-button',
     // Taking the latest `updateExtension` from plugin state to avoid race condition @see ED-8501
     onClick: function onClick(state, dispatch, view) {
@@ -313,7 +323,7 @@ export var getToolbarConfig = function getToolbarConfig(_ref) {
       onPositionCalculated: function onPositionCalculated(editorView, nextPos) {
         return calculateToolbarPosition(editorView, nextPos, state, extensionObj);
       },
-      items: [].concat(_toConsumableArray(editButtonItems), _toConsumableArray(breakoutItems), _toConsumableArray(editorExperiment('platform_editor_controls', 'control') ? [{
+      items: [].concat(_toConsumableArray(editButtonItems), _toConsumableArray(breakoutItems), _toConsumableArray(editorExperiment('platform_editor_controls', 'control') || fg('platform_editor_controls_patch_2') ? [{
         type: 'separator',
         hidden: editButtonItems.length === 0 && breakoutItems.length === 0
       }, {
@@ -331,8 +341,13 @@ export var getToolbarConfig = function getToolbarConfig(_ref) {
       }, {
         id: 'editor.extension.delete',
         type: 'button',
-        icon: DeleteIcon,
-        iconFallback: RemoveIcon,
+        icon: function icon() {
+          return /*#__PURE__*/React.createElement(DeleteIcon, {
+            label: formatMessage(commonMessages.remove),
+            spacing: "spacious"
+          });
+        },
+        iconFallback: DeleteIcon,
         appearance: 'danger',
         onClick: removeExtension(editorAnalyticsAPI),
         onMouseEnter: (_hoverDecoration5 = hoverDecoration) === null || _hoverDecoration5 === void 0 ? void 0 : _hoverDecoration5(nodeType, true),

package/dist/esm/ui/ConfigPanel/Fields/Expand.js

@@ -10,8 +10,8 @@ import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { IconButton } from '@atlaskit/button/new';
 import { configPanelMessages as messages } from '@atlaskit/editor-common/extensions';
-import ChevronDownIcon from '@atlaskit/icon/glyph/chevron-down';
-import ChevronRightIcon from '@atlaskit/icon/glyph/chevron-right';
+import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
+import ChevronRightIcon from '@atlaskit/icon/utility/chevron-right';
 import { N40 } from '@atlaskit/theme/colors';
 var expandContainerStyles = css({
   borderBottom: "1px solid ".concat("var(--ds-border, ".concat(N40, ")"))

package/dist/esm/ui/ConfigPanel/Fields/Fieldset.js

@@ -23,7 +23,7 @@ import { injectIntl } from 'react-intl-next';
 import Button from '@atlaskit/button/new';
 import { configPanelMessages as messages } from '@atlaskit/editor-common/extensions';
 import Heading from '@atlaskit/heading';
-import AddCircleIcon from '@atlaskit/icon/glyph/add-circle';
+import AddCircleIcon from '@atlaskit/icon/core/migration/add--add-circle';
 import { Box, Text, xcss } from '@atlaskit/primitives';
 import SectionMessage from '@atlaskit/section-message';
 import Select from '@atlaskit/select';
@@ -201,7 +201,8 @@ var FieldsetField = /*#__PURE__*/function (_React$Component) {
           // Ignored via go/ees005
           // eslint-disable-next-line react/jsx-props-no-spreading
           , _extends({}, iconProps, {
-            size: "small",
+            LEGACY_size: "small",
+            spacing: "none",
             label: intl.formatMessage(messages.addField)
           }));
         },

package/dist/esm/ui/ConfigPanel/NestedForms/RemovableField.js

@@ -8,7 +8,7 @@ import React from 'react';
 import { css, jsx } from '@emotion/react';
 import { injectIntl } from 'react-intl-next';
 import { configPanelMessages as messages } from '@atlaskit/editor-common/extensions';
-import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
+import CrossCircleIcon from '@atlaskit/icon/core/migration/cross-circle';
 import { N80, R300 } from '@atlaskit/theme/colors';
 import Tooltip from '@atlaskit/tooltip';
 var removableFieldWrapperStyles = css({
@@ -55,7 +55,8 @@ var RemovableField = function RemovableField(_ref) {
     content: intl.formatMessage(messages.removeField),
     position: "left"
   }, jsx(CrossCircleIcon, {
-    size: "small",
+    LEGACY_size: "small",
+    spacing: "none",
     label: intl.formatMessage(messages.removeField)
   }))));
 };

package/dist/esm/ui/SaveIndicator/SaveIndicator.js

@@ -9,7 +9,7 @@ import { Fragment, useCallback, useEffect, useRef, useState } from 'react';
 import { css, jsx } from '@emotion/react';
 import { FormattedMessage } from 'react-intl-next';
 import { messages } from '@atlaskit/editor-common/extensions';
-import CheckCircleIcon from '@atlaskit/icon/glyph/check-circle';
+import CheckCircleIcon from '@atlaskit/icon/core/migration/success--check-circle';
 import { Box, Text, xcss } from '@atlaskit/primitives';
 import { G300, N0 } from '@atlaskit/theme/colors';
 var noop = function noop() {};
@@ -69,8 +69,9 @@ export var SaveIndicator = function SaveIndicator(_ref) {
     "data-testid": "save-indicator-content"
   }, jsx(CheckCircleIcon, {
     label: "Saving",
-    primaryColor: "var(--ds-icon-success, ".concat(G300, ")"),
-    size: "small"
+    color: "var(--ds-icon-success, ".concat(G300, ")"),
+    LEGACY_size: "small",
+    spacing: "none"
   }), jsx(Box, {
     xcss: saveIndicatorTextStyles
   }, jsx(Text, null, jsx(FormattedMessage

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-extension",
-	"version": "5.1.1",
+	"version": "5.1.2",
 	"description": "editor-plugin-extension plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -29,10 +29,10 @@
 		"@atlaskit/adf-utils": "^19.19.0",
 		"@atlaskit/analytics-next": "^11.0.0",
 		"@atlaskit/avatar": "^25.0.0",
-		"@atlaskit/button": "^22.0.0",
+		"@atlaskit/button": "^23.0.0",
 		"@atlaskit/checkbox": "^17.0.0",
 		"@atlaskit/datetime-picker": "^16.2.0",
-		"@atlaskit/editor-common": "^102.15.0",
+		"@atlaskit/editor-common": "^102.16.0",
 		"@atlaskit/editor-json-transformer": "^8.24.0",
 		"@atlaskit/editor-plugin-analytics": "^2.2.0",
 		"@atlaskit/editor-plugin-context-identifier": "^2.0.0",
@@ -46,7 +46,7 @@
 		"@atlaskit/empty-state": "^9.0.0",
 		"@atlaskit/form": "^12.0.0",
 		"@atlaskit/heading": "^5.1.0",
-		"@atlaskit/icon": "^25.3.0",
+		"@atlaskit/icon": "^25.4.0",
 		"@atlaskit/platform-feature-flags": "^1.1.0",
 		"@atlaskit/primitives": "^14.2.0",
 		"@atlaskit/radio": "^8.0.0",
@@ -123,6 +123,9 @@
 		},
 		"platform_editor_controls_patch_1": {
 			"type": "boolean"
+		},
+		"platform_editor_controls_patch_2": {
+			"type": "boolean"
 		}
 	},
 	"stricter": {