[UnifiedFieldList] Show drag handle on item hover

NOTICE.txt

@@ -1,5 +1,5 @@
 Kibana source code with Kibana X-Pack source code
-Copyright 2012-2023 Elasticsearch B.V.
+Copyright 2012-2024 Elasticsearch B.V.
 
 ---
 Pretty handling of logarithmic axes.

packages/kbn-unified-field-list/src/components/field_item_button/field_item_button.scss

@@ -70,3 +70,38 @@
   background: lightOrDarkTheme(transparentize($euiColorMediumShade, .9), $euiColorEmptyShade);
   color: $euiColorDarkShade;
 }
+
+.unifiedFieldListItemButton__fieldIconContainer {
+  position: relative;
+}
+
+.unifiedFieldListItemButton__fieldIcon {
+  transition: opacity $euiAnimSpeedNormal ease-in-out;
+}
+
+.unifiedFieldListItemButton__fieldIconDrag {
+  visibility: hidden;
+  position: absolute;
+  top: 0;
+  left: 0;
+  transition: opacity $euiAnimSpeedNormal ease-in-out;
+}
+
+// A drag handle will appear only on item hover/focus
+.unifiedFieldListItemButton--withDragIcon {
+  .unifiedFieldListItemButton__fieldIconDrag {
+    visibility: visible;
+    opacity: 0;
+  }
+
+  &:hover,
+  &[class*='-isActive'],
+  .domDragDrop__keyboardHandler:focus + & {
+    .unifiedFieldListItemButton__fieldIcon {
+      opacity: 0;
+    }
+    .unifiedFieldListItemButton__fieldIconDrag {
+      opacity: 1;
+    }
+  }
+}