Status
The status of the component
Component checklist
Usage
Alignment Uniformity
Do
The default alignment for the expand/collapse chevron is to the left.
Caution
In instance where the chevron must be positioned to the right, all the chevrons of the group should be positioned to this side.
Don't
At no point should a tree view's branches have a combination of right and left aligned chevrons in the same group. There must be uniformity in the alignment of tree view chevrons.
Heading Usage
Do
The tree view group header, provides additional functionality and context to comfy sized tree views.
Don't
Given the size of the tree view group header, this element should not be used alongside compact size tree views in order to prevent noise.
Iconography Usage
Do
Icons can be used alongside branches (but not leafs) to provide users with additional context.
Don't
Icons should be applied to all or none of the branches of a tree view. This is to prevent a jarring and confusing user experience.
Quantity Meter Application
Do
The quantity meter provides addition information/data that may be beneficial to users. This can be applied to both branches and leafs.
Don't
Within a tree view group, either all or none of the tree view items should have a quantity meters.
Levels Limits
Do
The level limit for branches is set at the grandchild level (level 3) whereas the limit for leafs is set at the great-grandchild level (level 4).
Don't
At no point should a leaf and/or branch exceed the level limit.
Badge Application
Do
Context badges, provide additional information to branches.
Don't
Badges should not be used on leafs and grandchild level branches.
Size Uniformity
Do
Retaining the same size, increases the scan-ability/discoverability of items within a tree view group.
Don't
Avoid mixing comfy and compact sized tree view items together.
Parent/Child Selection Relationship
Do
Multi-select branches and leafs are intimately connected. If a leaf is selected then this selection status is also represented at the branch level.
Don't
Always surface selection statuses at the branch level.
Search Best Practices
Default Behavior
The search within tree view header group is a UI element that provides users with a shortcut to their desired item. Within particularly large and deep tree view groups (16+ parent branches), the search field can be an important and useful element for users.
When unselected, the search field displays a placeholder state.
Mid typing behavior
After three letters have been inputted into the search field, the tree view group begins to filter down to show all the relevant leafs that have a label which is associated to the input placed in the search.
Given the relationship between leafs and branches, at all times the branch be shown alongside the leaf.
Completed typing behavior
Once the user has completed inputting the appropriate input into the search field, the leaf most closely matching the user’s input is presented. Again given the relationship between leafs and branch, the full level relationship between the two should be shown.