List Item - make it more obvious when drag-disabled

[asangma]

Check existing issues

• 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

Retain the disabled state.
Add "hide" option.

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

• @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]

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]

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.

[asangma]

Lower opacity (0.25)

Icon set to blank

[driskull]

This would be for design to consider. Added the label

[asangma]

Thanks @driskull. 🤘🏾