fix(core/tooltip): update padding and align icon size with figma

packages/core/src/components/tooltip/tooltip.scss

@@ -26,7 +26,7 @@
   height: fit-content;
   background: var(--theme-tootlip--background);
   color: var(--theme-color-std-text);
-  padding: 0.375rem 0.75rem 0.375rem 0.875rem;
+  padding: 0.375rem 0.75rem;
 
   box-shadow: var(--theme-shadow-4);
   border-radius: 0.25rem;
@@ -38,10 +38,9 @@
 
 .tooltip-title {
   display: flex;
-  align-items: center;
 
   ::slotted(ix-icon) {
-    margin-right: 0.35rem;
+    margin: 0.125rem 0.25rem 0.125rem 0;
   }
 }
 

packages/core/src/components/tooltip/tooltip.tsx

@@ -29,6 +29,7 @@ import {
 import { resolveSelector } from '../utils/find-element';
 import { ElementReference } from 'src/components';
 import { makeRef } from '../utils/make-ref';
+import { getSlottedElements } from '../utils/shadow-dom';
 import { addDisposableEventListenerAsArray } from '../utils/disposable-event-listener';
 
 type ArrowPosition = {
@@ -44,7 +45,7 @@ let tooltipInstance = 0;
 
 /**
  * @slot title-icon - Icon of tooltip title
- * @slot title-content - Content of tooltip title
+ * @slot title-icon - Icon of tooltip title.Icon will be displayed as 16x16px always
  */
 @Component({
   tag: 'ix-tooltip',
@@ -470,6 +471,16 @@ export class Tooltip {
     this.disposeTooltipListener?.();
     this.disposeDomChangeListener?.();
   }
+  private handleTitleIconSlotChange(e: Event) {
+    const slot = e.target as HTMLSlotElement;
+    const elements = getSlottedElements<HTMLElement>(slot);
+
+    elements.forEach((element) => {
+      if (element.tagName.toLowerCase() === 'ix-icon') {
+        (element as HTMLIxIconElement).size = '16';
+      }
+    });
+  }
 
   render() {
     return (
@@ -484,7 +495,10 @@ export class Tooltip {
           <div class="tooltip-container">
             <div class="content-wrapper">
               <div class={'tooltip-title'}>
-                <slot name="title-icon"></slot>
+                <slot
+                  name="title-icon"
+                  onSlotchange={(e) => this.handleTitleIconSlotChange(e)}
+                ></slot>
                 <ix-typography format="h5">
                   {this.titleContent}
                   <slot name="title-content"></slot>

testing/visual-testing/tests/tooltip/tooltip.e2e.ts

@@ -13,6 +13,7 @@ import { regressionTest } from '@utils/test';
 regressionTest.describe('tooltip', () => {
   regressionTest('Long Text long words', async ({ page }) => {
     await page.goto('tooltip/basic');
+    await page.setViewportSize({ height: 200, width: 400 });
 
     const tooltipTriggerHandler = await page.waitForSelector(
       '[data-tooltip="Test1"]'
@@ -22,12 +23,14 @@ regressionTest.describe('tooltip', () => {
     await page.waitForTimeout(500);
 
     expect(await page.screenshot({ fullPage: true })).toMatchSnapshot({
+      threshold: 0.05,
       maxDiffPixelRatio: 0.01,
     });
   });
 
   regressionTest('Short', async ({ page }) => {
     await page.goto('tooltip/basic');
+    await page.setViewportSize({ height: 200, width: 400 });
 
     const tooltipTriggerHandler = await page.waitForSelector(
       '[data-tooltip="Test2"]'
@@ -37,12 +40,14 @@ regressionTest.describe('tooltip', () => {
     await page.waitForTimeout(500);
 
     expect(await page.screenshot({ fullPage: true })).toMatchSnapshot({
+      threshold: 0.05,
       maxDiffPixelRatio: 0.01,
     });
   });
 
   regressionTest('Long text short words', async ({ page }) => {
     await page.goto('tooltip/basic');
+    await page.setViewportSize({ height: 200, width: 450 });
 
     const tooltipTriggerHandler = await page.waitForSelector(
       '[data-tooltip="Test3"]'
@@ -52,12 +57,14 @@ regressionTest.describe('tooltip', () => {
     await page.waitForTimeout(500);
 
     expect(await page.screenshot({ fullPage: true })).toMatchSnapshot({
+      threshold: 0.05,
       maxDiffPixelRatio: 0.01,
     });
   });
 
   regressionTest('fallback placement', async ({ page }) => {
     await page.goto('tooltip/placement-fallback');
+    await page.setViewportSize({ height: 200, width: 450 });
 
     const tooltipTriggerHandler = await page.waitForSelector(
       '[data-tooltip="Test3"]'
@@ -67,6 +74,7 @@ regressionTest.describe('tooltip', () => {
     await page.waitForTimeout(500);
 
     expect(await page.screenshot({ fullPage: true })).toMatchSnapshot({
+      threshold: 0.05,
       maxDiffPixelRatio: 0.01,
     });
   });
@@ -89,7 +97,9 @@ regressionTest.describe('tooltip', () => {
       await tooltipTriggerHandler.hover();
       await page.waitForTimeout(500);
 
-      expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+      expect(await page.screenshot({ fullPage: true })).toMatchSnapshot({
+        threshold: 0.05,
+      });
     }
   });
 
@@ -101,7 +111,9 @@ regressionTest.describe('tooltip', () => {
     await tooltipTriggerHandler.hover();
     await page.waitForTimeout(500);
 
-    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot({
+      threshold: 0.05,
+    });
   });
 
   regressionTest('tooltip position top', async ({ mount, page }) => {
@@ -118,7 +130,9 @@ regressionTest.describe('tooltip', () => {
     await trigger.hover();
     await page.waitForTimeout(500);
 
-    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot({
+      threshold: 0.05,
+    });
   });
 
   regressionTest('tooltip position right', async ({ mount, page }) => {
@@ -135,7 +149,9 @@ regressionTest.describe('tooltip', () => {
     await trigger.hover();
     await page.waitForTimeout(500);
 
-    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot({
+      threshold: 0.05,
+    });
   });
 
   regressionTest('tooltip position bottom', async ({ mount, page }) => {
@@ -152,7 +168,9 @@ regressionTest.describe('tooltip', () => {
     await trigger.hover();
     await page.waitForTimeout(500);
 
-    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot({
+      threshold: 0.05,
+    });
   });
 
   regressionTest('tooltip position left', async ({ mount, page }) => {
@@ -169,7 +187,9 @@ regressionTest.describe('tooltip', () => {
     await trigger.hover();
     await page.waitForTimeout(500);
 
-    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot({
+      threshold: 0.05,
+    });
   });
 
   regressionTest('tooltip inside dropdown', async ({ page }) => {
@@ -180,7 +200,9 @@ regressionTest.describe('tooltip', () => {
 
     await page.locator('#item1').hover();
 
-    await expect(page).toHaveScreenshot();
+    await expect(page).toHaveScreenshot({
+      threshold: 0.05,
+    });
   });
 });
 
@@ -210,7 +232,9 @@ regressionTest.describe('tooltip delay', () => {
 
         await page.waitForTimeout(testDelayToShowTooltip);
 
-        expect(await page.screenshot()).toMatchSnapshot();
+        expect(await page.screenshot()).toMatchSnapshot({
+          threshold: 0.05,
+        });
       }
     );
   });