diff --git a/packages/kbn-dom-drag-drop/src/drag_drop.test.tsx b/packages/kbn-dom-drag-drop/src/drag_drop.test.tsx
index 54965548aa2641..09de21fbe3dc93 100644
--- a/packages/kbn-dom-drag-drop/src/drag_drop.test.tsx
+++ b/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(
+
+
+
+
+
+ );
+ 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();
diff --git a/packages/kbn-dom-drag-drop/src/drag_drop.tsx b/packages/kbn-dom-drag-drop/src/drag_drop.tsx
index ab4158ad315433..b20570ee6969c2 100644
--- a/packages/kbn-dom-drag-drop/src/drag_drop.tsx
+++ b/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
diff --git a/packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item.tsx b/packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item.tsx
index e2ae86be1fec4b..745d463b283860 100644
--- a/packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item.tsx
+++ b/packages/kbn-unified-field-list/src/containers/unified_field_list_item/field_list_item.tsx
@@ -335,6 +335,7 @@ function UnifiedFieldListItemComponent({
button={