Calcite-Tree: drag-and-drop

[bpatterson88]

Description

As part of supporting responsive layouts in Dashboards, we are introducing a new UI surface for manipulating elements. This surface is essentially an expandable/collapsable tree structure that acts as an entry point for a number of editing workflows. The best component for this use case is calcite-tree, but it needs several enhancements to fully meet our needs.

Acceptance Criteria

• Icons for each calcite tree item
• N actions per calcite tree item. The current design only requires 1 action, but being able to insert an arbitrary number would be convenient. This includes 'parent' items as well as 'child' items.
• Highlight-style hover state.
• Rearrange and group items with drag-and-drop

Highlight style hover state

Expandable menu example

Drag-and-drop example

Relevant Info

Comprehensive designs can be found here, especially on the Layout Tree and Drag-and-Drop pages: https://www.figma.com/file/zmHT65VqXpldbZy4cvjZlw/?node-id=213%3A21129

Which Component

calcite-tree

Example Use Case

[brittneytewks]

Needs to be re-scoped

[geospatialem]

Reallocating to the ~May~ June release for design considerations.

[ashetland]

Based on current Tree behaviors, I think this can be rescoped to improving hover states and adding drag-and-drop.

[ashetland]

Hover states are covered in issue #6930. Drag-and-drop is this only thing left to address from this issue.

[ashetland]

Also linking #7096 for updated indent spacing.

[ashetland]

Renamed issue to clarify remaining effort.

[driskull]

We should consider what the bounds of calcite-tree and calcite-list are. If we add drag and drop sorting support to tree, at what point would tree and list differentiate? They are starting to overlap in functionality and UI.

Currently, calcite-list uses a tree-grid role and does sorting and nesting as well as having the actions at the end.

cc @jcfranco

[jcfranco]

I agree w/ @driskull about defining the bounds of both components since they are getting pretty similar. From the design-perspective, are there any guidelines that could help keep them distinct?

Also, can we reach out to the Dashboards team about this request and whether list is a viable replacement?

[geospatialem]

Moving to the Freezer milestone as currently tree is intended for navigating architecture and list can be used to fit the above use case when sorting is required.

[github-actions[bot]]

cc @geospatialem, @brittneytewks