@atlaskit/editor-plugin-table 7.28.9 → 7.28.10

package/CHANGELOG.md

@@ -1,5 +1,13 @@
 # @atlaskit/editor-plugin-table
 
+## 7.28.10
+
+### Patch Changes
+
+- [#150710](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/150710)
+  [`199790376ed8a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/199790376ed8a) -
+  [ux] ED-25094: Migrate icons for table drag menu and cell menu
+
 ## 7.28.9
 
 ### Patch Changes

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

@@ -17,7 +17,7 @@ var _ui = require("@atlaskit/editor-common/ui");
 var _uiMenu = require("@atlaskit/editor-common/ui-menu");
 var _utils = require("@atlaskit/editor-prosemirror/utils");
 var _editorSharedStyles = require("@atlaskit/editor-shared-styles");
-var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/glyph/chevron-down"));
+var _chevronDown = _interopRequireDefault(require("@atlaskit/icon/utility/migration/chevron-down"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _commands = require("../../commands");
 var _types = require("../../types");
@@ -89,6 +89,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/_react.default.memo(function (p
     onClick: handleClick,
     iconBefore: (0, _react2.jsx)(_chevronDown.default, {
       label: "",
+      color: "currentColor",
       isFacadeDisabled: true
     }),
     "aria-label": labelCellOptions,

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

@@ -1,18 +1,21 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports.tableFloatingCellButtonStyles = exports.tableFloatingCellButtonSelectedStyles = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
 var _react = require("@emotion/react");
+var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
 var _colors = require("@atlaskit/theme/colors");
 var _consts = require("../consts");
-// eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
-
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2.default)(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; } // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var tableFloatingCellButtonStyles = exports.tableFloatingCellButtonStyles = function tableFloatingCellButtonStyles() {
   return (0, _react.css)({
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors -- Ignored via go/DSP-18766
-    '> div': {
+    '> div': _objectSpread({
       // Sits behind button to provide surface-color background
       background: "var(--ds-surface, ".concat(_colors.N20, ")"),
       borderRadius: "var(--ds-border-radius, 3px)",
@@ -20,7 +23,9 @@ var tableFloatingCellButtonStyles = exports.tableFloatingCellButtonStyles = func
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
       height: "".concat(_consts.contextualMenuTriggerSize + 2, "px"),
       flexDirection: 'column'
-    },
+    }, (0, _platformFeatureFlags.fg)('platform-visual-refresh-icons') && {
+      width: "var(--ds-space-250, 20px)"
+    }),
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
     '&& button': {
       background: "var(--ds-background-neutral, none)",

package/dist/cjs/ui/FloatingContextualMenu/ContextualMenu.js

@@ -28,10 +28,19 @@ var _utils = require("@atlaskit/editor-common/utils");
 var _editorPalette = require("@atlaskit/editor-palette");
 var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
 var _utils2 = require("@atlaskit/editor-tables/utils");
-var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/glyph/cross-circle"));
-var _backgroundColor = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/background-color"));
-var _remove = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/remove"));
+var _crossCircle = _interopRequireDefault(require("@atlaskit/icon/core/migration/cross-circle"));
+var _deleteEditorRemove = _interopRequireDefault(require("@atlaskit/icon/core/migration/delete--editor-remove"));
+var _paintBucketEditorBackgroundColor = _interopRequireDefault(require("@atlaskit/icon/core/migration/paint-bucket--editor-background-color"));
+var _paintBucket = _interopRequireDefault(require("@atlaskit/icon/core/paint-bucket"));
+var _tableCellClear = _interopRequireDefault(require("@atlaskit/icon/core/table-cell-clear"));
+var _tableCellMerge = _interopRequireDefault(require("@atlaskit/icon/core/table-cell-merge"));
+var _tableCellSplit = _interopRequireDefault(require("@atlaskit/icon/core/table-cell-split"));
+var _tableColumnAddRight = _interopRequireDefault(require("@atlaskit/icon/core/table-column-add-right"));
+var _tableColumnDelete = _interopRequireDefault(require("@atlaskit/icon/core/table-column-delete"));
+var _tableRowAddBelow = _interopRequireDefault(require("@atlaskit/icon/core/table-row-add-below"));
+var _tableRowDelete = _interopRequireDefault(require("@atlaskit/icon/core/table-row-delete"));
 var _platformFeatureFlags = require("@atlaskit/platform-feature-flags");
+var _primitives = require("@atlaskit/primitives");
 var _commands = require("../../commands");
 var _commandsWithAnalytics = require("../../commands-with-analytics");
 var _pluginFactory = require("../../pm-plugins/plugin-factory");
@@ -53,6 +62,11 @@ function _isNativeReflectConstruct() { try { var t = !Boolean.prototype.valueOf.
  * @jsx jsx
  */ // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 var arrowsList = new Set(['ArrowRight', 'ArrowLeft']);
+var elementBeforeIconStyles = (0, _primitives.xcss)({
+  marginRight: 'space.negative.075',
+  display: 'flex'
+});
+// eslint-disable-next-line @repo/internal/react/no-class-components
 var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(ContextualMenu, _Component);
   var _super = _createSuper(ContextualMenu);
@@ -107,13 +121,13 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
           value: {
             name: 'background'
           },
-          elemBefore: isDragAndDropEnabled ?
-          // 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.elementBeforeIconStyles
-          }, (0, _react2.jsx)(_backgroundColor.default, {
+          elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)(_primitives.Box, {
+            xcss: elementBeforeIconStyles
+          }, (0, _react2.jsx)(_paintBucket.default, {
+            color: "currentColor",
+            spacing: "spacious",
             label: formatMessage(_messages.tableMessages.backgroundColor),
-            size: "medium"
+            LEGACY_fallbackIcon: _paintBucketEditorBackgroundColor.default
           })) : undefined,
           elemAfter:
           // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -189,22 +203,28 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
             name: 'merge'
           },
           isDisabled: !(0, _transforms.canMergeCells)(state.tr),
-          elemBefore: isDragAndDropEnabled ?
-          // 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.elementBeforeIconStyles
-          }, (0, _react2.jsx)(_icons.MergeCellsIcon, null)) : undefined
+          elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)(_primitives.Box, {
+            xcss: elementBeforeIconStyles
+          }, (0, _react2.jsx)(_tableCellMerge.default, {
+            color: "currentColor",
+            spacing: "spacious",
+            label: formatMessage(_messages.tableMessages.mergeCells),
+            LEGACY_fallbackIcon: _icons.MergeCellsIcon
+          })) : undefined
         }, {
           content: formatMessage(_messages.tableMessages.splitCell),
           value: {
             name: 'split'
           },
           isDisabled: !(0, _utils2.splitCell)(state),
-          elemBefore: isDragAndDropEnabled ?
-          // 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.elementBeforeIconStyles
-          }, (0, _react2.jsx)(_icons.SplitCellIcon, null)) : undefined
+          elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)(_primitives.Box, {
+            xcss: elementBeforeIconStyles
+          }, (0, _react2.jsx)(_tableCellSplit.default, {
+            color: "currentColor",
+            spacing: "spacious",
+            label: formatMessage(_messages.tableMessages.splitCell),
+            LEGACY_fallbackIcon: _icons.SplitCellIcon
+          })) : undefined
         }];
       }
       return [];
@@ -227,9 +247,14 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         }, (0, _keymaps.tooltip)(_keymaps.addColumnAfter)),
         elemBefore: isDragAndDropEnabled ?
         // 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.elementBeforeIconStyles
-        }, (0, _react2.jsx)(_icons.AddColRightIcon, null)) : undefined,
+        (0, _react2.jsx)(_primitives.Box, {
+          xcss: elementBeforeIconStyles
+        }, (0, _react2.jsx)(_tableColumnAddRight.default, {
+          color: "currentColor",
+          spacing: "spacious",
+          label: formatMessage(_messages.tableMessages.addColumnRight),
+          LEGACY_fallbackIcon: _icons.AddColRightIcon
+        })) : undefined,
         'aria-label': (0, _platformFeatureFlags.fg)('platform_editor_announce_cell_options_hotkeys') ? (0, _keymaps.tooltip)(_keymaps.addColumnAfter, String(content)) : undefined
       };
     });
@@ -249,11 +274,14 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         elemAfter: (0, _react2.jsx)("div", {
           css: _shortcut.shortcutStyle
         }, (0, _keymaps.tooltip)(_keymaps.addRowAfter)),
-        elemBefore: isDragAndDropEnabled ?
-        // 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.elementBeforeIconStyles
-        }, (0, _react2.jsx)(_icons.AddRowBelowIcon, null)) : undefined,
+        elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)(_primitives.Box, {
+          xcss: elementBeforeIconStyles
+        }, (0, _react2.jsx)(_tableRowAddBelow.default, {
+          color: "currentColor",
+          spacing: "spacious",
+          label: formatMessage(_messages.tableMessages.addRowBelow),
+          LEGACY_fallbackIcon: _icons.AddRowBelowIcon
+        })) : undefined,
         'aria-label': (0, _platformFeatureFlags.fg)('platform_editor_announce_cell_options_hotkeys') ? (0, _keymaps.tooltip)(_keymaps.addRowAfter, String(content)) : undefined
       };
     });
@@ -282,14 +310,15 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         elemAfter: (0, _react2.jsx)("div", {
           css: _shortcut.shortcutStyle
         }, (0, _keymaps.tooltip)(_keymaps.backspace)),
-        elemBefore: isDragAndDropEnabled ?
-        // 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.elementBeforeIconStyles
-        }, (0, _react2.jsx)(_crossCircle.default, {
+        elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)(_primitives.Box, {
+          xcss: elementBeforeIconStyles
+        }, (0, _react2.jsx)(_tableCellClear.default, {
+          color: "currentColor",
+          spacing: "spacious",
           label: formatMessage(_messages.tableMessages.clearCells, {
             0: Math.max(noOfColumns, noOfRows)
-          })
+          }),
+          LEGACY_fallbackIcon: _crossCircle.default
         })) : undefined,
         'aria-label': (0, _platformFeatureFlags.fg)('platform_editor_announce_cell_options_hotkeys') ? (0, _keymaps.tooltip)(_keymaps.backspace, String(content)) : undefined
       };
@@ -311,14 +340,15 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         value: {
           name: 'delete_column'
         },
-        elemBefore: isDragAndDropEnabled ?
-        // 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.elementBeforeIconStyles
-        }, (0, _react2.jsx)(_remove.default, {
+        elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)(_primitives.Box, {
+          xcss: elementBeforeIconStyles
+        }, (0, _react2.jsx)(_tableColumnDelete.default, {
+          color: "currentColor",
+          spacing: "spacious",
           label: formatMessage(_messages.tableMessages.removeColumns, {
             0: noOfColumns
-          })
+          }),
+          LEGACY_fallbackIcon: _deleteEditorRemove.default
         })) : undefined
       };
     });
@@ -339,14 +369,15 @@ var ContextualMenu = exports.ContextualMenu = /*#__PURE__*/function (_Component)
         value: {
           name: 'delete_row'
         },
-        elemBefore: isDragAndDropEnabled ?
-        // 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.elementBeforeIconStyles
-        }, (0, _react2.jsx)(_remove.default, {
+        elemBefore: isDragAndDropEnabled ? (0, _react2.jsx)(_primitives.Box, {
+          xcss: elementBeforeIconStyles
+        }, (0, _react2.jsx)(_tableRowDelete.default, {
+          color: "currentColor",
+          spacing: "spacious",
           label: formatMessage(_messages.tableMessages.removeRows, {
             0: noOfRows
-          })
+          }),
+          LEGACY_fallbackIcon: _deleteEditorRemove.default
         })) : undefined
       };
     });

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.tablePopupStyles = exports.elementBeforeIconStyles = exports.cellColourPreviewStyles = void 0;
+exports.tablePopupStyles = exports.cellColourPreviewStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _adfSchema = require("@atlaskit/adf-schema");
@@ -20,15 +20,6 @@ var cellColourPreviewStyles = exports.cellColourPreviewStyles = function cellCol
     }
   });
 };
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var elementBeforeIconStyles = exports.elementBeforeIconStyles = (0, _react.css)({
-  marginRight: "var(--ds-space-negative-075, -6px)",
-  display: 'flex'
-});
-
-// TODO Delete this comment after verifying space token -> previous value `padding: 8px`
-// TODO Delete this comment after verifying space token -> previous value `margin-left: 4px`
 var tablePopupStyles = exports.tablePopupStyles = function tablePopupStyles(isDragAndDropEnabled
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 ) {

package/dist/cjs/ui/FloatingDragMenu/DragMenu.js

@@ -22,7 +22,9 @@ var _editorPalette = require("@atlaskit/editor-palette");
 var _shortcut = require("@atlaskit/editor-shared-styles/shortcut");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
 var _utils2 = require("@atlaskit/editor-tables/utils");
-var _backgroundColor = _interopRequireDefault(require("@atlaskit/icon/glyph/editor/background-color"));
+var _paintBucketEditorBackgroundColor = _interopRequireDefault(require("@atlaskit/icon/core/migration/paint-bucket--editor-background-color"));
+var _paintBucket = _interopRequireDefault(require("@atlaskit/icon/core/paint-bucket"));
+var _primitives = require("@atlaskit/primitives");
 var _toggle = _interopRequireDefault(require("@atlaskit/toggle"));
 var _commands = require("../../commands");
 var _commandsWithAnalytics = require("../../commands-with-analytics");
@@ -110,6 +112,10 @@ var getGroupedDragMenuConfig = function getGroupedDragMenuConfig(tableSortColumn
   tableSortColumnReorder ? groupedDragMenuConfig.unshift(sortColumnItems) : groupedDragMenuConfig.push(sortColumnItems);
   return groupedDragMenuConfig;
 };
+var elementBeforeIconStyles = (0, _primitives.xcss)({
+  marginRight: 'space.negative.075',
+  display: 'flex'
+});
 var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig, formatMessage) {
   var tableSortColumnReorder = arguments.length > 2 && arguments[2] !== undefined ? arguments[2] : false;
   var selectionRect = arguments.length > 3 ? arguments[3] : undefined;
@@ -161,12 +167,13 @@ var convertToDropdownItems = function convertToDropdownItems(dragMenuConfig, for
         name: item.id
       },
       isDisabled: item.disabled,
-      elemBefore: item.icon ?
-      // 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.elementBeforeIconStyles
+      elemBefore: item.icon ? (0, _react2.jsx)(_primitives.Box, {
+        xcss: elementBeforeIconStyles
       }, (0, _react2.jsx)(item.icon, {
-        label: formatMessage(MapDragMenuOptionIdToMessage[item.id].message, options)
+        color: "currentColor",
+        spacing: "spacious",
+        label: formatMessage(MapDragMenuOptionIdToMessage[item.id].message, options),
+        LEGACY_fallbackIcon: item.iconFallback ? item.iconFallback : undefined
       })) : undefined,
       // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/design-system/consistent-css-prop-usage -- Ignored via go/DSP-18766
       elemAfter: item.keymap ? (0, _react2.jsx)("div", {
@@ -264,13 +271,13 @@ var DragMenu = /*#__PURE__*/_react.default.memo(function (_ref) {
       value: {
         name: 'background'
       },
-      elemBefore:
-      // 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.elementBeforeIconStyles
-      }, (0, _react2.jsx)(_backgroundColor.default, {
+      elemBefore: (0, _react2.jsx)(_primitives.Box, {
+        xcss: elementBeforeIconStyles
+      }, (0, _react2.jsx)(_paintBucket.default, {
+        color: "currentColor",
+        spacing: "spacious",
         label: formatMessage(_messages.tableMessages.backgroundColor),
-        size: "medium"
+        LEGACY_fallbackIcon: _paintBucketEditorBackgroundColor.default
       })),
       elemAfter: (0, _react2.jsx)("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

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

@@ -4,7 +4,7 @@ var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefau
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.toggleStyles = exports.elementBeforeIconStyles = exports.dragMenuBackgroundColorStyles = exports.cellColourPreviewStyles = void 0;
+exports.toggleStyles = exports.dragMenuBackgroundColorStyles = exports.cellColourPreviewStyles = void 0;
 var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
 var _react = require("@emotion/react");
 var _adfSchema = require("@atlaskit/adf-schema");
@@ -21,12 +21,6 @@ var cellColourPreviewStyles = exports.cellColourPreviewStyles = function cellCol
   });
 };
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-var elementBeforeIconStyles = exports.elementBeforeIconStyles = (0, _react.css)({
-  marginRight: "var(--ds-space-negative-075, -6px)",
-  display: 'flex'
-});
-
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 var dragMenuBackgroundColorStyles = exports.dragMenuBackgroundColorStyles = function dragMenuBackgroundColorStyles() {
   var tableSortColumnReorder = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;

package/dist/cjs/utils/drag-menu.js

@@ -9,6 +9,20 @@ var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers
 var _customSteps = require("@atlaskit/custom-steps");
 var _analytics = require("@atlaskit/editor-common/analytics");
 var _keymaps = require("@atlaskit/editor-common/keymaps");
+var _sortAscending = _interopRequireDefault(require("@atlaskit/icon/core/sort-ascending"));
+var _sortDescending = _interopRequireDefault(require("@atlaskit/icon/core/sort-descending"));
+var _tableCellClear = _interopRequireDefault(require("@atlaskit/icon/core/table-cell-clear"));
+var _tableColumnAddLeft = _interopRequireDefault(require("@atlaskit/icon/core/table-column-add-left"));
+var _tableColumnAddRight = _interopRequireDefault(require("@atlaskit/icon/core/table-column-add-right"));
+var _tableColumnDelete = _interopRequireDefault(require("@atlaskit/icon/core/table-column-delete"));
+var _tableColumnMoveLeft = _interopRequireDefault(require("@atlaskit/icon/core/table-column-move-left"));
+var _tableColumnMoveRight = _interopRequireDefault(require("@atlaskit/icon/core/table-column-move-right"));
+var _tableColumnsDistribute = _interopRequireDefault(require("@atlaskit/icon/core/table-columns-distribute"));
+var _tableRowAddAbove = _interopRequireDefault(require("@atlaskit/icon/core/table-row-add-above"));
+var _tableRowAddBelow = _interopRequireDefault(require("@atlaskit/icon/core/table-row-add-below"));
+var _tableRowDelete = _interopRequireDefault(require("@atlaskit/icon/core/table-row-delete"));
+var _tableRowMoveDown = _interopRequireDefault(require("@atlaskit/icon/core/table-row-move-down"));
+var _tableRowMoveUp = _interopRequireDefault(require("@atlaskit/icon/core/table-row-move-up"));
 var _arrowDown = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-down"));
 var _arrowLeft = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-left"));
 var _arrowRight = _interopRequireDefault(require("@atlaskit/icon/glyph/arrow-right"));
@@ -83,27 +97,32 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
   var addOptions = direction === 'row' ? [{
     label: 'above',
     offset: 0,
-    icon: _icons.AddRowAboveIcon,
+    icon: _tableRowAddAbove.default,
+    iconFallback: _icons.AddRowAboveIcon,
     keymap: _keymaps.addRowBefore
   }, {
     label: 'below',
     offset: 1,
-    icon: _icons.AddRowBelowIcon,
+    icon: _tableRowAddBelow.default,
+    iconFallback: _icons.AddRowBelowIcon,
     keymap: _keymaps.addRowAfter
   }] : [{
     label: 'left',
     offset: 0,
-    icon: _icons.AddColLeftIcon,
+    icon: _tableColumnAddLeft.default,
+    iconFallback: _icons.AddColLeftIcon,
     keymap: _keymaps.addColumnBefore
   }, {
     label: 'right',
     offset: 1,
-    icon: _icons.AddColRightIcon,
+    icon: _tableColumnAddRight.default,
+    iconFallback: _icons.AddColRightIcon,
     keymap: _keymaps.addColumnAfter
   }];
   var moveOptions = direction === 'row' ? [{
     label: 'up',
-    icon: _arrowUp.default,
+    icon: _tableRowMoveUp.default,
+    iconFallback: _arrowUp.default,
     keymap: _keymaps.moveRowUp,
     canMove: canMove('table-row', -1, (_tableMap$height = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height !== void 0 ? _tableMap$height : 0, selection, selectionRect),
     getOriginIndexes: _selection.getSelectedRowIndexes,
@@ -112,7 +131,8 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
     }
   }, {
     label: 'down',
-    icon: _arrowDown.default,
+    icon: _tableRowMoveDown.default,
+    iconFallback: _arrowDown.default,
     keymap: _keymaps.moveRowDown,
     canMove: canMove('table-row', 1, (_tableMap$height2 = tableMap === null || tableMap === void 0 ? void 0 : tableMap.height) !== null && _tableMap$height2 !== void 0 ? _tableMap$height2 : 0, selection, selectionRect),
     getOriginIndexes: _selection.getSelectedRowIndexes,
@@ -121,7 +141,8 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
     }
   }] : [{
     label: 'left',
-    icon: _arrowLeft.default,
+    icon: _tableColumnMoveLeft.default,
+    iconFallback: _arrowLeft.default,
     keymap: _keymaps.moveColumnLeft,
     canMove: canMove('table-column', -1, (_tableMap$width = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width !== void 0 ? _tableMap$width : 0, selection, selectionRect),
     getOriginIndexes: _selection.getSelectedColumnIndexes,
@@ -130,7 +151,8 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
     }
   }, {
     label: 'right',
-    icon: _arrowRight.default,
+    icon: _tableColumnMoveRight.default,
+    iconFallback: _arrowRight.default,
     keymap: _keymaps.moveColumnRight,
     canMove: canMove('table-column', 1, (_tableMap$width2 = tableMap === null || tableMap === void 0 ? void 0 : tableMap.width) !== null && _tableMap$width2 !== void 0 ? _tableMap$width2 : 0, selection, selectionRect),
     getOriginIndexes: _selection.getSelectedColumnIndexes,
@@ -141,21 +163,25 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
   var sortOptions = direction === 'column' ? [{
     label: 'increasing',
     order: _customSteps.TableSortOrder.ASC,
-    icon: _chevronDoubleUp.default
+    icon: _sortAscending.default,
+    iconFallback: _chevronDoubleUp.default
   }, {
     label: 'decreasing',
     order: _customSteps.TableSortOrder.DESC,
-    icon: _chevronDoubleDown.default
+    icon: _sortDescending.default,
+    iconFallback: _chevronDoubleDown.default
   }] : [];
   var sortConfigs = (0, _toConsumableArray2.default)(sortOptions.map(function (_ref) {
     var label = _ref.label,
       order = _ref.order,
-      icon = _ref.icon;
+      icon = _ref.icon,
+      iconFallback = _ref.iconFallback;
     return {
       id: "sort_column_".concat(order),
       title: "Sort ".concat(label),
       disabled: hasMergedCellsInTable,
       icon: icon,
+      iconFallback: iconFallback,
       onClick: function onClick(state, dispatch) {
         (0, _commandsWithAnalytics.sortColumnWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, index !== null && index !== void 0 ? index : 0, order)(state, dispatch);
         return true;
@@ -166,11 +192,13 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
     var label = _ref2.label,
       offset = _ref2.offset,
       icon = _ref2.icon,
+      iconFallback = _ref2.iconFallback,
       keymap = _ref2.keymap;
     return {
       id: "add_".concat(direction, "_").concat(label),
       title: "Add ".concat(direction, " ").concat(label),
       icon: icon,
+      iconFallback: iconFallback,
       onClick: function onClick(state, dispatch) {
         if (direction === 'row') {
           (0, _commandsWithAnalytics.insertRowWithAnalytics)(editorAnalyticsAPI, tableDuplicateCellColouring)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, {
@@ -200,7 +228,8 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
       }
       return false;
     },
-    icon: _layoutThreeEqual.default
+    icon: _tableColumnsDistribute.default,
+    iconFallback: _layoutThreeEqual.default
   } : undefined, {
     id: 'clear_cells',
     title: 'Clear cells',
@@ -208,7 +237,8 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
       (0, _commandsWithAnalytics.emptyMultipleCellsWithAnalytics)(editorAnalyticsAPI)(_analytics.INPUT_METHOD.TABLE_CONTEXT_MENU, targetCellPosition)(state, dispatch);
       return true;
     },
-    icon: _crossCircle.default,
+    icon: _tableCellClear.default,
+    iconFallback: _crossCircle.default,
     keymap: (0, _keymaps.tooltip)(_keymaps.backspace)
   }, {
     id: "delete_".concat(direction),
@@ -221,12 +251,14 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
       }
       return true;
     },
-    icon: _remove.default,
+    icon: direction === 'row' ? _tableRowDelete.default : _tableColumnDelete.default,
+    iconFallback: _remove.default,
     keymap: direction === 'row' ? (0, _keymaps.tooltip)(_keymaps.deleteRow) : (0, _keymaps.tooltip)(_keymaps.deleteColumn)
   }], (0, _toConsumableArray2.default)(moveOptions.map(function (_ref3) {
     var label = _ref3.label,
       canMove = _ref3.canMove,
       icon = _ref3.icon,
+      iconFallback = _ref3.iconFallback,
       keymap = _ref3.keymap,
       getOriginIndexes = _ref3.getOriginIndexes,
       getTargetIndex = _ref3.getTargetIndex;
@@ -235,6 +267,7 @@ var getDragMenuConfig = exports.getDragMenuConfig = function getDragMenuConfig(d
       title: "Move ".concat(direction, " ").concat(label),
       disabled: !canMove,
       icon: icon,
+      iconFallback: iconFallback,
       onClick: function onClick(state, dispatch) {
         if (canMove) {
           requestAnimationFrame(function () {

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

@@ -15,7 +15,7 @@ import { Popup } from '@atlaskit/editor-common/ui';
 import { ToolbarButton } from '@atlaskit/editor-common/ui-menu';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import { akEditorSmallZIndex } from '@atlaskit/editor-shared-styles';
-import ExpandIcon from '@atlaskit/icon/glyph/chevron-down';
+import ExpandIcon from '@atlaskit/icon/utility/migration/chevron-down';
 import { fg } from '@atlaskit/platform-feature-flags';
 import { toggleContextualMenu } from '../../commands';
 import { TableCssClassName as ClassName } from '../../types';
@@ -86,6 +86,7 @@ const FloatingContextualButtonInner = /*#__PURE__*/React.memo(props => {
     onClick: handleClick,
     iconBefore: jsx(ExpandIcon, {
       label: "",
+      color: "currentColor",
       isFacadeDisabled: true
     }),
     "aria-label": labelCellOptions,

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

@@ -1,5 +1,6 @@
 // eslint-disable-next-line @atlaskit/ui-styling-standard/use-compiled -- Ignored via go/DSP-18766
 import { css } from '@emotion/react';
+import { fg } from '@atlaskit/platform-feature-flags';
 import { N0, N20, N30A, N700 } from '@atlaskit/theme/colors';
 import { contextualMenuTriggerSize } from '../consts';
 export const tableFloatingCellButtonStyles = () => css({
@@ -11,7 +12,11 @@ export const tableFloatingCellButtonStyles = () => css({
     display: 'flex',
     // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values -- Ignored via go/DSP-18766
     height: `${contextualMenuTriggerSize + 2}px`,
-    flexDirection: 'column'
+    flexDirection: 'column',
+    // eslint-disable-next-line @atlaskit/ui-styling-standard/no-imported-style-values, @atlaskit/ui-styling-standard/no-unsafe-values
+    ...(fg('platform-visual-refresh-icons') && {
+      width: "var(--ds-space-250, 20px)"
+    })
   },
   // eslint-disable-next-line @atlaskit/ui-styling-standard/no-nested-selectors, @atlaskit/ui-styling-standard/no-unsafe-selectors -- Ignored via go/DSP-18766
   '&& button': {