From 501cce588b44881c934c45cdfa5795ebafcbb644 Mon Sep 17 00:00:00 2001
From: matthiashader <144090716+matthiashader@users.noreply.github.com>
Date: Wed, 11 Sep 2024 10:26:17 +0200
Subject: [PATCH] fix(core/tooltip): cutoff near viewport edges (#1462)
---
.changeset/fast-tips-jam.md | 5 ++
.../src/preview-examples/modal-sizes.html | 23 +++++-
packages/core/package.json | 2 +-
.../core/src/components/tooltip/tooltip.scss | 9 +--
.../core/src/components/tooltip/tooltip.tsx | 11 +++
.../tooltip/placement-on-edge/index.html | 67 ++++++++++++++++++
.../core/src/tests/tooltip/tooltip.e2e.ts | 22 ++++++
...-1-chromium---theme-classic-dark-linux.png | Bin 0 -> 19513 bytes
...1-chromium---theme-classic-light-linux.png | Bin 0 -> 20694 bytes
...-2-chromium---theme-classic-dark-linux.png | Bin 0 -> 18775 bytes
...2-chromium---theme-classic-light-linux.png | Bin 0 -> 19990 bytes
...-3-chromium---theme-classic-dark-linux.png | Bin 0 -> 19248 bytes
...3-chromium---theme-classic-light-linux.png | Bin 0 -> 20398 bytes
...-4-chromium---theme-classic-dark-linux.png | Bin 0 -> 19742 bytes
...4-chromium---theme-classic-light-linux.png | Bin 0 -> 20338 bytes
pnpm-lock.yaml | 28 ++++----
16 files changed, 145 insertions(+), 22 deletions(-)
create mode 100644 .changeset/fast-tips-jam.md
create mode 100644 packages/core/src/tests/tooltip/placement-on-edge/index.html
create mode 100644 packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-placement-near-viewport-edge-1-chromium---theme-classic-dark-linux.png
create mode 100644 packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-placement-near-viewport-edge-1-chromium---theme-classic-light-linux.png
create mode 100644 packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-placement-near-viewport-edge-2-chromium---theme-classic-dark-linux.png
create mode 100644 packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-placement-near-viewport-edge-2-chromium---theme-classic-light-linux.png
create mode 100644 packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-placement-near-viewport-edge-3-chromium---theme-classic-dark-linux.png
create mode 100644 packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-placement-near-viewport-edge-3-chromium---theme-classic-light-linux.png
create mode 100644 packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-placement-near-viewport-edge-4-chromium---theme-classic-dark-linux.png
create mode 100644 packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-placement-near-viewport-edge-4-chromium---theme-classic-light-linux.png
diff --git a/.changeset/fast-tips-jam.md b/.changeset/fast-tips-jam.md
new file mode 100644
index 00000000000..2a7d81952fa
--- /dev/null
+++ b/.changeset/fast-tips-jam.md
@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+fix(core/tooltip): cutoff near viewport edges
diff --git a/packages/angular-test-app/src/preview-examples/modal-sizes.html b/packages/angular-test-app/src/preview-examples/modal-sizes.html
index df81f7178fc..3abc47c0c78 100644
--- a/packages/angular-test-app/src/preview-examples/modal-sizes.html
+++ b/packages/angular-test-app/src/preview-examples/modal-sizes.html
@@ -20,7 +20,24 @@
- Modal with size {{ modal.data }}
+
+
+
+ Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+ eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+ voluptuad. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+ clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+ amet.
+
+
+
+
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
+ eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
+ voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
+ clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
+ amet.
+
+
diff --git a/packages/core/package.json b/packages/core/package.json
index f7a6870d6f2..9009f934629 100644
--- a/packages/core/package.json
+++ b/packages/core/package.json
@@ -44,7 +44,7 @@
"pkg": "pnpm pack"
},
"dependencies": {
- "@floating-ui/dom": "^1.5.1",
+ "@floating-ui/dom": "^1.6.10",
"@stencil/core": "~4.17.0",
"@types/luxon": "^3.3.7",
"animejs": "~3.2.1",
diff --git a/packages/core/src/components/tooltip/tooltip.scss b/packages/core/src/components/tooltip/tooltip.scss
index cb78b49a6ab..67be12a7f1c 100644
--- a/packages/core/src/components/tooltip/tooltip.scss
+++ b/packages/core/src/components/tooltip/tooltip.scss
@@ -1,11 +1,12 @@
:host {
display: inline-block;
position: fixed;
- left: 0px;
- top: 0px;
+ left: 0;
+ top: 0;
z-index: var(--theme-z-index-tooltip);
max-width: 18.25rem;
+ width: max-content;
opacity: 0;
visibility: collapse !important;
@@ -25,14 +26,14 @@
.tooltip-container {
display: block;
position: relative;
- width: auto;
+ 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);
-
+ border-radius: inherit;
}
}
diff --git a/packages/core/src/components/tooltip/tooltip.tsx b/packages/core/src/components/tooltip/tooltip.tsx
index 277c7a9dbd3..6e59ee5849b 100644
--- a/packages/core/src/components/tooltip/tooltip.tsx
+++ b/packages/core/src/components/tooltip/tooltip.tsx
@@ -135,9 +135,16 @@ export class Tooltip implements IxOverlayComponent {
middlewareData,
}: ComputePositionReturn): ArrowPosition {
let { x, y } = middlewareData.arrow;
+ const resetPosition = {
+ top: 'unset',
+ right: 'unset',
+ bottom: 'unset',
+ left: 'unset',
+ };
if (placement.startsWith('top')) {
return {
+ ...resetPosition,
left: numberToPixel(x),
top: numberToPixel(y),
};
@@ -145,6 +152,7 @@ export class Tooltip implements IxOverlayComponent {
if (placement.startsWith('right')) {
return {
+ ...resetPosition,
left: numberToPixel(-6),
top: numberToPixel(y),
};
@@ -152,6 +160,7 @@ export class Tooltip implements IxOverlayComponent {
if (placement.startsWith('bottom')) {
return {
+ ...resetPosition,
left: numberToPixel(x),
top: numberToPixel(-6),
};
@@ -159,6 +168,7 @@ export class Tooltip implements IxOverlayComponent {
if (placement.startsWith('left')) {
return {
+ ...resetPosition,
right: numberToPixel(-6),
top: numberToPixel(y),
};
@@ -177,6 +187,7 @@ export class Tooltip implements IxOverlayComponent {
}),
flip({
fallbackStrategy: 'initialPlacement',
+ fallbackAxisSideDirection: 'end',
padding: 10,
}),
hide(),
diff --git a/packages/core/src/tests/tooltip/placement-on-edge/index.html b/packages/core/src/tests/tooltip/placement-on-edge/index.html
new file mode 100644
index 00000000000..3b4c4824ed8
--- /dev/null
+++ b/packages/core/src/tests/tooltip/placement-on-edge/index.html
@@ -0,0 +1,67 @@
+
+
+
+
+
+
+ Stencil Component Starter
+
+
+
+
+
+
+ Tooltip-position-initial-top
+
+
+ Some example content
+
+
+
+
+
+ Tooltip-position-initial-left
+
+
+ Some example content
+
+
+
+
+
+ Tooltip-position-bottom
+
+
+ Some example content
+
+
+
+
+
+ Tooltip-position-initial-right
+
+
+ Some example content
+
+
+
+
+
+
+
diff --git a/packages/core/src/tests/tooltip/tooltip.e2e.ts b/packages/core/src/tests/tooltip/tooltip.e2e.ts
index c2e68acef75..f79b5f16d8c 100644
--- a/packages/core/src/tests/tooltip/tooltip.e2e.ts
+++ b/packages/core/src/tests/tooltip/tooltip.e2e.ts
@@ -71,6 +71,28 @@ regressionTest.describe('tooltip', () => {
});
});
+ regressionTest('placement near viewport edge', async ({ page }) => {
+ await page.goto('tooltip/placement-on-edge');
+
+ const tooltips = [
+ 'myTooltip-left',
+ 'myTooltip-right',
+ 'myTooltip-top',
+ 'myTooltip-bottom',
+ ];
+
+ for (const tooltip of tooltips) {
+ const tooltipTriggerHandler = await page.waitForSelector(
+ `[data-tooltip="${tooltip}"]`
+ );
+
+ await tooltipTriggerHandler.hover();
+ await page.waitForTimeout(500);
+
+ expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+ }
+ });
+
regressionTest('global style not bleeding into tooltip', async ({ page }) => {
await page.goto('tooltip/overlapping-styles');
diff --git a/packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-placement-near-viewport-edge-1-chromium---theme-classic-dark-linux.png b/packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-placement-near-viewport-edge-1-chromium---theme-classic-dark-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..817ba00e3eabed606f6a7ffafcdc644e9b5ed059
GIT binary patch
literal 19513
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
Py^d#H|E&4r*2Dh;9SMYS
literal 0
HcmV?d00001
diff --git a/packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-placement-near-viewport-edge-1-chromium---theme-classic-light-linux.png b/packages/core/src/tests/tooltip/tooltip.e2e.ts-snapshots/tooltip-placement-near-viewport-edge-1-chromium---theme-classic-light-linux.png
new file mode 100644
index 0000000000000000000000000000000000000000..7488314efd2fc9fb4ec8d3a15ab6a46ae240f2e2
GIT binary patch
literal 20694
zcmeJFcUY5W`v;6iZMCg~r}c4wK&qmsECm6XX-kz-MpOi324zHMlrRigT3cyVK-oJg
z0zw!vLl_BGWs@i?gaiTt2@sM%LI@!td2hbo=Q)nwas2*zkN2N