Skip to content

Commit

Permalink
fix(astro): positioning of inspection tooltip in RTL mode (#11081)
Browse files Browse the repository at this point in the history
* fix: prevent overlay from going out of the view

* test: add test case for positioning

* chore: add changeset entry

---------

Co-authored-by: Erika <[email protected]>
  • Loading branch information
V3RON and Princesseuh authored May 21, 2024
1 parent b5f95b2 commit af42e05
Show file tree
Hide file tree
Showing 4 changed files with 57 additions and 0 deletions.
8 changes: 8 additions & 0 deletions .changeset/young-cooks-switch.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
"astro": patch
---

Correctly position inspection tooltip in RTL mode

When RTL mode is turned on, the inspection tooltip tend to overflow the window on the left side.
Additional check has been added to prevent that.
27 changes: 27 additions & 0 deletions packages/astro/e2e/dev-toolbar.test.js
Original file line number Diff line number Diff line change
Expand Up @@ -100,6 +100,33 @@ test.describe('Dev Toolbar', () => {
await expect(xrayHighlightTooltip).not.toBeVisible();
});

test('xray tooltips don\'t overflow', async ({ page, astro }) => {
await page.goto(astro.resolveUrl('/xray-overlay-positioning'));

const toolbar = page.locator('astro-dev-toolbar');
const appButton = toolbar.locator('button[data-app-id="astro:xray"]');
await appButton.click();

const executeTest = async () => {
const xrayCanvas = toolbar.locator('astro-dev-toolbar-app-canvas[data-app-id="astro:xray"]');
const xrayHighlights = xrayCanvas.locator('astro-dev-toolbar-highlight');
const xrayHighlightsCount = await xrayHighlights.count();

for (let i = 0; i < xrayHighlightsCount; i++) {
const currentHighlight = xrayHighlights.nth(i);
await currentHighlight.hover();
await expect(currentHighlight.locator('astro-dev-toolbar-tooltip')).toBeInViewport({ ratio: 0.9 });
}
}

// LTR
await executeTest();

// RTL
await page.locator('body').evaluate(element => element.dir = 'rtl');
await executeTest();
});

test('xray escapes props content', async ({ page, astro }) => {
let isAlertCalled = false;
page.on('dialog', async (dialog) => {
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
---
import { HelloWorld } from '../components/HelloWorld';
---

<div style="position: absolute; left: 0; top: 0;">
<HelloWorld name={"Left top"} client:load />
</div>

<div style="position: absolute; right: 0; top: 0;">
<HelloWorld name={"Right top"} client:load />
</div>

<div style="position: absolute; left: 0; bottom: 0;">
<HelloWorld name={"Left bottom"} client:load />
</div>

<div style="position: absolute; right: 0; bottom: 0;">
<HelloWorld name={"Right bottom"} client:load />
</div>
Original file line number Diff line number Diff line change
Expand Up @@ -77,6 +77,9 @@ export function attachTooltipToHighlight(
if (dialogRect.right > document.documentElement.clientWidth) {
// Not enough space on the right, align to the right
tooltip.style.right = '0px';
} else if (dialogRect.left < 0) {
// Not enough space on the left, align to the left
tooltip.style.left = '0px';
}
});
});
Expand Down

0 comments on commit af42e05

Please sign in to comment.