Calcite-components: Component: Tree Navigation

Created on 9 May 2019 · 8Comments · Source: Esri/calcite-components

http://proto.esri.com/#/detail/Navigation/Tree%20Navigation/1

I'm adding this to the initial list from @paulcpederson because we have a pretty big need for it on both the Developers Site (the existing side nav pattern isn't working for us anymore) and the Vector Tile Style Editor (our existing Angular tree component has issues).

new component

Source

patrickarlt

Most helpful comment

@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:
Source

Combined proposed design:
Artboard

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

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 🤷‍♂

macandcheese on 12 Aug 2019

👍2

All 8 comments

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

paulcpederson on 9 May 2019

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.

macandcheese on 9 May 2019

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

julio8a on 10 May 2019

@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?

patrickarlt on 9 Aug 2019

@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: