[Add and select]: Consolidate SSW list builder pattern with C4IP add and select pattern 🌳

[dianasanborn]

The problem

This is part of the effort to consolidate the Sustainability Software PAL list builder guidance with Carbon for IBM Products add and select guidance.

Figma file: List builder/add and select comparison

Design documentation enhancements from Sustainability PAL

1. Search with >12 items

I don't think I saw any examples of short lists in the add and select pattern, but this is basically saying if there are fewer than 12 items a search is not required since the list is short enough, but if there are more than 12 items in the list then add a search field. The team can evaluate whether this logic is needed or to just keep the search always available regardless of length of the list.

Things to consider

1. Reordering selected items

Related Carbon issue to add reordering in the contained list component.

This might be dependent on the use case, but this gives users the option to reorder the selected items. An example where you see this in C4IP today (and SSW) is the datagrid column customization

2. Pinning required selected items

This is also use case dependent but it's giving the option to have pinned/pre-selected items in the selected list that the user cannot remove. This is also seen in the datagrid column customization (i.e. a pinned column) or can be used in other add and select flows. The team can evaluate the lock icon or other options like the disabled selected checkbox.

The solution

• Team to evaluate unique guidance and variants from SSW PAL
• Work with @dianasanborn to make updates to add and select pattern

Design link

https://www.figma.com/design/XStTM0SklbXIVhSkWeojzh/(v10)-PAL-Patterns---Sustainability-Software?node-id=4295-82337&node-type=section&t=AWaFBAj8GfRukxuZ-11

Links to other materials

https://carbon-design-system.github.io/carbon-addons-iot-react/?path=/story/1-watson-iot-table-column-customization-%E2%98%A2%EF%B8%8F-tablecolumncustomizationmodal--playground&knob-Apply%20padding%20to%20the%20card%20content%20or%20not%20(padding)=none&knob-availableActions={%22range%22:true,%22expand%22:true,%22edit%22:true,%22clone%22:false,%22delete%22:false}&knob-breakpoint=lg&knob-size=MEDIUM&knob-title=Card%20title

https://carbon-design-system.github.io/carbon-addons-iot-react/?path=/story/2-watson-iot-experimental-%E2%98%A2%EF%B8%8F-listbuilder--stateful-example-with-checkboxes&knob-Apply%20padding%20to%20the%20card%20content%20or%20not%20(padding)=none&knob-availableActions={%22range%22:true,%22expand%22:true,%22edit%22:true,%22clone%22:false,%22delete%22:false}&knob-breakpoint=lg&knob-size=MEDIUM&knob-title=Card%20title

Owner/main maintainer(s)

Diana Sanborn

Second/backup maintainer(s)

No response

Product/offering

Sustainability Software

Business priority

None

Code of Conduct

• I agree to follow this project's Code of Conduct
• I checked the current issues for duplicate issues