Merge branch 'main' into fix/1640-select

siemens · Sep 5, 2024 · 068bcfe · 068bcfe
2 parents 0ff0ac3 + f2622bd
commit 068bcfe
Show file tree

Hide file tree

Showing 8 changed files with 88 additions and 14 deletions.
diff --git a/.changeset/green-carrots-drum.md b/.changeset/green-carrots-drum.md
@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+fix(core/tooltip): styles bleeding in
diff --git a/.github/workflows/issue-needs-repo.yml b/.github/workflows/issue-needs-repo.yml
@@ -0,0 +1,22 @@
+name: needs reproduction labeling
+
+on:
+  issues:
+    types: [labeled]
+
+jobs:
+  comment-issue:
+    if: ${{ github.repository == 'siemens/ix' }}
+    runs-on: ubuntu-latest
+    steps:
+      - name: Needs reproduction comment created
+        if: "contains(github.event.label.name, 'needs reproduction')"
+        uses: actions-cool/issues-helper@v3
+        with:
+          actions: 'create-comment'
+          token: ${{ secrets.GITHUB_TOKEN }}
+          body: |
+            Thank you for creating this issue! It has been labeled as `needs reproduction`.
+
+            To help us assist you better, could you please provide a way for us to access the code (such as a GitHub repository or a StackBlitz link). Without a reliable code reproduction, it might be challenging for us to resolve the issue, and we may have to close it.
+            Thank you for your understanding!
diff --git a/packages/core/src/components/tooltip/tooltip.scss b/packages/core/src/components/tooltip/tooltip.scss
@@ -12,10 +12,6 @@
   overflow-wrap: break-word;
 
   border-radius: 0.25rem;
-  background-color: var(--theme-tootlip--background);
-  padding: 0.375rem 0.75rem 0.375rem 0.875rem;
-
-  box-shadow: var(--theme-shadow-4);
 
   .tooltip-title {
     display: flex;
@@ -25,6 +21,19 @@
       margin-right: 0.35rem;
     }
   }
+
+  .tooltip-container {
+    display: block;
+    position: relative;
+    width: auto;
+    height: 100%;
+    background: var(--theme-tootlip--background);
+    color: var(--theme-color-std-text);
+    padding: 0.375rem 0.75rem 0.375rem 0.875rem;
+
+    box-shadow: var(--theme-shadow-4);
+
+  }
 }
 
 :host(.visible) {

diff --git a/packages/core/src/components/tooltip/tooltip.tsx b/packages/core/src/components/tooltip/tooltip.tsx
@@ -366,17 +366,19 @@ export class Tooltip implements IxOverlayComponent {
         }}
         role="tooltip"
       >
-        <div class={'tooltip-title'}>
-          <slot name="title-icon"></slot>
-          <ix-typography variant="default-title">
-            {this.titleContent}
-            <slot name="title-content"></slot>
-          </ix-typography>
+        <div class="tooltip-container">
+          <div class={'tooltip-title'}>
+            <slot name="title-icon"></slot>
+            <ix-typography variant="default-title">
+              {this.titleContent}
+              <slot name="title-content"></slot>
+            </ix-typography>
+          </div>
+          <div class={'tooltip-content'}>
+            <slot></slot>
+          </div>
+          <div class="arrow"></div>
         </div>
-        <div class={'tooltip-content'}>
-          <slot></slot>
-        </div>
-        <div class="arrow"></div>
       </Host>
     );
   }

diff --git a/packages/core/src/tests/tooltip/overlapping-styles/index.html b/packages/core/src/tests/tooltip/overlapping-styles/index.html
@@ -0,0 +1,25 @@
+
+
+<!--
+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 style="padding: 12rem">
+    <button id="test">Test</button>
+    <ix-tooltip for="#test" style="background-color: red; width: 25rem; height: 25rem">My tooltip</ix-tooltip>
+
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>
+
diff --git a/packages/core/src/tests/tooltip/tooltip.e2e.ts b/packages/core/src/tests/tooltip/tooltip.e2e.ts
@@ -71,6 +71,17 @@ regressionTest.describe('tooltip', () => {
     });
   });
 
+  regressionTest('global style not bleeding into tooltip', async ({ page }) => {
+    await page.goto('tooltip/overlapping-styles');
+
+    const tooltipTriggerHandler = await page.waitForSelector('#test');
+
+    await tooltipTriggerHandler.hover();
+    await page.waitForTimeout(500);
+
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
+
   test('tooltip position top', async ({ mount, page }) => {
     await mount(`
       <div style="padding: 10rem">

diff --git a/...lobal-style-not-bleeding-into-tooltip-1-chromium---theme-classic-dark-linux.png b/...lobal-style-not-bleeding-into-tooltip-1-chromium---theme-classic-dark-linux.png
diff --git a/...obal-style-not-bleeding-into-tooltip-1-chromium---theme-classic-light-linux.png b/...obal-style-not-bleeding-into-tooltip-1-chromium---theme-classic-light-linux.png