Design for tree view v1.1

[designertyler]

A continuation of the v1 design specs for tree view #5180

Requirements

• Select a parent node without expanding the children so a user can see information tied to the parent node.
• Motion specs for expanding and collapsing parent and rotating caret.
• The ability to collapse all expanded nodes at once
• Provide specs for additional icons in a node:
• Multiselect with checkbox. Ref Tree view: Designs and spec for Multi-select checkbox variant #12335

Visual grouping explorations

Note: We chose to go with our current Tree view visual implementation after exploring the following visual groupings below.

• Different expand indicators (+/- and chevron)

  • In some cases, - can mean remove, and we felt this was not as clear as using a chevron or caret icon.
    

• Divider rules between nodes

  • Horizontal rules between every node row can become visually cluttered.
    

• Graphical element for grouped children nodes (gray blocks like IoT, vertical rules like VS code)

  • Alignments with the icons and rule lines can be tedious. There are a lot of alignments here that need to be exact for this design to work properly.
    

• Docked parent nodes similar to VS code.
  

• Should the vertical rules change or appear when the user hovers in the tree area? When a node is selected?
  

Future functionality to be considered

Multi-select

• Selection in multi-select trees: Authors may implement either of two interaction models to support multiple selection: a recommended model that does not require the user to hold a modifier key, such as Shift or Control, while navigating the list or an alternative model that does require modifier keys to be held while navigating in order to avoid losing selection states.
• Recommended selection model -- holding a modifier key while moving focus is not necessary:
• Space: Toggles the selection state of the focused node.
• Shift + Down Arrow (Optional): Moves focus to and toggles the selection state of the next node.
• Shift + Up Arrow (Optional): Moves focus to and toggles the selection state of the previous node.
• Shift + Space (Optional): Selects contiguous nodes from the most recently selected node to the current node.
• Control + Shift + Home (Optional): Selects the node with focus and all nodes up to the first node. Optionally, moves focus to the first node.
• Control + Shift + End (Optional): Selects the node with focus and all nodes down to the last node. Optionally, moves focus to the last node.
• Control + A (Optional): Selects all nodes in the tree. Optionally, if all nodes are selected, it can also unselect all nodes.
• Alternative selection model -- Moving focus without holding the Shift or Control modifier unselects all selected nodes except for the focused node:
• Shift + Down Arrow: Moves focus to and toggles the selection state of the next node.
• Shift + Up Arrow: Moves focus to and toggles the selection state of the previous node.
• Control + Down Arrow: Without changing the selection state, moves focus to the next node.
• Control + Up Arrow: Without changing the selection state, moves focus to the previous node.
• Control + Space: Toggles the selection state of the focused node.
• Shift + Space (Optional): Selects contiguous nodes from the most recently selected node to the current node.
• Control + Shift + Home (Optional): Selects the node with focus and all nodes up to the first node. Optionally, moves focus to the first node.
• Control + Shift + End (Optional): Selects the node with focus and all nodes down to the last node. Optionally, moves focus to the last node.
• Control + A (Optional): Selects all nodes in the tree. Optionally, if all nodes are selected, it can also unselect all nodes.

Type ahead:

• 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.
• Horizontally scroll within the tree container so I can read text that may be cropped.
• Have the ability to edit (create, update name, delete) any node.
• See the loading state when children nodes may take a while to load.
  -- Scroll up and down a tree inside a container and know there's more content above or below that isn't shown.
• Have the option to use a border bottom as a divider between nodes to help with visual grouping or to use no border bottom.
• Dock the parent node on scroll so the user can always see the parent.
• Have the ability to take batch action on nodes so I can edit multiple at once.
• Can drag and drop a node anywhere in a tree to change its location.
• Can see the number of children inside a parent node without expanding the parent. For example, a number (3) representing the children.
• Can search a tree to find the node I'm looking for.
• Can adjust the viewing container's width so a user can read the text of deeply nested nodes.
• Can change the sort method and order so I can browse the data by any sort of metadata.

Future features to consider

• Entering different modes
• Define the component's intended use: browsing file directory, as navigation?
• Drag and drop grabber icon for reordering or nesting
• Geometry for actions on the nodes (checkbox, edit, drag). This depends on the requirements - not explored yet
• Loading state when the children node content may take a while
• Number of nested children
• Overflow menus
• Pagination
• Revisit selection state style for cmd+click multiselect. Consider using something more consistent with Carbon components like the dropdown select style.
• Search
• Status indicator
• Support for different selection styles, e.g. with checkboxes or directory style selection (Ctrl/Cmd + click or Shift + click)
• Tree container to define the bounds of the tree, scrolling and docked node behavior, placement of additional functionality.

[jjennings7]

Are there any updates for this issue or for when the tree view will no longer be experimental? We're using it in DataStage and have considered some of the variants above.

[tay1orjones]

@jjennings7 It's mostly stable, though currently being worked on to wrap up some remaining minor features and accessibility concerns. @emyarod can provide specifics on what's left before it will be moved to stable.

[sstrubberg]

Closing in favor of #12381