@atlaskit/editor-plugin-table 7.6.4 → 7.6.6

package/src/ui/LayoutButton/index.tsx

@@ -125,7 +125,9 @@ class LayoutButton extends React.Component<Props & WrappedComponentProps, any> {
         aria-label={title}
         style={{
           position: 'fixed',
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           top: pos.top + 22,
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           left: tablePos.right,
         }}
       >

package/src/ui/TableFloatingColumnControls/ColumnControls/index.tsx

@@ -304,7 +304,9 @@ export const ColumnControls = ({
         data-testid="table-floating-column-controls"
         style={{
           gridTemplateColumns: widths,
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           marginTop,
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           width: stickyTop ? containerWidth : undefined,
           overflowX: stickyTop ? 'hidden' : 'visible',
           pointerEvents: isDragging ? 'none' : undefined,

package/src/ui/TableFloatingColumnControls/ColumnDropTargets/ColumnDropTarget.tsx

@@ -95,8 +95,11 @@ export const ColumnDropTarget = ({
     <div
       ref={dropTargetRef}
       style={{
+        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
         width: width && `${width - 1}px`,
+        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
         height: height && `${height}px`,
+        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
         marginTop: marginTop && `${marginTop}px`,
         pointerEvents: 'auto',
         flexShrink: 0,

package/src/ui/TableFloatingControls/CornerControls/ClassicCornerControls.tsx

@@ -41,6 +41,7 @@ class CornerControlComponent extends Component<
           sticky: this.props.stickyTop !== undefined,
         })}
         style={{
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           top:
             this.props.stickyTop !== undefined
               ? `${this.props.stickyTop}px`

package/src/ui/TableFloatingControls/NumberColumn/index.tsx

@@ -41,6 +41,7 @@ export default class NumberColumn extends Component<Props, any> {
       <div
         className={ClassName.NUMBERED_COLUMN}
         style={{
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           marginTop:
             hasHeaderRow && this.props.stickyTop !== undefined
               ? rowHeights[0]

package/src/ui/TableFloatingControls/RowControls/ClassicControls.tsx

@@ -82,11 +82,15 @@ class RowControlsComponent extends Component<Props & WrappedComponentProps> {
                   )} ${thisRowSticky ? 'sticky' : ''}`}
                   key={startIndex}
                   style={{
+                    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
                     height: height,
+                    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
                     marginTop: `${marginTop}px`,
+                    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
                     top: thisRowSticky
                       ? `${this.props.stickyTop! + 3}px`
                       : undefined,
+                    // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
                     paddingTop: thisRowSticky
                       ? `${tableControlsSpacing}px`
                       : undefined,

package/src/ui/TableFloatingControls/RowControls/DragControls.tsx

@@ -215,6 +215,7 @@ const DragControlsComponent = ({
           width: '9px',
           height: '100%',
           position: 'relative',
+          // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
           right: '-0.5px',
         }}
         data-testid={`table-floating-row-${
@@ -297,7 +298,10 @@ const DragControlsComponent = ({
         gridTemplateColumns: isDragging
           ? `${dropTargetExtendedWidth}px 14px ${tableWidth}px`
           : '0px 14px 0px',
-        left: isDragging ? `-${dropTargetExtendedWidth + 2}px` : `-2px`,
+        // eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
+        left: isDragging
+          ? `-${dropTargetExtendedWidth + 2}px`
+          : token('space.negative.025', '-2px'),
       }}
       onMouseMove={handleMouseMove}
       contentEditable={false}

package/src/ui/common-styles.ts

@@ -211,6 +211,7 @@ const tableBorderStyles = () => {
   }
 };
 
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 const tableStickyHeaderColumnControlsDecorationsStyle = () => {
   if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
     return css`
@@ -1116,6 +1117,7 @@ export const tableStyles = (props: { featureFlags?: FeatureFlags }) => css`
   ${shadowSentinelStyles}
 `;
 
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 export const tableFullPageEditorStyles = css`
   .ProseMirror .${ClassName.TABLE_NODE_WRAPPER} > table {
     margin-left: 0;

package/src/ui/ui-styles.ts

@@ -55,14 +55,15 @@ const InsertLine = (cssString?: string) => css`
   }
 `;
 
-const Marker = () => css`
-  background-color: ${tableBorderColor};
-  position: absolute;
-  height: ${lineMarkerSize}px;
-  width: ${lineMarkerSize}px;
-  border-radius: 50%;
-  pointer-events: none;
-`;
+const Marker = () =>
+  css({
+    backgroundColor: tableBorderColor,
+    position: 'absolute',
+    height: `${lineMarkerSize}px`,
+    width: `${lineMarkerSize}px`,
+    borderRadius: '50%',
+    pointerEvents: 'none',
+  });
 
 export const InsertMarker = (cssString?: string) => css`
   .${ClassName.CONTROLS_INSERT_MARKER} {
@@ -93,6 +94,8 @@ const Button = (cssString?: string) => css`
   ${cssString}
 `;
 
+// Explicit pixel values required here to ensure classic row controls align correctly
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 export const HeaderButton = (cssString?: string) => css`
   .${ClassName.CONTROLS_BUTTON} {
     background: ${tableHeaderCellBackgroundColor};
@@ -273,28 +276,30 @@ export const dragCornerControlButton = () => css`
   }
 `;
 
-export const insertColumnButtonWrapper = () => css`
-  ${InsertButton()}
-  ${InsertButtonHover()}
-  ${InsertLine(
-    `
+export const insertColumnButtonWrapper = () =>
+  css(
+    InsertButton(),
+    InsertButtonHover(),
+    InsertLine(
+      `
     width: 2px;
     left: 9px;
   `,
-  )}
-`;
-
-export const insertRowButtonWrapper = () => css`
-  ${InsertButton()}
-  ${InsertButtonHover()}
-  ${InsertLine(
-    `
+    ),
+  );
+
+export const insertRowButtonWrapper = () =>
+  css(
+    InsertButton(),
+    InsertButtonHover(),
+    InsertLine(
+      `
     height: 2px;
     top: -11px;
     left: ${tableInsertColumnButtonSize - 1}px;
   `,
-  )}
-`;
+    ),
+  );
 
 export const columnControlsLineMarker = () => css`
   .${ClassName.TABLE_CONTAINER}.${ClassName.WITH_CONTROLS}
@@ -419,41 +424,42 @@ const overflowShadowWidhoutDnD = (
 
 const columnHeaderButton = (cssString?: string) => {
   if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
-    return css`
-      background: ${tableHeaderCellBackgroundColor};
-      display: block;
-      box-sizing: border-box;
-      padding: 0;
-
-      :focus {
-        outline: none;
-      }
-
-      ${cssString}
-    `;
+    return css(
+      {
+        background: tableHeaderCellBackgroundColor,
+        display: 'block',
+        boxSizing: 'border-box',
+        padding: 0,
+        ':focus': {
+          outline: 'none',
+        },
+      },
+      cssString,
+    );
   } else {
-    return css`
-      background: ${tableHeaderCellBackgroundColor};
-      border: 1px solid ${tableBorderColor};
-      display: block;
-      box-sizing: border-box;
-      padding: 0;
-
-      :focus {
-        outline: none;
-      }
-
-      ${cssString}
-    `;
+    return css(
+      {
+        background: tableHeaderCellBackgroundColor,
+        border: `1px solid ${tableBorderColor}`,
+        display: 'block',
+        boxSizing: 'border-box',
+        padding: 0,
+        ':focus': {
+          outline: 'none',
+        },
+      },
+      cssString,
+    );
   }
 };
 
-const columnHeaderButtonSelected = () => css`
-  color: ${token('color.text.inverse', N0)};
-  background-color: ${tableToolbarSelectedColor};
-  border-color: ${tableBorderSelectedColor};
-  z-index: ${columnControlsSelectedZIndex};
-`;
+const columnHeaderButtonSelected = () =>
+  css({
+    color: token('color.text.inverse', N0),
+    backgroundColor: tableToolbarSelectedColor,
+    borderColor: tableBorderSelectedColor,
+    zIndex: columnControlsSelectedZIndex,
+  });
 
 const getFloatingDotOverrides = () => {
   return getBooleanFF('platform.editor.custom-table-width')
@@ -795,6 +801,8 @@ const getLastColumnResizerOverrides = () => {
     : '';
 };
 
+// Explicit pixel values required here to ensure correct positioning and sizes of column resize handle
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 const resizeHandleOverrides = (isDragAndDropEnabled: boolean | undefined) => {
   if (isDragAndDropEnabled) {
     return css`
@@ -902,34 +910,37 @@ export const resizeHandle = (isDragAndDropEnabled: boolean | undefined) => css`
 `;
 
 // Drag and Drop: drop target insert line
-const tableCellColumnInsertLineStyles = css`
-  content: ' ';
-  position: absolute;
-  height: calc(100% + ${tableCellBorderWidth * 2}px);
-  width: ${insertLineWidth}px;
-  z-index: ${columnControlsZIndex * 2};
-`;
-
-const tableCellRowInsertLineStyles = css`
-  content: ' ';
-  position: absolute;
-  left: ${token('space.negative.025', '-2px')};
-  height: ${insertLineWidth}px;
-  width: calc(100% + ${tableCellBorderWidth * 2}px);
-  z-index: ${columnControlsZIndex * 2};
-`;
-
-const insertLineActiveColor = css`
-  background-color: ${tableBorderSelectedColor};
-`;
-
-const insertLineInactiveColor = css`
-  background-color: ${token(
+const tableCellColumnInsertLineStyles = css({
+  content: "' '",
+  position: 'absolute',
+  height: `calc(100% + ${tableCellBorderWidth * 2}px)`,
+  width: `${insertLineWidth}px`,
+  zIndex: columnControlsZIndex * 2,
+});
+
+const tableCellRowInsertLineStyles = css({
+  content: "' '",
+  position: 'absolute',
+  left: token('space.negative.025', '-2px'),
+  height: `${insertLineWidth}px`,
+  width: `calc(100% + ${tableCellBorderWidth * 2}px)`,
+  zIndex: columnControlsZIndex * 2,
+});
+
+const insertLineActiveColor = css({
+  backgroundColor: tableBorderSelectedColor,
+});
+
+const insertLineInactiveColor = css({
+  backgroundColor: token(
     'color.background.accent.gray.subtler',
     akEditorTableBorder,
-  )};
-`;
+  ),
+});
 
+// Explicit pixel values required here to ensure correct positioning of line that is show on row
+// or column drag
+// eslint-disable-next-line @atlaskit/design-system/ensure-design-token-usage/preview
 export const insertLine = () => css`
   .${ClassName.TABLE_CONTAINER} {
     td.${ClassName.WITH_FIRST_COLUMN_INSERT_LINE}::before {