Infrastructure/astro
0
Fork 0
mirror of https://github.com/withastro/astro.git synced 2025-03-31 23:31:30 -05:00
Code Issues Activity

fix(astro): positioning of inspection tooltip in RTL mode (#11081)

Browse source 
* fix: prevent overlay from going out of the view

* test: add test case for positioning

* chore: add changeset entry

---------

Co-authored-by: Erika <3019731+Princesseuh@users.noreply.github.com>
This commit is contained in:
Szymon Chmal 2024-05-21 13:27:06 +02:00 • committed by GitHub
parent b5f95b2fb1
commit af42e05520
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 57 additions and 0 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

8
.changeset/young-cooks-switch.md Normal file
View file

@ -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
packages/astro/e2e/dev-toolbar.test.js
View file

@ -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) => {

19
packages/astro/e2e/fixtures/dev-toolbar/src/pages/xray-overlay-positioning.astro Normal file
View file

@ -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>

3
packages/astro/src/runtime/client/dev-toolbar/apps/utils/highlight.ts
View file

@ -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';
}
});
});