@atlaskit/editor-plugin-media 1.36.1 → 1.36.2

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-media
 
+## 1.36.2
+
+### Patch Changes
+
+- [#152594](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/152594)
+  [`4f17733c95c94`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/4f17733c95c94) -
+  [ux] ED-25093: Migrated media toolbar to use the new icons
+
 ## 1.36.1
 
 ### Patch Changes

package/dist/cjs/toolbar/comments.js

@@ -9,7 +9,8 @@ var _react = _interopRequireDefault(require("react"));
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _media = require("@atlaskit/editor-common/media");
-var _comment = _interopRequireDefault(require("@atlaskit/icon/glyph/comment"));
+var _comment = _interopRequireDefault(require("@atlaskit/icon/core/comment"));
+var _comment2 = _interopRequireDefault(require("@atlaskit/icon/glyph/comment"));
 var _commentWithDotIcon = require("./assets/commentWithDotIcon");
 var _utils = require("./utils");
 var commentButton = exports.commentButton = function commentButton(intl, state, api) {
@@ -40,7 +41,8 @@ var commentButton = exports.commentButton = function commentButton(intl, state,
   return {
     type: 'button',
     testId: 'add-comment-media-button',
-    icon: hasActiveComments ? _commentWithDotIcon.CommentWithDotIcon : _comment.default,
+    icon: _comment.default,
+    iconFallback: hasActiveComments ? _commentWithDotIcon.CommentWithDotIcon : _comment2.default,
     title: title,
     onClick: onClickHandler,
     tooltipContent: /*#__PURE__*/_react.default.createElement(_keymaps.ToolTipContent, {

package/dist/cjs/toolbar/filePreviewItem.js

@@ -9,6 +9,7 @@ exports.FilePreviewItem = void 0;
 var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
 var _react = _interopRequireWildcard(require("react"));
 var _ui = require("@atlaskit/editor-common/ui");
+var _maximize = _interopRequireDefault(require("@atlaskit/icon/core/maximize"));
 var _filePreview = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/file-preview"));
 var _mediaUi = require("@atlaskit/media-ui");
 var _PortalWrapper = require("../ui/MediaViewer/PortalWrapper");
@@ -36,8 +37,11 @@ var FilePreviewItem = exports.FilePreviewItem = function FilePreviewItem(_ref) {
     testId: "file-preview-toolbar-button",
     key: "editor.media.card.preview",
     onClick: showMediaViewer,
-    icon: /*#__PURE__*/_react.default.createElement(_filePreview.default, {
-      label: "file preview"
+    icon: /*#__PURE__*/_react.default.createElement(_maximize.default, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: "file preview",
+      LEGACY_fallbackIcon: _filePreview.default
     }),
     tooltipContent: tooltipContent
   }), shouldRenderMediaViewer && /*#__PURE__*/_react.default.createElement(_PortalWrapper.RenderMediaViewer, {

package/dist/cjs/toolbar/index.js

@@ -18,7 +18,11 @@ var _messages = _interopRequireWildcard(require("@atlaskit/editor-common/message
 var _state2 = require("@atlaskit/editor-prosemirror/state");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _download = _interopRequireDefault(require("@atlaskit/icon/glyph/download"));
+var _delete = _interopRequireDefault(require("@atlaskit/icon/core/delete"));
+var _imageFullscreen = _interopRequireDefault(require("@atlaskit/icon/core/image-fullscreen"));
+var _imageInline = _interopRequireDefault(require("@atlaskit/icon/core/image-inline"));
+var _maximize = _interopRequireDefault(require("@atlaskit/icon/core/maximize"));
+var _download = _interopRequireDefault(require("@atlaskit/icon/core/migration/download"));
 var _filePreview = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/file-preview"));
 var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
 var _mediaFilmstrip = require("@atlaskit/media-filmstrip");
@@ -125,7 +129,8 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
   }, (0, _platformFeatureFlags.fg)('platform_editor_media_previewer_bugfix') ? {
     id: 'editor.media.viewer',
     type: 'button',
-    icon: _filePreview.default,
+    icon: _maximize.default,
+    iconFallback: _filePreview.default,
     title: intl.formatMessage(_mediaUi.messages.preview),
     onClick: function onClick() {
       var _handleShowMediaViewe;
@@ -162,7 +167,8 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
     type: 'button',
     appearance: 'danger',
     focusEditoronEnter: true,
-    icon: _remove.default,
+    icon: _delete.default,
+    iconFallback: _remove.default,
     onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, true),
     onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, false),
     onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, true),
@@ -281,9 +287,12 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           id: 'editor.media.image.view.switcher.inline',
           title: inlineSwitcherTitle,
           icon: function icon() {
-            return /*#__PURE__*/_react.default.createElement(_card.IconInline, {
-              size: "medium",
-              label: inlineSwitcherTitle
+            return /*#__PURE__*/_react.default.createElement(_imageInline.default, {
+              color: "currentColor",
+              spacing: "spacious",
+              label: inlineSwitcherTitle,
+              LEGACY_size: "medium",
+              LEGACY_fallbackIcon: _card.IconInline
             });
           },
           onClick: (0, _commands.changeMediaSingleToMediaInline)(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions),
@@ -293,9 +302,12 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           id: 'editor.media.image.view.switcher.floating',
           title: floatingSwitcherTitle,
           icon: function icon() {
-            return /*#__PURE__*/_react.default.createElement(_card.IconEmbed, {
-              size: "medium",
-              label: floatingSwitcherTitle
+            return /*#__PURE__*/_react.default.createElement(_imageFullscreen.default, {
+              color: "currentColor",
+              spacing: "spacious",
+              label: floatingSwitcherTitle,
+              LEGACY_size: "medium",
+              LEGACY_fallbackIcon: _card.IconEmbed
             });
           },
           onClick: function onClick() {
@@ -469,7 +481,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         toolbarButtons.push((0, _platformFeatureFlags.fg)('platform_editor_media_previewer_bugfix') ? {
           id: 'editor.media.viewer',
           type: 'button',
-          icon: _filePreview.default,
+          icon: _maximize.default,
+          iconFallback: _filePreview.default,
           title: intl.formatMessage(_mediaUi.messages.preview),
           onClick: function onClick() {
             var _handleShowMediaViewe2;

package/dist/cjs/toolbar/linking-toolbar-appearance.js

@@ -13,7 +13,8 @@ var _adfSchema = require("@atlaskit/adf-schema");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
 var _messages = require("@atlaskit/editor-common/messages");
 var _ui = require("@atlaskit/editor-common/ui");
-var _link = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/link"));
+var _linkExternal = _interopRequireDefault(require("@atlaskit/icon/core/link-external"));
+var _link = _interopRequireDefault(require("@atlaskit/icon/core/migration/link"));
 var _shortcut = _interopRequireDefault(require("@atlaskit/icon/glyph/shortcut"));
 var _pluginKey = require("../pm-plugins/plugin-key");
 var _checkMediaType = require("../utils/check-media-type");
@@ -83,8 +84,11 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = function LinkToolbar
       disabled: !isValidUrl,
       onClick: onOpenLink,
       title: linkTitle,
-      icon: (0, _react2.jsx)(_shortcut.default, {
-        label: linkTitle
+      icon: (0, _react2.jsx)(_linkExternal.default, {
+        color: "currentColor",
+        spacing: "spacious",
+        label: linkTitle,
+        LEGACY_fallbackIcon: _shortcut.default
       })
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       ,
@@ -101,6 +105,7 @@ var LinkToolbarAppearance = exports.LinkToolbarAppearance = function LinkToolbar
         keymap: _keymaps.addLink
       }),
       icon: (0, _react2.jsx)(_link.default, {
+        color: "currentColor",
         label: _title
       })
     }), (0, _react2.jsx)(_ui.FloatingToolbarSeparator, null)) : null;

package/dist/cjs/ui/ImageBorder/index.js

@@ -15,7 +15,13 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _uiColor = require("@atlaskit/editor-common/ui-color");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _editorPalette = require("@atlaskit/editor-palette");
+var _border = _interopRequireDefault(require("@atlaskit/icon/core/border"));
+var _borderWeightMedium = _interopRequireDefault(require("@atlaskit/icon/core/border-weight-medium"));
+var _borderWeightThick = _interopRequireDefault(require("@atlaskit/icon/core/border-weight-thick"));
+var _borderWeightThin = _interopRequireDefault(require("@atlaskit/icon/core/border-weight-thin"));
 var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+var _chevronDown2 = _interopRequireDefault(require("@atlaskit/icon/utility/chevron-down"));
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _primitives = require("@atlaskit/primitives");
 var _tooltip = _interopRequireDefault(require("@atlaskit/tooltip"));
 var _styles2 = require("./styles");
@@ -107,14 +113,20 @@ var ImageBorder = function ImageBorder(_ref) {
   }, [isColorSubmenuOpen, isSizeSubmenuOpen, isOpenByKeyboard]);
   var borderSizeOptions = [{
     name: formatMessage(_media.imageBorderMessages.borderSizeSubtle),
-    value: 1
+    value: 1,
+    icon: _borderWeightThin.default
   }, {
     name: formatMessage(_media.imageBorderMessages.borderSizeMedium),
-    value: 2
+    value: 2,
+    icon: _borderWeightMedium.default
   }, {
     name: formatMessage(_media.imageBorderMessages.borderSizeBold),
-    value: 3
+    value: 3,
+    icon: _borderWeightThick.default
   }];
+  var borderColorSelectStyles = function borderColorSelectStyles() {
+    return !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ? (0, _styles2.contextualMenuColorIcon)(color && (0, _editorPalette.hexToEditorBorderPaletteColor)(color)) : _styles2.contextualMenuArrow;
+  };
   var items = [{
     content: (0, _react2.jsx)("div", null, (0, _react2.jsx)("button", {
       ref: dropDownColorOptionButton,
@@ -131,7 +143,7 @@ var ImageBorder = function ImageBorder(_ref) {
         });
       }
     }, (0, _react2.jsx)(_primitives.Text, null, formatMessage(_media.imageBorderMessages.borderColor)), (0, _react2.jsx)("div", {
-      css: (0, _styles2.contextualMenuColorIcon)(color && (0, _editorPalette.hexToEditorBorderPaletteColor)(color))
+      css: borderColorSelectStyles
     })), (0, _react2.jsx)("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: _styles.DropdownMenuSharedCssClassName.SUBMENU,
@@ -215,7 +227,9 @@ var ImageBorder = function ImageBorder(_ref) {
       ref: handleSubMenuRef
     }, borderSizeOptions.map(function (_ref2, idx) {
       var name = _ref2.name,
-        value = _ref2.value;
+        value = _ref2.value,
+        icon = _ref2.icon;
+      var ButtonIcon = icon;
       return (0, _react2.jsx)(_tooltip.default, {
         key: idx,
         content: name
@@ -249,9 +263,15 @@ var ImageBorder = function ImageBorder(_ref) {
         onMouseDown: function onMouseDown(e) {
           e.preventDefault();
         }
-      }, (0, _react2.jsx)("div", {
+      }, !(0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') ?
+      //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)("div", {
         css: (0, _styles2.line)(value, value === size),
         role: "presentation"
+      }) : (0, _react2.jsx)(ButtonIcon, {
+        color: value === size ? "var(--ds-icon-inverse, #FFFFFF)" : 'currentColor',
+        spacing: "spacious",
+        label: name
       }))));
     }))))),
     'data-testid': 'dropdown-item__Size',
@@ -285,8 +305,11 @@ var ImageBorder = function ImageBorder(_ref) {
     onClick: toggleBorder,
     spacing: "compact",
     "aria-label": enabled ? formatMessage(_media.imageBorderMessages.removeBorder) : formatMessage(_media.imageBorderMessages.addBorder),
-    iconBefore: (0, _react2.jsx)(_icons.BorderIcon, {
-      label: ""
+    iconBefore: (0, _react2.jsx)(_border.default, {
+      color: "currentColor",
+      label: "",
+      spacing: "spacious",
+      LEGACY_fallbackIcon: _icons.BorderIcon
     }),
     title: enabled ? formatMessage(_media.imageBorderMessages.removeBorder) : formatMessage(_media.imageBorderMessages.addBorder)
   }), (0, _react2.jsx)("div", {
@@ -301,8 +324,11 @@ var ImageBorder = function ImageBorder(_ref) {
     "aria-label": formatMessage(_media.imageBorderMessages.borderOptions),
     title: formatMessage(_media.imageBorderMessages.borderOptions),
     spacing: "compact",
-    iconBefore: (0, _react2.jsx)(_chevronDown.default, {
-      label: ""
+    iconBefore: (0, _react2.jsx)(_chevronDown2.default, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: "",
+      LEGACY_fallbackIcon: _chevronDown.default
     }),
     onClick: function onClick() {
       setIsOpen(!isOpen);

package/dist/es2019/toolbar/comments.js

@@ -2,7 +2,8 @@ import React from 'react';
 import { INPUT_METHOD, VIEW_METHOD } from '@atlaskit/editor-common/analytics';
 import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { commentMessages as messages } from '@atlaskit/editor-common/media';
-import CommentIcon from '@atlaskit/icon/glyph/comment';
+import CommentIcon from '@atlaskit/icon/core/comment';
+import LegacyCommentIcon from '@atlaskit/icon/glyph/comment';
 import { CommentWithDotIcon } from './assets/commentWithDotIcon';
 import { getSelectedMediaSingle } from './utils';
 export const commentButton = (intl, state, api) => {
@@ -32,7 +33,8 @@ export const commentButton = (intl, state, api) => {
   return {
     type: 'button',
     testId: 'add-comment-media-button',
-    icon: hasActiveComments ? CommentWithDotIcon : CommentIcon,
+    icon: CommentIcon,
+    iconFallback: hasActiveComments ? CommentWithDotIcon : LegacyCommentIcon,
     title,
     onClick: onClickHandler,
     tooltipContent: /*#__PURE__*/React.createElement(ToolTipContent, {

package/dist/es2019/toolbar/filePreviewItem.js

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import { FloatingToolbarButton as ToolbarButton } from '@atlaskit/editor-common/ui';
+import MaximizeIcon from '@atlaskit/icon/core/maximize';
 import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
 import { messages } from '@atlaskit/media-ui';
 import { RenderMediaViewer } from '../ui/MediaViewer/PortalWrapper';
@@ -23,8 +24,11 @@ export const FilePreviewItem = ({
     testId: "file-preview-toolbar-button",
     key: "editor.media.card.preview",
     onClick: showMediaViewer,
-    icon: /*#__PURE__*/React.createElement(FilePreviewIcon, {
-      label: "file preview"
+    icon: /*#__PURE__*/React.createElement(MaximizeIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: "file preview",
+      LEGACY_fallbackIcon: FilePreviewIcon
     }),
     tooltipContent: tooltipContent
   }), shouldRenderMediaViewer && /*#__PURE__*/React.createElement(RenderMediaViewer, {

package/dist/es2019/toolbar/index.js

@@ -8,7 +8,11 @@ import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atl
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { contains, findParentNodeOfType, hasParentNode, hasParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
-import DownloadIcon from '@atlaskit/icon/glyph/download';
+import DeleteIcon from '@atlaskit/icon/core/delete';
+import ImageFullscreenIcon from '@atlaskit/icon/core/image-fullscreen';
+import ImageInlineIcon from '@atlaskit/icon/core/image-inline';
+import MaximizeIcon from '@atlaskit/icon/core/maximize';
+import DownloadIcon from '@atlaskit/icon/core/migration/download';
 import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import { mediaFilmstripItemDOMSelector } from '@atlaskit/media-filmstrip';
@@ -112,7 +116,8 @@ const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState, hoverDe
   }, fg('platform_editor_media_previewer_bugfix') ? {
     id: 'editor.media.viewer',
     type: 'button',
-    icon: FilePreviewIcon,
+    icon: MaximizeIcon,
+    iconFallback: FilePreviewIcon,
     title: intl.formatMessage(messages.preview),
     onClick: () => {
       var _handleShowMediaViewe;
@@ -149,7 +154,8 @@ const generateMediaCardFloatingToolbar = (state, intl, mediaPluginState, hoverDe
     type: 'button',
     appearance: 'danger',
     focusEditoronEnter: true,
-    icon: RemoveIcon,
+    icon: DeleteIcon,
+    iconFallback: RemoveIcon,
     onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, true),
     onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, false),
     onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, true),
@@ -274,9 +280,12 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
           type: 'button',
           id: 'editor.media.image.view.switcher.inline',
           title: inlineSwitcherTitle,
-          icon: () => /*#__PURE__*/React.createElement(IconInline, {
-            size: "medium",
-            label: inlineSwitcherTitle
+          icon: () => /*#__PURE__*/React.createElement(ImageInlineIcon, {
+            color: "currentColor",
+            spacing: "spacious",
+            label: inlineSwitcherTitle,
+            LEGACY_size: "medium",
+            LEGACY_fallbackIcon: IconInline
           }),
           onClick: changeMediaSingleToMediaInline(pluginInjectionApi === null || pluginInjectionApi === void 0 ? void 0 : (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions),
           testId: 'image-inline-appearance'
@@ -284,9 +293,12 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
           type: 'button',
           id: 'editor.media.image.view.switcher.floating',
           title: floatingSwitcherTitle,
-          icon: () => /*#__PURE__*/React.createElement(IconEmbed, {
-            size: "medium",
-            label: floatingSwitcherTitle
+          icon: () => /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
+            color: "currentColor",
+            spacing: "spacious",
+            label: floatingSwitcherTitle,
+            LEGACY_size: "medium",
+            LEGACY_fallbackIcon: IconEmbed
           }),
           onClick: () => {
             return true;
@@ -473,7 +485,8 @@ const generateMediaSingleFloatingToolbar = (state, intl, options, pluginState, m
         toolbarButtons.push(fg('platform_editor_media_previewer_bugfix') ? {
           id: 'editor.media.viewer',
           type: 'button',
-          icon: FilePreviewIcon,
+          icon: MaximizeIcon,
+          iconFallback: FilePreviewIcon,
           title: intl.formatMessage(messages.preview),
           onClick: () => {
             var _handleShowMediaViewe2;

package/dist/es2019/toolbar/linking-toolbar-appearance.js

@@ -10,7 +10,8 @@ import { isSafeUrl } from '@atlaskit/adf-schema';
 import { addLink, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { linkMessages, linkToolbarMessages } from '@atlaskit/editor-common/messages';
 import { FloatingToolbarSeparator as Separator, FloatingToolbarButton as ToolbarButton } from '@atlaskit/editor-common/ui';
-import LinkIcon from '@atlaskit/icon/glyph/editor/link';
+import LinkExternalIcon from '@atlaskit/icon/core/link-external';
+import LinkIcon from '@atlaskit/icon/core/migration/link';
 import OpenIcon from '@atlaskit/icon/glyph/shortcut';
 import { stateKey } from '../pm-plugins/plugin-key';
 import { checkMediaType } from '../utils/check-media-type';
@@ -69,8 +70,11 @@ export const LinkToolbarAppearance = ({
       disabled: !isValidUrl,
       onClick: onOpenLink,
       title: linkTitle,
-      icon: jsx(OpenIcon, {
-        label: linkTitle
+      icon: jsx(LinkExternalIcon, {
+        color: "currentColor",
+        spacing: "spacious",
+        label: linkTitle,
+        LEGACY_fallbackIcon: OpenIcon
       })
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       ,
@@ -87,6 +91,7 @@ export const LinkToolbarAppearance = ({
         keymap: addLink
       }),
       icon: jsx(LinkIcon, {
+        color: "currentColor",
         label: title
       })
     }), jsx(Separator, null)) : null;

package/dist/es2019/ui/ImageBorder/index.js

@@ -6,14 +6,20 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import { BorderIcon } from '@atlaskit/editor-common/icons';
+import { BorderIcon as LegacyBorderIcon } from '@atlaskit/editor-common/icons';
 import { imageBorderMessages as messages } from '@atlaskit/editor-common/media';
 import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { borderColorPalette, borderPaletteTooltipMessages, ColorPalette } from '@atlaskit/editor-common/ui-color';
 import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
+import BorderIcon from '@atlaskit/icon/core/border';
+import BorderWeightMediumIcon from '@atlaskit/icon/core/border-weight-medium';
+import BorderWeightThickIcon from '@atlaskit/icon/core/border-weight-thick';
+import BorderWeightThinIcon from '@atlaskit/icon/core/border-weight-thin';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Text } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
 import { buttonStyle, buttonWrapperStyle, contextualMenuArrow, contextualMenuColorIcon, contextualSubMenu, dropdownOptionButton, dropdownWrapper, itemSpacing, line, menuItemDimensions, toolbarButtonWrapper } from './styles';
@@ -89,14 +95,18 @@ const ImageBorder = ({
   }, [isColorSubmenuOpen, isSizeSubmenuOpen, isOpenByKeyboard]);
   const borderSizeOptions = [{
     name: formatMessage(messages.borderSizeSubtle),
-    value: 1
+    value: 1,
+    icon: BorderWeightThinIcon
   }, {
     name: formatMessage(messages.borderSizeMedium),
-    value: 2
+    value: 2,
+    icon: BorderWeightMediumIcon
   }, {
     name: formatMessage(messages.borderSizeBold),
-    value: 3
+    value: 3,
+    icon: BorderWeightThickIcon
   }];
+  const borderColorSelectStyles = () => !fg('platform-visual-refresh-icons') ? contextualMenuColorIcon(color && hexToEditorBorderPaletteColor(color)) : contextualMenuArrow;
   const items = [{
     content: jsx("div", null, jsx("button", {
       ref: dropDownColorOptionButton,
@@ -109,7 +119,7 @@ const ImageBorder = ({
       "aria-expanded": isColorSubmenuOpen,
       onKeyDown: e => handleTriggerByKeyboard(e, () => setIsColorSubmenuOpen(!isColorSubmenuOpen))
     }, jsx(Text, null, formatMessage(messages.borderColor)), jsx("div", {
-      css: contextualMenuColorIcon(color && hexToEditorBorderPaletteColor(color))
+      css: borderColorSelectStyles
     })), jsx("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: DropdownMenuSharedCssClassName.SUBMENU,
@@ -189,44 +199,54 @@ const ImageBorder = ({
       ref: handleSubMenuRef
     }, borderSizeOptions.map(({
       name,
-      value
-    }, idx) => jsx(Tooltip, {
-      key: idx,
-      content: name
-    }, jsx("span", {
-      css: buttonWrapperStyle
-    }, jsx("button", {
-      type: "button"
-      /* eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */,
-      css: buttonStyle(value === size),
-      "aria-label": name,
-      role: "radio",
-      "aria-checked": value === size,
-      onClick: () => {
-        setBorder({
-          size: value
-        });
-        setIsOpen(false);
-      },
-      onKeyDown: event => {
-        if (event.key === 'Enter' || event.key === ' ') {
-          var _openDropdownButtonRe2;
+      value,
+      icon
+    }, idx) => {
+      const ButtonIcon = icon;
+      return jsx(Tooltip, {
+        key: idx,
+        content: name
+      }, jsx("span", {
+        css: buttonWrapperStyle
+      }, jsx("button", {
+        type: "button"
+        /* eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766 */,
+        css: buttonStyle(value === size),
+        "aria-label": name,
+        role: "radio",
+        "aria-checked": value === size,
+        onClick: () => {
           setBorder({
             size: value
           });
           setIsOpen(false);
-          setIsColorSubmenuOpen(false);
-          setIsSizeSubmenuOpen(false);
-          (_openDropdownButtonRe2 = openDropdownButtonRef.current) === null || _openDropdownButtonRe2 === void 0 ? void 0 : _openDropdownButtonRe2.focus();
+        },
+        onKeyDown: event => {
+          if (event.key === 'Enter' || event.key === ' ') {
+            var _openDropdownButtonRe2;
+            setBorder({
+              size: value
+            });
+            setIsOpen(false);
+            setIsColorSubmenuOpen(false);
+            setIsSizeSubmenuOpen(false);
+            (_openDropdownButtonRe2 = openDropdownButtonRef.current) === null || _openDropdownButtonRe2 === void 0 ? void 0 : _openDropdownButtonRe2.focus();
+          }
+        },
+        onMouseDown: e => {
+          e.preventDefault();
         }
-      },
-      onMouseDown: e => {
-        e.preventDefault();
-      }
-    }, jsx("div", {
-      css: line(value, value === size),
-      role: "presentation"
-    }))))))))),
+      }, !fg('platform-visual-refresh-icons') ?
+      //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("div", {
+        css: line(value, value === size),
+        role: "presentation"
+      }) : jsx(ButtonIcon, {
+        color: value === size ? "var(--ds-icon-inverse, #FFFFFF)" : 'currentColor',
+        spacing: "spacious",
+        label: name
+      }))));
+    }))))),
     'data-testid': 'dropdown-item__Size',
     key: 'dropdown-menu-image-border-size-button',
     value: {
@@ -259,7 +279,10 @@ const ImageBorder = ({
     spacing: "compact",
     "aria-label": enabled ? formatMessage(messages.removeBorder) : formatMessage(messages.addBorder),
     iconBefore: jsx(BorderIcon, {
-      label: ""
+      color: "currentColor",
+      label: "",
+      spacing: "spacious",
+      LEGACY_fallbackIcon: LegacyBorderIcon
     }),
     title: enabled ? formatMessage(messages.removeBorder) : formatMessage(messages.addBorder)
   }), jsx("div", {
@@ -274,8 +297,11 @@ const ImageBorder = ({
     "aria-label": formatMessage(messages.borderOptions),
     title: formatMessage(messages.borderOptions),
     spacing: "compact",
-    iconBefore: jsx(ExpandIcon, {
-      label: ""
+    iconBefore: jsx(ChevronDownIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: "",
+      LEGACY_fallbackIcon: ExpandIcon
     }),
     onClick: () => {
       setIsOpen(!isOpen);

package/dist/esm/toolbar/comments.js

@@ -2,7 +2,8 @@ import React from 'react';
 import { INPUT_METHOD, VIEW_METHOD } from '@atlaskit/editor-common/analytics';
 import { ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { commentMessages as messages } from '@atlaskit/editor-common/media';
-import CommentIcon from '@atlaskit/icon/glyph/comment';
+import CommentIcon from '@atlaskit/icon/core/comment';
+import LegacyCommentIcon from '@atlaskit/icon/glyph/comment';
 import { CommentWithDotIcon } from './assets/commentWithDotIcon';
 import { getSelectedMediaSingle } from './utils';
 export var commentButton = function commentButton(intl, state, api) {
@@ -33,7 +34,8 @@ export var commentButton = function commentButton(intl, state, api) {
   return {
     type: 'button',
     testId: 'add-comment-media-button',
-    icon: hasActiveComments ? CommentWithDotIcon : CommentIcon,
+    icon: CommentIcon,
+    iconFallback: hasActiveComments ? CommentWithDotIcon : LegacyCommentIcon,
     title: title,
     onClick: onClickHandler,
     tooltipContent: /*#__PURE__*/React.createElement(ToolTipContent, {

package/dist/esm/toolbar/filePreviewItem.js

@@ -1,6 +1,7 @@
 import _slicedToArray from "@babel/runtime/helpers/slicedToArray";
 import React, { useState } from 'react';
 import { FloatingToolbarButton as ToolbarButton } from '@atlaskit/editor-common/ui';
+import MaximizeIcon from '@atlaskit/icon/core/maximize';
 import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
 import { messages } from '@atlaskit/media-ui';
 import { RenderMediaViewer } from '../ui/MediaViewer/PortalWrapper';
@@ -26,8 +27,11 @@ export var FilePreviewItem = function FilePreviewItem(_ref) {
     testId: "file-preview-toolbar-button",
     key: "editor.media.card.preview",
     onClick: showMediaViewer,
-    icon: /*#__PURE__*/React.createElement(FilePreviewIcon, {
-      label: "file preview"
+    icon: /*#__PURE__*/React.createElement(MaximizeIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: "file preview",
+      LEGACY_fallbackIcon: FilePreviewIcon
     }),
     tooltipContent: tooltipContent
   }), shouldRenderMediaViewer && /*#__PURE__*/React.createElement(RenderMediaViewer, {

package/dist/esm/toolbar/index.js

@@ -12,7 +12,11 @@ import commonMessages, { cardMessages, mediaAndEmbedToolbarMessages } from '@atl
 import { NodeSelection } from '@atlaskit/editor-prosemirror/state';
 import { contains, findParentNodeOfType, hasParentNode, hasParentNodeOfType, removeSelectedNode } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorDefaultLayoutWidth, akEditorFullWidthLayoutWidth } from '@atlaskit/editor-shared-styles';
-import DownloadIcon from '@atlaskit/icon/glyph/download';
+import DeleteIcon from '@atlaskit/icon/core/delete';
+import ImageFullscreenIcon from '@atlaskit/icon/core/image-fullscreen';
+import ImageInlineIcon from '@atlaskit/icon/core/image-inline';
+import MaximizeIcon from '@atlaskit/icon/core/maximize';
+import DownloadIcon from '@atlaskit/icon/core/migration/download';
 import FilePreviewIcon from '@atlaskit/icon/glyph/editor/file-preview';
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import { mediaFilmstripItemDOMSelector } from '@atlaskit/media-filmstrip';
@@ -115,7 +119,8 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
   }, fg('platform_editor_media_previewer_bugfix') ? {
     id: 'editor.media.viewer',
     type: 'button',
-    icon: FilePreviewIcon,
+    icon: MaximizeIcon,
+    iconFallback: FilePreviewIcon,
     title: intl.formatMessage(messages.preview),
     onClick: function onClick() {
       var _handleShowMediaViewe;
@@ -152,7 +157,8 @@ var generateMediaCardFloatingToolbar = function generateMediaCardFloatingToolbar
     type: 'button',
     appearance: 'danger',
     focusEditoronEnter: true,
-    icon: RemoveIcon,
+    icon: DeleteIcon,
+    iconFallback: RemoveIcon,
     onMouseEnter: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, true),
     onMouseLeave: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, false),
     onFocus: hoverDecoration === null || hoverDecoration === void 0 ? void 0 : hoverDecoration(mediaGroup, true),
@@ -271,9 +277,12 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           id: 'editor.media.image.view.switcher.inline',
           title: inlineSwitcherTitle,
           icon: function icon() {
-            return /*#__PURE__*/React.createElement(IconInline, {
-              size: "medium",
-              label: inlineSwitcherTitle
+            return /*#__PURE__*/React.createElement(ImageInlineIcon, {
+              color: "currentColor",
+              spacing: "spacious",
+              label: inlineSwitcherTitle,
+              LEGACY_size: "medium",
+              LEGACY_fallbackIcon: IconInline
             });
           },
           onClick: changeMediaSingleToMediaInline(pluginInjectionApi === null || pluginInjectionApi === void 0 || (_pluginInjectionApi$a4 = pluginInjectionApi.analytics) === null || _pluginInjectionApi$a4 === void 0 ? void 0 : _pluginInjectionApi$a4.actions),
@@ -283,9 +292,12 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
           id: 'editor.media.image.view.switcher.floating',
           title: floatingSwitcherTitle,
           icon: function icon() {
-            return /*#__PURE__*/React.createElement(IconEmbed, {
-              size: "medium",
-              label: floatingSwitcherTitle
+            return /*#__PURE__*/React.createElement(ImageFullscreenIcon, {
+              color: "currentColor",
+              spacing: "spacious",
+              label: floatingSwitcherTitle,
+              LEGACY_size: "medium",
+              LEGACY_fallbackIcon: IconEmbed
             });
           },
           onClick: function onClick() {
@@ -459,7 +471,8 @@ var generateMediaSingleFloatingToolbar = function generateMediaSingleFloatingToo
         toolbarButtons.push(fg('platform_editor_media_previewer_bugfix') ? {
           id: 'editor.media.viewer',
           type: 'button',
-          icon: FilePreviewIcon,
+          icon: MaximizeIcon,
+          iconFallback: FilePreviewIcon,
           title: intl.formatMessage(messages.preview),
           onClick: function onClick() {
             var _handleShowMediaViewe2;

package/dist/esm/toolbar/linking-toolbar-appearance.js

@@ -11,7 +11,8 @@ import { isSafeUrl } from '@atlaskit/adf-schema';
 import { addLink, ToolTipContent } from '@atlaskit/editor-common/keymaps';
 import { linkMessages, linkToolbarMessages } from '@atlaskit/editor-common/messages';
 import { FloatingToolbarSeparator as Separator, FloatingToolbarButton as ToolbarButton } from '@atlaskit/editor-common/ui';
-import LinkIcon from '@atlaskit/icon/glyph/editor/link';
+import LinkExternalIcon from '@atlaskit/icon/core/link-external';
+import LinkIcon from '@atlaskit/icon/core/migration/link';
 import OpenIcon from '@atlaskit/icon/glyph/shortcut';
 import { stateKey } from '../pm-plugins/plugin-key';
 import { checkMediaType } from '../utils/check-media-type';
@@ -72,8 +73,11 @@ export var LinkToolbarAppearance = function LinkToolbarAppearance(_ref) {
       disabled: !isValidUrl,
       onClick: onOpenLink,
       title: linkTitle,
-      icon: jsx(OpenIcon, {
-        label: linkTitle
+      icon: jsx(LinkExternalIcon, {
+        color: "currentColor",
+        spacing: "spacious",
+        label: linkTitle,
+        LEGACY_fallbackIcon: OpenIcon
       })
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       ,
@@ -90,6 +94,7 @@ export var LinkToolbarAppearance = function LinkToolbarAppearance(_ref) {
         keymap: addLink
       }),
       icon: jsx(LinkIcon, {
+        color: "currentColor",
         label: _title
       })
     }), jsx(Separator, null)) : null;

package/dist/esm/ui/ImageBorder/index.js

@@ -7,14 +7,20 @@ import { useCallback, useEffect, useRef, useState } from 'react';
 
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { jsx } from '@emotion/react';
-import { BorderIcon } from '@atlaskit/editor-common/icons';
+import { BorderIcon as LegacyBorderIcon } from '@atlaskit/editor-common/icons';
 import { imageBorderMessages as messages } from '@atlaskit/editor-common/media';
 import { DropdownMenuSharedCssClassName } from '@atlaskit/editor-common/styles';
 import { Popup } from '@atlaskit/editor-common/ui';
 import { borderColorPalette, borderPaletteTooltipMessages, ColorPalette } from '@atlaskit/editor-common/ui-color';
 import { ArrowKeyNavigationProvider, ArrowKeyNavigationType, DropdownMenu, ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { hexToEditorBorderPaletteColor } from '@atlaskit/editor-palette';
+import BorderIcon from '@atlaskit/icon/core/border';
+import BorderWeightMediumIcon from '@atlaskit/icon/core/border-weight-medium';
+import BorderWeightThickIcon from '@atlaskit/icon/core/border-weight-thick';
+import BorderWeightThinIcon from '@atlaskit/icon/core/border-weight-thin';
 import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import ChevronDownIcon from '@atlaskit/icon/utility/chevron-down';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { Text } from '@atlaskit/primitives';
 import Tooltip from '@atlaskit/tooltip';
 import { buttonStyle, buttonWrapperStyle, contextualMenuArrow, contextualMenuColorIcon, contextualSubMenu, dropdownOptionButton, dropdownWrapper, itemSpacing, line, menuItemDimensions, toolbarButtonWrapper } from './styles';
@@ -99,14 +105,20 @@ var ImageBorder = function ImageBorder(_ref) {
   }, [isColorSubmenuOpen, isSizeSubmenuOpen, isOpenByKeyboard]);
   var borderSizeOptions = [{
     name: formatMessage(messages.borderSizeSubtle),
-    value: 1
+    value: 1,
+    icon: BorderWeightThinIcon
   }, {
     name: formatMessage(messages.borderSizeMedium),
-    value: 2
+    value: 2,
+    icon: BorderWeightMediumIcon
   }, {
     name: formatMessage(messages.borderSizeBold),
-    value: 3
+    value: 3,
+    icon: BorderWeightThickIcon
   }];
+  var borderColorSelectStyles = function borderColorSelectStyles() {
+    return !fg('platform-visual-refresh-icons') ? contextualMenuColorIcon(color && hexToEditorBorderPaletteColor(color)) : contextualMenuArrow;
+  };
   var items = [{
     content: jsx("div", null, jsx("button", {
       ref: dropDownColorOptionButton,
@@ -123,7 +135,7 @@ var ImageBorder = function ImageBorder(_ref) {
         });
       }
     }, jsx(Text, null, formatMessage(messages.borderColor)), jsx("div", {
-      css: contextualMenuColorIcon(color && hexToEditorBorderPaletteColor(color))
+      css: borderColorSelectStyles
     })), jsx("div", {
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
       className: DropdownMenuSharedCssClassName.SUBMENU,
@@ -207,7 +219,9 @@ var ImageBorder = function ImageBorder(_ref) {
       ref: handleSubMenuRef
     }, borderSizeOptions.map(function (_ref2, idx) {
       var name = _ref2.name,
-        value = _ref2.value;
+        value = _ref2.value,
+        icon = _ref2.icon;
+      var ButtonIcon = icon;
       return jsx(Tooltip, {
         key: idx,
         content: name
@@ -241,9 +255,15 @@ var ImageBorder = function ImageBorder(_ref) {
         onMouseDown: function onMouseDown(e) {
           e.preventDefault();
         }
-      }, jsx("div", {
+      }, !fg('platform-visual-refresh-icons') ?
+      //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("div", {
         css: line(value, value === size),
         role: "presentation"
+      }) : jsx(ButtonIcon, {
+        color: value === size ? "var(--ds-icon-inverse, #FFFFFF)" : 'currentColor',
+        spacing: "spacious",
+        label: name
       }))));
     }))))),
     'data-testid': 'dropdown-item__Size',
@@ -278,7 +298,10 @@ var ImageBorder = function ImageBorder(_ref) {
     spacing: "compact",
     "aria-label": enabled ? formatMessage(messages.removeBorder) : formatMessage(messages.addBorder),
     iconBefore: jsx(BorderIcon, {
-      label: ""
+      color: "currentColor",
+      label: "",
+      spacing: "spacious",
+      LEGACY_fallbackIcon: LegacyBorderIcon
     }),
     title: enabled ? formatMessage(messages.removeBorder) : formatMessage(messages.addBorder)
   }), jsx("div", {
@@ -293,8 +316,11 @@ var ImageBorder = function ImageBorder(_ref) {
     "aria-label": formatMessage(messages.borderOptions),
     title: formatMessage(messages.borderOptions),
     spacing: "compact",
-    iconBefore: jsx(ExpandIcon, {
-      label: ""
+    iconBefore: jsx(ChevronDownIcon, {
+      color: "currentColor",
+      spacing: "spacious",
+      label: "",
+      LEGACY_fallbackIcon: ExpandIcon
     }),
     onClick: function onClick() {
       setIsOpen(!isOpen);

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-media",
-	"version": "1.36.1",
+	"version": "1.36.2",
 	"description": "Media plugin for @atlaskit/editor-core",
 	"author": "Atlassian Pty Ltd",
 	"license": "Apache-2.0",
@@ -139,6 +139,9 @@
 		},
 		"editor_nest_media_and_codeblock_in_quotes_jira": {
 			"type": "boolean"
+		},
+		"platform-visual-refresh-icons": {
+			"type": "boolean"
 		}
 	},
 	"stricter": {