[Lens] fix drag and drop small styling details (elastic#161121)

## Summary Fixes two subtle visual drag and drop thingies: 1. When reordering, the styles should look slightly differently: before: https://github.com/elastic/kibana/assets/4283304/b0f0d053-f6cc-414b-96cb-0b8ad892b613 after: https://github.com/elastic/kibana/assets/4283304/c52f8786-72e2-4ef3-a943-8050d7acf348 2. When picking up a dragging item, the whole dimension panel is jumping very slightly because we add `border`: before: https://github.com/elastic/kibana/assets/4283304/8efa71ec-d449-4dc9-8390-d4c33c62c1e0 after: https://github.com/elastic/kibana/assets/4283304/dbec7e64-5cb3-4b32-afcc-2c376cfda4a2
darnautov · Jul 11, 2023 · 6b3a29b · 6b3a29b
1 parent 7e7293a
commit 6b3a29b
Show file tree

Hide file tree

Showing 2 changed files with 66 additions and 31 deletions.
diff --git a/packages/kbn-dom-drag-drop/src/sass/drag_drop.scss b/packages/kbn-dom-drag-drop/src/sass/drag_drop.scss
@@ -55,10 +55,6 @@
   }
 }
 
-.domDragDrop-isActiveGroup {
-  background-color: transparentize($euiColorVis0, .75);
-}
-
 // Drop area while hovering with item
 .domDragDrop-isActiveDropTarget:not(.domDragDrop__dropOverlayWrapper) {
   z-index: $domDragDropZLevel3;
@@ -77,10 +73,14 @@
 
 .domDragDrop-notCompatible:not(.domDragDrop__dropOverlayWrapper) {
   background-color: $euiColorHighlight !important;
-  border: $euiBorderWidthThin dashed $euiColorVis5 !important;
+  &:before {
+    border: $euiBorderWidthThin dashed $euiColorVis5 !important;
+  }
   &.domDragDrop-isActiveDropTarget {
     background-color: rgba(251, 208, 17, .25) !important;
-    border-color: $euiColorVis5 !important;
+    &:before {
+      border-color: $euiColorVis5 !important;
+    }
   }
 }
 
@@ -138,21 +138,6 @@ $reorderItemMargin: $euiSizeS;
   }
 }
 
-.domDragDrop--isDragStarted {
-  opacity: .5;
-}
-
-// Draggable item when it is moving
-.domDragDrop-isHidden {
-  opacity: 0;
-  .domDragDrop__keyboardHandler {
-    &:focus,
-    &:focus-within {
-      animation: none;
-    }
-  }
-}
-
 .domDragDrop__extraDrops {
   opacity: 0;
   visibility: hidden;
@@ -182,12 +167,20 @@ $reorderItemMargin: $euiSizeS;
   width: 100%;
   height: 100%;
   background: $euiColorLightestShade;
-  border-radius: 0;
-  &:first-child, &:first-child .domDragDrop__extraDrop {
+
+  .domDragDrop__extraDrop,
+  .domDragDrop__extraDrop:before {
+    border-radius: 0;
+  }
+
+  &:first-child .domDragDrop__extraDrop,
+  &:first-child .domDragDrop__extraDrop:before {
     border-top-left-radius: $euiSizeXS;
     border-top-right-radius: $euiSizeXS;
   }
-  &:last-child, &:last-child .domDragDrop__extraDrop {
+
+  &:last-child .domDragDrop__extraDrop,
+  &:last-child .domDragDrop__extraDrop:before {
     border-bottom-left-radius: $euiSizeXS;
     border-bottom-right-radius: $euiSizeXS;
   }
@@ -233,3 +226,31 @@ $reorderItemMargin: $euiSizeS;
     @include mixinDomDroppableActiveHover($euiBorderWidthThick);
   }
 }
+
+.domDragDrop-isActiveGroup {
+  background-color: transparentize($euiColorVis0, .75);
+  .domDragDrop-isKeyboardReorderInProgress {
+    .domDragDrop--isDragStarted {
+      opacity: 1;
+    }
+  }
+  .domDragDrop-isActiveDropTarget,
+  .domDragDrop-isDropTarget {
+    background: $euiColorEmptyShade !important;
+  }
+}
+
+.domDragDrop--isDragStarted {
+  opacity: .5;
+}
+
+// Draggable item when it is moving
+.domDragDrop-isHidden {
+  opacity: 0;
+  .domDragDrop__keyboardHandler {
+    &:focus,
+    &:focus-within {
+      animation: none;
+    }
+  }
+}
diff --git a/packages/kbn-dom-drag-drop/src/sass/drag_drop_mixins.scss b/packages/kbn-dom-drag-drop/src/sass/drag_drop_mixins.scss
@@ -16,11 +16,6 @@ $domDragDropZLevel3: 3;
   cursor: grab;
 }
 
-// Static styles for a drop area
-@mixin mixinDomDroppable($borderWidth: $euiBorderWidthThin) {
-  border: $borderWidth dashed transparent;
-}
-
 // Hovering state for drag item and drop area
 @mixin mixinDomDragDropHover {
   &:hover {
@@ -29,16 +24,35 @@ $domDragDropZLevel3: 3;
   }
 }
 
+// Static styles for a drop area
+@mixin mixinDomDroppable($borderWidth: $euiBorderWidthThin) {
+  &:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    border-radius: $euiBorderRadius;
+    border: $borderWidth dashed transparent;
+  }
+}
+
 // Style for drop area when there's an item being dragged
 @mixin mixinDomDroppableActive($borderWidth: $euiBorderWidthThin) {
   background-color: transparentize($euiColorVis0, .9) !important;
-  border: $borderWidth dashed $euiColorVis0 !important;
+  &:before {
+    border-color: $euiColorVis0 !important;
+  }
 }
 
 // Style for drop area while hovering with item
 @mixin mixinDomDroppableActiveHover($borderWidth: $euiBorderWidthThin) {
   background-color: transparentize($euiColorVis0, .75) !important;
-  border: $borderWidth dashed $euiColorVis0 !important;
+  &:before {
+    border-color: $euiColorVis0 !important;
+  }
 }
 
 // Style for drop area that is not allowed for current item