List Item - make it more obvious when drag-disabled

asangma commented 6 months ago

Check existing issues

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

Description

ListItem has drag-disabled. This is good, but there are cases when the drag will never be enabled. In those cases it would be a better UX if the drag-handle were not rendered or at least were rendered with even lower opacity.

I propose to be able to hide the handle when drag-disabled or reduce the opacity of a disabled handle more.

In this example, the child items may never need drag and drop while the parent would regularly need drag.

cc @driskull

Acceptance Criteria

[ ] When drag-disabled, hide drag handle, but retain space for it (see icon set to blank example below)

Relevant Info

No response

Which Component

ListItem

Example Use Case

CatalogLayer. Because the structure of this layer type, its children may never need drag and drop.

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

asangma commented 6 months ago

Reopening this. Based on implementation in our JS SDK for LayerList, it would still be useful to selectively turn off the drag handle for specific ListItems in a List that has drag-enabled.

asangma commented 6 months ago

In this example, there are two items that whose dragging cannot be enabled. While the handles are disabled, the lowered opacity doesn't provide a great amount of contrast.