Fix Unified Field List drag styles

packages/kbn-dom-drag-drop/src/drag_drop.test.tsx

@@ -119,6 +119,28 @@ describe('DragDrop', () => {
     });
   });
 
+  test('dragstart sets dragClassName as expected', async () => {
+    const dndDispatch = jest.fn();
+    const component = mount(
+      <ChildDragDropProvider value={[{ ...defaultContextState, dragging: undefined }, dndDispatch]}>
+        <DragDrop value={value} draggable={true} order={[2, 0, 1, 0]} dragClassName="dragTest">
+          <button>Hi!</button>
+        </DragDrop>
+      </ChildDragDropProvider>
+    );
+    const dragDrop = component.find('[data-test-subj="testDragDrop"]').at(0);
+
+    expect(dragDrop.getDOMNode().querySelector('.dragTest')).toBeNull();
+    dragDrop.simulate('dragstart', { dataTransfer });
+    expect(dragDrop.getDOMNode().querySelector('.dragTest')).toBeDefined();
+
+    act(() => {
+      jest.runAllTimers();
+    });
+
+    expect(dragDrop.getDOMNode().querySelector('.dragTest')).toBeNull();
+  });
+
   test('drop resets all the things', async () => {
     const preventDefault = jest.fn();
     const stopPropagation = jest.fn();

packages/kbn-dom-drag-drop/src/drag_drop.tsx

@@ -42,6 +42,10 @@ interface BaseProps {
    * The CSS class(es) for the root element.
    */
   className?: string;
+  /**
+   * CSS class to apply when the item is being dragged
+   */
+  dragClassName?: string;
 
   /**
    * The event handler that fires when an item
@@ -212,6 +216,7 @@ const removeSelection = () => {
 const DragInner = memo(function DragInner({
   dataTestSubj,
   className,
+  dragClassName,
   value,
   children,
   dndDispatch,
@@ -305,6 +310,18 @@ const DragInner = memo(function DragInner({
       // so we know we have DraggableProps if we reach this code.
       if (e && 'dataTransfer' in e) {
         e.dataTransfer.setData('text', value.humanData.label);
+
+        // Apply an optional class to the element being dragged so the ghost
+        // can be styled. We must add it to the actual element for a single
+        // frame before removing it so the ghost picks up the styling.
+        const current = e.currentTarget;
+
+        if (dragClassName && !current.classList.contains(dragClassName)) {
+          current.classList.add(dragClassName);
+          requestAnimationFrame(() => {
+            current.classList.remove(dragClassName);
+          });
+        }
       }
 
       // Chrome causes issues if you try to render from within a

packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item.tsx

@@ -335,6 +335,7 @@ function UnifiedFieldListItemComponent({
       button={
         <DragDrop
           draggable
+          dragClassName="unifiedFieldListItemButton__dragging"
           order={order}
           value={value}
           onDragStart={closePopover}

packages/kbn-unified-field-list/src/containers/unified_field_list_sidebar/field_list_sidebar.scss

@@ -53,7 +53,8 @@
     box-shadow: none;
   }
 
-  &.domDragDrop-isDraggable:not(:active) {
+  &:not(.unifiedFieldListItemButton__dragging) {
+    padding: 0;
     background: none;
   }
 }