@atlaskit/editor-plugin-table 5.6.5 → 5.6.7

package/dist/es2019/{plugins/table/ui → ui}/common-styles.js

@@ -114,14 +114,14 @@ const breakoutWidthStyling = () => {
     }
   `;
 };
-const tableBorderStyles = props => {
+const tableBorderStyles = () => {
   if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
-    return `border-color: ${tableBorderDeleteColor(props)}`;
+    return `border-color: ${tableBorderDeleteColor}`;
   } else {
-    return `border: 1px solid ${tableBorderDeleteColor(props)}`;
+    return `border: 1px solid ${tableBorderDeleteColor}`;
   }
 };
-const tableStickyHeaderColumnControlsDecorationsStyle = props => {
+const tableStickyHeaderColumnControlsDecorationsStyle = () => {
   if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
     return css`
       .${ClassName.TABLE_STICKY} .${ClassName.COLUMN_CONTROLS_DECORATIONS} {
@@ -131,7 +131,7 @@ const tableStickyHeaderColumnControlsDecorationsStyle = props => {
 
       .${ClassName.TABLE_STICKY}
         .${ClassName.COLUMN_CONTROLS_DECORATIONS}::after {
-        border-left: 1px solid ${tableBorderColor(props)};
+        border-left: 1px solid ${tableBorderColor};
       }
 
       .${ClassName.TABLE_STICKY}
@@ -152,7 +152,7 @@ const tableStickyHeaderColumnControlsDecorationsStyle = props => {
     `;
   }
 };
-const tableStickyHeaderFirefoxFixStyle = props => {
+const tableStickyHeaderFirefoxFixStyle = () => {
   /*
     This is MAGIC!
     This fixes a bug which occurs in firefox when the first row becomes sticky.
@@ -211,13 +211,13 @@ export const tableStyles = props => css`
   }
 
   .ProseMirror {
-    ${tableSharedStyle(props)};
+    ${tableSharedStyle()};
     ${columnControlsLineMarker()};
-    ${hoveredDeleteButton(props)};
-    ${hoveredCell(props)};
+    ${hoveredDeleteButton()};
+    ${hoveredCell()};
     ${hoveredWarningCell};
-    ${getBooleanFF('platform.editor.table.drag-and-drop') && insertLine(props)};
-    ${resizeHandle(props)};
+    ${getBooleanFF('platform.editor.table.drag-and-drop') && insertLine()};
+    ${resizeHandle()};
     ${rangeSelectionStyles};
 
     .${ClassName.LAST_ITEM_IN_CELL} {
@@ -231,15 +231,15 @@ export const tableStyles = props => css`
       }
 
       td.${ClassName.TABLE_CELL} {
-        background-color: ${tableCellBackgroundColor(props)};
+        background-color: ${tableCellBackgroundColor};
 
         // ED-15246: Trello card is visible through a border of a table border
         // This fixes a border issue caused by relative positioned table cells
         &::after {
           height: 100%;
           content: '';
-          border-left: 1px solid ${tableBorderColor(props)};
-          border-bottom: 1px solid ${tableBorderColor(props)};
+          border-left: 1px solid ${tableBorderColor};
+          border-bottom: 1px solid ${tableBorderColor};
           position: absolute;
           right: 0px;
           top: 0px;
@@ -252,19 +252,19 @@ export const tableStyles = props => css`
     }
 
     .${ClassName.CONTROLS_FLOATING_BUTTON_COLUMN} {
-      ${insertColumnButtonWrapper(props)}
+      ${insertColumnButtonWrapper()}
     }
 
     .${ClassName.CONTROLS_FLOATING_BUTTON_ROW} {
-      ${insertRowButtonWrapper(props)}
+      ${insertRowButtonWrapper()}
     }
 
-    ${dragInsertButtonWrapper(props)}
+    ${dragInsertButtonWrapper()}
 
-    ${dragCornerControlButton(props)}
+    ${dragCornerControlButton()}
 
     /* Delete button */
-    ${DeleteButton(props)}
+    ${DeleteButton()}
     /* Ends Delete button */
 
     /* sticky styles */
@@ -297,9 +297,9 @@ export const tableStyles = props => css`
       width: ${tableToolbarSize}px;
     }
 
-    ${tableStickyHeaderColumnControlsDecorationsStyle(props)}
+    ${tableStickyHeaderColumnControlsDecorationsStyle()}
 
-    ${tableStickyHeaderFirefoxFixStyle(props)}
+    ${tableStickyHeaderFirefoxFixStyle()}
 
     .${ClassName.TABLE_STICKY}
       .${ClassName.ROW_CONTROLS}
@@ -358,7 +358,7 @@ export const tableStyles = props => css`
 
     tr.sticky th {
       border-bottom: ${stickyHeaderBorderBottomWidth}px solid
-        ${tableBorderColor(props)};
+        ${tableBorderColor};
       margin-right: -1px;
     }
 
@@ -427,7 +427,7 @@ export const tableStyles = props => css`
     }
 
     ${sentinelStyles}
-    ${OverflowShadow(props)}
+    ${OverflowShadow()}
     ${stickyScrollbarStyles(props.featureFlags)}
 
     .${ClassName.TABLE_STICKY} .${ClassName.TABLE_STICKY_SHADOW} {
@@ -482,8 +482,8 @@ export const tableStyles = props => css`
     /* Breakout only works on top level unless wrapped in fragment mark */
     ${breakoutWidthStyling()}
 
-    ${columnControlsDecoration(props)};
-    ${rowControlsWrapperDotStyle(props)};
+    ${columnControlsDecoration()};
+    ${rowControlsWrapperDotStyle()};
 
     /* Corner controls */
     .${ClassName.CORNER_CONTROLS} {
@@ -494,7 +494,7 @@ export const tableStyles = props => css`
       .${ClassName.CORNER_CONTROLS_INSERT_ROW_MARKER} {
         position: relative;
 
-        ${InsertMarker(props, `
+        ${InsertMarker(`
           left: -11px;
           top: 9px;
         `)};
@@ -513,10 +513,10 @@ export const tableStyles = props => css`
       top: 0;
       width: ${tableToolbarSize + 1}px;
       height: ${tableToolbarSize + 1}px;
-      border: 1px solid ${tableBorderColor(props)};
+      border: 1px solid ${tableBorderColor};
       border-radius: 0;
       border-top-left-radius: ${tableBorderRadiusSize}px;
-      background: ${tableHeaderCellBackgroundColor(props)};
+      background: ${tableHeaderCellBackgroundColor};
       box-sizing: border-box;
       padding: 0;
       :focus {
@@ -524,8 +524,8 @@ export const tableStyles = props => css`
       }
     }
     .active .${ClassName.CONTROLS_CORNER_BUTTON} {
-      border-color: ${tableBorderSelectedColor(props)};
-      background: ${tableToolbarSelectedColor(props)};
+      border-color: ${tableBorderSelectedColor};
+      background: ${tableToolbarSelectedColor};
     }
 
     .${ClassName.TABLE_CONTAINER}[data-number-column='true'] {
@@ -538,15 +538,15 @@ export const tableStyles = props => css`
     }
 
     :not(.${ClassName.IS_RESIZING}) .${ClassName.CONTROLS_CORNER_BUTTON}:hover {
-      border-color: ${tableBorderSelectedColor(props)};
-      background: ${tableToolbarSelectedColor(props)};
+      border-color: ${tableBorderSelectedColor};
+      background: ${tableToolbarSelectedColor};
       cursor: pointer;
     }
 
     :not(.${ClassName.IS_RESIZING})
       .${ClassName.CONTROLS_CORNER_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER} {
-      border-color: ${tableBorderDeleteColor(props)};
-      background: ${tableToolbarDeleteColor(props)};
+      border-color: ${tableBorderDeleteColor};
+      background: ${tableToolbarDeleteColor};
     }
 
     /* Row controls */
@@ -556,7 +556,7 @@ export const tableStyles = props => css`
       display: none;
       position: relative;
 
-      ${InsertMarker(props, `
+      ${InsertMarker(`
         bottom: -1px;
         left: -11px;
       `)};
@@ -578,8 +578,8 @@ export const tableStyles = props => css`
         z-index: ${akEditorUnitZIndex};
       }
 
-      ${HeaderButton(props, `
-        border-bottom: 1px solid ${tableBorderColor(props)};
+      ${HeaderButton(`
+        border-bottom: 1px solid ${tableBorderColor};
         border-right: 0px;
         border-radius: 0;
         height: 100%;
@@ -720,11 +720,11 @@ export const tableStyles = props => css`
       }
     }
 
-    ${floatingColumnControls(props)}
+    ${floatingColumnControls()}
 
     :not(.${ClassName.IS_RESIZING}) .${ClassName.ROW_CONTROLS} {
-      ${HeaderButtonHover(props)}
-      ${HeaderButtonDanger(props)}
+      ${HeaderButtonHover()}
+      ${HeaderButtonDanger()}
     }
 
     /* Numbered column */
@@ -738,23 +738,23 @@ export const tableStyles = props => css`
     }
 
     .${ClassName.NUMBERED_COLUMN_BUTTON} {
-      border: 1px solid ${tableBorderColor(props)};
+      border: 1px solid ${tableBorderColor};
       box-sizing: border-box;
       margin-top: -1px;
       padding-bottom: 2px;
       padding: 10px 2px;
       text-align: center;
       font-size: ${relativeFontSizeToBase16(fontSize())};
-      background-color: ${tableHeaderCellBackgroundColor(props)};
-      color: ${tableTextColor(props)};
-      border-color: ${tableBorderColor(props)};
+      background-color: ${tableHeaderCellBackgroundColor};
+      color: ${tableTextColor};
+      border-color: ${tableBorderColor};
 
       :first-child:not(style),
       style:first-child + * {
         margin-top: 0;
       }
       :last-child {
-        border-bottom: 1px solid ${tableBorderColor(props)};
+        border-bottom: 1px solid ${tableBorderColor};
       }
     }
 
@@ -787,9 +787,9 @@ export const tableStyles = props => css`
         }
 
         .${ClassName.NUMBERED_COLUMN_BUTTON}.active {
-          border-bottom: 1px solid ${tableBorderSelectedColor(props)};
-          border-color: ${tableBorderSelectedColor(props)};
-          background-color: ${tableToolbarSelectedColor(props)};
+          border-bottom: 1px solid ${tableBorderSelectedColor};
+          border-color: ${tableBorderSelectedColor};
+          background-color: ${tableToolbarSelectedColor};
           position: relative;
           z-index: ${akEditorUnitZIndex};
           color: ${`var(--ds-text-selected, ${N0})`};
@@ -801,16 +801,16 @@ export const tableStyles = props => css`
         cursor: pointer;
       }
       .${ClassName.NUMBERED_COLUMN_BUTTON}:not(.${ClassName.NUMBERED_COLUMN_BUTTON_DISABLED}):hover {
-        border-bottom: 1px solid ${tableBorderSelectedColor(props)};
-        border-color: ${tableBorderSelectedColor(props)};
-        background-color: ${tableToolbarSelectedColor(props)};
+        border-bottom: 1px solid ${tableBorderSelectedColor};
+        border-color: ${tableBorderSelectedColor};
+        background-color: ${tableToolbarSelectedColor};
         position: relative;
         z-index: ${akEditorUnitZIndex};
         color: ${`var(--ds-text-selected, ${N0})`};
       }
       .${ClassName.NUMBERED_COLUMN_BUTTON}.${ClassName.HOVERED_CELL_IN_DANGER} {
-        background-color: ${tableToolbarDeleteColor(props)};
-        border: 1px solid ${tableBorderDeleteColor(props)};
+        background-color: ${tableToolbarDeleteColor};
+        border: 1px solid ${tableBorderDeleteColor};
         border-left: 0;
         color: ${`var(--ds-text-danger, ${R500})`};
         position: relative;
@@ -871,15 +871,15 @@ export const tableStyles = props => css`
         pointer-events: none;
       }
       .${ClassName.SELECTED_CELL} {
-        border: 1px solid ${tableBorderSelectedColor(props)};
+        border: 1px solid ${tableBorderSelectedColor};
       }
       .${ClassName.SELECTED_CELL}::after {
-        background: ${tableCellSelectedColor(props)};
+        background: ${tableCellSelectedColor};
         z-index: ${akEditorSmallZIndex};
       }
       th.${ClassName.HOVERED_CELL_IN_DANGER}::after,
         td.${ClassName.HOVERED_CELL_IN_DANGER}::after {
-        background: ${tableCellDeleteColor(props)};
+        background: ${tableCellDeleteColor};
         z-index: ${akEditorUnitZIndex * 100};
       }
       // ED-15246: Trello card is visible through a border of a table border
@@ -893,7 +893,7 @@ export const tableStyles = props => css`
         &::after {
           height: 100%;
           width: 100%;
-          border: 1px solid ${tableBorderSelectedColor(props)};
+          border: 1px solid ${tableBorderSelectedColor};
           content: '';
           position: absolute;
           left: -1px;
@@ -904,12 +904,12 @@ export const tableStyles = props => css`
           pointer-events: none;
         }
         &.${ClassName.HOVERED_CELL_IN_DANGER}::after {
-          ${tableBorderStyles(props)};
+          ${tableBorderStyles()};
           z-index: ${akEditorUnitZIndex * 100};
         }
 
         &.${ClassName.HOVERED_NO_HIGHLIGHT}.${ClassName.HOVERED_CELL_IN_DANGER}::after {
-          ${tableBorderStyles(props)};
+          ${tableBorderStyles()};
           z-index: ${akEditorUnitZIndex * 100};
         }
       }

package/dist/es2019/ui/consts.js

@@ -0,0 +1,65 @@
+import { tableCellBorderWidth, tableMarginTop } from '@atlaskit/editor-common/styles';
+import { akEditorTableBorder, akEditorTableBorderSelected, akEditorTableCellBlanketDeleted, akEditorTableCellBlanketSelected, akEditorTableHeaderCellBackground, akEditorTableToolbar, akEditorTableToolbarSize, akEditorUnitZIndex, akRichMediaResizeZIndex } from '@atlaskit/editor-shared-styles';
+import { B200, N0, N20, N200, N20A, N300, R300, R400, R75 } from '@atlaskit/theme/colors';
+import { RESIZE_HANDLE_AREA_DECORATION_GAP } from '../types';
+
+/**
+ * Basic colors added to prevent content overflow in table cells.
+ */
+
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4135
+export const tableCellBackgroundColor = `var(--ds-surface, ${N0})`;
+export const tableHeaderCellBackgroundColor = `var(--ds-background-accent-gray-subtlest, ${akEditorTableHeaderCellBackground})`;
+export const tableToolbarColor = `var(--ds-background-neutral-subtle, ${akEditorTableToolbar})`;
+export const tableTextColor = `var(--ds-text-subtlest, ${N200})`;
+export const tableBorderColor = `var(--ds-background-accent-gray-subtler, ${akEditorTableBorder})`;
+export const tableFloatingControlsColor = `var(--ds-background-neutral, ${N20})`;
+
+// TODO: https://product-fabric.atlassian.net/browse/DSP-4461
+export const tableCellSelectedColor = `var(--ds-blanket-selected, ${akEditorTableCellBlanketSelected})`;
+export const tableToolbarSelectedColor = `var(--ds-background-selected-pressed, ${B200})`;
+export const tableBorderSelectedColor = `var(--ds-border-focused, ${akEditorTableBorderSelected})`;
+export const tableCellSelectedDeleteIconColor = `var(--ds-icon-subtle, ${N300})`;
+export const tableCellSelectedDeleteIconBackground = `var(--ds-background-accent-gray-subtlest, ${N20A})`;
+export const tableCellDeleteColor = `var(--ds-blanket-danger, ${akEditorTableCellBlanketDeleted})`;
+export const tableBorderDeleteColor = `var(--ds-border-danger, ${R400})`;
+export const tableToolbarDeleteColor = `var(--ds-background-danger-pressed, ${R75})`;
+export const tableCellHoverDeleteIconColor = "var(--ds-icon-inverse, white)";
+export const tableCellHoverDeleteIconBackground = `var(--ds-background-danger-bold, ${R300})`;
+export const tableBorderRadiusSize = 3;
+export const tablePadding = 8;
+export const tableScrollbarOffset = 15;
+export const tableMarginFullWidthMode = 2;
+export const tableInsertColumnButtonSize = 20;
+export const tableDeleteButtonSize = 16;
+export const tableDeleteButtonOffset = 6;
+export const tableToolbarSize = akEditorTableToolbarSize;
+export const tableControlsSpacing = tableMarginTop + tablePadding - tableCellBorderWidth;
+export const tableInsertColumnButtonOffset = 3;
+export const layoutButtonSize = 32;
+export const lineMarkerOffsetFromColumnControls = 13;
+export const lineMarkerSize = 4;
+export const columnControlsDecorationHeight = 25;
+export const columnControlsZIndex = akEditorUnitZIndex * 10;
+export const columnControlsSelectedZIndex = columnControlsZIndex + 1;
+export const rowControlsZIndex = akEditorUnitZIndex * 10;
+export const columnResizeHandleZIndex = columnControlsSelectedZIndex + 1;
+export const insertLineWidth = 3;
+export const resizeHandlerAreaWidth = RESIZE_HANDLE_AREA_DECORATION_GAP / 3;
+export const resizeLineWidth = 2;
+export const resizeHandlerZIndex = columnControlsZIndex + akRichMediaResizeZIndex;
+export const contextualMenuTriggerSize = 16;
+export const contextualMenuDropdownWidth = 180;
+export const stickyRowZIndex = resizeHandlerZIndex + 2;
+export const stickyRowOffsetTop = 8;
+export const stickyHeaderBorderBottomWidth = 1;
+export const tableOverflowShadowWidth = 8;
+export const tableOverflowShadowWidthWide = 32;
+export const dropTargetsZIndex = 14;
+export const TABLE_SNAP_GAP = 9;
+export const TABLE_HIGHLIGHT_GAP = 10;
+export const TABLE_HIGHLIGHT_TOLERANCE = 2;
+export const STICKY_HEADER_TOGGLE_TOLERANCE_MS = 5;
+export const dragMenuDropdownWidth = 240;
+export const dragTableInsertColumnButtonSize = 16;
+export const dropTargetExtendedWidth = 150;