@atlaskit/editor-plugin-insert-block 1.7.0 → 1.7.1

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-insert-block
 
+## 1.7.1
+
+### Patch Changes
+
+- [#126987](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/126987)
+  [`e2759b19623a1`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/e2759b19623a1) -
+  [ux] Migrate icons in Editor toolbar insert block
+
 ## 1.7.0
 
 ### Minor Changes

package/dist/cjs/ui/ToolbarInsertBlock/dropdown-button.js

@@ -10,8 +10,11 @@ var _react2 = require("@emotion/react");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _styles = require("@atlaskit/editor-common/styles");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
+var _addEditorAdd = _interopRequireDefault(require("@atlaskit/icon/core/migration/add--editor-add"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
 var _add = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/add"));
+var _chevronDown2 = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _styles2 = require("./styles");
 /**
  * @jsxRuntime classic
@@ -25,9 +28,21 @@ var DropDownButtonIcon = /*#__PURE__*/_react.default.memo(function (props) {
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     (0, _react2.jsx)("span", {
       css: _styles2.triggerWrapper
-    }, (0, _react2.jsx)(_add.default, {
+    }, (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? (0, _react2.jsx)(_addEditorAdd.default, {
+      label: props.label,
+      color: "currentColor"
+    }) : (0, _react2.jsx)(_add.default, {
       label: props.label
-    }), (0, _react2.jsx)("span", {
+    }), (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ?
+    //eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    (0, _react2.jsx)("span", {
+      css: _styles2.expandWrapperStyle
+    }, (0, _react2.jsx)(_chevronDown2.default, {
+      label: "",
+      color: "currentColor"
+    })) :
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    (0, _react2.jsx)("span", {
       css: _styles.expandIconWrapperStyle
     }, (0, _react2.jsx)(_chevronDown.default, {
       label: ""

package/dist/cjs/ui/ToolbarInsertBlock/item.js

@@ -10,6 +10,17 @@ var _react2 = require("@emotion/react");
 var _memoizeOne = _interopRequireDefault(require("memoize-one"));
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
+var _angleBracketsEditorCode = _interopRequireDefault(require("@atlaskit/icon/core/migration/angle-brackets--editor-code"));
+var _calendarEditorDate = _interopRequireDefault(require("@atlaskit/icon/core/migration/calendar--editor-date"));
+var _checkboxCheckedEditorTask = _interopRequireDefault(require("@atlaskit/icon/core/migration/checkbox-checked--editor-task"));
+var _decisionEditorDecision = _interopRequireDefault(require("@atlaskit/icon/core/migration/decision--editor-decision"));
+var _emojiEditorEmoji = _interopRequireDefault(require("@atlaskit/icon/core/migration/emoji--editor-emoji"));
+var _imageEditorImage = _interopRequireDefault(require("@atlaskit/icon/core/migration/image--editor-image"));
+var _informationEditorInfo = _interopRequireDefault(require("@atlaskit/icon/core/migration/information--editor-info"));
+var _linkEditorLink = _interopRequireDefault(require("@atlaskit/icon/core/migration/link--editor-link"));
+var _mentionEditorMention = _interopRequireDefault(require("@atlaskit/icon/core/migration/mention--editor-mention"));
+var _quotationMarkQuote = _interopRequireDefault(require("@atlaskit/icon/core/migration/quotation-mark--quote"));
+var _showMoreHorizontalEditorMore = _interopRequireDefault(require("@atlaskit/icon/core/migration/show-more-horizontal--editor-more"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
 var _chevronRightCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-right-circle"));
 var _code = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/code"));
@@ -28,6 +39,8 @@ var _task = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/task"));
 var _text = _interopRequireDefault(require("@atlaskit/icon/glyph/media-services/text"));
 var _quote = _interopRequireDefault(require("@atlaskit/icon/glyph/quote"));
 var _status = _interopRequireDefault(require("@atlaskit/icon/glyph/status"));
+var _chevronDown2 = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _shallowEquals = require("./shallow-equals");
 /**
  * @jsxRuntime classic
@@ -68,7 +81,7 @@ var action = exports.action = mem(function (init) {
     disabled: init.disabled,
     name: 'action',
     shortcut: '[]',
-    Icon: _task.default,
+    Icon: (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? _checkboxCheckedEditorTask.default : _task.default,
     'aria-keyshortcuts': '[ ] Space'
   });
 });
@@ -79,7 +92,7 @@ var link = exports.link = mem(function (init) {
     disabled: init.disabled,
     name: 'link',
     shortcut: (0, _keymaps.tooltip)(_keymaps.addLink),
-    Icon: _link.default,
+    Icon: (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? _linkEditorLink.default : _link.default,
     'aria-haspopup': init['aria-haspopup'],
     'aria-keyshortcuts': (0, _keymaps.getAriaKeyshortcuts)(_keymaps.addLink)
   });
@@ -90,7 +103,7 @@ var media = exports.media = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'media',
-    Icon: _image.default
+    Icon: (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? _imageEditorImage.default : _image.default
   });
 });
 var imageUpload = exports.imageUpload = mem(function (init) {
@@ -99,7 +112,7 @@ var imageUpload = exports.imageUpload = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'image upload',
-    Icon: _image.default
+    Icon: (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? _imageEditorImage.default : _image.default
   });
 });
 var mention = exports.mention = mem(function (init) {
@@ -108,7 +121,7 @@ var mention = exports.mention = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'mention',
-    Icon: _mention.default,
+    Icon: (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? _mentionEditorMention.default : _mention.default,
     shortcut: '@',
     'aria-haspopup': init['aria-haspopup'],
     'aria-keyshortcuts': 'Shift+2 Space'
@@ -120,7 +133,7 @@ var emoji = exports.emoji = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'emoji',
-    Icon: _emoji.default,
+    Icon: (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? _emojiEditorEmoji.default : _emoji.default,
     shortcut: ':',
     'aria-haspopup': init['aria-haspopup'],
     'aria-keyshortcuts': 'Shift+;'
@@ -143,7 +156,12 @@ var tableSelector = exports.tableSelector = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'table selector',
-    Icon: _chevronDown.default
+    Icon: (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? function () {
+      return (0, _react2.jsx)(_chevronDown2.default, {
+        label: "",
+        color: "currentColor"
+      });
+    } : _chevronDown.default
   });
 });
 var layout = exports.layout = mem(function (init) {
@@ -161,7 +179,7 @@ var codeblock = exports.codeblock = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'codeblock',
-    Icon: _code.default,
+    Icon: (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? _angleBracketsEditorCode.default : _code.default,
     shortcut: init.shortcut,
     'aria-keyshortcuts': (0, _keymaps.getAriaKeyshortcuts)(init.shortcut)
   });
@@ -172,7 +190,7 @@ var panel = exports.panel = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'panel',
-    Icon: _info.default,
+    Icon: (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? _informationEditorInfo.default : _info.default,
     shortcut: init.shortcut,
     'aria-keyshortcuts': (0, _keymaps.getAriaKeyshortcuts)(init.shortcut)
   });
@@ -183,7 +201,7 @@ var blockquote = exports.blockquote = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'blockquote',
-    Icon: _quote.default,
+    Icon: (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? _quotationMarkQuote.default : _quote.default,
     shortcut: init.shortcut,
     'aria-keyshortcuts': 'Shift+. Space'
   });
@@ -194,7 +212,7 @@ var decision = exports.decision = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'decision',
-    Icon: _decision.default,
+    Icon: (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? _decisionEditorDecision.default : _decision.default,
     shortcut: '<>',
     'aria-keyshortcuts': 'Shift+, Shift+. Space'
   });
@@ -225,7 +243,7 @@ var date = exports.date = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'date',
-    Icon: _date.default,
+    Icon: (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? _calendarEditorDate.default : _date.default,
     shortcut: '//',
     'aria-keyshortcuts': '/ / Enter'
   });
@@ -259,7 +277,10 @@ var more = exports.more = mem(function (init) {
     disabled: init.disabled,
     name: 'macro',
     Icon: function Icon() {
-      return (0, _react2.jsx)(_more.default, {
+      return (0, _platformFeatureFlags.fg)('platform_editor_migration_icon_and_typography') ? (0, _react2.jsx)(_showMoreHorizontalEditorMore.default, {
+        label: "",
+        color: "currentColor"
+      }) : (0, _react2.jsx)(_more.default, {
         label: ""
       });
     }

package/dist/cjs/ui/ToolbarInsertBlock/styles.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.triggerWrapper = void 0;
+exports.triggerWrapper = exports.expandWrapperStyle = void 0;
 var _react = require("@emotion/react");
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 
@@ -20,4 +20,9 @@ var triggerWrapper = exports.triggerWrapper = (0, _react.css)({
   '> div > div': {
     display: 'flex'
   }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+var expandWrapperStyle = exports.expandWrapperStyle = (0, _react.css)({
+  marginLeft: "var(--ds-space-050, 4px)"
 });

package/dist/es2019/ui/ToolbarInsertBlock/dropdown-button.js

@@ -9,16 +9,31 @@ import { jsx } from '@emotion/react';
 import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { expandIconWrapperStyle } from '@atlaskit/editor-common/styles';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import AddIcon from '@atlaskit/icon/core/migration/add--editor-add';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
-import AddIcon from '@atlaskit/icon/glyph/editor/add';
-import { triggerWrapper } from './styles';
+import { default as AddIconLegacy } from '@atlaskit/icon/glyph/editor/add';
+import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { expandWrapperStyle, triggerWrapper } from './styles';
 const DropDownButtonIcon = /*#__PURE__*/React.memo(props =>
 // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
 jsx("span", {
   css: triggerWrapper
-}, jsx(AddIcon, {
+}, fg('platform_editor_migration_icon_and_typography') ? jsx(AddIcon, {
+  label: props.label,
+  color: "currentColor"
+}) : jsx(AddIconLegacy, {
   label: props.label
-}), jsx("span", {
+}), fg('platform_editor_migration_icon_and_typography') ?
+//eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+jsx("span", {
+  css: expandWrapperStyle
+}, jsx(ChevronDownIcon, {
+  label: "",
+  color: "currentColor"
+})) :
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+jsx("span", {
   css: expandIconWrapperStyle
 }, jsx(ExpandIcon, {
   label: ""

package/dist/es2019/ui/ToolbarInsertBlock/item.js

@@ -9,24 +9,37 @@ import { jsx } from '@emotion/react';
 import memoizeOne from 'memoize-one';
 import { addLink, getAriaKeyshortcuts, toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
+import AngleBracketsIcon from '@atlaskit/icon/core/migration/angle-brackets--editor-code';
+import CalendarIcon from '@atlaskit/icon/core/migration/calendar--editor-date';
+import CheckboxCheckedIcon from '@atlaskit/icon/core/migration/checkbox-checked--editor-task';
+import DecisionIcon from '@atlaskit/icon/core/migration/decision--editor-decision';
+import EmojiIcon from '@atlaskit/icon/core/migration/emoji--editor-emoji';
+import ImageIcon from '@atlaskit/icon/core/migration/image--editor-image';
+import InformationIcon from '@atlaskit/icon/core/migration/information--editor-info';
+import LinkIcon from '@atlaskit/icon/core/migration/link--editor-link';
+import MentionIcon from '@atlaskit/icon/core/migration/mention--editor-mention';
+import QuotationMarkIcon from '@atlaskit/icon/core/migration/quotation-mark--quote';
+import ShowMoreHorizontalIcon from '@atlaskit/icon/core/migration/show-more-horizontal--editor-more';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import ExpandNodeIcon from '@atlaskit/icon/glyph/chevron-right-circle';
 import CodeIcon from '@atlaskit/icon/glyph/editor/code';
 import DateIcon from '@atlaskit/icon/glyph/editor/date';
-import DecisionIcon from '@atlaskit/icon/glyph/editor/decision';
-import EmojiIcon from '@atlaskit/icon/glyph/editor/emoji';
+import { default as DecisionIconLegacy } from '@atlaskit/icon/glyph/editor/decision';
+import { default as EmojiIconLegacy } from '@atlaskit/icon/glyph/editor/emoji';
 import HorizontalRuleIcon from '@atlaskit/icon/glyph/editor/horizontal-rule';
 import EditorImageIcon from '@atlaskit/icon/glyph/editor/image';
 import InfoIcon from '@atlaskit/icon/glyph/editor/info';
 import LayoutTwoEqualIcon from '@atlaskit/icon/glyph/editor/layout-two-equal';
-import LinkIcon from '@atlaskit/icon/glyph/editor/link';
-import MentionIcon from '@atlaskit/icon/glyph/editor/mention';
+import { default as LinkIconLegacy } from '@atlaskit/icon/glyph/editor/link';
+import { default as MentionIconLegacy } from '@atlaskit/icon/glyph/editor/mention';
 import EditorMoreIcon from '@atlaskit/icon/glyph/editor/more';
 import TableIcon from '@atlaskit/icon/glyph/editor/table';
 import TaskIcon from '@atlaskit/icon/glyph/editor/task';
 import PlaceholderTextIcon from '@atlaskit/icon/glyph/media-services/text';
 import QuoteIcon from '@atlaskit/icon/glyph/quote';
 import StatusIcon from '@atlaskit/icon/glyph/status';
+import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { shallowEquals } from './shallow-equals';
 const from = init => ({
   content: init.content,
@@ -56,7 +69,7 @@ export const action = mem(init => {
     disabled: init.disabled,
     name: 'action',
     shortcut: '[]',
-    Icon: TaskIcon,
+    Icon: fg('platform_editor_migration_icon_and_typography') ? CheckboxCheckedIcon : TaskIcon,
     'aria-keyshortcuts': '[ ] Space'
   });
 });
@@ -66,7 +79,7 @@ export const link = mem(init => from({
   disabled: init.disabled,
   name: 'link',
   shortcut: tooltip(addLink),
-  Icon: LinkIcon,
+  Icon: fg('platform_editor_migration_icon_and_typography') ? LinkIcon : LinkIconLegacy,
   'aria-haspopup': init['aria-haspopup'],
   'aria-keyshortcuts': getAriaKeyshortcuts(addLink)
 }));
@@ -75,21 +88,21 @@ export const media = mem(init => from({
   tooltipDescription: init.tooltipDescription,
   disabled: init.disabled,
   name: 'media',
-  Icon: EditorImageIcon
+  Icon: fg('platform_editor_migration_icon_and_typography') ? ImageIcon : EditorImageIcon
 }));
 export const imageUpload = mem(init => from({
   content: init.content,
   tooltipDescription: init.tooltipDescription,
   disabled: init.disabled,
   name: 'image upload',
-  Icon: EditorImageIcon
+  Icon: fg('platform_editor_migration_icon_and_typography') ? ImageIcon : EditorImageIcon
 }));
 export const mention = mem(init => from({
   content: init.content,
   tooltipDescription: init.tooltipDescription,
   disabled: init.disabled,
   name: 'mention',
-  Icon: MentionIcon,
+  Icon: fg('platform_editor_migration_icon_and_typography') ? MentionIcon : MentionIconLegacy,
   shortcut: '@',
   'aria-haspopup': init['aria-haspopup'],
   'aria-keyshortcuts': 'Shift+2 Space'
@@ -99,7 +112,7 @@ export const emoji = mem(init => from({
   tooltipDescription: init.tooltipDescription,
   disabled: init.disabled,
   name: 'emoji',
-  Icon: EmojiIcon,
+  Icon: fg('platform_editor_migration_icon_and_typography') ? EmojiIcon : EmojiIconLegacy,
   shortcut: ':',
   'aria-haspopup': init['aria-haspopup'],
   'aria-keyshortcuts': 'Shift+;'
@@ -118,7 +131,10 @@ export const tableSelector = mem(init => from({
   tooltipDescription: init.tooltipDescription,
   disabled: init.disabled,
   name: 'table selector',
-  Icon: ExpandIcon
+  Icon: fg('platform_editor_migration_icon_and_typography') ? () => jsx(ChevronDownIcon, {
+    label: "",
+    color: "currentColor"
+  }) : ExpandIcon
 }));
 export const layout = mem(init => from({
   content: init.content,
@@ -132,7 +148,7 @@ export const codeblock = mem(init => from({
   tooltipDescription: init.tooltipDescription,
   disabled: init.disabled,
   name: 'codeblock',
-  Icon: CodeIcon,
+  Icon: fg('platform_editor_migration_icon_and_typography') ? AngleBracketsIcon : CodeIcon,
   shortcut: init.shortcut,
   'aria-keyshortcuts': getAriaKeyshortcuts(init.shortcut)
 }));
@@ -141,7 +157,7 @@ export const panel = mem(init => from({
   tooltipDescription: init.tooltipDescription,
   disabled: init.disabled,
   name: 'panel',
-  Icon: InfoIcon,
+  Icon: fg('platform_editor_migration_icon_and_typography') ? InformationIcon : InfoIcon,
   shortcut: init.shortcut,
   'aria-keyshortcuts': getAriaKeyshortcuts(init.shortcut)
 }));
@@ -150,7 +166,7 @@ export const blockquote = mem(init => from({
   tooltipDescription: init.tooltipDescription,
   disabled: init.disabled,
   name: 'blockquote',
-  Icon: QuoteIcon,
+  Icon: fg('platform_editor_migration_icon_and_typography') ? QuotationMarkIcon : QuoteIcon,
   shortcut: init.shortcut,
   'aria-keyshortcuts': 'Shift+. Space'
 }));
@@ -159,7 +175,7 @@ export const decision = mem(init => from({
   tooltipDescription: init.tooltipDescription,
   disabled: init.disabled,
   name: 'decision',
-  Icon: DecisionIcon,
+  Icon: fg('platform_editor_migration_icon_and_typography') ? DecisionIcon : DecisionIconLegacy,
   shortcut: '<>',
   'aria-keyshortcuts': 'Shift+, Shift+. Space'
 }));
@@ -184,7 +200,7 @@ export const date = mem(init => from({
   tooltipDescription: init.tooltipDescription,
   disabled: init.disabled,
   name: 'date',
-  Icon: DateIcon,
+  Icon: fg('platform_editor_migration_icon_and_typography') ? CalendarIcon : DateIcon,
   shortcut: '//',
   'aria-keyshortcuts': '/ / Enter'
 }));
@@ -209,7 +225,10 @@ export const more = mem(init => from({
   tooltipDescription: init.tooltipDescription,
   disabled: init.disabled,
   name: 'macro',
-  Icon: () => jsx(EditorMoreIcon, {
+  Icon: () => fg('platform_editor_migration_icon_and_typography') ? jsx(ShowMoreHorizontalIcon, {
+    label: "",
+    color: "currentColor"
+  }) : jsx(EditorMoreIcon, {
     label: ""
   })
 }));

package/dist/es2019/ui/ToolbarInsertBlock/styles.js

@@ -1,6 +1,5 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export const triggerWrapper = css({
   width: '42px',
@@ -14,4 +13,9 @@ export const triggerWrapper = css({
   '> div > div': {
     display: 'flex'
   }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export const expandWrapperStyle = css({
+  marginLeft: "var(--ds-space-050, 4px)"
 });

package/dist/esm/ui/ToolbarInsertBlock/dropdown-button.js

@@ -9,17 +9,32 @@ import { jsx } from '@emotion/react';
 import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { expandIconWrapperStyle } from '@atlaskit/editor-common/styles';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
+import AddIcon from '@atlaskit/icon/core/migration/add--editor-add';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
-import AddIcon from '@atlaskit/icon/glyph/editor/add';
-import { triggerWrapper } from './styles';
+import { default as AddIconLegacy } from '@atlaskit/icon/glyph/editor/add';
+import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import { fg } from '@atlaskit/platform-feature-flags';
+import { expandWrapperStyle, triggerWrapper } from './styles';
 var DropDownButtonIcon = /*#__PURE__*/React.memo(function (props) {
   return (
     // eslint-disable-next-line @atlaskit/design-system/consistent-css-prop-usage, @atlaskit/ui-styling-standard/no-imported-style-values -- Ignored via go/DSP-18766
     jsx("span", {
       css: triggerWrapper
-    }, jsx(AddIcon, {
+    }, fg('platform_editor_migration_icon_and_typography') ? jsx(AddIcon, {
+      label: props.label,
+      color: "currentColor"
+    }) : jsx(AddIconLegacy, {
       label: props.label
-    }), jsx("span", {
+    }), fg('platform_editor_migration_icon_and_typography') ?
+    //eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    jsx("span", {
+      css: expandWrapperStyle
+    }, jsx(ChevronDownIcon, {
+      label: "",
+      color: "currentColor"
+    })) :
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
+    jsx("span", {
       css: expandIconWrapperStyle
     }, jsx(ExpandIcon, {
       label: ""

package/dist/esm/ui/ToolbarInsertBlock/item.js

@@ -9,24 +9,37 @@ import { jsx } from '@emotion/react';
 import memoizeOne from 'memoize-one';
 import { addLink, getAriaKeyshortcuts, toggleTable, tooltip } from '@atlaskit/editor-common/keymaps';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
+import AngleBracketsIcon from '@atlaskit/icon/core/migration/angle-brackets--editor-code';
+import CalendarIcon from '@atlaskit/icon/core/migration/calendar--editor-date';
+import CheckboxCheckedIcon from '@atlaskit/icon/core/migration/checkbox-checked--editor-task';
+import DecisionIcon from '@atlaskit/icon/core/migration/decision--editor-decision';
+import EmojiIcon from '@atlaskit/icon/core/migration/emoji--editor-emoji';
+import ImageIcon from '@atlaskit/icon/core/migration/image--editor-image';
+import InformationIcon from '@atlaskit/icon/core/migration/information--editor-info';
+import LinkIcon from '@atlaskit/icon/core/migration/link--editor-link';
+import MentionIcon from '@atlaskit/icon/core/migration/mention--editor-mention';
+import QuotationMarkIcon from '@atlaskit/icon/core/migration/quotation-mark--quote';
+import ShowMoreHorizontalIcon from '@atlaskit/icon/core/migration/show-more-horizontal--editor-more';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
 import ExpandNodeIcon from '@atlaskit/icon/glyph/chevron-right-circle';
 import CodeIcon from '@atlaskit/icon/glyph/editor/code';
 import DateIcon from '@atlaskit/icon/glyph/editor/date';
-import DecisionIcon from '@atlaskit/icon/glyph/editor/decision';
-import EmojiIcon from '@atlaskit/icon/glyph/editor/emoji';
+import { default as DecisionIconLegacy } from '@atlaskit/icon/glyph/editor/decision';
+import { default as EmojiIconLegacy } from '@atlaskit/icon/glyph/editor/emoji';
 import HorizontalRuleIcon from '@atlaskit/icon/glyph/editor/horizontal-rule';
 import EditorImageIcon from '@atlaskit/icon/glyph/editor/image';
 import InfoIcon from '@atlaskit/icon/glyph/editor/info';
 import LayoutTwoEqualIcon from '@atlaskit/icon/glyph/editor/layout-two-equal';
-import LinkIcon from '@atlaskit/icon/glyph/editor/link';
-import MentionIcon from '@atlaskit/icon/glyph/editor/mention';
+import { default as LinkIconLegacy } from '@atlaskit/icon/glyph/editor/link';
+import { default as MentionIconLegacy } from '@atlaskit/icon/glyph/editor/mention';
 import EditorMoreIcon from '@atlaskit/icon/glyph/editor/more';
 import TableIcon from '@atlaskit/icon/glyph/editor/table';
 import TaskIcon from '@atlaskit/icon/glyph/editor/task';
 import PlaceholderTextIcon from '@atlaskit/icon/glyph/media-services/text';
 import QuoteIcon from '@atlaskit/icon/glyph/quote';
 import StatusIcon from '@atlaskit/icon/glyph/status';
+import ChevronDownIcon from '@atlaskit/icon/utility/migration/chevron-down';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { shallowEquals } from './shallow-equals';
 var from = function from(init) {
   return {
@@ -60,7 +73,7 @@ export var action = mem(function (init) {
     disabled: init.disabled,
     name: 'action',
     shortcut: '[]',
-    Icon: TaskIcon,
+    Icon: fg('platform_editor_migration_icon_and_typography') ? CheckboxCheckedIcon : TaskIcon,
     'aria-keyshortcuts': '[ ] Space'
   });
 });
@@ -71,7 +84,7 @@ export var link = mem(function (init) {
     disabled: init.disabled,
     name: 'link',
     shortcut: tooltip(addLink),
-    Icon: LinkIcon,
+    Icon: fg('platform_editor_migration_icon_and_typography') ? LinkIcon : LinkIconLegacy,
     'aria-haspopup': init['aria-haspopup'],
     'aria-keyshortcuts': getAriaKeyshortcuts(addLink)
   });
@@ -82,7 +95,7 @@ export var media = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'media',
-    Icon: EditorImageIcon
+    Icon: fg('platform_editor_migration_icon_and_typography') ? ImageIcon : EditorImageIcon
   });
 });
 export var imageUpload = mem(function (init) {
@@ -91,7 +104,7 @@ export var imageUpload = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'image upload',
-    Icon: EditorImageIcon
+    Icon: fg('platform_editor_migration_icon_and_typography') ? ImageIcon : EditorImageIcon
   });
 });
 export var mention = mem(function (init) {
@@ -100,7 +113,7 @@ export var mention = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'mention',
-    Icon: MentionIcon,
+    Icon: fg('platform_editor_migration_icon_and_typography') ? MentionIcon : MentionIconLegacy,
     shortcut: '@',
     'aria-haspopup': init['aria-haspopup'],
     'aria-keyshortcuts': 'Shift+2 Space'
@@ -112,7 +125,7 @@ export var emoji = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'emoji',
-    Icon: EmojiIcon,
+    Icon: fg('platform_editor_migration_icon_and_typography') ? EmojiIcon : EmojiIconLegacy,
     shortcut: ':',
     'aria-haspopup': init['aria-haspopup'],
     'aria-keyshortcuts': 'Shift+;'
@@ -135,7 +148,12 @@ export var tableSelector = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'table selector',
-    Icon: ExpandIcon
+    Icon: fg('platform_editor_migration_icon_and_typography') ? function () {
+      return jsx(ChevronDownIcon, {
+        label: "",
+        color: "currentColor"
+      });
+    } : ExpandIcon
   });
 });
 export var layout = mem(function (init) {
@@ -153,7 +171,7 @@ export var codeblock = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'codeblock',
-    Icon: CodeIcon,
+    Icon: fg('platform_editor_migration_icon_and_typography') ? AngleBracketsIcon : CodeIcon,
     shortcut: init.shortcut,
     'aria-keyshortcuts': getAriaKeyshortcuts(init.shortcut)
   });
@@ -164,7 +182,7 @@ export var panel = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'panel',
-    Icon: InfoIcon,
+    Icon: fg('platform_editor_migration_icon_and_typography') ? InformationIcon : InfoIcon,
     shortcut: init.shortcut,
     'aria-keyshortcuts': getAriaKeyshortcuts(init.shortcut)
   });
@@ -175,7 +193,7 @@ export var blockquote = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'blockquote',
-    Icon: QuoteIcon,
+    Icon: fg('platform_editor_migration_icon_and_typography') ? QuotationMarkIcon : QuoteIcon,
     shortcut: init.shortcut,
     'aria-keyshortcuts': 'Shift+. Space'
   });
@@ -186,7 +204,7 @@ export var decision = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'decision',
-    Icon: DecisionIcon,
+    Icon: fg('platform_editor_migration_icon_and_typography') ? DecisionIcon : DecisionIconLegacy,
     shortcut: '<>',
     'aria-keyshortcuts': 'Shift+, Shift+. Space'
   });
@@ -217,7 +235,7 @@ export var date = mem(function (init) {
     tooltipDescription: init.tooltipDescription,
     disabled: init.disabled,
     name: 'date',
-    Icon: DateIcon,
+    Icon: fg('platform_editor_migration_icon_and_typography') ? CalendarIcon : DateIcon,
     shortcut: '//',
     'aria-keyshortcuts': '/ / Enter'
   });
@@ -251,7 +269,10 @@ export var more = mem(function (init) {
     disabled: init.disabled,
     name: 'macro',
     Icon: function Icon() {
-      return jsx(EditorMoreIcon, {
+      return fg('platform_editor_migration_icon_and_typography') ? jsx(ShowMoreHorizontalIcon, {
+        label: "",
+        color: "currentColor"
+      }) : jsx(EditorMoreIcon, {
         label: ""
       });
     }

package/dist/esm/ui/ToolbarInsertBlock/styles.js

@@ -1,6 +1,5 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
-
 // eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
 export var triggerWrapper = css({
   width: '42px',
@@ -14,4 +13,9 @@ export var triggerWrapper = css({
   '> div > div': {
     display: 'flex'
   }
+});
+
+// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
+export var expandWrapperStyle = css({
+  marginLeft: "var(--ds-space-050, 4px)"
 });

package/dist/types/ui/ToolbarInsertBlock/styles.d.ts

@@ -1 +1,2 @@
 export declare const triggerWrapper: import("@emotion/react").SerializedStyles;
+export declare const expandWrapperStyle: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/ui/ToolbarInsertBlock/styles.d.ts

@@ -1 +1,2 @@
 export declare const triggerWrapper: import("@emotion/react").SerializedStyles;
+export declare const expandWrapperStyle: import("@emotion/react").SerializedStyles;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-insert-block",
-	"version": "1.7.0",
+	"version": "1.7.1",
 	"description": "Insert block plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -58,10 +58,11 @@
 		"@atlaskit/editor-prosemirror": "5.0.1",
 		"@atlaskit/editor-shared-styles": "^2.13.0",
 		"@atlaskit/emoji": "^67.7.0",
-		"@atlaskit/icon": "^22.9.0",
+		"@atlaskit/icon": "^22.10.0",
+		"@atlaskit/platform-feature-flags": "^0.3.0",
 		"@atlaskit/primitives": "^11.1.0",
 		"@atlaskit/theme": "^12.11.0",
-		"@atlaskit/tokens": "^1.56.0",
+		"@atlaskit/tokens": "^1.57.0",
 		"@babel/runtime": "^7.0.0",
 		"@emotion/react": "^11.7.1",
 		"bind-event-listener": "^3.0.0",
@@ -114,5 +115,10 @@
 				"import-no-extraneous-disable-for-examples-and-docs"
 			]
 		}
+	},
+	"platform-feature-flags": {
+		"platform_editor_migration_icon_and_typography": {
+			"type": "boolean"
+		}
 	}
 }