@atlaskit/editor-plugin-table 7.28.9 → 7.28.10

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

@@ -30,10 +30,19 @@ import { closestElement } from '@atlaskit/editor-common/utils';
 import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { splitCell } from '@atlaskit/editor-tables/utils';
-import CrossCircleIcon from '@atlaskit/icon/glyph/cross-circle';
-import EditorBackgroundColorIcon from '@atlaskit/icon/glyph/editor/background-color';
-import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
+import CrossCircleIcon from '@atlaskit/icon/core/migration/cross-circle';
+import RemoveIcon from '@atlaskit/icon/core/migration/delete--editor-remove';
+import EditorBackgroundColorIcon from '@atlaskit/icon/core/migration/paint-bucket--editor-background-color';
+import PaintBucketIcon from '@atlaskit/icon/core/paint-bucket';
+import TableCellClearIcon from '@atlaskit/icon/core/table-cell-clear';
+import TableCellMergeIcon from '@atlaskit/icon/core/table-cell-merge';
+import TableCellSplitIcon from '@atlaskit/icon/core/table-cell-split';
+import TableColumnAddRightIcon from '@atlaskit/icon/core/table-column-add-right';
+import TableColumnDeleteIcon from '@atlaskit/icon/core/table-column-delete';
+import TableRowAddBelowIcon from '@atlaskit/icon/core/table-row-add-below';
+import TableRowDeleteIcon from '@atlaskit/icon/core/table-row-delete';
 import { fg } from '@atlaskit/platform-feature-flags';
+import { Box, xcss } from '@atlaskit/primitives';
 import { clearHoverSelection, hoverColumns, hoverMergedCells, hoverRows, setFocusToCellMenu, toggleContextualMenu } from '../../commands';
 import { deleteColumnsWithAnalytics, deleteRowsWithAnalytics, distributeColumnsWidthsWithAnalytics, emptyMultipleCellsWithAnalytics, insertColumnWithAnalytics, insertRowWithAnalytics, mergeCellsWithAnalytics, setColorWithAnalytics, sortColumnWithAnalytics, splitCellWithAnalytics } from '../../commands-with-analytics';
 import { getPluginState } from '../../pm-plugins/plugin-factory';
@@ -44,8 +53,13 @@ import { TableCssClassName as ClassName } from '../../types';
 import { getMergedCellsPositions, getSelectedColumnIndexes, getSelectedRowIndexes } from '../../utils';
 import { colorPalletteColumns, contextualMenuDropdownWidth, contextualMenuDropdownWidthDnD } from '../consts';
 import { AddColRightIcon, AddRowBelowIcon, MergeCellsIcon, SplitCellIcon } from '../icons';
-import { cellColourPreviewStyles, elementBeforeIconStyles } from './styles';
+import { cellColourPreviewStyles } from './styles';
 var arrowsList = new Set(['ArrowRight', 'ArrowLeft']);
+var elementBeforeIconStyles = xcss({
+  marginRight: 'space.negative.075',
+  display: 'flex'
+});
+// eslint-disable-next-line @repo/internal/react/no-class-components
 export var ContextualMenu = /*#__PURE__*/function (_Component) {
   _inherits(ContextualMenu, _Component);
   var _super = _createSuper(ContextualMenu);
@@ -100,13 +114,13 @@ export var 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
-          jsx("span", {
-            css: elementBeforeIconStyles
-          }, jsx(EditorBackgroundColorIcon, {
+          elemBefore: isDragAndDropEnabled ? jsx(Box, {
+            xcss: elementBeforeIconStyles
+          }, jsx(PaintBucketIcon, {
+            color: "currentColor",
+            spacing: "spacious",
             label: formatMessage(messages.backgroundColor),
-            size: "medium"
+            LEGACY_fallbackIcon: EditorBackgroundColorIcon
           })) : undefined,
           elemAfter:
           // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766
@@ -182,22 +196,28 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
             name: 'merge'
           },
           isDisabled: !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
-          jsx("span", {
-            css: elementBeforeIconStyles
-          }, jsx(MergeCellsIcon, null)) : undefined
+          elemBefore: isDragAndDropEnabled ? jsx(Box, {
+            xcss: elementBeforeIconStyles
+          }, jsx(TableCellMergeIcon, {
+            color: "currentColor",
+            spacing: "spacious",
+            label: formatMessage(messages.mergeCells),
+            LEGACY_fallbackIcon: MergeCellsIcon
+          })) : undefined
         }, {
           content: formatMessage(messages.splitCell),
           value: {
             name: 'split'
           },
           isDisabled: !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
-          jsx("span", {
-            css: elementBeforeIconStyles
-          }, jsx(SplitCellIcon, null)) : undefined
+          elemBefore: isDragAndDropEnabled ? jsx(Box, {
+            xcss: elementBeforeIconStyles
+          }, jsx(TableCellSplitIcon, {
+            color: "currentColor",
+            spacing: "spacious",
+            label: formatMessage(messages.splitCell),
+            LEGACY_fallbackIcon: SplitCellIcon
+          })) : undefined
         }];
       }
       return [];
@@ -220,9 +240,14 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         }, tooltip(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
-        jsx("span", {
-          css: elementBeforeIconStyles
-        }, jsx(AddColRightIcon, null)) : undefined,
+        jsx(Box, {
+          xcss: elementBeforeIconStyles
+        }, jsx(TableColumnAddRightIcon, {
+          color: "currentColor",
+          spacing: "spacious",
+          label: formatMessage(messages.addColumnRight),
+          LEGACY_fallbackIcon: AddColRightIcon
+        })) : undefined,
         'aria-label': fg('platform_editor_announce_cell_options_hotkeys') ? tooltip(addColumnAfter, String(content)) : undefined
       };
     });
@@ -242,11 +267,14 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(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
-        jsx("span", {
-          css: elementBeforeIconStyles
-        }, jsx(AddRowBelowIcon, null)) : undefined,
+        elemBefore: isDragAndDropEnabled ? jsx(Box, {
+          xcss: elementBeforeIconStyles
+        }, jsx(TableRowAddBelowIcon, {
+          color: "currentColor",
+          spacing: "spacious",
+          label: formatMessage(messages.addRowBelow),
+          LEGACY_fallbackIcon: AddRowBelowIcon
+        })) : undefined,
         'aria-label': fg('platform_editor_announce_cell_options_hotkeys') ? tooltip(addRowAfter, String(content)) : undefined
       };
     });
@@ -275,14 +303,15 @@ export var ContextualMenu = /*#__PURE__*/function (_Component) {
         elemAfter: jsx("div", {
           css: shortcutStyle
         }, tooltip(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
-        jsx("span", {
-          css: elementBeforeIconStyles
-        }, jsx(CrossCircleIcon, {
+        elemBefore: isDragAndDropEnabled ? jsx(Box, {
+          xcss: elementBeforeIconStyles
+        }, jsx(TableCellClearIcon, {
+          color: "currentColor",
+          spacing: "spacious",
           label: formatMessage(messages.clearCells, {
             0: Math.max(noOfColumns, noOfRows)
-          })
+          }),
+          LEGACY_fallbackIcon: CrossCircleIcon
         })) : undefined,
         'aria-label': fg('platform_editor_announce_cell_options_hotkeys') ? tooltip(backspace, String(content)) : undefined
       };
@@ -304,14 +333,15 @@ export var 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
-        jsx("span", {
-          css: elementBeforeIconStyles
-        }, jsx(RemoveIcon, {
+        elemBefore: isDragAndDropEnabled ? jsx(Box, {
+          xcss: elementBeforeIconStyles
+        }, jsx(TableColumnDeleteIcon, {
+          color: "currentColor",
+          spacing: "spacious",
           label: formatMessage(messages.removeColumns, {
             0: noOfColumns
-          })
+          }),
+          LEGACY_fallbackIcon: RemoveIcon
         })) : undefined
       };
     });
@@ -332,14 +362,15 @@ export var 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
-        jsx("span", {
-          css: elementBeforeIconStyles
-        }, jsx(RemoveIcon, {
+        elemBefore: isDragAndDropEnabled ? jsx(Box, {
+          xcss: elementBeforeIconStyles
+        }, jsx(TableRowDeleteIcon, {
+          color: "currentColor",
+          spacing: "spacious",
           label: formatMessage(messages.removeRows, {
             0: noOfRows
-          })
+          }),
+          LEGACY_fallbackIcon: RemoveIcon
         })) : undefined
       };
     });

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

@@ -14,15 +14,6 @@ export var cellColourPreviewStyles = function cellColourPreviewStyles(selectedCo
     }
   });
 };
-
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var elementBeforeIconStyles = 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`
 export var tablePopupStyles = function tablePopupStyles(isDragAndDropEnabled
 // eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation
 ) {

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

@@ -22,7 +22,9 @@ import { hexToEditorBackgroundPaletteColor } from '@atlaskit/editor-palette';
 import { shortcutStyle } from '@atlaskit/editor-shared-styles/shortcut';
 import { TableMap } from '@atlaskit/editor-tables/table-map';
 import { findCellRectClosestToPos, getSelectionRect, isSelectionType } from '@atlaskit/editor-tables/utils';
-import EditorBackgroundColorIcon from '@atlaskit/icon/glyph/editor/background-color';
+import EditorBackgroundColorIcon from '@atlaskit/icon/core/migration/paint-bucket--editor-background-color';
+import PaintBucketIcon from '@atlaskit/icon/core/paint-bucket';
+import { Box, xcss } from '@atlaskit/primitives';
 import Toggle from '@atlaskit/toggle';
 import { clearHoverSelection, hoverColumns, hoverRows } from '../../commands';
 import { setColorWithAnalytics, toggleHeaderColumnWithAnalytics, toggleHeaderRowWithAnalytics, toggleNumberColumnWithAnalytics } from '../../commands-with-analytics';
@@ -34,7 +36,7 @@ import { checkIfHeaderColumnEnabled, checkIfHeaderRowEnabled, checkIfNumberColum
 import { getDragMenuConfig } from '../../utils/drag-menu';
 import { colorPalletteColumns } from '../consts';
 import { DropdownMenu } from './DropdownMenu';
-import { cellColourPreviewStyles, dragMenuBackgroundColorStyles, elementBeforeIconStyles, toggleStyles } from './styles';
+import { cellColourPreviewStyles, dragMenuBackgroundColorStyles, toggleStyles } from './styles';
 var MapDragMenuOptionIdToMessage = {
   add_row_above: {
     message: messages.addRowAbove,
@@ -99,6 +101,10 @@ var getGroupedDragMenuConfig = function getGroupedDragMenuConfig(tableSortColumn
   tableSortColumnReorder ? groupedDragMenuConfig.unshift(sortColumnItems) : groupedDragMenuConfig.push(sortColumnItems);
   return groupedDragMenuConfig;
 };
+var elementBeforeIconStyles = 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;
@@ -150,12 +156,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
-      jsx("span", {
-        css: elementBeforeIconStyles
+      elemBefore: item.icon ? jsx(Box, {
+        xcss: elementBeforeIconStyles
       }, 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 ? jsx("div", {
@@ -253,13 +260,13 @@ var DragMenu = /*#__PURE__*/React.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
-      jsx("span", {
-        css: elementBeforeIconStyles
-      }, jsx(EditorBackgroundColorIcon, {
+      elemBefore: jsx(Box, {
+        xcss: elementBeforeIconStyles
+      }, jsx(PaintBucketIcon, {
+        color: "currentColor",
+        spacing: "spacious",
         label: formatMessage(messages.backgroundColor),
-        size: "medium"
+        LEGACY_fallbackIcon: EditorBackgroundColorIcon
       })),
       elemAfter: jsx("div", {
         // eslint-disable-next-line @atlaskit/ui-styling-standard/no-classname-prop -- Ignored via go/DSP-18766

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

@@ -15,12 +15,6 @@ export var cellColourPreviewStyles = function cellColourPreviewStyles(selectedCo
   });
 };
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export var elementBeforeIconStyles = 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
 export var dragMenuBackgroundColorStyles = function dragMenuBackgroundColorStyles() {
   var tableSortColumnReorder = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : false;

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

@@ -2,6 +2,20 @@ import _toConsumableArray from "@babel/runtime/helpers/toConsumableArray";
 import { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import { addColumnAfter, addColumnBefore, addRowAfter, addRowBefore, backspace, deleteColumn, deleteRow, moveColumnLeft, moveColumnRight, moveRowDown, moveRowUp, tooltip } from '@atlaskit/editor-common/keymaps';
+import SortAscendingIcon from '@atlaskit/icon/core/sort-ascending';
+import SortDescendingIcon from '@atlaskit/icon/core/sort-descending';
+import TableCellClearIcon from '@atlaskit/icon/core/table-cell-clear';
+import TableColumnAddLeftIcon from '@atlaskit/icon/core/table-column-add-left';
+import TableColumnAddRightIcon from '@atlaskit/icon/core/table-column-add-right';
+import TableColumnDeleteIcon from '@atlaskit/icon/core/table-column-delete';
+import TableColumnMoveLeftIcon from '@atlaskit/icon/core/table-column-move-left';
+import TableColumnMoveRightIcon from '@atlaskit/icon/core/table-column-move-right';
+import TableColumnsDistributeIcon from '@atlaskit/icon/core/table-columns-distribute';
+import TableRowAddAboveIcon from '@atlaskit/icon/core/table-row-add-above';
+import TableRowAddBelowIcon from '@atlaskit/icon/core/table-row-add-below';
+import TableRowDeleteIcon from '@atlaskit/icon/core/table-row-delete';
+import TableRowMoveDownIcon from '@atlaskit/icon/core/table-row-move-down';
+import TableRowMoveUpIcon from '@atlaskit/icon/core/table-row-move-up';
 import ArrowDownIcon from '@atlaskit/icon/glyph/arrow-down';
 import ArrowLeftIcon from '@atlaskit/icon/glyph/arrow-left';
 import ArrowRightIcon from '@atlaskit/icon/glyph/arrow-right';
@@ -76,27 +90,32 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
   var addOptions = direction === 'row' ? [{
     label: 'above',
     offset: 0,
-    icon: AddRowAboveIcon,
+    icon: TableRowAddAboveIcon,
+    iconFallback: AddRowAboveIcon,
     keymap: addRowBefore
   }, {
     label: 'below',
     offset: 1,
-    icon: AddRowBelowIcon,
+    icon: TableRowAddBelowIcon,
+    iconFallback: AddRowBelowIcon,
     keymap: addRowAfter
   }] : [{
     label: 'left',
     offset: 0,
-    icon: AddColLeftIcon,
+    icon: TableColumnAddLeftIcon,
+    iconFallback: AddColLeftIcon,
     keymap: addColumnBefore
   }, {
     label: 'right',
     offset: 1,
-    icon: AddColRightIcon,
+    icon: TableColumnAddRightIcon,
+    iconFallback: AddColRightIcon,
     keymap: addColumnAfter
   }];
   var moveOptions = direction === 'row' ? [{
     label: 'up',
-    icon: ArrowUpIcon,
+    icon: TableRowMoveUpIcon,
+    iconFallback: ArrowUpIcon,
     keymap: 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: getSelectedRowIndexes,
@@ -105,7 +124,8 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
     }
   }, {
     label: 'down',
-    icon: ArrowDownIcon,
+    icon: TableRowMoveDownIcon,
+    iconFallback: ArrowDownIcon,
     keymap: 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: getSelectedRowIndexes,
@@ -114,7 +134,8 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
     }
   }] : [{
     label: 'left',
-    icon: ArrowLeftIcon,
+    icon: TableColumnMoveLeftIcon,
+    iconFallback: ArrowLeftIcon,
     keymap: 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: getSelectedColumnIndexes,
@@ -123,7 +144,8 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
     }
   }, {
     label: 'right',
-    icon: ArrowRightIcon,
+    icon: TableColumnMoveRightIcon,
+    iconFallback: ArrowRightIcon,
     keymap: 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: getSelectedColumnIndexes,
@@ -134,21 +156,25 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
   var sortOptions = direction === 'column' ? [{
     label: 'increasing',
     order: SortOrder.ASC,
-    icon: HipchatChevronDoubleUpIcon
+    icon: SortAscendingIcon,
+    iconFallback: HipchatChevronDoubleUpIcon
   }, {
     label: 'decreasing',
     order: SortOrder.DESC,
-    icon: HipchatChevronDoubleDownIcon
+    icon: SortDescendingIcon,
+    iconFallback: HipchatChevronDoubleDownIcon
   }] : [];
   var sortConfigs = _toConsumableArray(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) {
         sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, index !== null && index !== void 0 ? index : 0, order)(state, dispatch);
         return true;
@@ -159,11 +185,13 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
     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') {
           insertRowWithAnalytics(editorAnalyticsAPI, tableDuplicateCellColouring)(INPUT_METHOD.TABLE_CONTEXT_MENU, {
@@ -193,7 +221,8 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
       }
       return false;
     },
-    icon: EditorLayoutThreeEqualIcon
+    icon: TableColumnsDistributeIcon,
+    iconFallback: EditorLayoutThreeEqualIcon
   } : undefined, {
     id: 'clear_cells',
     title: 'Clear cells',
@@ -201,7 +230,8 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
       emptyMultipleCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, targetCellPosition)(state, dispatch);
       return true;
     },
-    icon: CrossCircleIcon,
+    icon: TableCellClearIcon,
+    iconFallback: CrossCircleIcon,
     keymap: tooltip(backspace)
   }, {
     id: "delete_".concat(direction),
@@ -214,12 +244,14 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
       }
       return true;
     },
-    icon: RemoveIcon,
+    icon: direction === 'row' ? TableRowDeleteIcon : TableColumnDeleteIcon,
+    iconFallback: RemoveIcon,
     keymap: direction === 'row' ? tooltip(deleteRow) : tooltip(deleteColumn)
   }], _toConsumableArray(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;
@@ -228,6 +260,7 @@ export var getDragMenuConfig = function getDragMenuConfig(direction, getEditorCo
       title: "Move ".concat(direction, " ").concat(label),
       disabled: !canMove,
       icon: icon,
+      iconFallback: iconFallback,
       onClick: function onClick(state, dispatch) {
         if (canMove) {
           requestAnimationFrame(function () {

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

@@ -1,3 +1,2 @@
 export declare const cellColourPreviewStyles: (selectedColor: string) => import("@emotion/react").SerializedStyles;
-export declare const elementBeforeIconStyles: import("@emotion/react").SerializedStyles;
 export declare const tablePopupStyles: (isDragAndDropEnabled: boolean | undefined) => import("@emotion/react").SerializedStyles;

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

@@ -1,4 +1,3 @@
 export declare const cellColourPreviewStyles: (selectedColor: string) => import("@emotion/react").SerializedStyles;
-export declare const elementBeforeIconStyles: import("@emotion/react").SerializedStyles;
 export declare const dragMenuBackgroundColorStyles: (tableSortColumnReorder?: boolean) => import("@emotion/react").SerializedStyles;
 export declare const toggleStyles: import("@emotion/react").SerializedStyles;

package/dist/types/utils/drag-menu.d.ts

@@ -1,17 +1,19 @@
 /// <reference types="react" />
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { Command, DropdownOptionT, GetEditorContainerWidth, IconProps } from '@atlaskit/editor-common/types';
+import type { Command, DropdownOptionT, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { AriaLiveElementAttributes } from '@atlaskit/editor-plugin-accessibility-utils';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
+import type { UNSAFE_NewIconProps } from '@atlaskit/icon/types';
 import type { DraggableData, DraggableType, PluginInjectionAPI, TableDirection } from '../types';
 export declare const getTargetIndex: (selectedIndexes: number[], direction: DraggableData['direction']) => number;
 export declare const canMove: (sourceType: DraggableType, direction: DraggableData['direction'], totalItemsOfSourceTypeCount: number, selection: Selection, selectionRect?: Rect) => boolean;
 export type DragMenuOptionIdType = 'add_row_above' | 'add_row_below' | 'add_column_left' | 'add_column_right' | 'distribute_columns' | 'clear_cells' | 'delete_row' | 'delete_column' | 'move_column_left' | 'move_column_right' | 'move_row_up' | 'move_row_down' | 'sort_column_asc' | 'sort_column_desc';
 export interface DragMenuConfig extends Omit<DropdownOptionT<Command>, 'icon'> {
     id: DragMenuOptionIdType;
-    icon?: React.ComponentType<React.PropsWithChildren<IconProps>>;
+    icon?: React.ComponentType<React.PropsWithChildren<UNSAFE_NewIconProps>>;
+    iconFallback?: React.ComponentType<React.PropsWithChildren<UNSAFE_NewIconProps>>;
     keymap?: string;
 }
 export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, hasMergedCellsInTable: boolean, editorView: EditorView, api: PluginInjectionAPI | undefined | null, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect, editorAnalyticsAPI?: EditorAnalyticsAPI, isHeaderRowRequired?: boolean, isTableScalingEnabled?: boolean, tableDuplicateCellColouring?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, tableSortColumnReorder?: boolean, ariaNotifyPlugin?: ((message: string, ariaLiveElementAttributes?: AriaLiveElementAttributes) => void) | undefined, isCommentEditor?: boolean) => DragMenuConfig[];

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

@@ -1,3 +1,2 @@
 export declare const cellColourPreviewStyles: (selectedColor: string) => import("@emotion/react").SerializedStyles;
-export declare const elementBeforeIconStyles: import("@emotion/react").SerializedStyles;
 export declare const tablePopupStyles: (isDragAndDropEnabled: boolean | undefined) => import("@emotion/react").SerializedStyles;

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

@@ -1,4 +1,3 @@
 export declare const cellColourPreviewStyles: (selectedColor: string) => import("@emotion/react").SerializedStyles;
-export declare const elementBeforeIconStyles: import("@emotion/react").SerializedStyles;
 export declare const dragMenuBackgroundColorStyles: (tableSortColumnReorder?: boolean) => import("@emotion/react").SerializedStyles;
 export declare const toggleStyles: import("@emotion/react").SerializedStyles;

package/dist/types-ts4.5/utils/drag-menu.d.ts

@@ -1,17 +1,19 @@
 /// <reference types="react" />
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
-import type { Command, DropdownOptionT, GetEditorContainerWidth, IconProps } from '@atlaskit/editor-common/types';
+import type { Command, DropdownOptionT, GetEditorContainerWidth } from '@atlaskit/editor-common/types';
 import type { AriaLiveElementAttributes } from '@atlaskit/editor-plugin-accessibility-utils';
 import type { Selection } from '@atlaskit/editor-prosemirror/state';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 import type { Rect, TableMap } from '@atlaskit/editor-tables/table-map';
+import type { UNSAFE_NewIconProps } from '@atlaskit/icon/types';
 import type { DraggableData, DraggableType, PluginInjectionAPI, TableDirection } from '../types';
 export declare const getTargetIndex: (selectedIndexes: number[], direction: DraggableData['direction']) => number;
 export declare const canMove: (sourceType: DraggableType, direction: DraggableData['direction'], totalItemsOfSourceTypeCount: number, selection: Selection, selectionRect?: Rect) => boolean;
 export type DragMenuOptionIdType = 'add_row_above' | 'add_row_below' | 'add_column_left' | 'add_column_right' | 'distribute_columns' | 'clear_cells' | 'delete_row' | 'delete_column' | 'move_column_left' | 'move_column_right' | 'move_row_up' | 'move_row_down' | 'sort_column_asc' | 'sort_column_desc';
 export interface DragMenuConfig extends Omit<DropdownOptionT<Command>, 'icon'> {
     id: DragMenuOptionIdType;
-    icon?: React.ComponentType<React.PropsWithChildren<IconProps>>;
+    icon?: React.ComponentType<React.PropsWithChildren<UNSAFE_NewIconProps>>;
+    iconFallback?: React.ComponentType<React.PropsWithChildren<UNSAFE_NewIconProps>>;
     keymap?: string;
 }
 export declare const getDragMenuConfig: (direction: TableDirection, getEditorContainerWidth: GetEditorContainerWidth, hasMergedCellsInTable: boolean, editorView: EditorView, api: PluginInjectionAPI | undefined | null, tableMap?: TableMap, index?: number, targetCellPosition?: number, selectionRect?: Rect, editorAnalyticsAPI?: EditorAnalyticsAPI, isHeaderRowRequired?: boolean, isTableScalingEnabled?: boolean, tableDuplicateCellColouring?: boolean, isTableFixedColumnWidthsOptionEnabled?: boolean, shouldUseIncreasedScalingPercent?: boolean, tableSortColumnReorder?: boolean, ariaNotifyPlugin?: ((message: string, ariaLiveElementAttributes?: AriaLiveElementAttributes) => void) | undefined, isCommentEditor?: boolean) => DragMenuConfig[];

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/editor-plugin-table",
-	"version": "7.28.9",
+	"version": "7.28.10",
 	"description": "Table plugin for the @atlaskit/editor",
 	"publishConfig": {
 		"registry": "https://registry.npmjs.org/"
@@ -30,7 +30,7 @@
 		"@atlaskit/adf-schema": "^40.9.0",
 		"@atlaskit/button": "^20.2.0",
 		"@atlaskit/custom-steps": "^0.7.0",
-		"@atlaskit/editor-common": "^93.1.0",
+		"@atlaskit/editor-common": "^93.2.0",
 		"@atlaskit/editor-palette": "1.6.1",
 		"@atlaskit/editor-plugin-accessibility-utils": "^1.2.0",
 		"@atlaskit/editor-plugin-analytics": "^1.8.0",
@@ -117,6 +117,9 @@
 		},
 		"platform_editor_breakout_use_css": {
 			"type": "boolean"
+		},
+		"platform-visual-refresh-icons": {
+			"type": "boolean"
 		}
 	}
 }

package/src/ui/FloatingContextualButton/index.tsx

@@ -20,7 +20,7 @@ import type { Node as PMNode } from '@atlaskit/editor-prosemirror/model';
 import { findDomRefAtPos } from '@atlaskit/editor-prosemirror/utils';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
 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';
@@ -110,7 +110,7 @@ const FloatingContextualButtonInner = React.memo((props: Props & WrappedComponen
 					fg('platform_editor_a11y_table_context_menu') ? focusToContextMenuTrigger : undefined
 				}
 				onClick={handleClick}
-				iconBefore={<ExpandIcon label="" isFacadeDisabled={true} />}
+				iconBefore={<ExpandIcon label="" color="currentColor" isFacadeDisabled={true} />}
 				aria-label={labelCellOptions}
 				aria-expanded={
 					fg('platform_editor_a11y_table_context_menu') ? isContextualMenuOpen : undefined

package/src/ui/FloatingContextualButton/styles.ts

@@ -1,6 +1,7 @@
 // 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 { token } from '@atlaskit/tokens';
 
@@ -17,6 +18,10 @@ export const tableFloatingCellButtonStyles = () =>
 			// 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',
+			// 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: token('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': {