From 4600038f20b92594751d0da4b159c5db6f831d1e Mon Sep 17 00:00:00 2001
From: cd3859 <185913911+cd3859@users.noreply.github.com>
Date: Tue, 11 Feb 2025 15:53:24 +0000
Subject: [PATCH] fix(ic-tree-item): added styling and function changes

added styling to correct icon changing position and size and added functionality to handle
truncating tree items before first render
---
 .../src/components/ic-tree-item/ic-tree-item.css         | 2 +-
 .../src/components/ic-tree-item/ic-tree-item.tsx         | 4 ++++
 .../src/components/ic-tree-view/ic-tree-view.css         | 1 -
 .../src/components/ic-tree-view/ic-tree-view.tsx         | 9 ++++++---
 4 files changed, 11 insertions(+), 5 deletions(-)

diff --git a/packages/canary-web-components/src/components/ic-tree-item/ic-tree-item.css b/packages/canary-web-components/src/components/ic-tree-item/ic-tree-item.css
index c100f1d213..de9302b086 100644
--- a/packages/canary-web-components/src/components/ic-tree-item/ic-tree-item.css
+++ b/packages/canary-web-components/src/components/ic-tree-item/ic-tree-item.css
@@ -133,7 +133,7 @@
 }
 
 .icon-container {
-  width: var(--ic-space-lg);
+  min-width: var(--ic-space-lg);
   height: var(--ic-space-lg);
   margin: 0 var(--ic-space-xs) 0 0;
 }
diff --git a/packages/canary-web-components/src/components/ic-tree-item/ic-tree-item.tsx b/packages/canary-web-components/src/components/ic-tree-item/ic-tree-item.tsx
index e45f2e8ea9..522d62f5de 100644
--- a/packages/canary-web-components/src/components/ic-tree-item/ic-tree-item.tsx
+++ b/packages/canary-web-components/src/components/ic-tree-item/ic-tree-item.tsx
@@ -139,6 +139,10 @@ export class TreeItem {
     this.hostMutationObserver?.disconnect();
   }
 
+  componentWillRender(): void {
+    this.truncateTreeItem && this.truncateTreeItemLabel(this.el);
+  }
+
   componentWillLoad(): void {
     removeDisabledFalse(this.disabled, this.el);
 
diff --git a/packages/canary-web-components/src/components/ic-tree-view/ic-tree-view.css b/packages/canary-web-components/src/components/ic-tree-view/ic-tree-view.css
index c6d5045f2b..ced52bbd51 100644
--- a/packages/canary-web-components/src/components/ic-tree-view/ic-tree-view.css
+++ b/packages/canary-web-components/src/components/ic-tree-view/ic-tree-view.css
@@ -41,7 +41,6 @@
 }
 
 .icon-container {
-  width: var(--ic-space-lg);
   min-width: var(--ic-space-lg);
   height: var(--ic-space-lg);
   margin: 0 var(--ic-space-xs) 0 0;
diff --git a/packages/canary-web-components/src/components/ic-tree-view/ic-tree-view.tsx b/packages/canary-web-components/src/components/ic-tree-view/ic-tree-view.tsx
index 476b23e509..90386eb252 100644
--- a/packages/canary-web-components/src/components/ic-tree-view/ic-tree-view.tsx
+++ b/packages/canary-web-components/src/components/ic-tree-view/ic-tree-view.tsx
@@ -99,15 +99,18 @@ export class TreeView {
     this.hostMutationObserver?.disconnect();
   }
 
+  async componentWillRender(): Promise<void> {
+    await this.setTreeItems();
+    this.watchTruncateTreeItemsHandler();
+    this.truncateHeading && this.truncateTreeViewHeading();
+  }
+
   componentDidLoad(): void {
     this.setTreeItems();
 
     this.watchSizeHandler();
     this.watchFocusInsetHandler();
     this.watchThemeHandler();
-    this.watchTruncateTreeItemsHandler();
-
-    this.truncateHeading && this.truncateTreeViewHeading();
 
     this.addSlotChangeListener();