Enhancement: Pick-list and Value-list separation

[kat10140]

Description

We are separating removing the "configuration mode" from pick-list and creating value-list as a separate component.

The main reasons for separating capabilities into two separate components are

• to have a cleaner story
  • the two modes can have mutually exclusive capabilities as well as shared capabilities
  • this is confusing for the developer user...and for us
• to allow for greater divergence between the two components
  • the UX differs between selecting items and working with a set of selected items
  • either UX requires different UI language
  • either UX requires different types of information about state to be known

PickList will focus on selecting one or many items from a fixed set of items. It will also allow for a single action that can trigger e.g. more information about an item. Options for this component will be limited to keep its functionality focused. This is a non-editable list. Any sorting or filtering would be done outside of the component and will affect visibility.

ValueList will focus on displaying a list of selected items. Each item can be configured by using an accompanying panel and by directly editing the title. Items can also be reordered via drag and drop. Items can be added or removed from this list as well.

PickList

PickList criteria

• Options
  • single (default) or multi select

PickListItem criteria

• Options
  • compact mode
• Each item will have:
  • radio button or checkbox based on single or multi respectively
    • placed flex-start
  • Label
  • Summary (optional)
    • only rendered when a value is passed
  • Slot for an action/icon (right side of card)

---

ValueList

ValueList criteria

• Options
  • drag-enabled
  • label-editable
  • single (default) or multi (select mode will highlight card but will not have checkbox or radio)

ValueListItem criteria

• Options
  • label-editable (inheritable from ValueList)
• Each item will have
  • 6-dot drag and drop icon for dragon drop reordering (flex-start)
    • don't render when !drag-enabled
    • icon should be in the new calcite-ui-icons repo
  • Label
    • label-editable can be overridden at item level
    • when in editing, renders an input + commit Action + cancel Action
  • Summary
  • Slot for an action/icon (right side of card)

Helpful Details

old pick-list issue just for reference

=================================

API Design

PickList class {
  // controls multi-select functionality
  @Prop({ reflect: true }) multiple = false;

  // emitted when selecting an item.
  @Event() calciteListSelectionChange: EventEmitter;

  // Used to get selected items outside an event listener
  @Method() async getSelectedItems()
}

ValueList class {
  // for enabling drag and drop behavior
  @Prop({ reflect: true }) dragEnabled = false;

  // controls multi-select functionality
  @Prop({ reflect: true }) multiple = false;

  // toggles label editing of items
  @Prop({ reflect: true }) labelEditingEnabled = false;

  // emitted when selecting an item.
  @Event() calciteListSelectionChange: EventEmitter;

  // Used to get selected items outside an event listener
  @Method() async getSelectedItems()
}

[kat10140]

@asangma Please QA this before I send it over to Harry

[driskull]

Would be nice to have an issue for the API design of this

[pr3tori4n]

@asangma can you share the use case for the label editing? Will the app need an event fired when the label is changed?

[driskull]

Design looks good 👍

[kat10140]

Meeting notes 9/20: API design review

• lets not doc the method. later can look into the properties approach.
• value list will render a pick list under the hood as strategy a.
  • add a hook when value list wraps pick list (assuming strat a works well)
  • fallback: keep split
• don't need groups for value list
• issue on reusable grouping comp?

[pr3tori4n]

@kat10140 please verify.

[kat10140]

Verified

[kat10140]

@pr3tori4n looks like label editing isn't working, will make another issue for that