Content Tree

A content tree provides users with a way to navigate nested hierarchical information using a parent-child relationship model

Overview

A content tree provides users with a way to navigate nested hierarchical information using a parent-child relationship model. It is located on the left side of the screen and cannot be combined with Side Navigation or Toolbar.

Usage

Use when

  • You have nested, hierarchical information.
  • You want to manage hierarchical data and information.

Don’t use when

  • You need to navigate between pages of an application. Instead use Side Navigation.
  • You need to display actions a user may take to manipulate content within an application (i.e. edit, erase, rotate, etc.). Instead use a Toolbar (coming soon).
  • You want a folder to collapse when another folder opens (instead, use an Accordion).

Specifications

Anatomy

A content tree should be located on the left side of the screen and should consist of the following elements:

Tree Anatomy

Tree item:

A content tree view is text-only by default. This option is best used when a hierarchy consists of all of the same content type. Background color: white, font weight: Semi-bold/ 600, font color: Trimble Gray. There are two sizes of available:

  • Default: 48px/3rem in height

  • Condensed: 32px/2rem in height

  • Collapse/ expand icon: Size: 16x16px, color: Trimble Gray. required

  • Drag icon: Allows the user to rearrange items in the content tree and change their hierarchical relationships. Size: 16x16px, color: Trimble Gray. optional

  • Checkbox: Checkboxes within the tree view allow users to select items and apply actions to them. Both single-select and multiselect tree views display checkboxes on the left side of each item. Size: 16x16px (see Checkboxes). optional

  • Icon: Icons can be used to add clarification about tree view items. They help to differentiate content types visually. Choose icons that relate to the object type being represented in the content tree. These icons can be unique to specific data types to add better clarification for users. Size: 16x16px, color: Trimble Gray. optional

  • Action icon(s): Action icons may appear next to the tree item or above the content tree in an action bar. optional

Tree Specifications

Behaviors

  • Expand icon expands the clicked folder and does not collapse any other folders that are open.
  • When a folder expands and collapses only its height should change; its width should remain consistent.
  • Expand-and-collapse functionality should never be triggered on hover.
  • Clicking the chevron will expand the folder but not select it.
  • Always display the collapse and expand button.
  • The content tree may have an action bar above it’s content where the user can trigger additional actions:
    • Collapse all,
    • Duplicate,
    • Reorder (drag & drop),
    • Delete,
    • Edit,
    • Add new folder.
  • The content tree may include a search box.

States of Tree Items

Tree Item States

StateBackground ColorTop/Bottom BorderFontNotes
Default white Gray 10
#ffffff
#171c1e
1px solid
Gray 0 Gray 8
#e0e1e9
#464b52
Trimble Gray White
#252a2e
#ffffff
Regular, 400
Body text for default size; Small body text for condensed size
Hover Gray 0 Gray 8
#e0e1e9
#464b52
1px solid Gray 0 Gray 8
#e0e1e9
#464b52
Trimble Gray White
#252a2e
#ffffff
Regular, 400
 
Selected Blue Pale Trimble Dark
#dcedf9
#019aeb4d
1px solid Gray 0 Trimble Dark
#e0e1e9
#019aeb
Trimble Gray White
#252a2e
#ffffff
Regular, 400
Checkmark appears at the end if action icons are not used
Disabled White #Gray 10
#ffffff
#171c1e
1px solid Gray 0 Gray 8
#e0e1e9
#464b52
Gray 2 White (40%)
#b7b9c3
#ffffff66
Regular, 400
See Checkboxes for specifications

Collapse and Expand

  • Clicking the collapse/ expand button in each content tree item expands or collapse a tree view item that contains child tree items.
  • Clicking the chevron expands the folder but does not select it. Click a tree item selects it and expands it.
  • User can click the “Collapse all” icon/button in the action bar to have all the open folders in the tree collapse.

Collapse and Expand

Text Overflow

When a label’s length is too long to display within the tree view, the text should be truncated at the end using an ellipsis. Hovering over or focusing on the truncated tree view item should reveal a tooltip that shows the full text of the label.

Text Overflow

Large Tree Views

When tree views are very large, use a progress circle or a “show more” affordance to show additional parts when it’s contextually relevant. These loading patterns can apply to the entire tree view or to nested tree view items.

If system processes are delaying the display of child tree view items when a parent tree view item is expanded, show a clear indication that the items are in the process of loading (see Spinners).

Large Tree Views

Content Tree Action bar

Content Tree Action bar

The content tree may include an action bar that contains a variety of icons that turn on a content tree functionality:

Collapse All

  • Enabled when a folder is expanded.
  • Clicking it, collapses all the expanded folders.
  • It highlights the top parent folder as the selected one; It does not change the selected folder (if there is one).

Duplicate

Duplicate Tree

When a folder is selected, the duplicate icon in the toolbar becomes active.

  • The user clicks the duplicate icon.
  • The system duplicated that folder and it’s children.
  • The system pastes the duplicate folder below.
  • The new folder name is immediately editable. The name is not required to be unique; however, best for best accessibility practices, it should be).

Drag and Drop

Drag & Drop

The Drag & Drop icon (and functionality) is hidden by default. The user needs to click the icon in the action bar above the content Tree.

  • Click the Drag & Drop icon.
  • The tree shows the Drag & Drop icon in front of each item in the tree.
  • The user can still expand the tree to be able to drag and drop into a different folder.

Content tree items can be dragged and dropped as a way of reordering or restructuring the hierarchy. Multiple content tree items can be dragged and reordered simultaneously. When selecting items in different hierarchies, dropping them in a new location flattens their hierarchical relationship with one another as sibling children of the content tree item they were dropped into.

The content tree DOES NOT accept dropped items from outside the component (e.g., dropping a new file into a content tree in order to upload a file to a specific folder is not allowed).

If a drag operation is not allowed, the line indicating the drop location will be red, and when the user tries to drop it, the item will return to its original location.

Delete

  • Only enabled when a tree item is selected.
  • When clicked, a modal opens to confirm the delete (see Modals). It warns the user they are about to delete x number of items.
  • Deletes everything in the tree item including its children.

Edit Tree Item Name

Edit

When a tree item is selected, the edit icon in the toolbar becomes active.

  • User clicks the edit icon.
  • The tree item name becomes an editable input field (see Inputs).
  • The user types in a new name (see accessibility guidelines below for best naming conventions).
  • The user can click outside of the input field or press enter to commit the new tree item name.

Add New Tree Item

Clicking the + will either add a new tree item to the top of the tree structure or if an item is selected above it.

  • When the user clicks the + icon, a new tree item is added to the top of the tree or above a selected tree item.
  • The user types in a new tree item name (see accessibility guidelines below for best naming conventions).
  • The user can click outside of the input field or press enter to commit the new tree item and its name.

Note: The user can later drag & drop to move the tree item into their preferred place.

Filter

Filter shows all the tree items matching the user’s search term. Tree items are expanded to show all of the results of the search. Matching items are highlighted in Trimble Blue (#0063a3).

What's Changed
DateVersionNotesContributors
02/04/20221.3.0New component added.J. Wittmeyer, E. Gunther, L. Meskanen-Kundu