@atlaskit/editor-plugin-table 5.4.1 → 5.4.2

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

@@ -736,7 +736,7 @@ export const tableStyles = (
       display: grid;
       align-items: center;
       position: absolute;
-      left: -${dropTargetExtendedWidth + 4}px;
+      left: -${dropTargetExtendedWidth}px;
       z-index: ${akEditorUnitZIndex};
 
       .${ClassName.DRAG_ROW_FLOATING_INSERT_DOT_WRAPPER} {
@@ -749,7 +749,7 @@ export const tableStyles = (
       .${ClassName.DRAG_ROW_FLOATING_INSERT_DOT} {
         position: absolute;
         bottom: -3px;
-        left: 6px;
+        left: 2px;
         background-color: ${token(
           'color.background.accent.gray.subtler',
           '#C1C7D0',
@@ -800,13 +800,27 @@ export const tableStyles = (
       align-items: center;
       outline: none !important;
 
+      &.${ClassName.DRAG_HANDLE_DISABLED} {
+        & > svg {
+          & > rect.${ClassName.DRAG_HANDLE_MINIMISED} {
+            fill: ${token('color.background.accent.gray.subtler', '#DCDFE4')};
+          }
+          & > rect {
+            fill: ${token('color.background.accent.gray.subtlest', '#F4F5F7')};
+          }
+          & > g > rect {
+            fill: ${token('color.icon.disabled', '#BFDBF847')};
+          }
+        }
+      }
+
       &:not(.${ClassName.DRAG_HANDLE_DISABLED}) {
         & > svg {
           rect {
-            fill: ${token('color.background.accent.gray.subtlest', '#F1F2F4')};
+            fill: ${token('color.background.accent.gray.subtler', '#DCDFE4')};
           }
           g {
-            fill: ${token('color.icon.subtle', '#626F86')};
+            fill: ${token('color.icon.subtle', '#626f86')};
           }
         }
 

package/src/plugins/table/ui/icons/DragHandleDisabledIcon.tsx

@@ -1,7 +1,5 @@
 import React from 'react';
 
-import { token } from '@atlaskit/tokens';
-
 interface DragHandleDisabledIconProps {
   style?: React.CSSProperties;
 }
@@ -17,37 +15,11 @@ export const DragHandleDisabledIcon = ({
     xmlns="http://www.w3.org/2000/svg"
     style={style}
   >
-    <rect
-      width="24"
-      height="16"
-      rx="4"
-      fill={token('color.background.accent.gray.subtlest', 'Neutral200')}
-    />
+    <rect width="24" height="16" rx="4" />
     <g>
-      <rect
-        x="7"
-        y="4"
-        width="2"
-        height="8"
-        rx="1"
-        fill={token('color.icon.disabled', '#091E424F')}
-      />
-      <rect
-        x="11"
-        y="4"
-        width="2"
-        height="8"
-        rx="1"
-        fill={token('color.icon.disabled', '#091E424F')}
-      />
-      <rect
-        x="15"
-        y="4"
-        width="2"
-        height="8"
-        rx="1"
-        fill={token('color.icon.disabled', '#091E424F')}
-      />
+      <rect x="7" y="4" width="2" height="8" rx="1" />
+      <rect x="11" y="4" width="2" height="8" rx="1" />
+      <rect x="15" y="4" width="2" height="8" rx="1" />
     </g>
   </svg>
 );

package/src/plugins/table/ui/icons/MinimisedHandle.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+import { TableCssClassName as ClassName } from '../../types';
+
+export const MinimisedHandleIcon = () => (
+  <svg xmlns="http://www.w3.org/2000/svg" width="24" height="5" fill="none">
+    <rect
+      className={ClassName.DRAG_HANDLE_MINIMISED}
+      width="24"
+      height="5"
+      rx="3"
+    />
+  </svg>
+);

package/src/plugins/table/ui/icons/index.ts

@@ -1,6 +1,7 @@
 export { DragHandleIcon } from './DragHandleIcon';
 export { DragInMotionIcon } from './DragInMotionIcon';
 export { DragHandleDisabledIcon } from './DragHandleDisabledIcon';
+export { MinimisedHandleIcon } from './MinimisedHandle';
 export { AddRowAboveIcon } from './AddRowAboveIcon';
 export { AddRowBelowIcon } from './AddRowBelowIcon';
 export { AddColLeftIcon } from './AddColLeftIcon';