search

carbon-design-system / carbon

A design system built by IBM
https://www.carbondesignsystem.com
Apache License 2.0
7.84k stars 1.81k forks source link

Design for tree view component #5180

Closed designertyler closed 3 years ago

designertyler commented 4 years ago

Based on the proposal in this issue https://github.com/carbon-design-system/carbon/issues/2230

Design Specs

Text (small and extra small sizes)

Tree view — Text — Gray 10 theme

Text and icon (small and extra small sizes)

Tree view — Text and icon — Gray 10 theme

Target areas and behaviors

Tree view — Default — Touch target — Gray 10 theme

Sketch kit/library

https://www.sketch.com/s/c6f33ba0-b5c7-46b3-9c73-5ead5eb2caa7

Usage docs

https://carbon-website-git-fork-designertyler-treeview03092020.carbon-design-system.now.sh/components/tree-view/usage/

User Requirements

As an end user I want to...

As a product team implementing a data tree, I want to...

  • Have the option to represent the node's file type by an icon so the user can understand the node's file type.
  • Have the option to not use a file type icon when the file type is not important for my data.
  • Show a node as disabled so the user knows it cannot be active.

Accessibility Requirements

Support the ARIA keyboard and mouse behaviors for tree view here https://w3c.github.io/aria-practices/#keyboard-interaction-23 2 so the user's expectations are consistent for other trees.

Keyboard Behaviors for a vertically oriented tree:

  • When a single-select tree receives focus:
  • If none of the nodes are selected before the tree receives focus, focus is set on the first node.
  • If a node is selected before the tree receives focus, focus is set on the selected node.
  • When a multi-select tree receives focus:
  • If none of the nodes are selected before the tree receives focus, focus is set on the first node.
  • If one or more nodes are selected before the tree receives focus, focus is set on the first selected node.

Right arrow When focus is on a closed node, opens the node; focus does not move. When focus is on a open node, moves focus to the first child node. When focus is on an end node, does nothing.

Left arrow When focus is on an open node, closes the node. When focus is on a child node that is also either an end node or a closed node, moves focus to its parent node. When focus is on a root node that is also either an end node or a closed node, does nothing.

Down Arrow Moves focus to the next node that is focusable without opening or closing a node.

Up Arrow Moves focus to the previous node that is focusable without opening or closing a node.

Home: Moves focus to the first node in the tree without opening or closing a node.

End Moves focus to the last node in the tree that is focusable without opening a node.

Enter Activates a node, i.e., performs its default action. For parent nodes, one possible default action is to open or close the node. In single-select trees where selection does not follow focus (see note below), the default action is typically to select the focused node.

Type-ahead is recommended for all trees, especially for trees with more than 7 root nodes:

Type a character Focus moves to the next node with a name that starts with the typed character.

Type multiple characters in rapid succession Focus moves to the next node with a name that starts with the string of characters typed. (Optional): Expands all siblings that are at the same level as the current node.

Mouse Behaviors

  • Click on a node sets focus and selects the node
  • Ctrl-click on a node focuses and selects the node. Previous selections are maintained.
  • Double click on an end node causes any associated action to be invoked. Open issue: are there ever parent nodes that have an action other than expand or collapse?
  • Click on a closed node opens the node.
  • Click on expand / collapse icon associated with a parent node toggles the expand/collapse of the node

Explorations

To do:

Reference:

wangweiu commented 4 years ago

My project need a tree view component on React. May I know when this will be in Carbon? Thanks.

loganmccaul commented 4 years ago

@designertyler Really awesome work here! We have a coded version of the Tree in Cloud PAL that could be adapted to for this.

vincent-pli commented 4 years ago

@designertyler Hi, I wonder the statue of this feature, i have to use DataTable to implements my treeview now, thanks.

emyarod commented 4 years ago

the features we planned for the first version of the component are complete, we are just fulfilling some important accessibility requirements and testing before releasing

vincent-pli commented 4 years ago

@emyarod Thanks for quick reply, so how long could i adopt the new feature? or is the feature already ready in the master?

emyarod commented 4 years ago

the v1 feature set is ready (pending a11y review) and will be included in an upcoming release this month

vincent-pli commented 4 years ago

@emyarod Glad to hear that, thanks very much.

apiconnecttesting commented 4 years ago

Hi, looking forward to the component to go live! But I get questions on the pattern below:

  1. Icon for the collapsed and expanded state
  2. The chevron direction(point to the right instead of the top when collapsed) Any reason why we have different patterns for these?
designertyler commented 4 years ago

@apiconnecttesting That’s a good question. The main driver for having the collapsed state point right was most data trees follow that behavior so many users will be familiar with the meaning of those two states.

An issue with the caret pointing up for collapsed is that it takes that extra time to determine if the icon represents the current state of the node or the action it will take if I click on it. An advantage of using a right-pointing caret for closed and down-pointing for open is that it reinforces the flow and hierarchy of the data.

We also considered + and - and may consider adding them as an option.

Did you have feedback for using one pattern vs. the other?

andrea-island commented 4 years ago

@emyarod any update on this?

emyarod commented 4 years ago

IBM Accessibility is currently investigating accessible navigation patterns for this component. Until we have the green light to release, I am looking to first release this behind an experimental feature flag

carmacleod commented 4 years ago

Reminder that the Usage docs are missing the Interactions section with its Mouse, Keyboard, and Screen readers subsections under Behaviors (note that in other Carbon doc, this is called "Behaviors" and not "Behavior").

carmacleod commented 4 years ago

Is this a typo? Should this line just be deleted?

Ctrl-Arrow-Space - Selects non-contiguous nodes

It is already covered by the line that immediately follows it:

Ctrl-Spacebar with focus on an item toggles the selection of the item

designertyler commented 4 years ago

Is this a typo? Should this line just be deleted?

Ctrl-Arrow-Space - Selects non-contiguous nodes

It is already covered by the line that immediately follows it:

Ctrl-Spacebar with focus on an item toggles the selection of the item

@carmacleod These keyboard behaviors were sourced from https://www.w3.org/wiki/TreeView

I believe the first one behavior is meant to enable multi selection behavior similar to what you can do with the mouse: This animation shows the mouse:

I'll update the usage docs. I think they were following an old version of the template and I haven't touched them in a while. Thanks for the feedback!

carmacleod commented 4 years ago

Note that the TreeView keyboard behaviors section in the Aria Practices Guide has a subsection for Selection in multi-select trees that is missing from this issue, but should be followed when the tree is multiselectable.

You won't be able to implement the "Recommended selection model" because you want unmodified Space key to select and "activate" (i.e. perform the default action, just like the Enter key). So you need to look at implementing the "Alternative selection model".

carmacleod commented 4 years ago

These keyboard behaviors were sourced from https://www.w3.org/wiki/TreeView

I would lean more heavily on the ARIA Practices Guide for recommended keyboard shortcuts. That wiki page was last updated in 2012, and "Ctrl-Arrow-Space" isn't really a thing. :)

Click... Shift+click... Shift+command+click...

For mouse behaviors, you will want to go with Command+click for non-contiuous selection (not Shift+command+click).

I'll update the usage docs.

Thanks @designertyler !

ghost commented 4 years ago

Hi! Any update about the TreeView? Would love to hear how it's development is going! :)

tw15egan commented 4 years ago

@joseph00 it was merged in 8 days ago (https://github.com/carbon-design-system/carbon/pull/6008) and should be included in the next release (10.19.0) scheduled for later this week 🙂

akmalmzamri commented 4 years ago

Is there a sample code on how to use it? I tried this but seems like it doesn't have any styling applied: CodeSandbox

Edit: Nevermind. Found out I have to import the styling manually: import "carbon-components/scss/components/treeview/_treeview.scss";

Is this because it's an experimental feature?

pascal-potvin commented 3 years ago

Do we have an idea of when this will go live?

emyarod commented 3 years ago

the experimental component is already available to use, but further enhancements and variations have been delayed for the time being

pascal-potvin commented 3 years ago

the experimental component is already available to use, but further enhancements and variations have been delayed for the time being

Thanks @emyarod for the swift response. Is this the experimental aspect I should be sharing with my teams? https://codesandbox.io/s/polished-glitter-zkcss?file=/src/App.js

emyarod commented 3 years ago

@pascal-potvin yes, if it works for your use case!

mtucciarone commented 3 years ago

Is there checkbox support for this? Can't wait for it to come out 👍

emyarod commented 3 years ago

@mtucciarone progress on this enhancement will be slow but it is on the roadmap

AmirHussain93 commented 3 years ago

@emyarod is there a support for loading data on demand in this tree view component ?

emyarod commented 3 years ago

@AmirHussain93 currently there is not, but there are explorations for it so it may be a future enhancement

AmirHussain93 commented 3 years ago

@emyarod okay thanks for the quick reply

BrHowell commented 3 years ago

Hi. Is the Sketch library no longer available?

laurenmrice commented 3 years ago

@BrHowell The link in this issue was broken. I found the correct link https://www.sketch.com/s/c6f33ba0-b5c7-46b3-9c73-5ead5eb2caa7.

Eventually we will be transferring tree view into the Carbon theme sketch cloud libraries as a component once the code is stable.

jonathandick commented 2 years ago

Apologize if this is documented somewhere else but is this component still being worked on by the Carbon team? If so, is there any chance it will be part of release 11?

laurenmrice commented 2 years ago

@jonathandick The treeview component will not be part of the official first version of the v11 release. However, developers on the Carbon for Dotcom team will be building treeview sometime this year. I do not have an exact of when it will be available yet.

jonathandick commented 2 years ago

Thank you for the rapid feedback and looking forward to the release of this feature.

We (Openmrs.org) use the Carbon design system to support an open-source EMR primarily used to support HIV care programs and humanitarian relief projects in LMICs. We are so grateful to the Carbon team for all the great work you do!