[Contained list]: Draggable list items 🌳

[dianasanborn]

The problem

This is part of the effort to consolidate the Sustainability Software PAL list guidance with Carbon's contained list guidance.

Figma file: List comparison

Currently there are two very similar components available in both Sustainability PAL and Carbon: the list and contained list. The contained list was contributed from the Carbon for IBM Products side, with some references to the Sustainability PAL list component. Sustainability wasn't involved in the contribution at the time.

There are a lot of similarities to both. Within Sustainability we had a few additional use cases that are used in multiple patterns.

The draggable list items variant is not available in the contained list, but is used in multiple patterns:

• SSW PAL list builder pattern
• C4IP Add and select pattern
• C4IP data table column customization

The solution

• Add a variant/prop to allow for reordering list items
• Add design guidance and use case examples for when to use
• Establish consistent draggable/reordering pattern (consider reordering styles for other use cases like cards on a dashboard)
• Look into accessibility alternatives outside of just drag and drop

Examples

• C4IP data table column customization
• C4IP column customization coded component

• SSW PAL list builder pattern
• SSW column customization coded component

• C4IP Add and select pattern

Application/PAL

Sustainability Software PAL

Business priority

None

Available extra resources

https://ibm-products.carbondesignsystem.com/?path=/story/ibm-products-components-datagrid-columncustomization--column-customization-usage-story&globals=viewport:basic

Code of Conduct

• I agree to follow this project's Code of Conduct

[github-actions]

Thank you for submitting a feature request. Your proposal is open and will soon be triaged by the Carbon team.

If your proposal is accepted and the Carbon team has bandwidth they will take on the issue, or else request you or other volunteers from the community to work on this issue.