@atlaskit/editor-plugin-table 5.3.39 → 5.4.0

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

@@ -5,6 +5,7 @@ import {
   tableSharedStyle,
 } from '@atlaskit/editor-common/styles';
 import type { FeatureFlags } from '@atlaskit/editor-common/types';
+import { browser } from '@atlaskit/editor-common/utils';
 import {
   akEditorSelectedNodeClassName,
   akEditorSmallZIndex,
@@ -246,6 +247,26 @@ const tableStickyHeaderColumnControlsDecorationsStyle = (
   }
 };
 
+const tableStickyHeaderFirefoxFixStyle = (
+  props: ThemeProps & { featureFlags?: FeatureFlags },
+) => {
+  /*
+    This is MAGIC!
+    This fixes a bug which occurs in firefox when the first row becomes sticky.
+    see https://product-fabric.atlassian.net/browse/ED-19177
+  */
+  if (
+    browser.gecko &&
+    getBooleanFF('platform.editor.table.alternative-sticky-header-logic')
+  ) {
+    return css`
+      .${ClassName.TABLE_STICKY} > tbody::before {
+        content: '';
+      }
+    `;
+  }
+};
+
 const tableRowControlStyles = () => {
   return getBooleanFF('platform.editor.table.drag-and-drop')
     ? css`
@@ -402,6 +423,8 @@ export const tableStyles = (
 
     ${tableStickyHeaderColumnControlsDecorationsStyle(props)}
 
+    ${tableStickyHeaderFirefoxFixStyle(props)}
+
     .${ClassName.TABLE_STICKY}
       .${ClassName.ROW_CONTROLS}
       .${ClassName.ROW_CONTROLS_BUTTON_WRAP}.sticky {

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

@@ -222,16 +222,15 @@ export const dragInsertButtonWrapper = (props: ThemeProps) => css`
 
 export const dragCornerControlButton = (props: ThemeProps) => css`
   .${ClassName.DRAG_CORNER_BUTTON} {
-    width: 12px;
-    height: 12px;
+    width: 24px;
+    height: 24px;
     display: flex;
-    justify-content: center;
-    align-items: center;
+    justify-content: flex-end;
+    align-items: flex-end;
     position: absolute;
-    top: ${token('space.negative.075', '-6px')};
-    left: ${token('space.075', '6px')};
-    background-color: ${token('elevation.surface', '#FFF')};
-    border-radius: 50%;
+    top: ${token('space.negative.250', '-20px')};
+    left: ${token('space.negative.100', '-8px')};
+    background-color: transparent;
     border: none;
     padding: 0;
     outline: none;
@@ -239,24 +238,38 @@ export const dragCornerControlButton = (props: ThemeProps) => css`
 
     &.active .${ClassName.DRAG_CORNER_BUTTON_INNER} {
       background-color: ${token('color.border.selected', '#0C66E4')};
-      border-color: ${token('color.border.selected', '#0C66E4')};
+      width: 10px;
+      height: 10px;
+      border-width: 2px;
+      border-radius: 4px;
+      top: ${token('space.075', '6px')};
+      left: ${token('space.075', '6px')};
     }
 
     &:hover {
       cursor: pointer;
 
       .${ClassName.DRAG_CORNER_BUTTON_INNER} {
-        border-color: ${token('color.border.selected', '#0C66E4')};
+        width: 10px;
+        height: 10px;
+        border-width: 2px;
+        border-radius: 4px;
+        top: ${token('space.075', '6px')};
+        left: ${token('space.075', '6px')};
       }
     }
   }
 
   .${ClassName.DRAG_CORNER_BUTTON_INNER} {
-    border: 1px solid
-      ${token('color.background.accent.gray.subtler', '#DCDFE4')};
-    border-radius: 50%;
-    width: 6px;
-    height: 6px;
+    border: 1px solid ${token('color.border.inverse', '#FFF')};
+    background-color: ${token(
+      'color.background.accent.gray.subtler',
+      '#DCDFE4',
+    )};
+    border-radius: 2px;
+    width: 5px;
+    height: 5px;
+    position: relative;
   }
 `;