[List item] Child elements behavior can be toggled open without selection change and event dispatch

[geospatialem]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

A way to opt in to an stripped-down behavior when clicking a list-item that contains nested list-items.

Originally posted in #6544, diverging the two separate functions - selection and filtering - for development efforts.

cc @nwhittaker

Acceptance Criteria

Clicking the content area of a list-item with nested list-items:

• Toggle's the list-item's open property to show/hide the nested list-items.
• Does not mark the list-item as selected and does not trigger its calciteListItemSelect event.
• Does not deselect the previously selected list-item.
• Clicking any of the list-item's actions does not toggle the open property.

Relevant Info

Originally posted in #6544, diverging the two separate functions - selection and filtering - for development efforts.

Which Component

list-item

Example Use Case

The Field Maps web app would like to use the calcite-list element to display the layers in a map. For group layers, nested layers are shown as child list-items.

Selecting a leaf layer navigates the app for further handling of the layer. However, the app does not provide further handling for group layers. They are treated more like folders that organize sets of layers -- so clicking them in the list should have no effect other than to drill down to leaf layers.

Priority impact

p2 - want for current milestone

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Field Apps

[geospatialem]

A figma resource was added via this comment and a follow-up comment to this Figma file:

[driskull]

Toggle's the list-item's open property to show/hide the nested list-items.

The default action for a list item is selection. If selection-mode is "none" then we could open the nested list item if it has one if that is the request here.

Does not mark the list-item as selected and does not trigger its calciteListItemSelect event.

I think the selection-mode of "none" is what this is for.

Does not deselect the previously selected list-item.

I think the selection-mode of "none" is what this is for.

Clicking any of the list-item's actions does not toggle the open property.

This should already be the case.

[ashetland]

I think some context was lost when this issue was split off from #6544. From this comment:

Selection modes
Final proposal for revising the existing single and multiple selection-modes and adding children and multichildren can be found in this Figma file. See also the image below. This would be consistent with changes to Tree in issue #6912 and pr #6926.

The idea was to flush out the selection modes for List to match those in Tree so there would be modes where the parent List Item could act more like a folder. In selection-mode="single | multiple" these parent List Items would not be selectable and the hit target for expanding or collapsing would be the entire item and not just the chevron. selection-mode="children | multichildren" would match the current behaviors of List. cc @nwhittaker @ade10176

Having said all that, it's possible we may need to revisit this strategy as part of our holistic design rethink related to #7100. cc @macandcheese @SkyeSeitz

[driskull]

The idea was to flush out the selection modes for List to match those in Tree so there would be modes where the parent List Item could act more like a folder.

I don't think we would need to add these additional modes if we just add expand/collapse support to list-item-groups since they don't have any selection. I prefer this to adding additional modes that complicate the UX.

We would need a design for this in order to proceed

[driskull]

The figma changes proposed would introduce breaking changes. We don't want to alter the way the current single or multiple selection works.

[nwhittaker]

I don't think we would need to add these additional modes if we just add expand/collapse support to list-item-groups since they don't have any selection. I prefer this to adding additional modes that complicate the UX.

Agreed with this and we actually have an enhancement request for expanding/collapsing groups at #6537.

We would need a design for this in order to proceed

One design consideration is that we'd want to style top-level groups differently from nested groups. For example, the Layers and Rivers groups within this prototype.

[driskull]

Can we close this one in favor of #6537? We could triage it and get design started. cc @geospatialem

[geospatialem]

Based on the discussion above - closing in favor of #6537, which will support the collapsing of list-item-groups comprised of list-items