diff --git a/CHANGELOG.md b/CHANGELOG.md index 0f13ba87a24..2f31cedebe2 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -9,6 +9,7 @@ - Removed unused prop enum of `l` in `EuiButton` ([#1936](https://github.com/elastic/eui/pull/1936)) - Fixed `EuiSelect` browser event inconsistencies by normalizing `mouseup` propagation ([#1926](https://github.com/elastic/eui/pull/1926)) - Removed `children` as a required prop for `EuiOverlayMask` ([#1937](https://github.com/elastic/eui/pull/1937)) +- `EuiDraggable`, `EuiDroppable` should support the `data-test-subj` property ([#1943](https://github.com/elastic/eui/pull/1943)) ## [`11.0.1`](https://github.com/elastic/eui/tree/v11.0.1) diff --git a/src/components/drag_and_drop/draggable.tsx b/src/components/drag_and_drop/draggable.tsx index 4537368ac64..bb6c5e8c11c 100644 --- a/src/components/drag_and_drop/draggable.tsx +++ b/src/components/drag_and_drop/draggable.tsx @@ -51,6 +51,7 @@ export const EuiDraggable: FunctionComponent = ({ className, spacing = 'none', style, + 'data-test-subj': dataTestSubj = 'draggable', ...rest }) => { const { cloneItems } = useContext(EuiDroppableContext); @@ -85,7 +86,7 @@ export const EuiDraggable: FunctionComponent = ({ {...provided.draggableProps} {...(!customDragHandle ? provided.dragHandleProps : {})} ref={provided.innerRef} - data-test-subj="draggable" + data-test-subj={dataTestSubj} className={classes} style={{ ...style, ...provided.draggableProps.style }}> {cloneElement(DraggableElement, { diff --git a/src/components/drag_and_drop/droppable.tsx b/src/components/drag_and_drop/droppable.tsx index 35fc0b101b3..866afdca779 100644 --- a/src/components/drag_and_drop/droppable.tsx +++ b/src/components/drag_and_drop/droppable.tsx @@ -59,6 +59,7 @@ export const EuiDroppable: FunctionComponent = ({ type = 'EUI_DEFAULT', withPanel = false, grow = false, + 'data-test-subj': dataTestSubj = 'droppable', ...rest }) => { const { isDraggingType } = useContext(EuiDragDropContextContext); @@ -96,7 +97,7 @@ export const EuiDroppable: FunctionComponent = ({ {...provided.droppableProps} ref={provided.innerRef} style={style} - data-test-subj="droppable" + data-test-subj={dataTestSubj} className={classes}>