Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[35434] Tree: Remove Sketch and Adobe XD references #887

Open
wants to merge 1 commit into
base: vNext
Choose a base branch
from
Open

[35434] Tree: Remove Sketch and Adobe XD references #887

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
30 changes: 11 additions & 19 deletions en/components/tree.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
---
title: Tree Component - Design System Component
_description: The Tree Component Symbol is used as a visual representation of the hierarchical relationship between categories, presented in a list structure.
_keywords: Design Systems, Design Systems UX, UI kit, Sketch, Ignite UI for Angular, Sketch to Angular, Sketch to Angular, Angular, Angular Design System, Export code from Sketch, Design Kits for Angular, Sketch HTML, Sketch to HTML, Sketch UI kits, Figma, Figma to Angular, Export code from Figma, Figma HTML, Figma to HTML, Figma UI kits
_description: The Tree Component is used as a visual representation of the hierarchical relationship between categories, presented in a list structure.
_keywords: Design Systems, Design Systems UX, UI kit, Figma, Ignite UI for Angular, Figma to Angular, Angular, Angular Design System, Export code from Figma, Design Kits for Angular, Figma HTML, Figma to HTML, Figma UI kits
---

## Tree
Expand All @@ -14,52 +14,52 @@ The Tree component is visually identical to the [Ignite UI for Angular Tree Comp

## Tree Sizes

The Tree component offers three sizes: Large, Medium, and Small. In Figma, you can switch between them by adjusting the “Size” property in the properties panel. In Sketch, select the display density before inserting the symbol.
The Tree component offers three sizes: Large, Medium, and Small. In Figma, you can switch between them by adjusting the `Size` property in the properties panel.

<img class="responsive-img" src="../images/tree_size_large.png" srcset="../images/[email protected] 2x" />
<img class="responsive-img" src="../images/tree_size_medium.png" srcset="../images/[email protected] 2x" />
<img class="responsive-img" src="../images/tree_size_small.png" srcset="../images/[email protected] 2x" />

## Tree Type

We support two types of Tree component: Basic and Checkbox, where you have a Checkbox component after the Expand Icon. In Figma you can switch between the two types using the "Checkbox" boolean property from the properties panel, while in Sketch you have to choose the type prior to inserting the symbol, after choosing the display density.
We support two types of Tree component: Basic and Checkbox, where you have a Checkbox component after the Expand Icon. In Figma you can switch between the two types using the `Checkbox` boolean property from the properties panel.

<img class="responsive-img" src="../images/tree_type_basic.png" srcset="../images/[email protected] 2x" />
<img class="responsive-img" src="../images/tree_type_checkbox.png" srcset="../images/[email protected] 2x" />

## Tree Node Structure

The Tree component is built from a number of nested components we call Tree Nodes. Each Node consists of Expand Icon and Text. If you've chosen the Checkbox type, there'll also be a Checkbox component after the Expand Icon.
The Tree component is built from a number of nested components we call Tree Nodes. Each Node consists of Expand Icon and Text. If you've chosen the Checkbox type, there will also be a Checkbox component after the Expand Icon.

<img class="responsive-img" src="../images/tree-node_basic.png" srcset="../images/[email protected] 2x" />
<img class="responsive-img" src="../images/tree-node_checkbox.png" srcset="../images/[email protected] 2x" />

The Text in each node can be switched from normal to hyperlink text. In Figma this can be achieved by using the "Hyperlink" boolean property from the properties panel, while in Sketch this is achieved with `Symbol Overrides`.
The Text in each node can be switched from normal to hyperlink text. In Figma this can be achieved by using the `Hyperlink` boolean property of the .Base Node component from the properties panel.

<img class="responsive-img" src="../images/tree-node_basic.png" srcset="../images/[email protected] 2x" />
<img class="responsive-img" src="../images/tree-node_hyperlink.png" srcset="../images/[email protected] 2x" />

We also support two states of the Expand Icon - Collapsed and Expanded. In Figma you can switch between the two using the "Expanded" boolean property from the properties panel, while in Sketch this is achieved with `Symbol Overrides`.
We also support two states of the Expand Icon - Collapsed and Expanded. In Figma you can switch between the two using the `Expanded` boolean property of the .Base Node component from the properties panel.

<img class="responsive-img" src="../images/tree-node_basic.png" srcset="../images/[email protected] 2x" />
<img class="responsive-img" src="../images/tree-node_expanded.png" srcset="../images/[email protected] 2x" />

## Tree Node Level

In order to represent the hierarchical relationship between the nodes, the Tree Node supports three Level types: Root, Child and Grandchild. In Figma you can switch to a different level using the "Level" property from the properties panel, while in Sketch this is achieved with `Symbol Overrides`.
In order to represent the hierarchical relationship between the nodes, the Tree Node supports three Level types: Root, Child and Grandchild. In Figma you can switch to a different level using the `Level` property of the .Base Node component from the properties panel.

<img class="responsive-img" src="../images/tree_demo.png" srcset="../images/[email protected] 2x" />

## Tree Node State

The Tree Node has two primary states: Idle and Disabled, with additional interaction states available. In Figma, you can toggle the Active, Hover, and Focused properties in the properties panel to adjust these states. In Sketch, use `Symbol Overrides` to achieve similar customization. Additionally, in Figma, you can control the Checkbox state by toggling the Selected and Indeterminate boolean properties in the properties panel.
The Tree Node has two primary states: Idle and Disabled, with additional interaction states available. In Figma, you can toggle the Active, Hover and Focused properties in the properties panel to adjust these states. Additionally, you can control the Checkbox state by toggling the `Selected` and `Indeterminate` boolean properties in the properties panel.

<img class="responsive-img" src="../images/tree-node_basic.png" srcset="../images/[email protected] 2x" />
<img class="responsive-img" src="../images/tree-node_disabled.png" srcset="../images/[email protected] 2x" />

## Tree Presets

In addition to the basic Tree component, you can also choose from three Tree Presets - Active, Cascading Selection and Multiple Selection. These can make building your design easier and faster. In Figma these are separate components, positioned on the same page as the Tree component and you can insert them from the "Assets" panel or the "Resources" panel. In Sketch these are under the Tree folder, in a separate group called "Presets".
In addition to the basic Tree component, you can also choose from three Tree Presets - Active, Cascading Selection and Multiple Selection. These can make building your design easier and faster. In Figma these are separate components, positioned on the same page as the Tree component and you can insert them from the Assets panel.

<img class="responsive-img" src="../images/tree_presets_active.png" srcset="../images/[email protected] 2x" />
<img class="responsive-img" src="../images/tree_presets_cascading-selection.png" srcset="../images/[email protected] 2x" />
Expand All @@ -73,7 +73,7 @@ The Tree comes with styling flexibility through the available options for the Ex

## Usage

Ensure the Expand Icon state is set to "Expanded" for expanded Tree Nodes. When presenting cascading selection, switch the Checkbox state of parent nodes to "Indeterminate" to reflect partial selection.
Ensure the Expand Icon state is set to `Expanded` for expanded Tree Nodes. When presenting cascading selection, switch the Checkbox state of parent nodes to `Indeterminate` to reflect partial selection.

| Do | Don't |
| ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------- |
Expand All @@ -89,11 +89,3 @@ Related topics:


Our community is active and always welcoming to new ideas.








Loading