@atlaskit/editor-plugin-table 7.28.8 → 7.28.10

package/CHANGELOG.md

@@ -1,5 +1,21 @@
 # @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
+
+- [#150125](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/pull-requests/150125)
+  [`c9d8f549c024a`](https://stash.atlassian.com/projects/CONFCLOUD/repos/confluence-frontend/commits/c9d8f549c024a) -
+  [ux] ED-24539 Fix live view toggle and column sorting in live view pages
+
 ## 7.28.8
 
 ### Patch Changes

package/dist/cjs/nodeviews/TableComponent.js

@@ -358,7 +358,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
   (0, _createClass2.default)(TableComponent, [{
     key: "componentDidMount",
     value: function componentDidMount() {
-      var _this$props$pluginInj, _this$table2, _this$table3;
+      var _this$table, _this$table2, _this$table3;
       var _this$props7 = this.props,
         allowColumnResizing = _this$props7.allowColumnResizing,
         eventDispatcher = _this$props7.eventDispatcher,
@@ -367,12 +367,7 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
         getNode = _this$props7.getNode,
         getEditorFeatureFlags = _this$props7.getEditorFeatureFlags,
         isTableScalingEnabled = _this$props7.isTableScalingEnabled;
-      var _ref = ((_this$props$pluginInj = this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 || (_this$props$pluginInj = _this$props$pluginInj.editorViewMode) === null || _this$props$pluginInj === void 0 ? void 0 : _this$props$pluginInj.sharedState.currentState()) || {},
-        mode = _ref.mode;
-      if (mode === 'view') {
-        var _this$table;
-        this === null || this === void 0 || (_this$table = this.table) === null || _this$table === void 0 || _this$table.addEventListener('mouseenter', this.handleMouseEnter);
-      }
+      this === null || this === void 0 || (_this$table = this.table) === null || _this$table === void 0 || _this$table.addEventListener('mouseenter', this.handleMouseEnter);
       this === null || this === void 0 || (_this$table2 = this.table) === null || _this$table2 === void 0 || _this$table2.addEventListener('mouseout', this.handleMouseOut);
       this === null || this === void 0 || (_this$table3 = this.table) === null || _this$table3 === void 0 || _this$table3.addEventListener('mouseover', this.handleMouseOver);
       var _getEditorFeatureFlag = getEditorFeatureFlags(),
@@ -647,8 +642,8 @@ var TableComponent = /*#__PURE__*/function (_React$Component) {
       var isNoOfColumnsChanged = (0, _utils5.tablesHaveDifferentNoOfColumns)(currentTable, previousTable);
       var isNoOfRowsChanged = (0, _utils5.tablesHaveDifferentNoOfRows)(currentTable, previousTable);
       if (isNoOfColumnsChanged || isNoOfRowsChanged) {
-        var _this$props$pluginInj2;
-        (_this$props$pluginInj2 = this.props.pluginInjectionApi) === null || _this$props$pluginInj2 === void 0 || (_this$props$pluginInj2 = _this$props$pluginInj2.accessibilityUtils) === null || _this$props$pluginInj2 === void 0 || _this$props$pluginInj2.actions.ariaNotify((0, _utils5.getAssistiveMessage)(previousTable, currentTable, this.props.intl), {
+        var _this$props$pluginInj;
+        (_this$props$pluginInj = this.props.pluginInjectionApi) === null || _this$props$pluginInj === void 0 || (_this$props$pluginInj = _this$props$pluginInj.accessibilityUtils) === null || _this$props$pluginInj === void 0 || _this$props$pluginInj.actions.ariaNotify((0, _utils5.getAssistiveMessage)(previousTable, currentTable, this.props.intl), {
           priority: 'important'
         });
       }

package/dist/cjs/plugin.js

@@ -275,7 +275,7 @@ var tablesPlugin = function tablesPlugin(_ref) {
       }, {
         name: 'tableViewModeSort',
         plugin: function plugin() {
-          return api !== null && api !== void 0 && api.editorViewMode ? (0, _viewModeSort.createPlugin)(api.editorViewMode) : undefined;
+          return api !== null && api !== void 0 && api.editorViewMode ? (0, _viewModeSort.createPlugin)(api) : undefined;
         }
       }, {
         name: 'tableLocalId',

package/dist/cjs/pm-plugins/view-mode-sort/index.js

@@ -12,10 +12,10 @@ var _react = require("react");
 var _reactDom = _interopRequireDefault(require("react-dom"));
 var _reactIntlNext = require("react-intl-next");
 var _safePlugin = require("@atlaskit/editor-common/safe-plugin");
-var _table3 = require("@atlaskit/editor-common/table");
 var _types = require("@atlaskit/editor-common/types");
 var _view = require("@atlaskit/editor-prosemirror/view");
 var _tableMap = require("@atlaskit/editor-tables/table-map");
+var _SortingIconWrapper = require("../../ui/icons/SortingIconWrapper");
 var _pluginFactory = require("../plugin-factory");
 var _consts = require("./consts");
 var _pluginKey = require("./plugin-key");
@@ -29,7 +29,7 @@ function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t =
  * Instead of making changes to the ProseMirror document, the plugin sorts the table rows in the DOM. This allows the sorting to be
  * visible to the user without affecting the document's content.
  */
-var createPlugin = exports.createPlugin = function createPlugin(editorViewModeAPI) {
+var createPlugin = exports.createPlugin = function createPlugin(api) {
   return new _safePlugin.SafePlugin({
     state: {
       init: function init() {
@@ -40,9 +40,10 @@ var createPlugin = exports.createPlugin = function createPlugin(editorViewModeAP
         };
       },
       apply: function apply(tr, pluginState, oldState) {
+        var _api$editorViewMode;
         // TODO - move this mode check to plugin creation if possible. Right now it's here because the initial state
         // does not appear correct when the plugin is created.
-        var _ref = (editorViewModeAPI === null || editorViewModeAPI === void 0 ? void 0 : editorViewModeAPI.sharedState.currentState()) || {},
+        var _ref = ((_api$editorViewMode = api.editorViewMode) === null || _api$editorViewMode === void 0 ? void 0 : _api$editorViewMode.sharedState.currentState()) || {},
           mode = _ref.mode;
         if (mode !== 'view') {
           return pluginState;
@@ -101,7 +102,6 @@ var createPlugin = exports.createPlugin = function createPlugin(editorViewModeAP
             var map = _tableMap.TableMap.get(tableNode);
             var hasMergedCells = new Set(map.map).size !== map.map.length;
             map.mapByRow[0].forEach(function (cell, index) {
-              // return pluginState;
               decs.push(_view.Decoration.widget(cell + pos + 2, function () {
                 var _sort$tableId;
                 var element = document.createElement('div');
@@ -121,11 +121,12 @@ var createPlugin = exports.createPlugin = function createPlugin(editorViewModeAP
                   getIntl = _getPluginState.getIntl;
                 _reactDom.default.render( /*#__PURE__*/(0, _react.createElement)(_reactIntlNext.RawIntlProvider, {
                   value: getIntl()
-                }, /*#__PURE__*/(0, _react.createElement)(_table3.SortingIcon, {
+                }, /*#__PURE__*/(0, _react.createElement)(_SortingIconWrapper.SortingIconWrapper, {
                   isSortingAllowed: !hasMergedCells,
                   sortOrdered: sortOrdered,
                   onClick: function onClick() {},
-                  onKeyDown: function onKeyDown() {}
+                  onKeyDown: function onKeyDown() {},
+                  api: api
                 })), element);
                 return element;
               }));
@@ -152,9 +153,9 @@ var createPlugin = exports.createPlugin = function createPlugin(editorViewModeAP
     },
     key: _pluginKey.tableViewModeSortPluginKey,
     appendTransaction: function appendTransaction(trs, oldState, newState) {
-      var _key$getState;
+      var _api$editorViewMode2, _key$getState;
       // return newState.tr;
-      var _ref8 = (editorViewModeAPI === null || editorViewModeAPI === void 0 ? void 0 : editorViewModeAPI.sharedState.currentState()) || {},
+      var _ref8 = (api === null || api === void 0 || (_api$editorViewMode2 = api.editorViewMode) === null || _api$editorViewMode2 === void 0 ? void 0 : _api$editorViewMode2.sharedState.currentState()) || {},
         mode = _ref8.mode;
       if (mode !== 'view') {
         return newState.tr;

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/ui/icons/SortingIconWrapper.js

@@ -0,0 +1,18 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SortingIconWrapper = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _hooks = require("@atlaskit/editor-common/hooks");
+var _table = require("@atlaskit/editor-common/table");
+var SortingIconWrapper = exports.SortingIconWrapper = function SortingIconWrapper(props) {
+  var _useSharedPluginState = (0, _hooks.useSharedPluginState)(props.api, ['editorViewMode']),
+    editorViewModeState = _useSharedPluginState.editorViewModeState;
+  if ((editorViewModeState === null || editorViewModeState === void 0 ? void 0 : editorViewModeState.mode) === 'edit') {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_table.SortingIcon, props);
+};