-
Notifications
You must be signed in to change notification settings - Fork 1.8k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Design for tree view component #5180
Comments
My project need a tree view component on React. May I know when this will be in Carbon? Thanks. |
@designertyler Really awesome work here! We have a coded version of the Tree in Cloud PAL that could be adapted to for this. |
@designertyler |
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 |
@emyarod Thanks for quick reply, so how long could i adopt the new feature? or is the feature already ready in the |
the v1 feature set is ready (pending a11y review) and will be included in an upcoming release this month |
@emyarod |
Hi, looking forward to the component to go live! But I get questions on the pattern below:
|
@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. We also considered + and - and may consider adding them as an option. Did you have feedback for using one pattern vs. the other? |
@emyarod any update on this? |
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 |
Is this a typo? Should this line just be deleted?
It is already covered by the line that immediately follows it:
|
@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:
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! |
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". |
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. :)
For mouse behaviors, you will want to go with
Thanks @designertyler ! |
Hi! Any update about the TreeView? Would love to hear how it's development is going! :) |
@joseph00 it was merged in 8 days ago (#6008) and should be included in the next release ( |
Is there a sample code on how to use it? I tried this but seems like it doesn't have any styling applied: Edit: Nevermind. Found out I have to import the styling manually: Is this because it's an experimental feature? |
Do we have an idea of when this will go live? |
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 |
@pascal-potvin yes, if it works for your use case! |
Is there checkbox support for this? Can't wait for it to come out 👍 |
@mtucciarone progress on this enhancement will be slow but it is on the roadmap |
@emyarod is there a support for loading data on demand in this tree view component ? |
@AmirHussain93 currently there is not, but there are explorations for it so it may be a future enhancement |
@emyarod okay thanks for the quick reply |
Hi. Is the Sketch library no longer available? |
@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. |
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? |
@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. |
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! |
Based on the proposal in this issue #2230
Design Specs
Text (small and extra small sizes)
Text and icon (small and extra small sizes)
Target areas and behaviors
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
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.
Explorations
Aesthetics are closer to the left nav than the accordion.
A line-height at 32px
Dividing rules give the tree a closer appearance to the accordion and disrupts the indented grouping of the children nodes if they go full width
Using the 16px caret instead of the chevron. The use of a caret reduces the amount of noise when used with the file type icons that are illustrated with a similar line to the chevron and +/-. The chevron can also be placed against file type icons to give more horizontal room for the node title.
Offer variants with file type icon and without file type icon
custom icon (for nodes and/or expand/collapse icon)
Node type (File type) represented by an icon
Should there be a list counterpart for when there are no children nodes? What does a tree look like where there are no children? Is it just a list?
Hover state
Should parent nodes have a folder file type icon or just the caret? With no parent file type, the alignment of the children nodes is clearer. Not having this icon works better if we chose to use vertical rules for grouping children nodes.
To do:
Reference:
The text was updated successfully, but these errors were encountered: