fix(core/tree): handle text overflow (#1428)

.changeset/lemon-pants-act.md

@@ -0,0 +1,5 @@
+---
+"@siemens/ix": patch
+---
+
+fix(core/tree): handle text overflow gracefully

packages/core/component-doc.json

@@ -16216,6 +16216,7 @@
           "reflectToAttr": false,
           "docs": "Tree model",
           "docsTags": [],
+          "default": "{}",
           "values": [
             {
               "type": "{ [x: string]: TreeItem<any>; }"
@@ -16264,7 +16265,7 @@
               "type": "<T = any>(index: number, data: T, dataList: T[], context: TreeContext, update: (callback: UpdateCallback) => void) => HTMLElement"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -16286,7 +16287,7 @@
             }
           ],
           "optional": false,
-          "required": false
+          "required": true
         }
       ],
       "methods": [],
@@ -16414,7 +16415,7 @@
               "type": "TreeItemContext"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -16430,6 +16431,7 @@
           "reflectToAttr": false,
           "docs": "Has tree item children",
           "docsTags": [],
+          "default": "false",
           "values": [
             {
               "type": "boolean"
@@ -16456,7 +16458,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         }
       ],

packages/core/src/components.d.ts

@@ -2291,7 +2291,7 @@ export namespace Components {
         /**
           * Render function of tree items
          */
-        "renderItem": <T = any>(
+        "renderItem"?: <T = any>(
     index: number,
     data: T,
     dataList: Array<T>,
@@ -2307,15 +2307,15 @@ export namespace Components {
         /**
           * Context
          */
-        "context": TreeItemContext;
+        "context"?: TreeItemContext;
         /**
           * Has tree item children
          */
         "hasChildren": boolean;
         /**
           * Text
          */
-        "text": string;
+        "text"?: string;
     }
     /**
      * @since 2.0.0
@@ -6550,7 +6550,7 @@ declare namespace LocalJSX {
         /**
           * Initial root element will not be rendered
          */
-        "root"?: string;
+        "root": string;
     }
     interface IxTreeItem {
         /**

packages/core/src/components/tree-item/tree-item.scss

@@ -23,11 +23,16 @@
   cursor: pointer;
 
   .tree-node-container {
+    @include ellipsis;
     display: flex;
     align-items: center;
     height: $x-large-space;
     flex-grow: 1;
     align-items: center;
+
+    .tree-node-text {
+      @include ellipsis;
+    }
   }
 
   .icon-toggle-container {
@@ -36,6 +41,7 @@
     justify-content: center;
     width: 2rem;
     height: 2rem;
+    min-width: 2rem;
 
     ix-icon {
       transition: transform var(--theme-default-time) ease-in-out;

packages/core/src/components/tree-item/tree-item.tsx

@@ -19,33 +19,33 @@ export class TreeItem {
   /**
    * Text
    */
-  @Prop() text: string;
+  @Prop() text?: string;
 
   /**
    * Has tree item children
    */
-  @Prop() hasChildren: boolean;
+  @Prop() hasChildren = false;
 
   /**
    * Context
    */
-  @Prop() context: TreeItemContext;
+  @Prop() context?: TreeItemContext;
 
   /**
    * Expand/Collapsed toggled
    */
-  @Event() toggle: EventEmitter<void>;
+  @Event() toggle!: EventEmitter<void>;
 
   /**
    * Clicked
    */
-  @Event() itemClick: EventEmitter<void>;
+  @Event() itemClick!: EventEmitter<void>;
 
   render() {
     return (
       <Host
         class={{
-          selected: this.context?.isSelected,
+          selected: !!this.context?.isSelected,
         }}
       >
         <div
@@ -60,7 +60,7 @@ export class TreeItem {
               name={'chevron-right'}
               size="16"
               class={{
-                ['icon-toggle-down']: this.context?.isExpanded,
+                ['icon-toggle-down']: !!this.context?.isExpanded,
               }}
               color={`color-${
                 this.context?.isExpanded ? 'primary' : 'std-text'
@@ -74,7 +74,7 @@ export class TreeItem {
             this.itemClick.emit();
           }}
         >
-          {this.text}
+          <div class="tree-node-text">{this.text}</div>
           <slot></slot>
         </div>
       </Host>

packages/core/src/components/tree/tree.tsx

@@ -39,17 +39,17 @@ export class Tree {
   /**
    * Initial root element will not be rendered
    */
-  @Prop() root: string;
+  @Prop() root!: string;
 
   /**
    * Tree model
    */
-  @Prop() model: TreeModel<any>;
+  @Prop() model: TreeModel<any> = {};
 
   /**
    * Render function of tree items
    */
-  @Prop() renderItem: <T = any>(
+  @Prop() renderItem?: <T = any>(
     index: number,
     data: T,
     dataList: Array<T>,
@@ -65,31 +65,31 @@ export class Tree {
   /**
    * Context changed
    */
-  @Event() contextChange: EventEmitter<TreeContext>;
+  @Event() contextChange!: EventEmitter<TreeContext>;
 
   /**
    * Node toggled event
    * @since 1.5.0
    */
-  @Event() nodeToggled: EventEmitter<{ id: string; isExpaned: boolean }>;
+  @Event() nodeToggled!: EventEmitter<{ id: string; isExpaned: boolean }>;
 
   /**
    * Node clicked event
    * @since 1.5.0
    */
-  @Event() nodeClicked: EventEmitter<string>;
+  @Event() nodeClicked!: EventEmitter<string>;
 
   /**
    * Emits removed nodes
    */
-  @Event() nodeRemoved: EventEmitter<any>;
+  @Event() nodeRemoved!: EventEmitter<any>;
 
   private hyperlist: Hyperlist;
 
   private toggleListener = new Map<HTMLElement, Function>();
   private itemClickListener = new Map<HTMLElement, Function>();
   private updates = new Map<string, UpdateCallback>();
-  private observer: MutationObserver;
+  private observer!: MutationObserver;
   private hasFirstRender = false;
 
   private updatePadding(element: HTMLElement, item: TreeItemVisual<unknown>) {
@@ -138,7 +138,10 @@ export class Tree {
 
           if (this.updates.has(item.id)) {
             const doUpdate = this.updates.get(item.id);
-            doUpdate(item, { ...this.context });
+
+            if (doUpdate) {
+              doUpdate(item, { ...this.context });
+            }
           }
 
           this.updatePadding(renderedTreeItem, item);
@@ -240,7 +243,7 @@ export class Tree {
     this.initList();
 
     this.observer = new MutationObserver((records) => {
-      let removed = [];
+      let removed: unknown[] = [];
 
       records.forEach((record) => {
         removed = [...removed, ...Array.from(record.removedNodes)];

packages/core/src/tests/tree/overflow/index.html

@@ -0,0 +1,86 @@
+<!--
+SPDX-FileCopyrightText: 2024 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta
+      name="viewport"
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+    />
+    <title>Stencil Component Starter</title>
+  </head>
+  <body>
+    <div style="height: 12rem; width: 100%">
+      <ix-tree root="root" id="tree"></ix-tree>
+    </div>
+
+    <script>
+      (async () => {
+        await window.customElements.whenDefined('ix-tree');
+        const tree = document.getElementById('tree');
+        const context = {
+          root: {
+            isExpanded: true,
+            isSelected: false,
+          },
+          sample: {
+            isExpanded: true,
+            isSelected: false,
+          },
+        };
+
+        const model = {
+          root: {
+            id: 'root',
+            data: {
+              icon: '',
+              name: '',
+            },
+            hasChildren: true,
+            children: ['sample'],
+          },
+          sample: {
+            id: 'sample',
+            data: {
+              name: 'Sample',
+              icon: 'star',
+            },
+            hasChildren: true,
+            children: ['sample-child-1', 'sample-child-2'],
+          },
+          'sample-child-1': {
+            id: 'sample-child-1',
+            data: {
+              name: 'Sample Child 1',
+              icon: 'cut',
+            },
+            hasChildren: false,
+            children: [],
+          },
+          'sample-child-2': {
+            id: 'sample-child-2',
+            data: {
+              name: 'Sample Child 2 lorem ipsum dolor',
+              icon: 'print',
+            },
+            hasChildren: false,
+            children: [],
+          },
+        };
+
+        context['sample-child-85'] = {
+          isExpanded: false,
+          isSelected: true,
+        };
+
+        tree.model = { ...model };
+        tree.context = { ...context };
+      })();
+    </script>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>

packages/core/src/tests/tree/tree.e2e.ts

@@ -70,4 +70,23 @@ regressionTest.describe('tree', () => {
 
     expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
   });
+
+  regressionTest('item overflow', async ({ page }) => {
+    await page.goto('tree/overflow');
+
+    page.setViewportSize({ width: 100, height: 100 });
+
+    const treeViewportHandle = await page.waitForSelector('ix-tree');
+
+    await page.evaluate((tree) => {
+      const model = tree.model;
+
+      model['sample-child-1'].data.name =
+        'This is a very long text that should overflow';
+
+      tree.model = { ...model };
+    }, treeViewportHandle);
+
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
 });