[UnifiedFieldList] Show drag handle on item hover (elastic#173673)

- Resolves elastic#168856

## Summary

As per comment in
elastic#171572 (comment)

> As a simple way to mitigate this issue, what if we changed it so that
on hover/focus of a field list item we fade-out the token and fade-in
the drag handle to replace the token (in the same position)? In doing
so, we could also keep the old translate x-axis transition (where the
field list item slides a few pixels to the right) to emphasize that it's
draggable. That little bit of extra movement might be good, if the
appearance of the drag handle is no longer pushing the text (given the
above suggestion).

![Dec-19-2023
18-13-21](https://github.com/elastic/kibana/assets/1415710/e02cb7d6-ce1a-4507-a8a6-3004f89d7225)


### Checklist

- [x] [Unit or functional
tests](https://www.elastic.co/guide/en/kibana/master/development-tests.html)
were updated or added to match the most common scenarios
- [x] This renders correctly on smaller devices using a responsive
layout. (You can test this [in your
browser](https://www.browserstack.com/guide/responsive-testing-on-local-server))
- [x] This was checked for [cross-browser
compatibility](https://www.elastic.co/support/matrix#matrix_browsers)

---------

Co-authored-by: Kibana Machine <[email protected]>

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;
+    }
+  }
+}

packages/kbn-unified-field-list/src/components/field_item_button/field_item_button.test.tsx

@@ -17,7 +17,7 @@ const bytesField = dataView.getFieldByName('bytes')!;
 const scriptedField = dataView.getFieldByName('script date')!;
 const conflictField = dataView.getFieldByName('custom_user_field')!;
 
-describe('UnifiedFieldList <FieldItemButton />', () => {
+describe('UnifiedFieldList FieldItemButton', () => {
   test('renders properly', () => {
     const component = shallow(
       <FieldItemButton
@@ -115,13 +115,13 @@ describe('UnifiedFieldList <FieldItemButton />', () => {
     expect(component).toMatchSnapshot();
   });
 
-  test('renders properly with a drag handle', () => {
+  test('renders properly with a drag icon', () => {
     const component = shallow(
       <FieldItemButton
         size="xs"
         className="custom"
         dataTestSubj="test-subj"
-        dragHandle={<span>dragHandle</span>}
+        withDragIcon={true}
         field={bytesField}
         fieldSearchHighlight={undefined}
         isEmpty={false}