[List and List Item] Provide list item sorting

geospatialem commented 1 year ago

Description

Add full parity to the list component, which is provided in the value-list and pick-list components.

May also include a refactor of the sortable utility, which some teams use for their own use and should be consulted if a breaking change is necessary.

Acceptance Criteria

[x] Drag and drop functionality of the list-items
- [x] Mouse and keyboard support
- [x] Keyboard support when screen readers are active for both Windows (NVDA, JAWS) and Mac (VoiceOver) users (see #7426)

Relevant Info

Part of the https://github.com/Esri/calcite-components/issues/6430 epic

Which Component

List
List item

Example Use Case

Depicted with value-list and value-list-item: https://codepen.io/geospatialem/pen/abjxWwL

Esri team

Calcite (dev)

driskull commented 1 year ago

Before we can tackle this, we should discuss whether we should be using the SortableList component internally here or getting rid of that component.

geospatialem commented 1 year ago

Before we can tackle this, we should discuss whether we should be using the SortableList component internally here or getting rid of that component.

Good idea - added to the upcoming engineering discussion to discuss options.

driskull commented 1 year ago

We need a whole sorting strategy before we can tackle this. The strategy should cover...

Sorting between two separate lists or instances of components
Fixing sorting when a child has sorting of its own (currently these are conflicting with list/block/etc)

geospatialem commented 1 year ago

Adding a tag to this issue to Hub components and cc @vivzhang in regards to the issue description above:

May also include a refactor of the sortable utility, which some teams use for their own use and should be consulted if a breaking change is necessary.

macandcheese commented 1 year ago

Adding two pieces of feedback we got about Value List for consideration here w/r/t keyboard usage from this closed issue: https://github.com/Esri/calcite-components/issues/4231

Following up from Teams chat - some improvements to the value list while in drag-enabled mode to make using with a keyboard a bit easier:

Add support for esc to exit that mode (currently only hitting spacebar again exits the mode) Add support for home / end to quickly move an item to either extent (and preventDefault so the page doesn't scroll up / down)

Anastasiia-Boleiko commented 1 year ago

Currently, in ArcGIS Urban, we have several use cases of custom lists/accordions that seem to match the List/Block/Accordion component functionality. In several cases, it's a bit difficult to choose a proper Calcite component. I would appreciate your suggestions or perhaps, our cases can turn out into future List component enhancements.

Case 1:

List items are not expandable
Enhanced content (content-start, content-end slots, actions-end etc)
Searchable
Actions in the list header (1. Add might be moved into the line with a search; 2. Button to filter the list that expands a popover)

Component:

List (seems to fit the needs) + filter and other actions are configured manually using Search, Action, Popover etc.

Case 2:

List items are not expandable
Enhanced content (content-start, content-end slots, actions-end etc)
Reorderable

Component:

List (seems to fit the needs, but is a bit hacky)
Table ?

Case 3

List items are expandable
Enhanced content (content-start, content-end slots etc)

Component:

List (seems to fit the needs + filter and other actions are configured manually using Search, Action, Popover etc)
Block? (no enhanced content)
Accordion? (no enhanced content)

Case 4

Enhanced content (content-start, actions-end slots etc)
Draggable (from one list to another)
Keyboard support darg&drop

Component:

List?

https://user-images.githubusercontent.com/119309703/230155412-7ba7a81c-e798-4e2f-88d9-eb46dafa1716.mov

driskull commented 1 year ago

@geospatialem @jcfranco we may need to make this one a breaking change.

I'm running into trouble with sorting of children because we slot a <calcite-list-item> inside of another <calcite-list-item> like so:

<calcite-list>
  <calcite-list-item>
    <calcite-list-item></ calcite-list-item>
  </calcite-list-item>
</calcite-list>

In order to fix this, we may need to require the following:

<calcite-list>
  <calcite-list-item>
    <calcite-list>
      <calcite-list-item></ calcite-list-item>
    </calcite-list>
  </calcite-list-item>
</calcite-list>

Let me know if you'd like to meet to discuss this. If we do this breaking change, this milestone may need to change.

geospatialem commented 1 year ago

@driskull Thanks for the heads up on a potential breaking change, lets connect sometime next week. I'll set a reminder for us to chat on next steps.

geospatialem commented 1 year ago

Documentation update to follow the change is needed to showcase what devs will need to achieve sorting, which differs from the current workflow.

See Matt's note above, the second example.

github-actions[bot] commented 1 year ago

Installed and assigned for verification.

geospatialem commented 1 year ago

Verified with https://codepen.io/geospatialem/pen/bGQzavG in 1.5.0-next.33. Opened #7426 for finalizing AT support.

Esri / calcite-design-system