search

Esri / calcite-design-system

A monorepo containing the packages for Esri's Calcite Design System
https://developers.arcgis.com/calcite-design-system/
Other
289 stars 76 forks source link

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

Closed geospatialem closed 10 months ago

geospatialem commented 10 months ago

Check existing issues

Description

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

Originally posted in https://github.com/Esri/calcite-design-system/issues/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:

Relevant Info

Originally posted in https://github.com/Esri/calcite-design-system/issues/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 team

ArcGIS Field Apps

geospatialem commented 10 months ago

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

image

driskull commented 10 months ago

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 commented 10 months ago

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 https://github.com/Esri/calcite-design-system/issues/6912 and pr https://github.com/Esri/calcite-design-system/pull/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 commented 10 months ago

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 commented 10 months ago

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

nwhittaker commented 10 months ago

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 https://github.com/Esri/calcite-design-system/issues/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 commented 10 months ago

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

geospatialem commented 10 months ago

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