Carbon: Design for data tree variation of the accordion

Created on 28 Mar 2019  路  14Comments  路  Source: carbon-design-system/carbon

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
Screen Shot 2019-03-28 at 1.06.22 PM.png

data tree example
image.png

Hacktoberfest accepted research 馃憮 ux 馃嵖 visual 馃帹 discussion 馃挰

Most helpful comment

This would be good addition

All 14 comments

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

image

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

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

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

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.

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

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.

bump?

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.

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

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

This would be good addition

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.

^ 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.

Was this page helpful?
0 / 5 - 0 ratings

Related issues

ahoyahoy picture ahoyahoy  路  3Comments

JordanWSmith15 picture JordanWSmith15  路  3Comments

mouadcherkaoui picture mouadcherkaoui  路  3Comments

AnthumChris picture AnthumChris  路  3Comments

kalyanixraut picture kalyanixraut  路  3Comments