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
mi6 · Feb 11, 2025 · 4600038 · 4600038
1 parent 54a23d3
commit 4600038
Show file tree

Hide file tree

Showing 4 changed files with 11 additions and 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
@@ -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
@@ -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
@@ -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
@@ -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();