List: difficulty dragging into a child list

[driskull]

Check existing issues

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

Description

Its difficult to drag a list item into an empty list because the list takes up no space.

It would be nice if an empty list had some reserved space area to drop items.

Acceptance Criteria

Easier to drag into an empty list

Relevant Info

https://codepen.io/driskull/pen/WNPzLdK?editors=1000

Which Component

list

Example Use Case

See relevant info

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

ArcGIS Maps SDK for JavaScript

[driskull]

This needs to go to design first.

[sagewall]

@geospatialem would it be possible to prioritize this? It's causing come confusion and unpredictable behavior trying to drag items into group layers in the new JavaScript SDK layer list widget.

[ashetland]

@driskull Didn't this get merged into v.2.0? Should it have also been part of v1.11.0?

[driskull]

I did a quick fix but this needs a proper design.

[driskull]

I think this could be solved by #7100 and indenting the whole item.

[sagewall]

Thought I'd mention this not only affects the JS SDK, but the applications that use our SDK like Map Viewer, Experience Builder and Instant Apps.

[zaramatheson]

Thought I'd mention this not only affects the JS SDK, but the applications that use our SDK like Map Viewer, Experience Builder and Instant Apps.

Yes, this is a high priority issue for Map Viewer

[ashetland]

Hey @sagewall and @zaramatheson is there something that @driskull's quick fix isn't addressing? Can you show us demo of the problem? I'm working on some related List designs, but I want to make sure I/we fully understand what's causing this issue. We might be able to expedite a better fix.

[sagewall]

Sure, Currently it's impossible to move an item down the list under an open group layer without adding it to the group. If you move a layer up from further down the list, there isn't a way to add it to the group.

Reproduction Steps

1. Open this codepen
2. Open "Group Layer 3"
3. Move buffer5 up but not crossing the bottom of the "U.S. States Generalized from my content" layer.
4. Observe how the buffer5 layer is placed outside the group layer. I haven't been able to get it to add to the group layer from below. Unless I drag it slightly into the last group layer and then just slightly back down.
5. Drag the buffer5 layer above "Group Layer 3"
6. Moving it down under the last last layer in "Group layer 3" always results in it being added to the group layer. I haven't been able to get it to not get added to the group layer

https://github.com/Esri/calcite-design-system/assets/2636825/fc2461f6-3218-4267-8004-47eaac5951d5

[sagewall]

Should we rename this issue "difficulty dragging into child list", I didn't notice the "empty" part in the name?

[ashetland]

This is super helpful. Thank you! Renaming might make sense. It doesn't look like "empty" is the issue here.

[ashetland]

This Figma file covers multiple related design revisions for List and includes a section for improvements to sorting. @driskull we've outlined our ideal for this, but we intend final details to be hammered out once we start building this and the related changes.

[github-actions[bot]]

cc @geospatialem, @brittneytewks

[driskull]

@ashetland @jcfranco when we deprecate the "classic" mode, which will become the default mode? "flat" or "nested"?

[ashetland]

My gut feeling is "nested" becomes the default, but I think @jcfranco also mentioned letting metrics decide this?

[ashetland]

@driskull Confirming that all we need to do for this issue is indent the entire item? We have some other possible improvements we'd like to test, but they could be separate from this issue.

[driskull]

Yes, thanks @ashetland

[driskull]

@ashetland PR ready for your review.

[github-actions[bot]]

Installed and assigned for verification.

[DitwanP]

🍡 Verified on 2.8.0-next.10

https://github.com/Esri/calcite-design-system/assets/60022782/0ab7e607-1095-44e3-9a86-fb4947ac55f1