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

driskull · 2023-06-03T00:17:09Z

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.

…onents into dris0000/sortable-list

github-actions · 2023-06-15T01:57:41Z

This PR has been automatically marked as stale because it has not had recent activity. Please close your PR if it is no longer relevant. Thank you for your contributions.

# Conflicts: # packages/calcite-components/src/components/list/list.tsx

driskull · 2023-07-28T21:17:07Z

@geospatialem do you think you could test this out for a11y?

@jcfranco this is ready for review, I'm just having some issues with a test. Not sure what's going on.

geospatialem

There are a few issues with JAWS and NVDA, but this is also true in value-list.

As-is JAWS can hear the context of the sorting button, but cannot move items, which would be confusing for AT users. NVDA hears the context and can move an item once, but context is lost.

Could be a combination of keys used and the role, and what is causing the conflict when enabling AT on the component.

We should follow-up to provide keyboard accessibility via some additional efforts outside of Sortable.js, with the intent to prioritize before year's end, if possible. cc @jcfranco

jcfranco

Amazing stuff here, @driskull! 🎉

Great job on the consolidated sortable component util.

packages/calcite-components/src/components/list-item/list-item.e2e.ts

packages/calcite-components/src/components/list/list.e2e.ts

packages/calcite-components/src/components/list/usage/DragEnabled.md

packages/calcite-components/src/utils/sortableComponent.ts

packages/calcite-components/src/components/list/list.tsx

packages/calcite-components/src/utils/sortableComponent.ts

eriklharper · 2023-08-02T17:09:45Z

packages/calcite-components/src/components/list-item/list-item.tsx

-          <slot onSlotchange={this.handleDefaultSlotChange} />
+          <slot
+            onSlotchange={this.handleDefaultSlotChange}
+            ref={(el: HTMLSlotElement) => (this.defaultSlotEl = el)}


Does this arrow function need to be called each render?

I think its only called once when the ref is established

I've just seen patterns where we declare a private method on the class for assigning the ref so that the function doesn't have to get recalled on every render, so that stood out to me.

**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.

* origin/main: (40 commits) fix(combobox): add space after grouped items (#7302) fix(tooltip): emits `close` and `beforeClose` events when container is set to `display:none` (#7258) chore: release next feat(block): improve block's content layout to allow scrolling (#7367) test(input, input-number): await on missed `page.waitForChanges` calls (#7429) chore: release next fix(color-picker): draw slider thumbs within bounds (#7398) chore: release next fix(slider): prevent excessive tick rendering (#7421) fix(tooltip): avoid extra before open/close event emitting (#7422) chore(storybook): hide warning and show TestOnly stories in local builds (#7424) chore: release next fix(panel): Remove double border styling when content isn't provided (#7368) feat(list): Add support for dragging items. (#7109) chore: release next fix(scrim): update loader scale on resize of component. (#7419) feat(text-area): provide additional context for AT users when character limit exceeds (#7412) chore: release next fix(chip): disconnect mutation observer when component is disconnected from the DOM (#7418) fix(switch): Fix for focus outline style in certain cases (#7414) ...

🤖 I have created a release *beep* *boop* --- <details><summary>@esri/calcite-components: 1.5.0</summary> ## [1.5.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components@1.4.3...@esri/calcite-components@1.5.0) (2023-08-03) ### Features * **action-group:** Adds overlayPositioning property. ([#7366](#7366)) ([ca9f35a](ca9f35a)) * Allow sharing focus trap stacks via configuration global ([#7334](#7334)) ([934a19f](934a19f)) * Automatically import and define Calcite Components when importing their React wrapper ([#7185](#7185)) ([bf0ff67](bf0ff67)) * **block, block-section:** Add setFocus method ([#7208](#7208)) ([35d4bbb](35d4bbb)) * **block:** Improve block's content layout to allow scrolling ([#7367](#7367)) ([ecbf17b](ecbf17b)) * **color-picker:** Replaces thumb focus outline to rounded ([#7378](#7378)) ([d803980](d803980)) * **filter:** Add filter method ([#7127](#7127)) ([5a4283f](5a4283f)) * **flow:** Adds setFocus method ([#7252](#7252)) ([2472c58](2472c58)) * Improve focus behavior in components ([#7277](#7277)) ([ad9fbca](ad9fbca)) * **input-time-zone:** Add input-time-zone component ([#6947](#6947)) ([87bd496](87bd496)) * **list:** Add slots for filter actions ([#7183](#7183)) ([da07ab1](da07ab1)) * **list:** Add support for dragging items. ([#7109](#7109)) ([7324f70](7324f70)) * **menu-item:** Update spacing and icon layout ([#7381](#7381)) ([5659671](5659671)) * **navigation-logo:** Increase font-size of heading with no description ([#7081](#7081)) ([355e101](355e101)) * **switch:** Updates focus outline to be rounded ([#7390](#7390)) ([2616b82](2616b82)) * **text-area:** Provide additional context for AT users when character limit exceeds ([#7299](#7299)) ([c5678eb](c5678eb)) * **text-area:** Provide additional context for AT users when character limit exceeds ([#7412](#7412)) ([c1af3c7](c1af3c7)) ### Bug Fixes * **accordion, accordion-item:** `icon-position`, `icon-type`, `selection-mode` and `scale` can now be set as props or attributes ([#7191](#7191)) ([2b09aba](2b09aba)) * **action-bar:** No longer delegates focus when clicked on non-focusable region ([#7310](#7310)) ([1a9c15c](1a9c15c)) * **action:** Correctly focus the button after rendering updates. ([#7255](#7255)) ([40fe2ce](40fe2ce)) * **block:** Loader now appears for all loading cases ([#7303](#7303)) ([5af3600](5af3600)) * **block:** Removes extra loading indicator ([#7239](#7239)) ([a334a75](a334a75)) * **card:** Ensure teardown logic is called when disconnected ([#7289](#7289)) ([d07e322](d07e322)) * **chip:** Disconnect mutation observer when component is disconnected from the DOM ([#7418](#7418)) ([412e5fb](412e5fb)) * **color-picker:** Draw slider thumbs within bounds ([#7398](#7398)) ([2f37854](2f37854)) * **color-picker:** Fix opacity slider keyboard nudging ([#7400](#7400)) ([2b4f7c3](2b4f7c3)) * **color-picker:** Maintains correct numbering system when entering invalid RGB value ([#7327](#7327)) ([8d2a3a5](8d2a3a5)) * **combobox:** Add space after grouped items ([#7302](#7302)) ([b1580c7](b1580c7)) * **dropdown-item:** Provides accessible label when href is not parsed ([#7316](#7316)) ([966b83d](966b83d)) * **flow:** Call setFocus() on back button click ([#7285](#7285)) ([9102aa4](9102aa4)) * **input-date-picker:** Provides placeholder text context for AT users ([#7320](#7320)) ([31e0ba2](31e0ba2)) * **input-date-picker:** Reset active date picker date after closing ([#7219](#7219)) ([91b2a1b](91b2a1b)) * **input, input-number:** No longer removes trailing decimal separator ([#7159](#7159)) ([01535cf](01535cf)) * **link:** Adds outline-offset to avoid overlapping with text. ([#7342](#7342)) ([c30db4e](c30db4e)) * **list:** Changing filterText property will now update filtered items ([#7133](#7133)) ([a9c0bce](a9c0bce)) * **list:** Fix keyboard navigation after a listItem's disabled or closed property changes ([#7275](#7275)) ([91d28eb](91d28eb)) * **list:** Fix keyboard navigation when filterEnabled is true ([#7385](#7385)) ([41a2e42](41a2e42)) * **menu-item:** Prevent duplicate border in nested vertical menu-items ([#7387](#7387)) ([186a738](186a738)) * **panel:** Remove double border styling when content isn't provided ([#7368](#7368)) ([91a0610](91a0610)) * Remove style modifying all host components with hidden attribute ([#7346](#7346)) ([3103e2f](3103e2f)) * **scrim:** Update loader scale on resize of component. ([#7419](#7419)) ([24e7f70](24e7f70)) * **slider:** Prevent excessive tick rendering ([#7421](#7421)) ([c799409](c799409)) * **switch:** Fix for focus outline style in certain cases ([#7414](#7414)) ([217324f](217324f)) * **tab-title:** Add full focus outline to closable tab button in high contrast mode ([#7272](#7272)) ([d812d17](d812d17)) * **tooltip:** Avoid extra before open/close event emitting ([#7422](#7422)) ([dbb6818](dbb6818)) * **tooltip:** Deprecate the label property due to the description coming from the component's content ([#7247](#7247)) ([7934d75](7934d75)) * **tooltip:** Emits `close` and `beforeClose` events when container is set to `display:none` ([#7258](#7258)) ([60a4683](60a4683)) * **tooltip:** Ensure --calcite-app-z-index-tooltip is applied ([#7345](#7345)) ([a9a7072](a9a7072)) </details> <details><summary>@esri/calcite-components-react: 1.5.0</summary> ## [1.5.0](https://github.com/Esri/calcite-design-system/compare/@esri/calcite-components-react@1.4.3...@esri/calcite-components-react@1.5.0) (2023-08-03) ### Features * Automatically import and define Calcite Components when importing their React wrapper ([#7185](#7185)) ([bf0ff67](bf0ff67)) ### Dependencies * The following workspace dependencies were updated * dependencies * @esri/calcite-components bumped from ^1.5.0-next.38 to ^1.5.0 </details> --- This PR was generated with [Release Please](https://github.com/googleapis/release-please). See [documentation](https://github.com/googleapis/release-please#release-please). --------- Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

driskull added 2 commits June 2, 2023 17:13

WIP

59f1968

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

ceea051

github-actions bot assigned driskull Jun 3, 2023

driskull added 15 commits June 2, 2023 17:30

cleanup

0478bb0

Merge branch 'master' into dris0000/sortable-list

84cd376

Merge branch 'master' into dris0000/sortable-list

49ce1f8

Merge branch 'master' into dris0000/sortable-list

ae85ebc

Merge branch 'dris0000/sortable-list' of github.com:Esri/calcite-comp…

5bcd803

…onents into dris0000/sortable-list

Merge branch 'master' into dris0000/sortable-list

2eae6be

cleanup

befbfea

add pull/put events

bf8ecad

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

84502ef

add comment

88a9258

cleanup

9a7b80d

cleanup

5ef19b2

Merge branch 'master' into dris0000/sortable-list

de11b60

drag handle alignment

ccc748e

cleanup

8ab64fe

driskull changed the title ~~[WIP] feat(list): Add support for sorting and dragging items~~ feat(list): Add support for dragging items. Jun 8, 2023

github-actions bot added the Stale Issues or pull requests that have not had recent activity. label Jun 15, 2023

Merge branch 'master' into dris0000/sortable-list

0cacf88

github-actions bot added the enhancement Issues tied to a new feature or request. label Jun 15, 2023

wip

a2acfdb

driskull added this to the 2023 July Priorities milestone Jun 16, 2023

driskull added 5 commits June 28, 2023 13:07

Merge branch 'master' into dris0000/sortable-list

ccf0a9a

# Conflicts: # packages/calcite-components/src/components/list/list.tsx

Merge branch 'main' into dris0000/sortable-list

628c09f

Merge branch 'main' into dris0000/sortable-list

a553935

cleanup

9b6dd24

cleanup

f010af2

driskull added 9 commits July 27, 2023 12:08

WIP

f97ceea

WIP

3580920

cleanup

f1f94c7

Merge branch 'main' into dris0000/sortable-list

202b9e7

cleanup

ca77444

cleanup

83fb4c0

cleanup

98acf7d

cleanup

b7eb538

Merge branch 'main' into dris0000/sortable-list

4b4329a

driskull marked this pull request as ready for review July 28, 2023 21:10

driskull requested review from benelan, jcfranco, geospatialem and a team as code owners July 28, 2023 21:10

driskull added 2 commits July 28, 2023 14:48

examples, tests

e174a94

cleanup

162cd5e

geospatialem reviewed Jul 28, 2023

View reviewed changes

fix test

f820923

jcfranco approved these changes Aug 2, 2023

View reviewed changes

review fixes

f826ce0

driskull added the pr ready for visual snapshots Adding this label will run visual snapshot testing. label Aug 2, 2023

driskull merged commit 7324f70 into main Aug 2, 2023

driskull deleted the dris0000/sortable-list branch August 2, 2023 16:56

calcite-admin mentioned this pull request Aug 2, 2023

chore: release latest #7261

Merged

eriklharper reviewed Aug 2, 2023

View reviewed changes

geospatialem mentioned this pull request Aug 2, 2023

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

Closed

3 tasks

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

driskull commented Jun 3, 2023 •

edited by jcfranco

Loading

github-actions bot commented Jun 15, 2023

driskull commented Jul 28, 2023

geospatialem left a comment

jcfranco left a comment

eriklharper Aug 2, 2023

driskull Aug 2, 2023

eriklharper Aug 2, 2023

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

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

Conversation

driskull commented Jun 3, 2023 • edited by jcfranco Loading

Summary

github-actions bot commented Jun 15, 2023

driskull commented Jul 28, 2023

geospatialem left a comment

Choose a reason for hiding this comment

jcfranco left a comment

Choose a reason for hiding this comment

eriklharper Aug 2, 2023

Choose a reason for hiding this comment

driskull Aug 2, 2023

Choose a reason for hiding this comment

eriklharper Aug 2, 2023

Choose a reason for hiding this comment

driskull commented Jun 3, 2023 •

edited by jcfranco

Loading