@atlaskit/editor-plugin-table 7.28.8 → 7.28.10

package/src/ui/FloatingContextualMenu/styles.ts

@@ -16,14 +16,6 @@ export const cellColourPreviewStyles = (selectedColor: string) =>
 		},
 	});
 
-// eslint-disable-next-line @atlaskit/ui-styling-standard/no-exported-styles -- Ignored via go/DSP-18766
-export const elementBeforeIconStyles = css({
-	marginRight: token('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: boolean | undefined,
 	// eslint-disable-next-line @atlaskit/design-system/no-css-tagged-template-expression -- needs manual remediation

package/src/ui/FloatingDragMenu/DragMenu.tsx

@@ -42,7 +42,9 @@ import {
 	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';
@@ -69,12 +71,7 @@ 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';
 
 type DragMenuProps = {
 	direction?: TableDirection;
@@ -192,6 +189,11 @@ const getGroupedDragMenuConfig = (tableSortColumnReorder: boolean) => {
 	return groupedDragMenuConfig;
 };
 
+const elementBeforeIconStyles = xcss({
+	marginRight: 'space.negative.075',
+	display: 'flex',
+});
+
 const convertToDropdownItems = (
 	dragMenuConfig: DragMenuConfig[],
 	formatMessage: IntlShape['formatMessage'],
@@ -237,12 +239,14 @@ const convertToDropdownItems = (
 			value: { 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
-				<span css={elementBeforeIconStyles}>
+				<Box xcss={elementBeforeIconStyles}>
 					<item.icon
+						color="currentColor"
+						spacing="spacious"
 						label={formatMessage(MapDragMenuOptionIdToMessage[item.id].message, options)}
+						LEGACY_fallbackIcon={item.iconFallback ? item.iconFallback : undefined}
 					/>
-				</span>
+				</Box>
 			) : 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 ? <div css={shortcutStyle}>{item.keymap}</div> : undefined,
@@ -368,13 +372,14 @@ const DragMenu = React.memo(
 				content: formatMessage(messages.backgroundColor),
 				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
-					<span css={elementBeforeIconStyles}>
-						<EditorBackgroundColorIcon
+					<Box xcss={elementBeforeIconStyles}>
+						<PaintBucketIcon
+							color="currentColor"
+							spacing="spacious"
 							label={formatMessage(messages.backgroundColor)}
-							size="medium"
+							LEGACY_fallbackIcon={EditorBackgroundColorIcon}
 						/>
-					</span>
+					</Box>
 				),
 				elemAfter: (
 					<div

package/src/ui/FloatingDragMenu/styles.ts

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

package/src/ui/icons/SortingIconWrapper.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { useSharedPluginState } from '@atlaskit/editor-common/hooks';
+import { SortingIcon } from '@atlaskit/editor-common/table';
+import type { ExtractInjectionAPI } from '@atlaskit/editor-common/types';
+
+import type { TablePlugin } from '../../plugin';
+
+type SortingIconProps = React.ComponentProps<typeof SortingIcon>;
+type SortingIconWrapperProps = SortingIconProps & {
+	api: ExtractInjectionAPI<TablePlugin>;
+};
+
+export const SortingIconWrapper = (props: SortingIconWrapperProps) => {
+	const { editorViewModeState } = useSharedPluginState(props.api, ['editorViewMode']);
+	if (editorViewModeState?.mode === 'edit') {
+		return null;
+	}
+	return <SortingIcon {...props} />;
+};

package/src/utils/drag-menu.ts

@@ -20,12 +20,25 @@ import type {
 	CommandDispatch,
 	DropdownOptionT,
 	GetEditorContainerWidth,
-	IconProps,
 } from '@atlaskit/editor-common/types';
 import type { AriaLiveElementAttributes } from '@atlaskit/editor-plugin-accessibility-utils';
 import type { EditorState, 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 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';
@@ -35,6 +48,7 @@ import EditorLayoutThreeEqualIcon from '@atlaskit/icon/glyph/editor/layout-three
 import RemoveIcon from '@atlaskit/icon/glyph/editor/remove';
 import HipchatChevronDoubleDownIcon from '@atlaskit/icon/glyph/hipchat/chevron-double-down';
 import HipchatChevronDoubleUpIcon from '@atlaskit/icon/glyph/hipchat/chevron-double-up';
+import type { UNSAFE_NewIconProps } from '@atlaskit/icon/types';
 
 import {
 	deleteColumnsWithAnalytics,
@@ -128,7 +142,8 @@ export type DragMenuOptionIdType =
 
 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;
 }
 
@@ -165,13 +180,15 @@ export const getDragMenuConfig = (
 					{
 						label: 'above',
 						offset: 0,
-						icon: AddRowAboveIcon,
+						icon: TableRowAddAboveIcon,
+						iconFallback: AddRowAboveIcon,
 						keymap: addRowBefore,
 					},
 					{
 						label: 'below',
 						offset: 1,
-						icon: AddRowBelowIcon,
+						icon: TableRowAddBelowIcon,
+						iconFallback: AddRowBelowIcon,
 						keymap: addRowAfter,
 					},
 				]
@@ -179,13 +196,15 @@ export const getDragMenuConfig = (
 					{
 						label: 'left',
 						offset: 0,
-						icon: AddColLeftIcon,
+						icon: TableColumnAddLeftIcon,
+						iconFallback: AddColLeftIcon,
 						keymap: addColumnBefore,
 					},
 					{
 						label: 'right',
 						offset: 1,
-						icon: AddColRightIcon,
+						icon: TableColumnAddRightIcon,
+						iconFallback: AddColRightIcon,
 						keymap: addColumnAfter,
 					},
 				];
@@ -194,7 +213,8 @@ export const getDragMenuConfig = (
 			? [
 					{
 						label: 'up',
-						icon: ArrowUpIcon,
+						icon: TableRowMoveUpIcon,
+						iconFallback: ArrowUpIcon,
 						keymap: moveRowUp,
 						canMove: canMove('table-row', -1, tableMap?.height ?? 0, selection, selectionRect),
 						getOriginIndexes: getSelectedRowIndexes,
@@ -202,7 +222,8 @@ export const getDragMenuConfig = (
 					},
 					{
 						label: 'down',
-						icon: ArrowDownIcon,
+						icon: TableRowMoveDownIcon,
+						iconFallback: ArrowDownIcon,
 						keymap: moveRowDown,
 						canMove: canMove('table-row', 1, tableMap?.height ?? 0, selection, selectionRect),
 						getOriginIndexes: getSelectedRowIndexes,
@@ -212,7 +233,8 @@ export const getDragMenuConfig = (
 			: [
 					{
 						label: 'left',
-						icon: ArrowLeftIcon,
+						icon: TableColumnMoveLeftIcon,
+						iconFallback: ArrowLeftIcon,
 						keymap: moveColumnLeft,
 						canMove: canMove('table-column', -1, tableMap?.width ?? 0, selection, selectionRect),
 						getOriginIndexes: getSelectedColumnIndexes,
@@ -220,36 +242,38 @@ export const getDragMenuConfig = (
 					},
 					{
 						label: 'right',
-						icon: ArrowRightIcon,
+						icon: TableColumnMoveRightIcon,
+						iconFallback: ArrowRightIcon,
 						keymap: moveColumnRight,
 						canMove: canMove('table-column', 1, tableMap?.width ?? 0, selection, selectionRect),
 						getOriginIndexes: getSelectedColumnIndexes,
 						getTargetIndex: (selectionRect: Rect) => selectionRect.right,
 					},
 				];
-
 	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 }) => ({
+		...sortOptions.map(({ label, order, icon, iconFallback }) => ({
 			id: `sort_column_${order}`,
 			title: `Sort ${label}`,
 			disabled: hasMergedCellsInTable,
-			icon,
+			icon: icon,
+			iconFallback: iconFallback,
 			onClick: (state: EditorState, dispatch?: CommandDispatch) => {
 				sortColumnWithAnalytics(editorAnalyticsAPI)(
 					INPUT_METHOD.TABLE_CONTEXT_MENU,
@@ -260,12 +284,12 @@ export const getDragMenuConfig = (
 			},
 		})),
 	];
-
 	const restConfigs = [
-		...addOptions.map(({ label, offset, icon, keymap }) => ({
+		...addOptions.map(({ label, offset, icon, iconFallback, keymap }) => ({
 			id: `add_${direction}_${label}`,
 			title: `Add ${direction} ${label}`,
-			icon,
+			icon: icon,
+			iconFallback: iconFallback,
 			onClick: (state: EditorState, dispatch?: CommandDispatch) => {
 				if (direction === 'row') {
 					insertRowWithAnalytics(editorAnalyticsAPI, tableDuplicateCellColouring)(
@@ -318,7 +342,8 @@ export const getDragMenuConfig = (
 						}
 						return false;
 					},
-					icon: EditorLayoutThreeEqualIcon,
+					icon: TableColumnsDistributeIcon,
+					iconFallback: EditorLayoutThreeEqualIcon,
 				}
 			: undefined,
 		{
@@ -331,7 +356,8 @@ export const getDragMenuConfig = (
 				)(state, dispatch);
 				return true;
 			},
-			icon: CrossCircleIcon,
+			icon: TableCellClearIcon,
+			iconFallback: CrossCircleIcon,
 			keymap: tooltip(backspace),
 		},
 		{
@@ -360,30 +386,34 @@ export const getDragMenuConfig = (
 				}
 				return true;
 			},
-			icon: RemoveIcon,
+			icon: direction === 'row' ? TableRowDeleteIcon : TableColumnDeleteIcon,
+			iconFallback: RemoveIcon,
 			keymap: direction === 'row' ? tooltip(deleteRow) : tooltip(deleteColumn),
 		},
-		...moveOptions.map(({ label, canMove, icon, keymap, getOriginIndexes, getTargetIndex }) => ({
-			id: `move_${direction}_${label}`,
-			title: `Move ${direction} ${label}`,
-			disabled: !canMove,
-			icon,
-			onClick: (state: EditorState, dispatch?: CommandDispatch) => {
-				if (canMove) {
-					requestAnimationFrame(() => {
-						moveSourceWithAnalytics(editorAnalyticsAPI, ariaNotifyPlugin, getIntl)(
-							INPUT_METHOD.TABLE_CONTEXT_MENU,
-							`table-${direction}`,
-							getOriginIndexes(selectionRect!),
-							getTargetIndex(selectionRect!),
-						)(editorView.state, editorView.dispatch);
-					});
-					return true;
-				}
-				return false;
-			},
-			keymap: keymap && tooltip(keymap),
-		})),
+		...moveOptions.map(
+			({ label, canMove, icon, iconFallback, keymap, getOriginIndexes, getTargetIndex }) => ({
+				id: `move_${direction}_${label}`,
+				title: `Move ${direction} ${label}`,
+				disabled: !canMove,
+				icon: icon,
+				iconFallback: iconFallback,
+				onClick: (state: EditorState, dispatch?: CommandDispatch) => {
+					if (canMove) {
+						requestAnimationFrame(() => {
+							moveSourceWithAnalytics(editorAnalyticsAPI, ariaNotifyPlugin, getIntl)(
+								INPUT_METHOD.TABLE_CONTEXT_MENU,
+								`table-${direction}`,
+								getOriginIndexes(selectionRect!),
+								getTargetIndex(selectionRect!),
+							)(editorView.state, editorView.dispatch);
+						});
+						return true;
+					}
+					return false;
+				},
+				keymap: keymap && tooltip(keymap),
+			}),
+		),
 	];
 
 	let allConfigs = [...restConfigs];