Enhancement: Selection visuals for Tree

[bstifle]

Remove left-hand bar single selection active state style:

• Replace with circle (radio) visual
• Have ability to have multi select with checkmarks
• have ability to style multi select using calcite-checkbox including all available states such as idle, hover, selected, and indeterminate. Checkbox should give the ability to select an entire parent/group and its children

[bstifle]

• [ ] Update text sizes
• [ ] Update colors
• [ ] Update spacing
• [ ] Small Medium and Large scales
• [ ] 3 visual selection variants (radio, check, checkbox)

[macandcheese]

Comps look good, great alignment

🔲🔲 🔲🔲

It seems like the "checkbox" design functions differently than "check icon" - are parent-level items not selectable in that mode?

[bstifle]

to my understanding no, which is kind of a neat differentiator imo

[macandcheese]

Ok, it might be worth looking how these three layouts map to all 5 of the selection-modes, and how it interacts with the show-input prop (if they need to both still remain)?

If we can make that decision for them based on mode, we'll have less of a tree-mode-potpourri across our apps. Just props for theme, lines, scale is nice.

[evanmosby]

Looking forward to these options with ArcGIS Monitor! Especially the center option (checks w/o box) for facet filter multi-select!

[caripizza]

Tree scales were installed in pr #2803.

Next I'll fine-tune the selection visuals with Bryan in Figma. We'll need to support all 5 of tree's selection-modes, which were implemented according to the specs here:

• https://www.w3.org/TR/wai-aria-practices-1.1/#:~:text=Selection%20in%20multi-select%20trees
• https://www.w3.org/TR/wai-aria-practices-1.1/#:~:text=Alternative%20selection%20model%20--%20Moving%20focus%20without%20holding%20the%20Shift%20or%20Control%20modifier%20unselects

(Descriptions and screenshot examples for our current tree behavior in each selection-mode can be found in the markdown table here.)

[caripizza]

@bstifle I'm blocked on this one until I know what tree should look like in all 5 selection modes. Can you please clarify?

[bstifle]

@caripizza

with lines:

https://www.figma.com/file/E3SB0i5wPy7AagB7KcjF05/?node-id=1183%3A21400

[benelan]

Verified on storybook after beta.64 release. Awesome stuff! https://esri.github.io/calcite-components/?path=/story/components-tree--simple