Versions Compared

Version Old Version 59 New Version 60
Changes made by

Itay lapid (Unlicensed)

Asaf Ben-Oved

Saved on

Key

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

...

Description

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

...

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.

...

  • A leaf node is an object that contains data.

  • Each leaf node consists of:

    • a title. Long titles can be truncated and a Tooltip can be used on hover.

    • an optional icon, representing the node's type (e.g. a document). If all nodes are of the same type, the icon should not be used.

  • Where a leaf node represents an employee, an avatar image may appear instead of an icon.

...

Where multi-selection is used, each node will have a Check Box, allowing the user to select and deselect it.

...

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

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

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

    • toggle the triangle button between states.

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

  • Where multiple selection is used:

    • Clicking a check box 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.

Best practices

Use:

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

...

  • where there is no hierarchy → use a List instead.

General

  • Avoid using too many hierarchy levels.

...

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

Multi Select

https://zpl.io/a8L0Exa

Smart Select

https://zpl.io/VDePyea

Tree - Organization

https://zpl.io/adgoJlV

...