@atlaskit/editor-plugin-table 7.6.4 → 7.6.6

package/src/commands/column-resize.ts

@@ -1,3 +1,6 @@
+import type { IntlShape } from 'react-intl-next/src/types';
+
+import { tableMessages as messages } from '@atlaskit/editor-common/messages';
 import { tableCellMinWidth } from '@atlaskit/editor-common/styles';
 import type {
   Command,
@@ -121,36 +124,54 @@ const updateResizeHandleAndStatePosition =
     return false;
   };
 
-export const initiateKeyboardColumnResizing: Command = (
-  state,
-  dispatch,
-  view,
-) => {
-  if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+export const initiateKeyboardColumnResizing =
+  ({
+    ariaNotify,
+    getIntl,
+  }: {
+    ariaNotify?: (message: string) => void;
+    getIntl?: () => IntlShape;
+  }): Command =>
+  (state, dispatch, view) => {
+    if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
+      return false;
+    }
+
+    const { selection } = state;
+    const selectionRect = isSelectionType(selection, 'cell')
+      ? getSelectionRect(selection)!
+      : findCellRectClosestToPos(selection.$from);
+    const cell = findCellClosestToPos(selection.$from);
+
+    if (ariaNotify && getIntl) {
+      ariaNotify(getIntl().formatMessage(messages.startedColumnResize));
+    }
+
+    if (selectionRect && cell && view) {
+      return updateResizeHandleAndStatePosition(
+        selectionRect.top,
+        selectionRect.right,
+        cell.pos,
+      )(state, dispatch);
+    }
     return false;
-  }
-  const { selection } = state;
-  const selectionRect = isSelectionType(selection, 'cell')
-    ? getSelectionRect(selection)!
-    : findCellRectClosestToPos(selection.$from);
-  const cell = findCellClosestToPos(selection.$from);
-
-  if (selectionRect && cell && view) {
-    return updateResizeHandleAndStatePosition(
-      selectionRect.top,
-      selectionRect.right,
-      cell.pos,
-    )(state, dispatch);
-  }
-  return false;
-};
+  };
 
 export const activateNextResizeArea =
-  (direction: Direction): Command =>
+  ({
+    direction,
+    ariaNotify,
+    getIntl,
+  }: {
+    direction: Direction;
+    ariaNotify?: (message: string) => void;
+    getIntl?: () => IntlShape;
+  }): Command =>
   (state, dispatch, view) => {
     if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
       return false;
     }
+
     const { resizeHandlePos } = getTableResizingPluginState(state) || {};
     // If No resizing has initiated, skip to regular handler
     if (!resizeHandlePos) {
@@ -182,6 +203,23 @@ export const activateNextResizeArea =
     );
 
     const $nextCell = nextCell($currentCell, 'horiz', direction);
+    if (ariaNotify && getIntl) {
+      let columnDirection = '';
+
+      if (direction === 1) {
+        columnDirection = getIntl().formatMessage(messages.columnRightResize);
+      }
+
+      if (direction === -1) {
+        columnDirection = getIntl().formatMessage(messages.columnLeftResize);
+      }
+
+      ariaNotify(
+        getIntl().formatMessage(messages.focusedOtherResize, {
+          direction: columnDirection,
+        }),
+      );
+    }
 
     if ($nextCell) {
       // we are somewhere in between the side columns of the table
@@ -221,15 +259,25 @@ export const activateNextResizeArea =
         )(state, dispatch);
       }
     }
+
     return false;
   };
 
 export const changeColumnWidthByStep =
-  (
-    stepSize: number,
-    getEditorContainerWidth: GetEditorContainerWidth,
-    isTableScalingEnabled = false,
-  ): Command =>
+  ({
+    stepSize,
+    getEditorContainerWidth,
+    isTableScalingEnabled,
+    ariaNotify,
+    getIntl,
+  }: {
+    stepSize: number;
+    getEditorContainerWidth: GetEditorContainerWidth;
+    isTableScalingEnabled: boolean;
+    ariaNotify?: (message: string) => void;
+    getIntl?: () => IntlShape;
+    originalTr?: Transaction;
+  }): Command =>
   (state, dispatch, view) => {
     let customTr = state.tr;
     const fakeDispatch = (tr: Transaction) => {
@@ -323,11 +371,36 @@ export const changeColumnWidthByStep =
       dispatch(customTr);
     }
 
+    if (ariaNotify && getIntl) {
+      ariaNotify(
+        getIntl().formatMessage(messages.changedColumnWidth, {
+          width: Math.floor(newResizeState.cols[colIndex].width),
+        }),
+      );
+
+      if (newResizeState.cols.length === colIndex + 1) {
+        if (newResizeState.overflow === true) {
+          ariaNotify(getIntl().formatMessage(messages.columnResizeLast));
+        }
+        if (newResizeState.overflow === false) {
+          ariaNotify(getIntl().formatMessage(messages.columnResizeOverflow));
+        }
+      }
+    }
+
     return true;
   };
 
 export const stopKeyboardColumnResizing =
-  (originalTr?: Transaction): Command =>
+  ({
+    ariaNotify,
+    getIntl,
+    originalTr,
+  }: {
+    ariaNotify?: (message: string) => void;
+    getIntl?: () => IntlShape;
+    originalTr?: Transaction;
+  }): Command =>
   (state, dispatch) => {
     if (!getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
       return false;
@@ -364,6 +437,9 @@ export const stopKeyboardColumnResizing =
       },
       () => customTr.setMeta('scrollIntoView', false),
     )(state, fakeDispatch);
+    if (ariaNotify && getIntl) {
+      ariaNotify(getIntl().formatMessage(messages.columnResizeStop));
+    }
 
     if (dispatch) {
       dispatch(customTr);

package/src/commands/go-to-next-cell.ts

@@ -1,4 +1,5 @@
 // #region Constants
+import type { IntlShape } from 'react-intl-next/src/types';
 
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
@@ -21,7 +22,11 @@ const TAB_FORWARD_DIRECTION = 1;
 const TAB_BACKWARD_DIRECTION = -1;
 
 export const goToNextCell =
-  (editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null) =>
+  (
+    editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
+    ariaNotify?: (message: string) => void,
+    getIntl?: () => IntlShape,
+  ) =>
   (direction: Direction): Command =>
   (state, dispatch, view) => {
     const table = findTable(state.selection);
@@ -32,7 +37,10 @@ export const goToNextCell =
     if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
       const isColumnResizing = getPluginState(state)?.isKeyboardResize;
       if (isColumnResizing) {
-        stopKeyboardColumnResizing()(state, dispatch, view);
+        stopKeyboardColumnResizing({
+          ariaNotify: ariaNotify,
+          getIntl: getIntl,
+        })(state, dispatch, view);
         return true;
       }
     }

package/src/commands-with-analytics.ts

@@ -1,3 +1,5 @@
+import type { IntlShape } from 'react-intl-next/src/types';
+
 import type { TableLayout } from '@atlaskit/adf-schema';
 import { tableBackgroundColorPalette } from '@atlaskit/adf-schema';
 import type { TableSortOrder as SortOrder } from '@atlaskit/custom-steps';
@@ -259,6 +261,8 @@ export const changeColumnWidthByStepWithAnalytics =
     getEditorContainerWidth: GetEditorContainerWidth,
     isTableScalingEnabled: boolean,
     inputMethod: INPUT_METHOD.SHORTCUT,
+    ariaNotify?: (message: string) => void,
+    getIntl?: () => IntlShape,
   ) =>
     withEditorAnalyticsAPI((state) => {
       const { table, totalRowCount, totalColumnCount } = getSelectedTableInfo(
@@ -283,11 +287,13 @@ export const changeColumnWidthByStepWithAnalytics =
         },
       };
     })(editorAnalyticsAPI)(
-      changeColumnWidthByStep(
-        stepSize,
-        getEditorContainerWidth,
-        isTableScalingEnabled,
-      ),
+      changeColumnWidthByStep({
+        stepSize: stepSize,
+        getEditorContainerWidth: getEditorContainerWidth,
+        isTableScalingEnabled: isTableScalingEnabled,
+        ariaNotify: ariaNotify,
+        getIntl: getIntl,
+      }),
     );
 
 export const insertColumnWithAnalytics =

package/src/nodeviews/ExternalDropTargets.tsx

@@ -56,6 +56,7 @@ export const ExternalDropTargets = ({
         width: getTableWrapperWidth(),
         overflow: 'hidden',
         position: 'absolute',
+        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
         top: `-${dropTargetExtendedWidth - tableMarginTop}px`,
         pointerEvents: 'auto',
         zIndex: `${dropTargetsZIndex}`,
@@ -66,6 +67,7 @@ export const ExternalDropTargets = ({
         style={{
           display: 'flex',
           // move drop targets based on table wrapper scroll
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           marginLeft: `-${getScrollOffset()}px`,
         }}
       >

package/src/nodeviews/TableComponent.tsx

@@ -25,14 +25,12 @@ import type {
 import { browser, isValidPosition } from '@atlaskit/editor-common/utils';
 import type { Node as PmNode } from '@atlaskit/editor-prosemirror/model';
 import type { EditorView } from '@atlaskit/editor-prosemirror/view';
-import {
-  MAX_BROWSER_SCROLLBAR_HEIGHT,
-  akEditorTableToolbarSize as tableToolbarSize,
-} from '@atlaskit/editor-shared-styles';
+import { akEditorTableToolbarSize as tableToolbarSize } from '@atlaskit/editor-shared-styles';
 import { findTable, isTableSelected } from '@atlaskit/editor-tables/utils';
 import { getBooleanFF } from '@atlaskit/platform-feature-flags';
 import { combine } from '@atlaskit/pragmatic-drag-and-drop/combine';
 import type { CleanupFn } from '@atlaskit/pragmatic-drag-and-drop/types';
+import { token } from '@atlaskit/tokens';
 
 import { autoSizeTable, clearHoverSelection } from '../commands';
 import { autoScrollerFactory } from '../pm-plugins/drag-and-drop/utils';
@@ -59,10 +57,6 @@ import { TABLE_EDITOR_MARGIN } from '../pm-plugins/table-resizing/utils/consts';
 import { updateControls } from '../pm-plugins/table-resizing/utils/dom';
 import type { CellHoverMeta, PluginInjectionAPI } from '../types';
 import { TableCssClassName as ClassName, ShadowEvent } from '../types';
-import {
-  tableOverflowShadowWidth,
-  tableOverflowShadowWidthWide,
-} from '../ui/consts';
 import TableFloatingColumnControls from '../ui/TableFloatingColumnControls';
 import TableFloatingControls from '../ui/TableFloatingControls';
 import {
@@ -751,7 +745,9 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
               visibility:
                 showBeforeShadow && hasHeaderRow ? 'visible' : 'hidden',
               top: `${topStickyShadowPosition}px`,
-              paddingBottom: `${isDragAndDropEnabled ? '1px' : ''}`,
+              paddingBottom: `${
+                isDragAndDropEnabled && token('space.025', '2px')
+              }`,
             }}
           />
         )}
@@ -776,10 +772,10 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
           <div
             className={ClassName.TABLE_STICKY_SCROLLBAR_CONTAINER}
             style={{
-              height: MAX_BROWSER_SCROLLBAR_HEIGHT,
+              height: token('space.250', '20px'), // MAX_BROWSER_SCROLLBAR_HEIGHT
               display: 'none',
               // prevent unwanted scroll during table resize without removing scrollbar container from the dom
-              width: isResizing ? '0px' : '100%',
+              width: isResizing ? token('space.0', '0px') : '100%',
             }}
           >
             <div
@@ -804,10 +800,10 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
                     getBooleanFF(
                       'platform.editor.table.increase-shadow-visibility_lh89r',
                     )
-                      ? tableOverflowShadowWidthWide
-                      : tableOverflowShadowWidth
-                  }px`
-                : '-2px',
+                      ? token('space.400', '32px') // tableOverflowShadowWidthWide
+                      : token('space.100', '8px') // tableOverflowShadowWidth
+                  }`
+                : token('space.negative.025', '-2px'),
             }}
           >
             <div
@@ -816,7 +812,9 @@ class TableComponent extends React.Component<ComponentProps, TableState> {
                 visibility:
                   showAfterShadow && hasHeaderRow ? 'visible' : 'hidden',
                 top: `${topStickyShadowPosition}px`,
-                paddingBottom: `${isDragAndDropEnabled ? '1px' : ''}`,
+                paddingBottom: `${
+                  isDragAndDropEnabled && token('space.025', '2px')
+                }`,
               }}
             />
           </div>

package/src/nodeviews/TableResizer.tsx

@@ -98,7 +98,7 @@ const RESIZE_STEP_VALUE = 10;
 const handles = { right: true };
 const handleStyles = {
   right: {
-    // eslint-disable-next-line
+    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
     right: '-14px',
     marginTop: token('space.150', '12px'),
   },
@@ -491,6 +491,7 @@ export const TableResizer = ({
       if (newWidth > maxWidth || newWidth < resizerMinWidth) {
         return;
       }
+      setLocalTableWidth(newWidth);
       handleResizeStop(
         { width: width, x: 0, y: 0, height: 0 },
         { width: step, height: 0 },

package/src/plugin.tsx

@@ -306,7 +306,7 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
         // plugin as it is currently swallowing backspace events inside tables
         {
           name: 'tableKeymap',
-          plugin: () => {
+          plugin: ({ getIntl }) => {
             const {
               dragAndDropEnabled,
               isTableScalingEnabled = false,
@@ -318,6 +318,8 @@ const tablesPlugin: TablePlugin = ({ config: options, api }) => {
               dragAndDropEnabled,
               isTableScalingEnabled,
               fullWidthEnabled,
+              api,
+              getIntl,
             );
           },
         },

package/src/pm-plugins/keymap.ts

@@ -1,3 +1,5 @@
+import type { IntlShape } from 'react-intl-next/src/types';
+
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 import {
   ACTION,
@@ -53,6 +55,7 @@ import {
   addColumnBefore as addColumnBeforeCommand,
 } from '../commands/insert';
 import { moveSourceWithAnalyticsViaShortcut } from '../pm-plugins/drag-and-drop/commands-with-analytics';
+import type { PluginInjectionAPIWithA11y } from '../types';
 import { withEditorAnalyticsAPI } from '../utils/analytics';
 
 const createTableWithAnalytics = (
@@ -76,17 +79,22 @@ export function keymapPlugin(
   dragAndDropEnabled?: boolean,
   isTableScalingEnabled = false,
   isFullWidthEnabled?: boolean,
+  pluginInjectionApi?: PluginInjectionAPIWithA11y,
+  getIntl?: () => IntlShape,
 ): SafePlugin {
   const list = {};
 
+  const ariaNotifyPlugin =
+    pluginInjectionApi?.accessibilityUtils?.actions.ariaNotify;
+
   bindKeymapWithCommand(
     nextCell.common!,
-    goToNextCell(editorAnalyticsAPI)(1),
+    goToNextCell(editorAnalyticsAPI, ariaNotifyPlugin, getIntl)(1),
     list,
   );
   bindKeymapWithCommand(
     previousCell.common!,
-    goToNextCell(editorAnalyticsAPI)(-1),
+    goToNextCell(editorAnalyticsAPI, ariaNotifyPlugin, getIntl)(-1),
     list,
   );
   bindKeymapWithCommand(
@@ -190,13 +198,32 @@ export function keymapPlugin(
   if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
     bindKeymapWithCommand(
       startColumnResizing.common!,
-      initiateKeyboardColumnResizing,
+      initiateKeyboardColumnResizing({
+        ariaNotify: ariaNotifyPlugin,
+        getIntl: getIntl,
+      }),
       list,
     );
 
-    bindKeymapWithCommand(moveRight.common!, activateNextResizeArea(1), list);
+    bindKeymapWithCommand(
+      moveRight.common!,
+      activateNextResizeArea({
+        direction: 1,
+        ariaNotify: ariaNotifyPlugin,
+        getIntl: getIntl,
+      }),
+      list,
+    );
 
-    bindKeymapWithCommand(moveLeft.common!, activateNextResizeArea(-1), list);
+    bindKeymapWithCommand(
+      moveLeft.common!,
+      activateNextResizeArea({
+        direction: -1,
+        ariaNotify: ariaNotifyPlugin,
+        getIntl: getIntl,
+      }),
+      list,
+    );
 
     bindKeymapWithCommand(
       decreaseMediaSize.common!,
@@ -205,6 +232,8 @@ export function keymapPlugin(
         getEditorContainerWidth,
         isTableScalingEnabled,
         INPUT_METHOD.SHORTCUT,
+        ariaNotifyPlugin,
+        getIntl,
       ),
       list,
     );
@@ -216,10 +245,19 @@ export function keymapPlugin(
         getEditorContainerWidth,
         isTableScalingEnabled,
         INPUT_METHOD.SHORTCUT,
+        ariaNotifyPlugin,
+        getIntl,
       ),
       list,
     );
-    bindKeymapWithCommand(escape.common!, stopKeyboardColumnResizing(), list);
+    bindKeymapWithCommand(
+      escape.common!,
+      stopKeyboardColumnResizing({
+        ariaNotify: ariaNotifyPlugin,
+        getIntl: getIntl,
+      }),
+      list,
+    );
   }
 
   return keymap(list) as SafePlugin;

package/src/pm-plugins/main.ts

@@ -80,6 +80,7 @@ import type {
   InvalidNodeAttr,
   PluginConfig,
   PluginInjectionAPI,
+  PluginInjectionAPIWithA11y,
 } from '../types';
 import { TableCssClassName as ClassName } from '../types';
 import {
@@ -136,6 +137,10 @@ export const createPlugin = (
   // Used to prevent invalid table cell spans being reported more than once per editor/document
   const invalidTableIds: string[] = [];
   let editorViewRef: EditorView | null = null;
+
+  const ariaNotifyPlugin = (pluginInjectionApi as PluginInjectionAPIWithA11y)
+    ?.accessibilityUtils?.actions.ariaNotify;
+
   const getCurrentEditorState = (): EditorState | null => {
     const editorView = editorViewRef;
     if (!editorView) {
@@ -215,7 +220,7 @@ export const createPlugin = (
             }
             const tableNode = findTable(state.selection);
             if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
-              // when cursor leaves the table we need to stop column resizing
+              // when keyboard cursor leaves the table we need to stop column resizing
               const pluginPrevState = getPluginState(prevState);
               const isStopKeyboardColumResizing =
                 pluginPrevState.isResizeHandleWidgetAdded &&
@@ -238,11 +243,17 @@ export const createPlugin = (
                       pluginPrevState.tableNode.attrs.localId
                   ) {
                     // Jump to another table
-                    stopKeyboardColumnResizing()(state, dispatch);
+                    stopKeyboardColumnResizing({
+                      ariaNotify: ariaNotifyPlugin,
+                      getIntl: getIntl,
+                    })(state, dispatch);
                   }
                 } else if (!tableNode) {
                   // selection outside of table
-                  stopKeyboardColumnResizing()(state, dispatch);
+                  stopKeyboardColumnResizing({
+                    ariaNotify: ariaNotifyPlugin,
+                    getIntl: getIntl,
+                  })(state, dispatch);
                 }
               }
             }
@@ -366,7 +377,10 @@ export const createPlugin = (
         if (getBooleanFF('platform.editor.a11y-column-resizing_emcvz')) {
           const { isKeyboardResize } = getPluginState(state);
           if (isKeyboardResize) {
-            stopKeyboardColumnResizing()(state, dispatch);
+            stopKeyboardColumnResizing({
+              ariaNotify: ariaNotifyPlugin,
+              getIntl: getIntl,
+            })(state, dispatch);
             return false;
           }
         }

package/src/pm-plugins/table-resizing/event-handlers.ts

@@ -179,7 +179,7 @@ export const handleMouseDown = (
           /** if column resize had started via keyboard but continued by mouse
            *  or mouse pointer leaves the table but mouse button still pressed
            */
-          return stopKeyboardColumnResizing()(state, dispatch, view);
+          return stopKeyboardColumnResizing({})(state, dispatch, view);
         } else {
           return stopResizing()(state, dispatch);
         }
@@ -261,7 +261,11 @@ export const handleMouseDown = (
           /** if column resize had started via keyboard but continued by mouse
            *  or mouse pointer leaves the table but mouse button still pressed
            */
-          return stopKeyboardColumnResizing(tr)(state, dispatch, view);
+          return stopKeyboardColumnResizing({ originalTr: tr })(
+            state,
+            dispatch,
+            view,
+          );
         } else {
           return stopResizing(tr)(state, dispatch);
         }

package/src/types.ts

@@ -35,6 +35,14 @@ export interface InsertRowOptions {
 
 export type PluginInjectionAPI = ExtractInjectionAPI<TablePlugin>;
 
+export type PluginInjectionAPIWithA11y = ExtractInjectionAPI<TablePlugin> & {
+  accessibilityUtils?: {
+    actions: {
+      ariaNotify: (message: string) => void | undefined;
+    };
+  };
+};
+
 // override getPluginState but do not expose publicly as this type is experimental and will change
 // in the future
 export type TableSharedStateInternal = Pick<

package/src/ui/DragHandle/index.tsx

@@ -222,8 +222,8 @@ const DragHandleComponent = ({
           width: isRow
             ? `${token('space.200', '16px')}` // 16px here because it's the size of drag handle button's large side
             : `calc(100% - ${dragTableInsertColumnButtonSize}px)`,
-          left: isRow ? '3px' : undefined,
-          bottom: isColumn ? '0' : undefined,
+          left: isRow ? `${token('space.050', '4px')}` : undefined,
+          bottom: isColumn ? `${token('space.0', '0px')}` : undefined,
           alignSelf: isColumn ? 'none' : 'center',
           zIndex: isColumn ? '-1' : 'auto',
         }}

package/src/ui/DragPreview/index.tsx

@@ -36,7 +36,9 @@ export const DragPreview = ({
       <DragInMotionIcon
         style={{
           position: 'absolute',
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           marginLeft: `${marginLeft}px`,
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           marginTop: `${marginTop}px`,
           transform: transform,
         }}

package/src/ui/FloatingContextualButton/FixedButton.tsx

@@ -4,6 +4,7 @@ import rafSchedule from 'raf-schd';
 import { createPortal } from 'react-dom';
 
 import { akEditorTableCellOnStickyHeaderZIndex } from '@atlaskit/editor-shared-styles';
+import { token } from '@atlaskit/tokens';
 
 import type { RowStickyState } from '../../pm-plugins/sticky-headers';
 import { TableCssClassName as ClassName } from '../../types';
@@ -144,26 +145,28 @@ export const FixedButton = ({
       ref={observerTargetRef}
       style={{
         position: 'absolute',
-        top: '0px',
-        left: '0px',
-        width: `${BUTTON_WIDTH}px`,
-        height: `${BUTTON_WIDTH}px`,
+        top: token('space.0', '0px'),
+        left: token('space.0', '0px'),
+        width: token('space.250', '20px'), // BUTTON_WIDTH
+        height: token('space.250', '20px'), // BUTTON_WIDTH
       }}
     >
       <div
         ref={fixedButtonRef}
         style={{
           position: 'fixed',
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           top: stickyHeader.top + stickyHeader.padding + offset * 2,
           zIndex: akEditorTableCellOnStickyHeaderZIndex,
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           left: calcLeftPos({
             buttonWidth: BUTTON_WIDTH,
             cellRectLeft: targetCellRect.left,
             cellRefWidth: targetCellRef.clientWidth,
             offset,
           }),
-          width: `${BUTTON_WIDTH}px`,
-          height: `${BUTTON_WIDTH}px`,
+          width: token('space.250', '20px'), // BUTTON_WIDTH
+          height: token('space.250', '20px'), // BUTTON_WIDTH
         }}
         className={ClassName.CONTEXTUAL_MENU_BUTTON_FIXED}
       >

package/src/ui/FloatingDeleteButton/index.tsx

@@ -347,8 +347,10 @@ class FloatingDeleteButton extends Component<Props, State> {
           <div
             style={{
               position: 'fixed',
+              // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
               top: pos.top,
               zIndex: stickyRowZIndex,
+              // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
               left:
                 rect.left +
                 (pos.left || 0) -

package/src/ui/FloatingInsertButton/InsertButton.tsx

@@ -145,6 +145,7 @@ export const InsertButtonForDragAndDrop = ({
               : {
                   height:
                     getInsertLineHeight(tableRef, hasStickyHeaders, true) - 8,
+                  // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
                   top: '-3px',
                 }
           }