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 · a0c1d33 · a0c1d33
1 parent e52ac5b
commit a0c1d33
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 11 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
@@ -143,6 +143,10 @@ export class TreeItem {
     removeDisabledFalse(this.disabled, this.el);
   }
 
+  componentWillRender(): void {
+    this.truncateTreeItem && this.truncateTreeItemLabel(this.el);
+  }
+
   componentDidLoad(): void {
     this.childTreeItems = Array.from((this.el as HTMLElement).children).filter(
       (child) => child.tagName === this.treeItemTag
@@ -156,10 +160,6 @@ export class TreeItem {
 
     this.updateAriaLabel();
 
-    setTimeout(() => {
-      this.truncateTreeItem && this.truncateTreeItemLabel(this.el);
-    }, 100);
-
     !isSlotUsed(this.el, "label") &&
       onComponentRequiredPropUndefined(
         [{ prop: this.label, propName: "label" }],

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,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-view/ic-tree-view.tsx b/packages/canary-web-components/src/components/ic-tree-view/ic-tree-view.tsx
@@ -98,17 +98,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();
-
-    setTimeout(() => {
-      this.truncateHeading && this.truncateTreeViewHeading();
-    }, 100);
 
     this.addSlotChangeListener();