Versions Compared

Version Old Version 60 New Version 61
Changes made by

Asaf Ben-Oved

Liav Nadler

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

...

A tree is a hierarchical List, allowing users to expand and collapse nodes to show or hide nested items.

Image Modified

Types

Image

Single selection

Image Modified

Multiple selection

Image Modified

Smart Selection

Image Modified

Usage & Behavior

Trees are used to navigate within hierarchical lists of objects (e.g. organizations), and then to select one or more items in order to filter content or show additional information.
They usually appear inside a Filter Pane, a Details Panel, or a Widget.

General guidelines

Structure

Image Modified

The tree consists of:

Leaf nodes

...

  • In most cases, nodes should be ordered alphabetically, to allow users locating specific items quickly.

  • Other cases may include logical, chronological or numeric orders.

States

Container Node

Leaf Node

Regular

Image ModifiedImage Modified

Hover

Image ModifiedImage Modified

Active

Image ModifiedImage Modified

Selected

Image ModifiedImage Modified

Disabled

NA

Image Modified

Focused

Image ModifiedImage Modified

Focused, Hover

Image ModifiedImage Modified

Focused, Active

Image ModifiedImage Modified

Focused, Disabled

NA

Image Modified

Interaction

  • Since a tree is an instance of a list, please refer to list interactions.

  • Hovering over a truncated node title will show a Tooltip tooltip containing the full title.

  • Clicking a triangle toggle button or double-clicking a container node parent node will:

    • select that node.

    • expand the node. If the node is already expanded, clicking it will not collapse back.

  • Clicking a triangle button will:

    • toggle the triangle button between states.,

    • toggle collapse / expand the node between the collapsed and expanded states. When . If loading the content of the node takes more than 1 second, a Progress progress Indicator will appear.

  • Where multiple selection is used:

    • Clicking a check box checkbox will select or / deselect the item, including all child items, if exist.

    • If only some of the child items are selected, the parent item will be partially selected.

  • For reordering items, please refer to the Drag and drop page.

Best practices

Use:

  • when there is a need to select one or more items in a hierarchical list.

...

Unless otherwise specified, see our general compliance information in Fundamentals - Accessibility.

Keyboard

Node

Tab

  • From the previous component:

    • If no item is selected, moves focus to the first node in the tree.

    • If a node is selected, moves focus to the first selected node.

  • From the last node in the tree, navigates to the next component.

Shift + Tab

  • From the next component:

    • If no item is selected, moves focus to the first node in the tree.

    • If a node is selected, move focus to the first selected node.

  • From the first node in the tree, navigates to the previous component.

Space

Selects or actions the item.

Enter

Selects or actions the item.

Esc

N/A

Arrows

Up/Down - Moves focus to the previous/next node accordingly. Only nodes which are visible without opening a parent node should be focused.

Right:

  • When focus is on a closed node, opens the node. Focus does not move.

  • When focus is on an open node, moves focus to the first child node.

  • When focus is on an end node, does nothing.

Left:

  • 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.

Home

Moves focus to the first/top node in the tree, without automatically opening or closing any nodes.

End

Moves focus to the last focusable node without expanding any closed nodes.

“*” (asterisk)

  • Expands all closed sibling nodes that are at the same level as the focused node.

  • Focus does not move.

  • See W3 for reference.

a-z, A-Z

  • Moves focus to the next node with a label starting with the typed character(s), if such an item exists.

  • Typing multiple characters in rapid succession moves the focus to the next node starting with the string of typed characters.

  • If no matching nodes are found below the focused node, the first node from the top of the tree should be focused (if exists).

  • Only nodes which are visible without opening a parent node should be focused.

  • If no node labels match the typed character(s), the focus does not move.

Design

Zeplin link

Screen thumbnail

Single Select

https://zpl.io/agwRA0a

Image Modified

Multi Select

https://zpl.io/a8L0Exa

Image Modified

Smart Select

https://zpl.io/VDePyea

Image Modified

Tree - Organization

https://zpl.io/adgoJlV

Image Modified

Code

...