@atlaskit/editor-plugin-table 0.2.2 → 0.2.3

package/src/plugins/table/toolbar.tsx

@@ -7,6 +7,7 @@ import commonMessages from '@atlaskit/editor-common/messages';
 import type {
   Command,
   CommandDispatch,
+  DropdownOptionT,
   FloatingToolbarDropdown,
   FloatingToolbarHandler,
   FloatingToolbarItem,
@@ -15,7 +16,12 @@ import type {
 
 import type { EditorAnalyticsAPI } from '@atlaskit/editor-common/analytics';
 
-import { clearHoverSelection, hoverTable } from './commands';
+import {
+  clearHoverSelection,
+  hoverTable,
+  hoverColumns,
+  hoverRows,
+} from './commands';
 import {
   deleteTableWithAnalytics,
   toggleHeaderColumnWithAnalytics,
@@ -43,7 +49,11 @@ import {
   PluginConfig,
   TableCssClassName,
 } from './types';
-import { getMergedCellsPositions } from './utils';
+import {
+  getMergedCellsPositions,
+  getSelectedColumnIndexes,
+  getSelectedRowIndexes,
+} from './utils';
 import { isReferencedSource } from './utils/referentiality';
 import { INPUT_METHOD } from '@atlaskit/editor-common/analytics';
 import {
@@ -76,6 +86,7 @@ import {
   cellBackgroundColorPalette,
   DEFAULT_BORDER_COLOR,
 } from '@atlaskit/editor-common/ui-color';
+import { akEditorFloatingPanelZIndex } from '@atlaskit/editor-shared-styles';
 
 export const messages = defineMessages({
   tableOptions: {
@@ -157,6 +168,7 @@ export const getToolbarMenuConfig = (
 // with native widgets. It's enabled via a plugin config.
 export const getToolbarCellOptionsConfig = (
   editorState: EditorState,
+  editorView: EditorView | undefined | null,
   initialSelectionRect: Rect,
   { formatMessage }: ToolbarMenuContext,
   getEditorContainerWidth: GetEditorContainerWidth,
@@ -167,7 +179,7 @@ export const getToolbarCellOptionsConfig = (
   const numberOfRows = bottom - top;
   const pluginState = getPluginState(editorState);
 
-  const options = [
+  const options: DropdownOptionT<Command>[] = [
     {
       id: 'editor.table.insertColumn',
       title: formatMessage(tableMessages.insertColumn),
@@ -227,6 +239,18 @@ export const getToolbarCellOptionsConfig = (
         }
         return true;
       },
+      onMouseOver: (state: EditorState, dispatch?: CommandDispatch) => {
+        const selectionRect = getClosestSelectionRect(state);
+        if (selectionRect) {
+          hoverColumns(getSelectedColumnIndexes(selectionRect), true)(
+            state,
+            dispatch,
+          );
+          return true;
+        }
+        return false;
+      },
+      onMouseLeave: clearHoverSelection(),
       selected: false,
       disabled: false,
     },
@@ -246,6 +270,18 @@ export const getToolbarCellOptionsConfig = (
         }
         return true;
       },
+      onMouseOver: (state: EditorState, dispatch?: CommandDispatch) => {
+        const selectionRect = getClosestSelectionRect(state);
+        if (selectionRect) {
+          hoverRows(getSelectedRowIndexes(selectionRect), true)(
+            state,
+            dispatch,
+          );
+          return true;
+        }
+        return false;
+      },
+      onMouseLeave: clearHoverSelection(),
       selected: false,
       disabled: false,
     },
@@ -270,16 +306,17 @@ export const getToolbarCellOptionsConfig = (
   ];
 
   if (pluginState?.pluginConfig?.allowDistributeColumns) {
-    const distributeColumnWidths: Command = (state, dispatch, view) => {
-      const newResizeStateWithAnalytics = view
-        ? getNewResizeStateFromSelectedColumns(
-            initialSelectionRect,
-            editorState,
-            view.domAtPos.bind(view),
-            getEditorContainerWidth,
-          )
-        : undefined;
+    const newResizeStateWithAnalytics = editorView
+      ? getNewResizeStateFromSelectedColumns(
+          initialSelectionRect,
+          editorState,
+          editorView.domAtPos.bind(editorView),
+          getEditorContainerWidth,
+        )
+      : undefined;
+    const wouldChange = newResizeStateWithAnalytics?.changed ?? false;
 
+    const distributeColumnWidths: Command = (state, dispatch) => {
       if (newResizeStateWithAnalytics) {
         distributeColumnsWidthsWithAnalytics(editorAnalyticsAPI)(
           INPUT_METHOD.FLOATING_TB,
@@ -295,13 +332,16 @@ export const getToolbarCellOptionsConfig = (
       title: formatMessage(ContextualMenuMessages.distributeColumns),
       onClick: distributeColumnWidths,
       selected: false,
-      disabled: numberOfColumns <= 1,
+      disabled: !wouldChange,
     });
   }
 
   if (pluginState?.pluginConfig?.allowColumnSorting) {
     const hasMergedCellsInTable =
       getMergedCellsPositions(editorState.tr).length > 0;
+    const warning = hasMergedCellsInTable
+      ? formatMessage(ContextualMenuMessages.canNotSortTable)
+      : undefined;
 
     options.push({
       id: 'editor.table.sortColumnAsc',
@@ -316,6 +356,7 @@ export const getToolbarCellOptionsConfig = (
       },
       selected: false,
       disabled: hasMergedCellsInTable,
+      tooltip: warning,
     });
 
     options.push({
@@ -331,6 +372,7 @@ export const getToolbarCellOptionsConfig = (
       },
       selected: false,
       disabled: hasMergedCellsInTable,
+      tooltip: warning,
     });
   }
 
@@ -375,6 +417,7 @@ export const getToolbarConfig =
     getEditorContainerWidth: GetEditorContainerWidth,
     editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
     getEditorFeatureFlags: GetEditorFeatureFlags,
+    getEditorView: () => EditorView | null,
   ) =>
   (config: PluginConfig): FloatingToolbarHandler =>
   (state, intl) => {
@@ -396,6 +439,7 @@ export const getToolbarConfig =
       const cellItems = getCellItems(
         config,
         state,
+        getEditorView(),
         intl,
         getEditorContainerWidth,
         editorAnalyticsAPI,
@@ -453,6 +497,7 @@ export const getToolbarConfig =
         getDomRef,
         nodeType,
         offset: [0, 3],
+        zIndex: akEditorFloatingPanelZIndex + 1, // Place the context menu slightly above the others
         items: [
           menu,
           separator(menu.hidden),
@@ -504,6 +549,7 @@ const separator = (hidden?: boolean): FloatingToolbarItem<Command> => {
 const getCellItems = (
   pluginConfig: PluginConfig,
   state: EditorState,
+  view: EditorView | null,
   { formatMessage }: ToolbarMenuContext,
   getEditorContainerWidth: GetEditorContainerWidth,
   editorAnalyticsAPI: EditorAnalyticsAPI | undefined | null,
@@ -517,6 +563,7 @@ const getCellItems = (
     if (initialSelectionRect) {
       const cellOptions = getToolbarCellOptionsConfig(
         state,
+        view,
         initialSelectionRect,
         { formatMessage },
         getEditorContainerWidth,

package/src/plugins/table/ui/FloatingContextualButton/index.tsx

@@ -32,9 +32,13 @@ import {
   ACTION_SUBJECT,
   EVENT_TYPE,
 } from '@atlaskit/editor-common/analytics';
-import { tableFloatingCellButtonStyles } from './styles';
+import {
+  tableFloatingCellButtonStyles,
+  tableFloatingCellButtonSelectedStyles,
+} from './styles';
 import { Node as PMNode } from 'prosemirror-model';
 import { ErrorBoundary } from '@atlaskit/editor-common/error-boundary';
+import { ThemeProps } from '@atlaskit/theme/types';
 
 export interface Props {
   editorView: EditorView;
@@ -103,7 +107,13 @@ export class FloatingContextualButtonInner extends React.Component<
     const labelCellOptions = formatMessage(messages.cellOptions);
 
     const button = (
-      <div css={tableFloatingCellButtonStyles}>
+      <div
+        css={(theme: ThemeProps) => [
+          tableFloatingCellButtonStyles({ theme }),
+          isContextualMenuOpen &&
+            tableFloatingCellButtonSelectedStyles({ theme }),
+        ]}
+      >
         <ToolbarButton
           className={ClassName.CONTEXTUAL_MENU_BUTTON}
           selected={isContextualMenuOpen}

package/src/plugins/table/ui/FloatingContextualButton/styles.ts

@@ -1,25 +1,48 @@
 import { css } from '@emotion/react';
-import { N0, N20 } from '@atlaskit/theme/colors';
+import { B75, DN0, DN60, N0, N20, N30A, N700 } from '@atlaskit/theme/colors';
 import { borderRadius } from '@atlaskit/theme/constants';
 import { contextualMenuTriggerSize } from '../consts';
 import { token } from '@atlaskit/tokens';
+import { themed } from '@atlaskit/theme/components';
+import { ThemeProps } from '@atlaskit/theme/types';
 
-// TODO: https://product-fabric.atlassian.net/browse/DSP-4462
-export const tableFloatingCellButtonStyles = css`
+export const tableFloatingCellButtonStyles = (props: ThemeProps) => css`
   > div {
-    background: ${token('color.background.neutral', N20)};
+    // Sits behind button to provide surface-color background
+    background: ${token('elevation.surface', N20)};
     border-radius: ${borderRadius()}px;
-    border: 2px solid ${token('color.border.inverse', N0)};
     display: flex;
-    height: ${contextualMenuTriggerSize - 2}px;
+    height: ${contextualMenuTriggerSize + 2}px;
     flex-direction: column;
   }
   && button {
+    background: ${themed({
+      light: token('color.background.neutral', 'none'),
+      dark: token('color.background.neutral', 'none'),
+    })(props)};
     flex-direction: column;
+    margin: 2px;
+    outline: 2px solid ${token('color.border', N0)};
+    border-radius: 1px;
     padding: 0;
-    height: 100%;
+    height: calc(100% - 4px);
     display: flex;
   }
+  && button:hover {
+    background: ${themed({
+      light: token('color.background.neutral.hovered', N30A),
+      dark: token('color.background.neutral.hovered', DN60),
+    })(props)};
+  }
+  && button:active {
+    background: ${themed({
+      light: token(
+        'color.background.neutral.pressed',
+        'rgba(179, 212, 255, 0.6)',
+      ),
+      dark: token('color.background.neutral.pressed', B75),
+    })(props)};
+  }
   && button > span {
     margin: 0px -4px;
   }
@@ -27,3 +50,24 @@ export const tableFloatingCellButtonStyles = css`
     pointer-events: none;
   }
 `;
+
+export const tableFloatingCellButtonSelectedStyles = (props: ThemeProps) => css`
+  && button {
+    background: ${themed({
+      light: token('color.background.selected', N700),
+      dark: token('color.background.selected', DN0),
+    })(props)};
+  }
+  && button:hover {
+    background: ${themed({
+      light: token('color.background.selected.hovered', N700),
+      dark: token('color.background.selected.hovered', DN0),
+    })(props)};
+  }
+  && button:active {
+    background: ${themed({
+      light: token('color.background.selected.pressed', N700),
+      dark: token('color.background.selected.pressed', DN0),
+    })(props)};
+  }
+`;

package/src/plugins/table/ui/FloatingContextualMenu/ContextualMenu.tsx

@@ -159,6 +159,9 @@ export class ContextualMenu extends Component<
       >
         <DropdownMenu
           mountTo={mountPoint}
+          //This needs be removed when the a11y is completely handled
+          //Disabling key navigation now as it works only partially
+          disableArrowKeyNavigation={true}
           items={items}
           isOpen={isOpen}
           onOpenChange={this.handleOpenChange}

package/src/plugins/table/ui/common-styles.ts

@@ -427,7 +427,10 @@ export const tableStyles = (props: ThemeProps) => css`
     }
     .active .${ClassName.CONTROLS_CORNER_BUTTON} {
       border-color: ${tableBorderSelectedColor};
-      background: ${tableToolbarSelectedColor};
+      background: ${token(
+        'color.background.selected',
+        tableToolbarSelectedColor,
+      )};
     }
 
     .${ClassName.TABLE_CONTAINER}[data-number-column='true'] {
@@ -441,14 +444,17 @@ export const tableStyles = (props: ThemeProps) => css`
 
     :not(.${ClassName.IS_RESIZING}) .${ClassName.CONTROLS_CORNER_BUTTON}:hover {
       border-color: ${tableBorderSelectedColor};
-      background: ${tableToolbarSelectedColor};
+      background: ${token(
+        'color.background.selected',
+        tableToolbarSelectedColor,
+      )};
       cursor: pointer;
     }
 
     :not(.${ClassName.IS_RESIZING})
       .${ClassName.CONTROLS_CORNER_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER} {
       border-color: ${tableBorderDeleteColor};
-      background: ${tableToolbarDeleteColor};
+      background: ${token('color.background.danger', tableToolbarDeleteColor)};
     }
 
     /* Row controls */
@@ -555,10 +561,13 @@ export const tableStyles = (props: ThemeProps) => css`
         .${ClassName.NUMBERED_COLUMN_BUTTON}.active {
           border-bottom: 1px solid ${tableBorderSelectedColor};
           border-color: ${tableBorderSelectedColor};
-          background-color: ${tableToolbarSelectedColor};
+          background-color: ${token(
+            'color.background.selected',
+            tableToolbarSelectedColor,
+          )};
           position: relative;
           z-index: ${akEditorUnitZIndex};
-          color: ${token('color.text.inverse', N0)};
+          color: ${token('color.text.selected', N0)};
         }
       }
     }
@@ -569,16 +578,22 @@ export const tableStyles = (props: ThemeProps) => css`
       .${ClassName.NUMBERED_COLUMN_BUTTON}:hover {
         border-bottom: 1px solid ${tableBorderSelectedColor};
         border-color: ${tableBorderSelectedColor};
-        background-color: ${tableToolbarSelectedColor};
+        background-color: ${token(
+          'color.background.selected',
+          tableToolbarSelectedColor,
+        )};
         position: relative;
         z-index: ${akEditorUnitZIndex};
-        color: ${token('color.text.inverse', N0)};
+        color: ${token('color.text.selected', N0)};
       }
       .${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER} {
-        background-color: ${tableToolbarDeleteColor};
+        background-color: ${token(
+          'color.background.danger',
+          tableToolbarDeleteColor,
+        )};
         border: 1px solid ${tableBorderDeleteColor};
         border-left: 0;
-        color: ${token('color.text.inverse', R500)};
+        color: ${token('color.text.danger', R500)};
         position: relative;
         z-index: ${akEditorUnitZIndex};
       }

package/src/plugins/table/ui/consts.ts

@@ -1,13 +1,13 @@
 import {
   B200,
   B300,
-  N0,
   N20,
   R400,
   R75,
   DN400,
   N200,
   DN30,
+  N0,
 } from '@atlaskit/theme/colors';
 import {
   tableCellBorderWidth,
@@ -34,11 +34,13 @@ import { themed } from '@atlaskit/theme/components';
 
 // TODO: https://product-fabric.atlassian.net/browse/DSP-4135
 // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage
-export const tableCellBackgroundColor = themed({ light: N0, dark: DN30 });
-
+export const tableCellBackgroundColor = themed({
+  light: token('elevation.surface', N0),
+  dark: token('elevation.surface', DN30),
+});
 export const tableToolbarColor = themed({
-  light: akEditorTableToolbar,
-  dark: akEditorTableToolbarDark,
+  light: token('color.background.neutral.subtle', akEditorTableToolbar),
+  dark: token('color.background.neutral.subtle', akEditorTableToolbarDark),
 });
 export const tableTextColor = themed({
   light: token('color.text.subtlest', N200),

package/src/plugins/table/ui/ui-styles.ts

@@ -120,7 +120,10 @@ export const HeaderButton = (props: ThemeProps, cssString?: string) => css`
 
   .active .${ClassName.CONTROLS_BUTTON} {
     color: ${token('color.icon.inverse', N0)};
-    background-color: ${tableToolbarSelectedColor};
+    background-color: ${token(
+      'color.background.selected',
+      tableToolbarSelectedColor,
+    )};
     border-color: ${tableBorderSelectedColor};
   }
 `;
@@ -128,7 +131,10 @@ export const HeaderButton = (props: ThemeProps, cssString?: string) => css`
 export const HeaderButtonHover = () => css`
   .${ClassName.CONTROLS_BUTTON}:hover {
     color: ${token('color.icon.inverse', N0)};
-    background-color: ${tableToolbarSelectedColor};
+    background-color: ${token(
+      'color.background.selected',
+      tableToolbarSelectedColor,
+    )};
     border-color: ${tableBorderSelectedColor};
     cursor: pointer;
   }
@@ -136,7 +142,10 @@ export const HeaderButtonHover = () => css`
 
 export const HeaderButtonDanger = () => css`
   .${ClassName.HOVERED_CELL_IN_DANGER} .${ClassName.CONTROLS_BUTTON} {
-    background-color: ${tableToolbarDeleteColor};
+    background-color: ${token(
+      'color.background.danger',
+      tableToolbarDeleteColor,
+    )};
     border-color: ${tableBorderDeleteColor};
     position: relative;
     z-index: ${akEditorUnitZIndex};
@@ -291,7 +300,10 @@ const columnHeaderButton = (props: ThemeProps, cssString?: string) => css`
 
 const columnHeaderButtonSelected = css`
   color: ${token('color.text.inverse', N0)};
-  background-color: ${tableToolbarSelectedColor};
+  background-color: ${token(
+    'color.background.selected',
+    tableToolbarSelectedColor,
+  )};
   border-color: ${tableBorderSelectedColor};
   z-index: ${columnControlsSelectedZIndex};
 `;
@@ -370,7 +382,10 @@ export const columnControlsDecoration = (props: ThemeProps) => css`
 
       &.${ClassName.HOVERED_CELL_IN_DANGER}
         .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-        background-color: ${tableToolbarDeleteColor};
+        background-color: ${token(
+          'color.background.danger',
+          tableToolbarDeleteColor,
+        )};
         border: 1px solid ${tableBorderDeleteColor};
         border-bottom: none;
         z-index: ${akEditorUnitZIndex * 100};