Drag and Drop

[thompsongl]

Summary

Reference: #1651

Drag and Drop support consisting of 3 main components (The docs are the best place to look for descriptions and intended use for each):

• EuiDragDropContext
• EuiDraggable
• EuiDroppable

Help Wanted

💡 Ideas for improvement

• More props for styling purposes?
• More EUI-specific functionality opinions?

👩‍🎨 Design

• Docs about expected draggable item design?
• Dark mode scheme?

🔮 Future

• EUI convenience components to make common cases easier (e.g., reorderable list)
• Note the early nature of these components and their APIs (i.e., 'beta'-like tag in the docs)?

Checklist

• This was checked in mobile
• This was checked in IE11
• This was checked in dark mode
• Any props added have proper autodocs
• Documentation examples were added
• A changelog entry exists and is marked appropriately
• This was checked for breaking changes and labeled appropriately
• Jest tests were updated or added to match the most common scenarios
• This was checked against keyboard-only and screenreader scenarios

- [ ] This required updates to Framer X components

[thompsongl]

Naturally, the latest minor release of react-beautiful-dnd breaks my clone/copy extension.
I'm going to rework it before taking this PR out of Draft status.

[chandlerprall]

Starting with review on docs before deep diving into all the codes

[cchaos]

I think it's mostly good as a beta. But I'd still like to work on the removal option.

1. Why does the drop panel shift in size when dragging over?
2. What can we add to signify removal when dragging outside of drop area?
3. Why is there a flash of the item inside of the drop area again before being removed?

[thompsongl]

@cchaos 1 & 3 will require some more CSS animation hacking. I'll look into those.
Any ideas for 2?

[cchaos]

I was hoping for a simple cursor type change, but there's nothing that suits. What about doing something like adding a badge that says "remove" once you're outside of the bounds?

@snide @ryankeairns Thoughts?

[ryankeairns]

@cchaos is that a destructive action or does the item get placed back into the left hand list?

[cchaos]

@ryankeairns Depends on the consumer, but most likely undoable. We just need to signify that dragging outside of the droppable area would result in removal of the item.

[thompsongl]

Why does the drop panel shift in size when dragging over?

Flexbox plus a width discrepancy because of the panel border. Fixed

Why is there a flash of the item inside of the drop area again before being removed?

react-beautiful-dnd native drop animation. What I did was add a prop to EuiDraggable that removes the drop animation and used onDragUpdate to determine whether to set that prop.

[ryankeairns]

Thoughts about indicating removal from simple to more complex:

• slightly scale down the size when its outside
• turn the cross icon into a trash can when its outside (or maybe hide the cross on drag until you go outside the droppable area, then show it again)
• when you drop outside (let go), show a little trash animation

[cchaos]

Thanks @ryankeairns

slightly scale down the size when its outside
I had no idea you could do that in Sketch, I just always unchecked the option then hit the trashcan.

That being said, I'm not really sure how scaling indicates removal. Seems like an arbitrary animation

turn the cross icon into a trash can when its outside (or maybe hide the cross on drag until you go outside the droppable area, then show it again)

The cross is just an example of how to add distinguished buttons for removing options. It's not forced by the component.

when you drop outside (let go), show a little trash animation

I thought about this as well, but it's a bit beyond this scope to create that atm.

Any thoughts on the badge idea?

[ryankeairns]

@cchaos The badge works well enough. It's an atypical use of a badge, but then it literally says 'Remove' on it and it's red, both clearly foretelling what's about to happen.

As for the shrinking, it implies that the held item has left the dropzone and it could be further animated upon release where it shrinks and fades to nothingness. In that way, the initial scaling indicates pending removal.

[cchaos]

Hmmm, adding that extra animation of shrinking until non-existent could make that initial shrink more intentional. @thompsongl By looking at your overriding of the transforms do you think this would even be possible?

[ryankeairns]

One last thought, maybe just show a trash can icon instead of a badge. What you have works, I thought you were looking for other ideas :)

[cchaos]

FYI: We've decided to punt on figuring out the design of removing an item as it'll be an additive feature and don't want to hold up this PR for that.

[chandlerprall]

I wanted to prove out that table dragging can be achieved with little changes (and no breaking) to this setup. chandlerprall@3b1ac3a

Changes:

• added As prop to EuiDraggable to allow rendering tr instead of div, added support for multiple children (multiple td children in the tr)
• augmented EuiBasicTable and EuiTableRow to take a dragAndDrop prop which informs inserting the EuiDraggable and EuiDroppable components as needed

My changes aren't production-ready, but I feel it proves a future approach well enough to not block this PR.

[cchaos]

LGTM (as beta) 🎉