Merge pull request #2165 from Infineon/2148-advanced-table-make-tooltip-component-nestable

tishoyanchev · web-flow · commit 67084dd614a3 · 2026-01-14T15:52:08.000+01:00
Advanced table: make tooltip component nestable
diff --git a/examples/wrapper-components/react-vite-js/package.json b/examples/wrapper-components/react-vite-js/package.json
@@ -18,7 +18,7 @@
     "test:local": "run-p preview:link watch:library"
   },
   "dependencies": {
-    "@infineon/infineon-design-system-react": "39.7.0",
+    "@infineon/infineon-design-system-react": "39.7.1--canary.2165.2a4e1384fcd678fd35f589ade6da9358a2f7389d.0",
     "path": "^0.12.7",
     "react": "^18.3.1",
     "react-dom": "^18.3.1"
diff --git a/examples/wrapper-components/vue-javascript/package.json b/examples/wrapper-components/vue-javascript/package.json
@@ -15,7 +15,7 @@
     "test:local": "run-p preview:link watch:library"
   },
   "dependencies": {
-    "@infineon/infineon-design-system-vue": "39.7.0",
+    "@infineon/infineon-design-system-vue": "39.7.1--canary.2165.2a4e1384fcd678fd35f589ade6da9358a2f7389d.0",
     "@vitejs/plugin-vue": "^4.0.0",
     "@vitejs/plugin-vue-jsx": "^4.0.0",
     "vite": "^5.0.12",
diff --git a/lerna.json b/lerna.json
@@ -1,6 +1,6 @@
 {
   "$schema": "node_modules/lerna/schemas/lerna-schema.json",
-  "version": "39.7.0",
+  "version": "39.7.1--canary.2165.2a4e1384fcd678fd35f589ade6da9358a2f7389d.0",
   "command": {
     "publish": {
       "verifyAccess": false
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "components-angular",
-  "version": "39.7.0",
+  "version": "39.7.1--canary.2165.2a4e1384fcd678fd35f589ade6da9358a2f7389d.0",
   "scripts": {
     "ng": "ng",
     "start": "ng serve",
diff --git a/packages/components-angular/projects/component-library/package.json b/packages/components-angular/projects/component-library/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-angular",
-  "version": "39.7.0",
+  "version": "39.7.1--canary.2165.2a4e1384fcd678fd35f589ade6da9358a2f7389d.0",
   "description": "Infineon design system Stencil web components for Angular",
   "author": "Verena Lechner",
   "license": "MIT",
@@ -11,10 +11,10 @@
     "@angular/common": "^20.0.0",
     "@angular/core": "^20.0.0",
     "@infineon/design-system-tokens": "5.0.0",
-    "@infineon/infineon-design-system-stencil": "39.7.0"
+    "@infineon/infineon-design-system-stencil": "39.7.1--canary.2165.2a4e1384fcd678fd35f589ade6da9358a2f7389d.0"
   },
   "dependencies": {
-    "@infineon/infineon-design-system-stencil": "39.7.0",
+    "@infineon/infineon-design-system-stencil": "39.7.1--canary.2165.2a4e1384fcd678fd35f589ade6da9358a2f7389d.0",
     "tslib": "^2.3.0"
   },
   "sideEffects": false,
diff --git a/packages/components-react/package.json b/packages/components-react/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-react",
-  "version": "39.7.0",
+  "version": "39.7.1--canary.2165.2a4e1384fcd678fd35f589ade6da9358a2f7389d.0",
   "description": "Infineon design system Stencil web components for React",
   "main": "./dist/index.js",
   "types": "./dist/types/index.d.ts",
@@ -29,7 +29,7 @@
   "dependencies": {
     "@infineon/design-system-tokens": "5.0.0",
     "@stencil/react-output-target": "^0.7.1",
-    "@infineon/infineon-design-system-stencil": "39.7.0"
+    "@infineon/infineon-design-system-stencil": "39.7.1--canary.2165.2a4e1384fcd678fd35f589ade6da9358a2f7389d.0"
   },
   "auto": {
     "plugins": [
diff --git a/packages/components-vue/package.json b/packages/components-vue/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-vue",
-  "version": "39.7.0",
+  "version": "39.7.1--canary.2165.2a4e1384fcd678fd35f589ade6da9358a2f7389d.0",
   "description": "Infineon design system Stencil web components for Vue",
   "main": "./dist/index.js",
   "types": "./dist/index.d.ts",
@@ -30,7 +30,7 @@
   },
   "dependencies": {
     "@infineon/design-system-tokens": "5.0.0",
-    "@infineon/infineon-design-system-stencil": "39.7.0"
+    "@infineon/infineon-design-system-stencil": "39.7.1--canary.2165.2a4e1384fcd678fd35f589ade6da9358a2f7389d.0"
   },
   "auto": {
     "plugins": [
diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@infineon/infineon-design-system-stencil",
-  "version": "39.7.0",
+  "version": "39.7.1--canary.2165.2a4e1384fcd678fd35f589ade6da9358a2f7389d.0",
   "private": false,
   "description": "Infineon design system Stencil web components",
   "homepage": "https://infineon.github.io/infineon-design-system-stencil",
diff --git a/packages/components/src/components/table-advanced-version/Development.mdx b/packages/components/src/components/table-advanced-version/Development.mdx
@@ -37,37 +37,6 @@ table.serverPageChangeHandler = async ({ page, pageSize }) => {
 
 ### Including custom components
 
-It is possible to fill table cells with custom Ifx web components.
-Currently, following components can be included:
-* Button
-* Status
-
-For this, column definitions need to include the corresponding field name and be passed in the following format:
-Rows that should display a button, need to have a reference to the button column and include the desired configuration of the button component.
-
-```javascript
-const columnDefsWithButtonCol = [
-  { headerName: 'Model', field: 'model', sortable: true, unSortIcon: true },
-  { headerName: '', field: 'button' }
-  ...
-];
-
-
-const rowDataWithButtonCol = [
-  {
-    make: 'Porsche', model: 'Boxster', price: 72000, button: {
-      disabled: false, (optional)
-      variant: "secondary", (optional)
-      size: "s", (optional)
-      target: "_blank", (optional)
-      color: "secondary", (optional)
-      text: "Button"
-      // ... you can extend this as per the properties of `ifx-button`
-    }
-  }
-];
-```
-
 #### Example: Including a button column
 
 <Canvas of={TableStories.IncludesButtons} sourceState="shown" />
@@ -199,11 +168,24 @@ export default {
 </script>
 ```
 
+<b>Nesting the tooltip component</b> 
+
+For simplicity purposes, the ```variant``` and ```icon``` properties have been removed from the tooltip integration into the table. 
+
+```js 
+  "tooltipInfo": {
+    "value": "Table cell text",
+    "text": "tooltip text",
+    "position": "top"
+  }
+```
+
 #### Currently supported nestable components:
 - ifx-button
 - ifx-status
 - ifx-icon-button
 - ifx-link
+- ifx-tooltip
 
 #### Example: Including inner buttons
 <Canvas of={TableStories.IncludesInnerButtons} sourceState="shown" />
diff --git a/packages/components/src/components/table-advanced-version/interfaces.ts b/packages/components/src/components/table-advanced-version/interfaces.ts
@@ -46,6 +46,12 @@ export interface StatusInterface {
   border?: boolean
 }
 
+export interface TooltipInterface {
+  text?: string,
+  position?: string,
+  value?: string
+}
+
 export const ButtonKeys: Array<keyof ButtonInterface> = 
 ['disabled', 'variant', 'size', 'target', 'href', 'theme', 'type', 'fullWidth', 'text'];
 
@@ -58,4 +64,7 @@ export const StatusKeys: Array<keyof StatusInterface> =
 export const CheckboxKeys: Array<keyof CheckboxInterface> = 
 ['disabled', 'error', 'size', 'checked', 'indeterminate'];
 
+export const TooltipKeys: Array<keyof TooltipInterface> = 
+['text', 'position', 'value'];
+
 
diff --git a/packages/components/src/components/table-advanced-version/table.tsx b/packages/components/src/components/table-advanced-version/table.tsx
@@ -8,6 +8,7 @@ import { ButtonCellRenderer } from './buttonCellRenderer';
 import { CheckboxCellRenderer } from './checkboxCellRenderer';
 import { CheckboxHeaderRenderer } from './checkboxHeaderRenderer';
 import { IconButtonCellRenderer } from './iconButtonCellRenderer';
+import { TooltipCellRenderer } from './tooltipCellRenderer';
 import { LinkCellRenderer } from './linkCellRenderer';
 import { StatusCellRenderer } from './statusCellRenderer';
 import { CustomNoRowsOverlay } from './customNoRowsOverlay';
@@ -893,6 +894,12 @@ export class Table {
         column.valueFormatter = undefined;
         column.cellDataType = false;
       }
+      // --- Tooltip columns ---
+      else if (field.startsWith('tooltip')) {
+        column.cellRenderer = TooltipCellRenderer;
+        column.valueFormatter = undefined;
+        column.cellDataType = false;
+      }
     });
     return cols;
   }
diff --git a/packages/components/src/components/table-advanced-version/tooltipCellRenderer.ts b/packages/components/src/components/table-advanced-version/tooltipCellRenderer.ts
@@ -0,0 +1,77 @@
+import { ICellRendererComp, ICellRendererParams } from 'ag-grid-community'; 
+import { TooltipInterface } from './interfaces';
+
+export class TooltipCellRenderer implements ICellRendererComp {
+  private eGui!: HTMLDivElement;
+  private eTooltip!: HTMLElement;
+
+  init(params: ICellRendererParams): void {
+    this.createTooltip(params);
+  }
+
+  getGui(): HTMLElement {
+    return this.eGui;
+  }
+
+  refresh(params: ICellRendererParams): boolean {
+    this.updateTooltip(params);
+    return true;
+  }
+
+private createTooltip(params: ICellRendererParams) {
+  const field = params.colDef?.field as string | undefined;
+  const config = (params.value ?? params.data?.[field]) as TooltipInterface;
+  
+  this.eGui = document.createElement('div');
+  
+  if (!this.hasRequiredKeys(config)) {
+    this.eGui.textContent = config ? String(config) : '';
+    return;
+  }
+  
+  this.eTooltip = document.createElement('ifx-tooltip') as HTMLElement;
+  
+  this.setTooltipAttributes(config);
+  
+  if (config.value) {
+    if (config.value.includes('<ifx-icon')) {
+      const iconMatch = config.value.match(/icon="([^"]+)"/);
+      if (iconMatch) {
+        const iconEl = document.createElement('ifx-icon');
+        iconEl.setAttribute('icon', iconMatch[1]);
+        this.eTooltip.appendChild(iconEl);
+      }
+    } else {
+      this.eTooltip.textContent = config.value;
+    }
+  }
+  
+  this.eGui.appendChild(this.eTooltip);
+}
+
+  private updateTooltip(params: ICellRendererParams) {
+    const field = params.colDef?.field as string | undefined;
+    const config = (params.value ?? params.data?.[field]) as TooltipInterface;
+
+    if (!this.hasRequiredKeys(config)) {
+      this.eGui.textContent = config ? String(config) : '';
+      return;
+    }
+
+    this.setTooltipAttributes(config);
+    this.eTooltip.textContent = config.value || '';
+  }
+
+  private setTooltipAttributes(config: TooltipInterface) {
+    this.eTooltip.setAttribute('text', config.text);
+    this.eTooltip.setAttribute('append-to-body', 'true');
+
+    if (config.position) {
+      this.eTooltip.setAttribute('position', config.position);
+    }
+  }
+
+  private hasRequiredKeys(config: TooltipInterface): boolean {
+    return !!(config && config.text);
+  }
+}
diff --git a/packages/components/src/components/tooltip/readme.md b/packages/components/src/components/tooltip/readme.md
@@ -7,14 +7,15 @@
 
 ## Properties
 
-| Property    | Attribute    | Description | Type                                                                                                             | Default     |
-| ----------- | ------------ | ----------- | ---------------------------------------------------------------------------------------------------------------- | ----------- |
-| `ariaLabel` | `aria-label` |             | `string`                                                                                                         | `undefined` |
-| `header`    | `header`     |             | `string`                                                                                                         | `''`        |
-| `icon`      | `icon`       |             | `string`                                                                                                         | `undefined` |
-| `position`  | `position`   |             | `"auto" \| "bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "right" \| "top" \| "top-end" \| "top-start"` | `'auto'`    |
-| `text`      | `text`       |             | `string`                                                                                                         | `''`        |
-| `variant`   | `variant`    |             | `"compact" \| "dismissible" \| "extended"`                                                                       | `'compact'` |
+| Property       | Attribute        | Description | Type                                                                                                             | Default     |
+| -------------- | ---------------- | ----------- | ---------------------------------------------------------------------------------------------------------------- | ----------- |
+| `appendToBody` | `append-to-body` |             | `boolean`                                                                                                        | `false`     |
+| `ariaLabel`    | `aria-label`     |             | `string`                                                                                                         | `undefined` |
+| `header`       | `header`         |             | `string`                                                                                                         | `''`        |
+| `icon`         | `icon`           |             | `string`                                                                                                         | `undefined` |
+| `position`     | `position`       |             | `"auto" \| "bottom" \| "bottom-end" \| "bottom-start" \| "left" \| "right" \| "top" \| "top-end" \| "top-start"` | `'auto'`    |
+| `text`         | `text`           |             | `string`                                                                                                         | `''`        |
+| `variant`      | `variant`        |             | `"compact" \| "dismissible" \| "extended"`                                                                       | `'compact'` |
 
 
 ## Dependencies
diff --git a/packages/components/src/components/tooltip/tooltip.scss b/packages/components/src/components/tooltip/tooltip.scss
@@ -10,9 +10,6 @@
   flex-direction: column;
   position: relative;
   font-family: var(--ifx-font-family); // tokens.$ifxFontFamilyBody;
-
-
-
 }
 
 %tooltip-common {
diff --git a/packages/components/src/components/tooltip/tooltip.tsx b/packages/components/src/components/tooltip/tooltip.tsx
diff --git a/packages/components/src/index.html b/packages/components/src/index.html

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"$schema": "node_modules/lerna/schemas/lerna-schema.json",`
`3`		`- "version": "39.7.0",`
	`3`	`+ "version": "39.7.1--canary.2165.2a4e1384fcd678fd35f589ade6da9358a2f7389d.0",`
`4`	`4`	`"command": {`
`5`	`5`	`"publish": {`
`6`	`6`	`"verifyAccess": false`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "components-angular",`
`3`		`- "version": "39.7.0",`
	`3`	`+ "version": "39.7.1--canary.2165.2a4e1384fcd678fd35f589ade6da9358a2f7389d.0",`
`4`	`4`	`"scripts": {`
`5`	`5`	`"ng": "ng",`
`6`	`6`	`"start": "ng serve",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@infineon/infineon-design-system-stencil",`
`3`		`- "version": "39.7.0",`
	`3`	`+ "version": "39.7.1--canary.2165.2a4e1384fcd678fd35f589ade6da9358a2f7389d.0",`
`4`	`4`	`"private": false,`
`5`	`5`	`"description": "Infineon design system Stencil web components",`
`6`	`6`	`"homepage": "https://infineon.github.io/infineon-design-system-stencil",`