Component: Tree Navigation about calcite-design-system HOT 8 CLOSED

@patrickarlt

Here are some designs, combines the style and function of VTSE, Online, Calcite Design Site so it can be used for all purposes.

Propose having props for:
border/lines: true/false (the alignment lines are useful for deeply nested trees, but should give the option of not having them for shallow trees)

scale: default/compact(dense?) - useful for dense implementations like VTSE - 1/2 y-padding.

States:
Dropdowns:

• Closed / Inactive (no style)
• Closed / Active (500 weight text, "thick stroke" blue caret)
• Open / Inactive (no style, rotated caret)
• Open / Active (rotated caret, 500 weight text, "thick stroke" blue caret)

Children:

• Inactive (no style)
• Active (500 weight font, blue dot)
• Hover (darken text, gray dot)

Original varying designs:

Combined proposed design:

Combined proposed design in VTSE (probably a good candidate for "dense / compact" display)

Unsure if the border-left needs to be there at all, I think maybe a bold collapsed / blue caret could be enough to indicate closed / active 🤷‍♂

from calcite-design-system.

@macandcheese this looks great. I'll get started on this this week.

For my own reference https://www.w3.org/TR/wai-aria-practices-1.1/#TreeView

from calcite-design-system.

I'm not sure if the calcite team has looked at that pattern. /cc @julio8a @macandcheese

from calcite-design-system.

I think we can extend the updated side nav styles to support this, just with the new "active dot" style. @patrickarlt - the density issue you encounter still needs to be addressed - the proto design feels like a good scale for marketing / docs, but for an app, something more along the lines of what Mapbox does in their tile editor navigation would be appropriate, scale-wise.

from calcite-design-system.

Agreed, I think it'll be good to base it on new 2.0 side nav.

from calcite-design-system.

@julio8a @macandcheese I'm going to have some time to spend on this since I want to use it for an upcoming release on the developers site. From a design perspective how we want to proceed? Should I forge ahead and just do a mix of http://proto.esri.com/#/detail/Navigation/Tree%20Navigation/1 and my own best judgement? I tried starting up https://github.com/ArcGIS/calcite-design-system to see if there was anything but I got a lot of errors in the process.

How do you want to proceed?

from calcite-design-system.

✨ 👌

from calcite-design-system.

Closing as this has been merged in, can open subsequent issues for any other tasks if needed ✨

from calcite-design-system.