Bauhaus Design System

Tree Bar ​

Usage ​

The Tree Item and Tree Bar components are designed to provide a visual structure that mirrors the hierarchical representation of information. They are commonly used in various applications such as file systems, hierarchical navigation, organizational structures, or any data set where items have parent-child relationships.

A Tree Item is an individual element or node within the hierarchical structure, and the Tree Bar serves as a container for these items, facilitating their organization and navigation. Tree Item can not be used alone, only in Tree Bar context; and Tree Bar consists of set of Tree Items, therefore they are both in organism level in atomic structure of this design system.

Types ​

Tree Items represent individual nodes in a hierarchical structure and can be either: a Parent/Child type or Leaf type based on their relationship within the tree (utilizing component props in Vue).

  • Parent/Child type can be either in parent position or in child-parent position at the same time. When in parent position Tree Item can have one or more child nodes associated with it. When in child-parent position it is a direct descendent of a parent and can also have further child nodes that makes it a parent as well.

  • Leaf: The terminal node in a branch, having no child nodes.

The Tree Bar serves as a parent container for the Tree Items and currently there is only one type of it.

Anatomy and Behavior ​

States ​

  • All types of the Tree Items can be either in a Selected or Unselected state. Only one Tree Item can be Selected at a time. Selecting another Tree Item deselects the previously selected one.

  • Parent/Child type Tree Item can be also either in Expanded or Collapsed state, in which the child nodes are either displayed or hidden, respectively.

There are two distinct user interactions in Tree Item: Interactions with Expand/Collapse button and interactions with Tab Item nested inside Tree Item. These interactions are explained in Behavior section above. Therefore;

  • Tab Item inside Tree Item has its own interactions inherited from Tab Item component, namely, :hover, :active, :focus: and Disabled.
  • Expand/Collapse button additionally has its own interactive states, for each of the states described above. These are :hover, :active, :focus and Disabled.

Gaps and Sizes ​

TREE ITEM

  • Expand/Collapse button padding: XS
  • Expand/Collapse button icon height and width: M
  • Tree Item height: XLplus
  • Tree Item width: adapts (fills) to its container’s width, the Label text truncates if does not fit in the container.
  • Tree Item padding left: M
  • Tree item contents alignment: Center

TREE BAR

  • Tree Bar outer container width: is set in the context of each project and all the children inherently fill this predetermined container width.
  • Tree Bar inner container left padding: M
  • Tab Bar inner container and outer container widths: adapt to their container.
  • Tree Bar height: adapts to the contents’ height; can have as many Tree Items as required.
  • Scrollbar: right aligned; height of the track adapts to the Tree Bar height.

Tokens ​

SCSS Variable
Value
$treeItem-expandCollapseButton-unselected-color
--color-grey-40
$treeItem-expandCollapseButton-selected-color
--bds-brand-primary-color
$treeItem-expandCollapseButton-bgColor--hover
--embossed-1--grey-98
$treeItem-expandCollapseButton-outline-color--focus
--color-azure-45
$treeItem-expandCollapseButton-unselected-color--locked
--color-grey-70

$treeItem-text: %body

Properties ​

ts
//#region props

export interface TreeElement {
  children?: TreeElement[];
  name?: string;
  id?: number | string;
  disabled?: boolean;
  subtitle?: string;
}


export interface TreeBarProps extends TreeElement {
  depth?: number;
  expanded?: boolean;
  modelValue?: string | number;
  selectedId?: number;
  path?: string;
  expandAll?: boolean;
  category?: TreeBarCategory;
  
  /** Relative to the tree item slot. */
  replaced?: string;
  info?: string;
  hideButton?: boolean;
}

export type TreeBarCategory = "generic" | "withButton" ;

Configurations ​

Here's an example code snippet demonstrating the usage of TreeBar:

vue
<script lang="ts" setup>

  import TreeBar from './TabBar.vue';
  import { tree_example } from './tree_example'; // importing the data schema

  const modelValue = ref(''); // declare

</script>

<template>

  <TreeBar
    v-bind="{...tree}" 
    v-model="modelValue"
  >
  </TreeBar>

  <!--  this will show the name of the selected Element -->
  <span>{{ modelValue }} content </span> 

</template>

It produces:

Tree Item 1
Tree Item 2

content

Developer Notes ​

  • The TreeBar component renders a hierarchical tree structure with expandable/collapsible nodes.
  • Tree items are provided via the tree prop, which contains the hierarchical data structure.
  • Each tree item must have a unique id (string) and can have optional children for nested items.
  • The modelValue prop (string) controls the selected tree item's id.
  • The component emits an update:modelValue event when a tree item is clicked, passing the selected item's id.
  • Tree items can be either parent/child nodes (with children) or leaf nodes (terminal nodes).
  • The expand/collapse functionality is handled automatically for parent nodes with children.

Implementing Tree Items with Button Category ​

To implement tree items with button functionality, you need to:

  1. Set the category prop to 'withButton' on the TreeBar component
  2. Use the @buttonClicked event to handle button interactions
  3. Structure your tree data with the appropriate properties
typescript
interface TreeItem {
  id: string;
  name: string;
  disabled?: boolean;
  children?: TreeItem[];
  replaced?: string;  // Used for button functionality
  info?: string;      // Additional info displayed below the item
  subtitle?: string;  // Subtitle displayed next to the name
}

const treeExample = {
  id: 'root',
  name: 'Root',
  children: [
    {
      id: 'parent1',
      name: 'Parent Item',
      children: [
        {
          id: 'child1',
          name: 'Child Item',
          replaced: 'replaced file',  // This enables button functionality
          info: 'Additional info'     // Displayed below the item
        }
      ]
    }
  ]
};
vue
<script lang="ts" setup>
import { TreeBar } from '@pohlcon/design-system';
import { ref } from 'vue';

const treeData = ref(treeExample);
const selectedItem = ref('');


// The IconButton logic
const handleButtonClicked = (id: string) => {
  console.log('Button clicked for item:', id);
  // Handle button click logic here
};
</script>

<template>
  <TreeBar
    v-model="selectedItem"
    :tree="treeData"
    category="withButton"
    @buttonClicked="handleButtonClicked"
  />
</template>

NOTE

When category="withButton" is set, the TreeBar renders an IconButton with a "more_options" icon for each tree item. The button appears on the right side of each item and emits a buttonClicked event with the item's ID when clicked. The replaced property in your tree data can be used to customize the button behavior or display additional information below the tree item.