[List and List Item] Provide list item sorting #6554

geospatialem · 2023-03-02T20:35:54Z

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

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

Relevant Info

Part of the #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)

The text was updated successfully, but these errors were encountered:

driskull · 2023-03-14T00:54:57Z

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 · 2023-03-14T21:15:40Z

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 · 2023-03-14T21:18:27Z

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 · 2023-03-17T22:01:09Z

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 · 2023-03-20T21:15:37Z

Adding two pieces of feedback we got about Value List for consideration here w/r/t keyboard usage from this closed issue: #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 · 2023-04-05T17:18:53Z

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?

Screen.Recording.2023-04-05.at.19.12.01.mov

driskull · 2023-06-07T22:47:02Z

@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 · 2023-06-08T14:39:19Z

@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 · 2023-06-28T21:21:51Z

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.

**Related Issue:** #6554 ## Summary - SortableComponent - Moves all configuration options into the interface so a component can consistently setup SortableJS. - Changes usage of `onUpdate` to `onSort` for moving between lists and getting `calciteListOrderChange` event. - Adds support for `canPut`/`canPull` so users can configure whether an item can be dragged to another list and vice versa. - List - Sets up sorting - keyboard sorting only works within a list. Cannot keyboard sort across lists at this time (including nested lists). - Adds dragHandle rendering to `list-item` - ListItemGroup and List emit an internal event when its default slot changes in order to update whether an expand caret shows or not. - Handle - Updates handle to support displaying ariaLabel (logic taken from value-list) - Handle will emit an internal event for parent components to update an aria-live region. - No breaking changes necessary. We can advise users to nest another `calcite-list` to work with sorting on children. - `calcite-list-item-group` will not be draggable/sortable at this time.

github-actions · 2023-08-02T16:57:13Z

Installed and assigned for verification.

geospatialem · 2023-08-02T22:41:08Z

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

**Related Issue:** #6554 ## Summary - SortableComponent - Moves all configuration options into the interface so a component can consistently setup SortableJS. - Changes usage of `onUpdate` to `onSort` for moving between lists and getting `calciteListOrderChange` event. - Adds support for `canPut`/`canPull` so users can configure whether an item can be dragged to another list and vice versa. - List - Sets up sorting - keyboard sorting only works within a list. Cannot keyboard sort across lists at this time (including nested lists). - Adds dragHandle rendering to `list-item` - ListItemGroup and List emit an internal event when its default slot changes in order to update whether an expand caret shows or not. - Handle - Updates handle to support displaying ariaLabel (logic taken from value-list) - Handle will emit an internal event for parent components to update an aria-live region. - No breaking changes necessary. We can advise users to nest another `calcite-list` to work with sorting on children. - `calcite-list-item-group` will not be draggable/sortable at this time.

geospatialem added enhancement 0 - new needs triage labels Mar 2, 2023

github-actions bot added the Calcite (dev) label Mar 2, 2023

geospatialem mentioned this issue Mar 2, 2023

Epic: [List and List Item] Add parity support with Value-List and Pick-List with sorting and removing items #6430

Closed

11 tasks

geospatialem added the estimate - 8 label Mar 2, 2023

geospatialem added this to the 2023 June Priorities milestone Mar 2, 2023

geospatialem added 1 - assigned and removed needs triage 0 - new labels Mar 2, 2023

geospatialem assigned driskull Mar 2, 2023

geospatialem mentioned this issue Mar 2, 2023

[List and List Item] Add List event emits when changes occur on List Items #6556

Closed

3 tasks

alisonailea added airtable and removed airtable labels Mar 3, 2023

geospatialem modified the milestones: 2023 June patch priorities, 2023 July Priorities Mar 5, 2023

geospatialem removed the airtable label May 25, 2023

driskull added a commit that referenced this issue Jun 3, 2023

feat(list): Add support for sorting and dragging items. #6554

Unverified

This user has not yet uploaded their public signing key.

GPG key ID: 375C6CB12F49F58D

Learn about vigilant mode

ceea051

driskull mentioned this issue Jun 3, 2023

feat(list): Add support for dragging items. #7109

Merged

driskull added a commit that referenced this issue Jun 7, 2023

feat(list): Add support for sorting and dragging items. #6554

84502ef

driskull added the breaking change label Jun 7, 2023

geospatialem added docs and removed breaking change labels Jun 28, 2023

geospatialem added the p - high label Jul 3, 2023

geospatialem mentioned this issue Jul 19, 2023

List: Expose Events for dragging between Lists #7046

Closed

driskull added 3 - installed and removed 1 - assigned labels Aug 2, 2023

github-actions bot assigned geospatialem and unassigned driskull Aug 2, 2023

geospatialem mentioned this issue Aug 2, 2023

[List and List Item] Support sorting for AT users #7426

Closed

3 tasks

geospatialem added 4 - verified and removed 3 - installed labels Aug 2, 2023

geospatialem closed this as completed Aug 2, 2023

crowjonah mentioned this issue May 10, 2024

[List and List Item] Cancel drag reorder on ESC #9314

Open

6 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[List and List Item] Provide list item sorting #6554

[List and List Item] Provide list item sorting #6554

geospatialem commented Mar 2, 2023 •

edited

Loading

driskull commented Mar 14, 2023

geospatialem commented Mar 14, 2023

driskull commented Mar 14, 2023

geospatialem commented Mar 17, 2023

macandcheese commented Mar 20, 2023

Anastasiia-Boleiko commented Apr 5, 2023

driskull commented Jun 7, 2023 •

edited by jcfranco

Loading

geospatialem commented Jun 8, 2023

geospatialem commented Jun 28, 2023

github-actions bot commented Aug 2, 2023

geospatialem commented Aug 2, 2023

[List and List Item] Provide list item sorting #6554

[List and List Item] Provide list item sorting #6554

Comments

geospatialem commented Mar 2, 2023 • edited Loading

Description

Acceptance Criteria

Relevant Info

Which Component

Example Use Case

Esri team

driskull commented Mar 14, 2023

geospatialem commented Mar 14, 2023

driskull commented Mar 14, 2023

geospatialem commented Mar 17, 2023

macandcheese commented Mar 20, 2023

Anastasiia-Boleiko commented Apr 5, 2023

Case 1:

Case 2:

Case 3

Case 4

driskull commented Jun 7, 2023 • edited by jcfranco Loading

geospatialem commented Jun 8, 2023

geospatialem commented Jun 28, 2023

github-actions bot commented Aug 2, 2023

geospatialem commented Aug 2, 2023

geospatialem commented Mar 2, 2023 •

edited

Loading

driskull commented Jun 7, 2023 •

edited by jcfranco

Loading