diff --git a/en/components/tree.md b/en/components/tree.md index 62cc3e639..bf1afd038 100644 --- a/en/components/tree.md +++ b/en/components/tree.md @@ -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 @@ -14,7 +14,7 @@ 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. @@ -22,44 +22,44 @@ The Tree component offers three sizes: Large, Medium, and Small. In Figma, you c ## 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. ## 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. -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. -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. ## 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. ## 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. ## 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. @@ -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 | | ------------------------------------------------------------------------------ | ---------------------------------------------------------------------------------- | @@ -89,11 +89,3 @@ Related topics: Our community is active and always welcoming to new ideas. - - - - - - - -