Description

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

...

	Image
Single selection
Multiple selection
Smart Selection
Read only tree	Ori Cohen Please add here the image when ready
Dependencies between leaf nodes	Ori Cohen Please add here the image when ready

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.

...

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

• When leaf nodes have dependencies between them, that is - when turning on/off one leaf’s checkbox will turn on/off another leaf’s checkbox (usually relevant for privileges trees), a dependency line will be added between them. The influenced leaf node will be displayed on top, and the influenced node/s - bellow it. For example:

Ori Cohen , please enter here the edit-view dependency as an example

Container nodes:

• A container node is an object containing other items (e.g. a folder).

• Each container node consists of:

  • a triangle toggle button, to the left of the title.

  • an icon.

  • a title.

• Container nodes have 2 states:

  • Collapsed, when all child items are hidden. In this case, the triangle toggle button points towards the node title.

  • Expanded, when all or some levels of child items are shown. In this case, the triangle toggle button points downwards.

• If the icon representing a container node is a folder, it may also have the 2 states, closed (when collapsed) and open (when expanded).

...

• 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

Liav Nadler let’s discuss the states in relation to the read-only tree

	Container Node	Leaf Node
Regular
Hover Hovered dependent leaves		Ori Cohen please add the example here
Active
Selected
Disabled	NA
Focused
Focused, Hover
Focused, Active
Focused, Disabled	NA

...

• when there is a need to select one or more items in a hierarchical list. That’s not the only case

• Read-only tree - use when the user can only view (and, contrary to a disabled tree, would never be able to do more than just view).

Don't use:

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

...