Improve UX of drag and drop in List

ashetland commented 2 weeks ago

Check existing issues

[X] I have checked for existing issues to avoid duplicates

Description

The current version of drag and drop in List doesn't scale very well. Sorting a long list of items in a short container can be frustrating. In this example, the list of items being moved is longer than the height of the container: CleanShot 2024-05-03 at 15 02 31@2x

Acceptance Criteria

Drop zone indicator is changed to a 2px line that indents to show placement in hierarchy
The parent layer is indicated with a 1px outline
If an item with children is collapsed, it should open onHover after a short delay
If possible, when picking up an expanded item, the clone could be collapsed to reduce its size (this may not work in practice)

Relevant Info

cc @driskull

Which Component

List

Example Use Case

No response

Priority impact

p3 - want for upcoming milestone

Calcite package

[X] @esri/calcite-components
[ ] @esri/calcite-components-angular
[ ] @esri/calcite-components-react
[ ] @esri/calcite-design-tokens
[ ] @esri/eslint-plugin-calcite-components

Esri team

Calcite (design)

github-actions[bot] commented 2 weeks ago

cc @geospatialem, @brittneytewks

ashetland commented 2 weeks ago

@driskull @geospatialem Marking this one as "ready". Matt and I have been in discussion about this one already. Final details may be adjusted as we work through it.

driskull commented 2 weeks ago

Im wondering if we might want to spike this and look into another library. We're kind of limited by the one we're currently using and it doesn't seem to be very actively maintained.

This library seems promising and seems to handle a lot of the issues you are seeing:

https://atlassian.design/components/pragmatic-drag-and-drop/examples https://atlassian.design/components/pragmatic-drag-and-drop/about

cc @jcfranco

Unfortunately, a lot of the other popular drag and drop libraries are tied to react so we can't use them. (dndkit).

ashetland commented 1 week ago

The Tree example seems to be almost exactly the behaviors we're looking for. In use, it feels like it would also solve the issues for #9262.

driskull commented 4 days ago

@jcfranco what are your thoughts?

jcfranco commented 4 days ago

Spiking sounds like a good idea to gauge effort and impact. Switching libs is something we could consider, given that SortableJS hasn't received updates in a while.

driskull commented 4 days ago

What I like about the pragmatic dnd approach is the keyboard support uses a menu on the drag target which makes more sense for moving between different lists and would solve that a11y issue.

ashetland commented 4 days ago

I also like that mouse users get that menu too if they only click.

Esri / calcite-design-system