Calcite tree - allow selection of parent category w/out selecting children

[capeoples]

Description

We would like to have a property on the calcite tree that just allows for selecting the parent, without selecting children. We also want to make sure that this enhancement is accessible.

---

Currently in the calcite tree, when a parent is expanded / selected, it automatically selects all of the children.

When applied to filters in ArcGIS Online, this creates a scenario that is confusing / overwhelming for users, as there could be many nested filters under a parent. There is also a need to select just the parent in many filter use cases. Current example:

Acceptance Criteria

Allow for a selecting just the parent in a tree without selecting children.

Relevant Info

This example from w3.org of a File Directory for a Treeview illustrates the behaviour we are looking for. Here's a link directly to the codepen example.

Which Component

Calcite tree

Example Use Case

No response

Priority impact

p1 - need for current milestone

Esri team

ArcGIS Online

[geospatialem]

@SkyeSeitz @ashetland Could you take a peek at this one? The solution will likely be a new prop on tree, which would only select the parent item and not the child(ren). This pattern would differ from what is currently offered when a parent item is expanded and selected.

[geospatialem]

Possible related issue: #6509, which is a bug request on tree-item related to child action and selection - also targeted for the May release.

[SkyeSeitz]

Some thinky thoughts and notes on interaction behavior so we can align and discuss any open ended questions :)
Documented at this file.

[paulcpederson]

@SkyeSeitz that design covers our workflow really well. This is a change to how the children mode operates, but I think it's a good change and much more intuitive.

[ashetland]

Agreed. Nice work Skye. Do we think we can clean up hover states on this as well to make things more clear or does that need to wait to get this implemented faster?

[paulcpederson]

I can add hover changes as part of this pr if the designs are done in the very near future

[SkyeSeitz]

Thank you, @paulcpederson! Hover states are ready for review here.

[SkyeSeitz]

Link to prototype with different hover state options. I am favoring the second in this list labeled "Background hovers without action" as it provides distinct hover states between: selecting & expanded a parent item, just expanding, and just the triggering the action. The background also consistently extends to the left when hovering over the icon + text container, whether it is a parent item with decedents, item without decedents, or child item.

Screen.Recording.2023-05-04.at.3.37.40.PM.mov

[geospatialem]

Verified in 1.4.0-next.10 with selection-mode="children".

Note: To ensure the PR made the upcoming release the hover states above were not part of the effort, but will be added to a future upcoming milestone.