Design for data tree variation of the accordion

[designertyler]

Rocket previously used an accordion as a type of data tree navigation. The v10 accordion moved the arrows to the right side which makes it more difficult to navigate and use as a data tree.

This issue is to design a way to navigate similar to a typical data tree.

v10 accordion component

data tree example

[emyarod]

the primary use case would likely be for displaying any sort of hierarchical organization

we could likely include things like searching/filtering and selection for parts of the tree as well

[sbologescu]

Thank you for looking into adding a tree component. This would be very useful for us.
Here is an additional requirement that would be awesome if could be added to this new component:
Ability to edit the tree structure

1. move nodes (folders/leaves) around
2. add/delete/rename nodes

[tdayton]

The Sun Web Application Design guidelines have a section on Tree Details: https://pages.github.ibm.com/CloudIntegrationDesign/sun-guidelines/05-navigation.html#5.4

[cal-smith]

We have a fairly basic tree-view built out in WCE addons: https://github.ibm.com/peretz/carbon-addons-wce/tree/master/src/tree-view

https://pages.github.ibm.com/peretz/carbon-addons-wce/#/tree-view

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[stale]

As there's been no activity since this issue was marked as stale, we are auto-closing it.

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[cal-smith]

bump?

[stale]

We've marked this issue as stale because there hasn't been any activity for a couple of weeks. If there's no further activity on this issue in the next three days then we'll close it. You can keep the conversation going with just a short comment. Thanks for your contributions.

[stale]

As there's been no activity since this issue was marked as stale, we are auto-closing it.

[asudoh]

Reopening given I see multiple people asking in this area recently.

[mjabbink]

This would be good addition

[JordanWSmith15]

My product (Maximo) also requires this, although not strictly a tree view. It really is an accordion inside of an accordion. The accordion allows us to place the components we need at each level (not just text), but also have the entire tree collapsed on page-load.

[asudoh]

^ Feel free to add comments with desired UX/visual to #4768. As #4768 states, nested accordion is not supported in design level, and discussion with our designer will be needed to see if there is a use case we need to accommodate around nested accordion and guidance on how to solve the problem area.

[tw15egan]

@joshblack has this issue been solved with https://react.carbondesignsystem.com/?path=/story/unstable-treeview--default ?

[joshblack]

@tw15egan I think there is overlap with tree view but there still seems to be a use-case that was raised back in October when I re-opened it that came up in Slack (but I could be misremembering, can't find the thread now)

[emyarod]

there is a planned variant of the tree view that requires more exploration but is currently on hold. It should resolve this issue when I'm able to implement it but I believe the issue can remain open until then

[sstrubberg]

Closing in favor of #5180