Enhancement: Modify value-list to support layer-list design

[driskull]

Description

• support layer-list design

https://codepen.io/mtb-alan/pen/PoqQOBJ

Acceptance Criteria

• Slot for leading actions (drag handle & tree action)
• Slot for trailing actions (visibility and menu icon)
• Modify styles to handle selected state with left border

Relevant Info

Which Component

• calcite-value-list
• calcite-value-list-item

Example Use Case

Component could be used internally within the layerlist, tablelist and basemaplayerlist API widgets.

CC ISSUE https://github.com/Esri/calcite-components/issues/968

[driskull]

notable changes:

calcite-value-list

• We would probably need to deprecate dragEnabled in favor of dragEnabled on each individual list-item so that some can be dragged and others not. Thoughts? @asangma

calcite-value-list-item

• We would probably want to add a loading prop to this so that it can be easily toggled. Thoughts? @asangma
• If we want to automatically include the tree icon arrow, we could have a property for when it is open and add it when it has children that are calcite-value-list-item. Thoughts? @asangma
  • This means, we wouldn't need any leading-actions slot
• Do we want to build the menu in to this? Or leave it up to the developer? If we build it in we can have the logic to only show one action or show the menu. If we build it in, we need a prop for when its open or closed. thoughts? @asangma
  • If we build it in, we probably have a slot for primary-actions and secondary-actions. The primary-actions would always be displayed if populated (for visibility icon) and the secondary-actions would only show 1 at most and the rest in the menu.

Need feedback on implementation.

Seems like we might need a functional component for the only show one icon and show menu if more part.

[driskull]

@asangma would it be possible to use the calite-dropdown for the places we have the [...] button? Is there a transparent version of it? I guess not because we use action. I think we'll have to have our own version.

[asangma]

calcite-value-list

• dragEnabled
  • I hear what you're saying. Not sure what it would mean for how we'd use our sorting plugin

calcite-value-list-item

• loading Seems legit.
• caret/chevron and leading-slot.
  • Let's discuss. I think we should consider a general purpose ListItem to handle all these permutations
• menu built in or not : primary v secondary actions
  • I think if we follow a pattern similar to FlowItem or Panel, the hide icon + ellipsis could be just two incidents of the slot and the Action with ellipsis would be wired up in LayerList to trigger the menu
  • Is the menu pattern we have in FlowItem generalized?

[asangma]

re: calcite-dropdown There are some things about the style that lends it to more like choosing table view or list view kinna thing. I think if it can start accepting CalciteActions...?

Or we use Popover...?

[driskull]

Popover might be the right approach. We probably would set it up to just be above/below instead of anywhere.

[driskull]

@asangma or @kat10140 can you create an issue for me to update all areas where menu-actions slot is used to use the calcite-popover for positioning.

[jcfranco]

Moved to Esri/calcite-components#968