feat(core/chip|pill): add property to display ix-tooltip with customi…

…zable text (#1697) Co-authored-by: Lukas Maurer <lukas.maurer@siemens.com> Co-authored-by: matthiashader <144090716+matthiashader@users.noreply.github.com> Co-authored-by: Julian Lamplmair <151610373+jul-lam@users.noreply.github.com>
siemens · Feb 25, 2025 · 9e13a08 · 9e13a08
1 parent c868242
commit 9e13a08
Show file tree

Hide file tree

Showing 20 changed files with 366 additions and 69 deletions.
diff --git a/.changeset/curvy-meals-deliver.md b/.changeset/curvy-meals-deliver.md
@@ -0,0 +1,7 @@
+---
+'@siemens/ix-angular': minor
+'@siemens/ix': minor
+'@siemens/ix-vue': minor
+---
+
+`ix-chip` and `ix-pill`: Add property `tooltip-text` to display an `ix-tooltip` with customizable text.
diff --git a/packages/angular-test-app/src/preview-examples/chip.ts b/packages/angular-test-app/src/preview-examples/chip.ts
@@ -13,12 +13,16 @@ import { Component } from '@angular/core';
   selector: 'app-example',
   template: `
     <div class="chip">
-      <ix-chip closable outline> Primary </ix-chip>
-      <ix-chip icon="print">Primary with icon</ix-chip>
-      <ix-chip icon="print" style="width: 10rem" closable> Primary </ix-chip>
+      <ix-chip closable outline>Primary</ix-chip>
+      <ix-chip icon="print" tooltip-text="Custom tooltip text">
+        Primary with icon
+      </ix-chip>
+      <ix-chip icon="print" tooltip-text style="width: 10rem" closable>
+        Primary
+      </ix-chip>
 
-      <ix-chip variant="critical" closable outline> Alarm </ix-chip>
-      <ix-chip variant="alarm" icon="print"> Alarm with icon </ix-chip>
+      <ix-chip variant="critical" closable outline>Alarm</ix-chip>
+      <ix-chip variant="alarm" icon="print">Alarm with icon</ix-chip>
       <ix-chip variant="alarm" icon="print" style="width: 10rem" closable>
         Alarm
       </ix-chip>

diff --git a/packages/angular-test-app/src/preview-examples/pill.html b/packages/angular-test-app/src/preview-examples/pill.html
@@ -6,10 +6,10 @@
 This source code is licensed under the MIT license found in the
 LICENSE file in the root directory of this source tree.
 -->
-<ix-pill variant="custom" color="white" background="purple"> Label </ix-pill>
+<ix-pill variant="custom" color="white" background="purple">Label</ix-pill>
 
-<ix-pill>Label</ix-pill>
-<ix-pill outline>Label</ix-pill>
+<ix-pill tooltip-text="Custom tooltip text">Label</ix-pill>
+<ix-pill tooltip-text outline>Label</ix-pill>
 <ix-pill class="styled">Label</ix-pill>
 
 <ix-pill icon="star">Label</ix-pill>

diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts
@@ -451,14 +451,14 @@ export declare interface IxCheckboxGroup extends Components.IxCheckboxGroup {}
 
 
 @ProxyCmp({
-  inputs: ['active', 'background', 'chipColor', 'closable', 'color', 'icon', 'outline', 'variant']
+  inputs: ['active', 'background', 'chipColor', 'closable', 'color', 'icon', 'outline', 'tooltipText', 'variant']
 })
 @Component({
   selector: 'ix-chip',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['active', 'background', 'chipColor', 'closable', 'color', 'icon', 'outline', 'variant'],
+  inputs: ['active', 'background', 'chipColor', 'closable', 'color', 'icon', 'outline', 'tooltipText', 'variant'],
 })
 export class IxChip {
   protected el: HTMLElement;
@@ -2087,14 +2087,14 @@ export declare interface IxPaneLayout extends Components.IxPaneLayout {}
 
 
 @ProxyCmp({
-  inputs: ['alignLeft', 'background', 'color', 'icon', 'outline', 'pillColor', 'variant']
+  inputs: ['alignLeft', 'background', 'color', 'icon', 'outline', 'pillColor', 'tooltipText', 'variant']
 })
 @Component({
   selector: 'ix-pill',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['alignLeft', 'background', 'color', 'icon', 'outline', 'pillColor', 'variant'],
+  inputs: ['alignLeft', 'background', 'color', 'icon', 'outline', 'pillColor', 'tooltipText', 'variant'],
 })
 export class IxPill {
   protected el: HTMLElement;

diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -3122,14 +3122,19 @@
       "encapsulation": "shadow",
       "dependents": [],
       "dependencies": [
-        "ix-icon-button"
+        "ix-icon-button",
+        "ix-tooltip"
       ],
       "dependencyGraph": {
         "ix-chip": [
-          "ix-icon-button"
+          "ix-icon-button",
+          "ix-tooltip"
         ],
         "ix-icon-button": [
           "ix-spinner"
+        ],
+        "ix-tooltip": [
+          "ix-typography"
         ]
       },
       "props": [
@@ -3301,6 +3306,36 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "tooltipText",
+          "type": "boolean | string",
+          "complexType": {
+            "original": "string | boolean",
+            "resolved": "boolean | string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "tooltip-text",
+          "reflectToAttr": false,
+          "docs": "Display a tooltip. By default, no tooltip will be displayed.\nAdd the attribute to display the text content of the component as a tooltip or use a string to display a custom text.",
+          "docsTags": [
+            {
+              "name": "since",
+              "text": "3.0.0"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            },
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "variant",
           "type": "\"alarm\" | \"critical\" | \"custom\" | \"info\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"",
@@ -16015,8 +16050,17 @@
       "docsTags": [],
       "encapsulation": "shadow",
       "dependents": [],
-      "dependencies": [],
-      "dependencyGraph": {},
+      "dependencies": [
+        "ix-tooltip"
+      ],
+      "dependencyGraph": {
+        "ix-pill": [
+          "ix-tooltip"
+        ],
+        "ix-tooltip": [
+          "ix-typography"
+        ]
+      },
       "props": [
         {
           "name": "alignLeft",
@@ -16164,6 +16208,36 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "tooltipText",
+          "type": "boolean | string",
+          "complexType": {
+            "original": "string | boolean",
+            "resolved": "boolean | string",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "tooltip-text",
+          "reflectToAttr": false,
+          "docs": "Display a tooltip. By default, no tooltip will be displayed.\nAdd the attribute to display the text content of the component as a tooltip or use a string to display a custom text.",
+          "docsTags": [
+            {
+              "name": "since",
+              "text": "3.0.0"
+            }
+          ],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            },
+            {
+              "type": "string"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "variant",
           "type": "\"alarm\" | \"critical\" | \"custom\" | \"info\" | \"neutral\" | \"primary\" | \"success\" | \"warning\"",
@@ -21270,8 +21344,10 @@
       ],
       "encapsulation": "shadow",
       "dependents": [
+        "ix-chip",
         "ix-field-wrapper",
         "ix-menu-item",
+        "ix-pill",
         "ix-slider"
       ],
       "dependencies": [
@@ -21281,12 +21357,18 @@
         "ix-tooltip": [
           "ix-typography"
         ],
+        "ix-chip": [
+          "ix-tooltip"
+        ],
         "ix-field-wrapper": [
           "ix-tooltip"
         ],
         "ix-menu-item": [
           "ix-tooltip"
         ],
+        "ix-pill": [
+          "ix-tooltip"
+        ],
         "ix-slider": [
           "ix-tooltip"
         ]

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -542,6 +542,11 @@ export namespace Components {
           * Show chip with outline style
          */
         "outline": boolean;
+        /**
+          * Display a tooltip. By default, no tooltip will be displayed. Add the attribute to display the text content of the component as a tooltip or use a string to display a custom text.
+          * @since 3.0.0
+         */
+        "tooltipText": string | boolean;
         /**
           * Chip variant
          */
@@ -2348,6 +2353,11 @@ export namespace Components {
           * Custom font color for pill. Only working for `variant='custom'`
          */
         "pillColor": string | undefined;
+        /**
+          * Display a tooltip. By default, no tooltip will be displayed. Add the attribute to display the text content of the component as a tooltip or use a string to display a custom text.
+          * @since 3.0.0
+         */
+        "tooltipText": string | boolean;
         /**
           * Pill variant
          */
@@ -5691,6 +5701,11 @@ declare namespace LocalJSX {
           * Show chip with outline style
          */
         "outline"?: boolean;
+        /**
+          * Display a tooltip. By default, no tooltip will be displayed. Add the attribute to display the text content of the component as a tooltip or use a string to display a custom text.
+          * @since 3.0.0
+         */
+        "tooltipText"?: string | boolean;
         /**
           * Chip variant
          */
@@ -7634,6 +7649,11 @@ declare namespace LocalJSX {
           * Custom font color for pill. Only working for `variant='custom'`
          */
         "pillColor"?: string | undefined;
+        /**
+          * Display a tooltip. By default, no tooltip will be displayed. Add the attribute to display the text content of the component as a tooltip or use a string to display a custom text.
+          * @since 3.0.0
+         */
+        "tooltipText"?: string | boolean;
         /**
           * Pill variant
          */

diff --git a/packages/core/src/components/chip/chip.tsx b/packages/core/src/components/chip/chip.tsx
@@ -16,6 +16,7 @@ import {
   Host,
   Prop,
 } from '@stencil/core';
+import { makeRef } from '../utils/make-ref';
 
 @Component({
   tag: 'ix-chip',
@@ -80,13 +81,22 @@ export class Chip {
    */
   @Prop() outline = false;
 
+  /**
+   * Display a tooltip. By default, no tooltip will be displayed.
+   * Add the attribute to display the text content of the component as a tooltip or use a string to display a custom text.
+   * @since 3.0.0
+   */
+  @Prop() tooltipText: string | boolean = false;
+
   /**
    * Fire event if close button is clicked
    *
    * @since 1.5.0
    */
   @Event() closeChip!: EventEmitter;
 
+  private readonly containerElementRef = makeRef<HTMLElement>();
+
   private getCloseButton() {
     return (
       <div class="close-button-container">
@@ -112,6 +122,23 @@ export class Chip {
     );
   }
 
+  private getTooltip() {
+    if (!this.tooltipText && !this.hostElement.hasAttribute('tooltip-text')) {
+      return null;
+    }
+
+    const text =
+      typeof this.tooltipText === 'string' && this.tooltipText.trim()
+        ? this.tooltipText
+        : this.hostElement.textContent?.trim();
+
+    return (
+      <ix-tooltip for={this.containerElementRef.waitForCurrent()}>
+        {text}
+      </ix-tooltip>
+    );
+  }
+
   render() {
     const isInactive = this.active === false;
 
@@ -127,7 +154,6 @@ export class Chip {
     return (
       <Host
         tabIndex="-1"
-        title={this.hostElement.textContent}
         class={{
           inactive: isInactive,
         }}
@@ -140,6 +166,7 @@ export class Chip {
         }
       >
         <div
+          ref={this.containerElementRef}
           style={{ ...customStyle }}
           class={{
             container: true,
@@ -170,6 +197,7 @@ export class Chip {
           </span>
           {isInactive === false && this.closable ? this.getCloseButton() : null}
         </div>
+        {this.getTooltip()}
       </Host>
     );
   }