Closed designertyler closed 3 years ago
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
Hi, I wonder the statue of this feature, i have to use DataTable
to implements my treeview now, thanks.
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 master
?
the v1 feature set is ready (pending a11y review) and will be included in an upcoming release this month
@emyarod Glad to hear that, thanks very much.
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. 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?
@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
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").
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
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:
UI-shell-left-panel
(UI-shell-left-panel
is selected)text-input
and tile
(those nodes are selected individually rather than the range.)
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".
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 !
Hi! Any update about the TreeView? Would love to hear how it's development is going! :)
@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 🙂
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?
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
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 https://github.com/carbon-design-system/carbon/issues/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.
[x] Offer variants with file type icon and without file type icon
[x] custom icon (for nodes and/or expand/collapse icon)
[x] Node type (File type) represented by an icon
[x] 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?
[x] Hover state
[x] 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: