@atlaskit/editor-plugin-table 7.28.9 → 7.28.10

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

@@ -19,10 +19,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';
@@ -33,8 +42,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';
 const arrowsList = new Set(['ArrowRight', 'ArrowLeft']);
+const elementBeforeIconStyles = xcss({
+  marginRight: 'space.negative.075',
+  display: 'flex'
+});
+// eslint-disable-next-line @repo/internal/react/no-class-components
 export class ContextualMenu extends Component {
   constructor(...args) {
     super(...args);
@@ -90,13 +104,13 @@ export class ContextualMenu extends 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
@@ -178,22 +192,28 @@ export class ContextualMenu extends 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 class ContextualMenu extends 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
       };
     });
@@ -246,11 +271,14 @@ export class ContextualMenu extends 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
       };
     });
@@ -285,14 +313,15 @@ export class ContextualMenu extends 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
       };
@@ -320,14 +349,15 @@ export class ContextualMenu extends 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
       };
     });
@@ -354,14 +384,15 @@ export class ContextualMenu extends 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/es2019/ui/FloatingContextualMenu/styles.js

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

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

@@ -20,7 +20,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';
@@ -32,7 +34,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';
 const MapDragMenuOptionIdToMessage = {
   add_row_above: {
     message: messages.addRowAbove,
@@ -97,6 +99,10 @@ const getGroupedDragMenuConfig = tableSortColumnReorder => {
   tableSortColumnReorder ? groupedDragMenuConfig.unshift(sortColumnItems) : groupedDragMenuConfig.push(sortColumnItems);
   return groupedDragMenuConfig;
 };
+const elementBeforeIconStyles = xcss({
+  marginRight: 'space.negative.075',
+  display: 'flex'
+});
 const convertToDropdownItems = (dragMenuConfig, formatMessage, tableSortColumnReorder = false, selectionRect) => {
   const groupedDragMenuConfig = getGroupedDragMenuConfig(tableSortColumnReorder);
   let menuItemsArr = [...Array(groupedDragMenuConfig.length)].map(() => []);
@@ -144,12 +150,13 @@ const convertToDropdownItems = (dragMenuConfig, formatMessage, tableSortColumnRe
         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", {
@@ -256,13 +263,13 @@ const DragMenu = /*#__PURE__*/React.memo(({
       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/es2019/ui/FloatingDragMenu/styles.js

@@ -11,12 +11,6 @@ export const cellColourPreviewStyles = selectedColor => css({
   }
 });
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const 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 const dragMenuBackgroundColorStyles = (tableSortColumnReorder = false) => css`
 	.${ClassName.DRAG_SUBMENU} {

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

@@ -1,6 +1,20 @@
 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';
@@ -69,48 +83,56 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, hasMergedC
   const 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
   }];
   const 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,
     getTargetIndex: selectionRect => selectionRect.top - 1
   }, {
     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,
     getTargetIndex: selectionRect => selectionRect.bottom
   }] : [{
     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,
     getTargetIndex: selectionRect => selectionRect.left - 1
   }, {
     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,
@@ -119,21 +141,25 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, hasMergedC
   const 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
   }] : [];
   const sortConfigs = [...sortOptions.map(({
     label,
     order,
-    icon
+    icon,
+    iconFallback
   }) => ({
     id: `sort_column_${order}`,
     title: `Sort ${label}`,
     disabled: hasMergedCellsInTable,
-    icon,
+    icon: icon,
+    iconFallback: iconFallback,
     onClick: (state, dispatch) => {
       sortColumnWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, index !== null && index !== void 0 ? index : 0, order)(state, dispatch);
       return true;
@@ -143,11 +169,13 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, hasMergedC
     label,
     offset,
     icon,
+    iconFallback,
     keymap
   }) => ({
     id: `add_${direction}_${label}`,
     title: `Add ${direction} ${label}`,
-    icon,
+    icon: icon,
+    iconFallback: iconFallback,
     onClick: (state, dispatch) => {
       if (direction === 'row') {
         insertRowWithAnalytics(editorAnalyticsAPI, tableDuplicateCellColouring)(INPUT_METHOD.TABLE_CONTEXT_MENU, {
@@ -176,7 +204,8 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, hasMergedC
       }
       return false;
     },
-    icon: EditorLayoutThreeEqualIcon
+    icon: TableColumnsDistributeIcon,
+    iconFallback: EditorLayoutThreeEqualIcon
   } : undefined, {
     id: 'clear_cells',
     title: 'Clear cells',
@@ -184,7 +213,8 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, hasMergedC
       emptyMultipleCellsWithAnalytics(editorAnalyticsAPI)(INPUT_METHOD.TABLE_CONTEXT_MENU, targetCellPosition)(state, dispatch);
       return true;
     },
-    icon: CrossCircleIcon,
+    icon: TableCellClearIcon,
+    iconFallback: CrossCircleIcon,
     keymap: tooltip(backspace)
   }, {
     id: `delete_${direction}`,
@@ -197,12 +227,14 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, hasMergedC
       }
       return true;
     },
-    icon: RemoveIcon,
+    icon: direction === 'row' ? TableRowDeleteIcon : TableColumnDeleteIcon,
+    iconFallback: RemoveIcon,
     keymap: direction === 'row' ? tooltip(deleteRow) : tooltip(deleteColumn)
   }, ...moveOptions.map(({
     label,
     canMove,
     icon,
+    iconFallback,
     keymap,
     getOriginIndexes,
     getTargetIndex
@@ -210,7 +242,8 @@ export const getDragMenuConfig = (direction, getEditorContainerWidth, hasMergedC
     id: `move_${direction}_${label}`,
     title: `Move ${direction} ${label}`,
     disabled: !canMove,
-    icon,
+    icon: icon,
+    iconFallback: iconFallback,
     onClick: (state, dispatch) => {
       if (canMove) {
         requestAnimationFrame(() => {

package/dist/esm/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';
@@ -78,6 +78,7 @@ var FloatingContextualButtonInner = /*#__PURE__*/React.memo(function (props) {
     onClick: handleClick,
     iconBefore: jsx(ExpandIcon, {
       label: "",
+      color: "currentColor",
       isFacadeDisabled: true
     }),
     "aria-label": labelCellOptions,

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

@@ -1,11 +1,15 @@
+import _defineProperty from "@babel/runtime/helpers/defineProperty";
+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) { _defineProperty(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
 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 var tableFloatingCellButtonStyles = function tableFloatingCellButtonStyles() {
   return 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(N20, ")"),
       borderRadius: "var(--ds-border-radius, 3px)",
@@ -13,7 +17,9 @@ export var tableFloatingCellButtonStyles = function tableFloatingCellButtonStyle
       // 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(contextualMenuTriggerSize + 2, "px"),
       flexDirection: 'column'
-    },
+    }, 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)",