@atlaskit/editor-plugin-table 5.2.2 → 5.3.0

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

@@ -55,6 +55,7 @@ import {
   columnControlsDecoration,
   columnControlsLineMarker,
   DeleteButton,
+  floatingColumnControls,
   HeaderButton,
   HeaderButtonDanger,
   HeaderButtonHover,
@@ -515,6 +516,10 @@ export const tableStyles = (
         }
       }
 
+      .${ClassName.COLUMN_CONTROLS_WRAPPER} {
+        padding: 0 ${tablePadding}px;
+      }
+
       &.${ClassName.TABLE_CONTAINER}[data-number-column='true'] {
         padding-left: ${akEditorTableNumberColumnWidth + tablePadding - 1}px;
       }
@@ -670,6 +675,8 @@ export const tableStyles = (
       )}
     }
 
+    ${floatingColumnControls(props)}
+
     :not(.${ClassName.IS_RESIZING}) .${ClassName.ROW_CONTROLS} {
       ${HeaderButtonHover(props)}
       ${HeaderButtonDanger(props)}
@@ -855,6 +862,12 @@ export const tableStyles = (
     .${ClassName.ROW_CONTROLS_WRAPPER} {
       left: -${tableToolbarSize}px;
     }
+
+    .${ClassName.COLUMN_CONTROLS_WRAPPER} {
+      position: absolute;
+      top: ${tableMarginTop + 1}px;
+    }
+
     ${tableWrapperStyles()}
   }
 

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

@@ -374,6 +374,20 @@ const getFloatingDotOverrides = (props: ThemeProps) => {
     : '';
 };
 
+export const floatingColumnControls = (props: ThemeProps) => {
+  return css`
+    .${ClassName.COLUMN_DROP_TARGET_CONTROLS} {
+      box-sizing: border-box;
+      position: absolute;
+
+      .${ClassName.COLUMN_CONTROLS_INNER} {
+        display: flex;
+        flex-direction: row;
+      }
+    }
+  `;
+};
+
 export const columnControlsDecoration = (props: ThemeProps) => {
   if (getBooleanFF('platform.editor.table.column-controls-styles-updated')) {
     return css`