From bb1438d20d325acd15f3755c6e306e45a7c64bcd Mon Sep 17 00:00:00 2001 From: Martijn van der Ven Date: Mon, 25 Dec 2023 17:18:42 +0100 Subject: [PATCH 1/3] Add autocomplete to button JSX type (#9522) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * Add autocomplete to button JSX type This is “nonstandard and Firefox-specific” but often required when working with dynamic disabled state. https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button#autocomplete * Run `pnpm exec changeset` --- .changeset/beige-zebras-ring.md | 5 +++++ packages/astro/astro-jsx.d.ts | 1 + 2 files changed, 6 insertions(+) create mode 100644 .changeset/beige-zebras-ring.md diff --git a/.changeset/beige-zebras-ring.md b/.changeset/beige-zebras-ring.md new file mode 100644 index 000000000000..f81f6aa6fcfe --- /dev/null +++ b/.changeset/beige-zebras-ring.md @@ -0,0 +1,5 @@ +--- +'astro': patch +--- + +Add support for autocomplete attribute to the HTML button type. diff --git a/packages/astro/astro-jsx.d.ts b/packages/astro/astro-jsx.d.ts index 46202644a6a5..fd4632eaedc1 100644 --- a/packages/astro/astro-jsx.d.ts +++ b/packages/astro/astro-jsx.d.ts @@ -627,6 +627,7 @@ declare namespace astroHTML.JSX { } interface ButtonHTMLAttributes extends HTMLAttributes { + autocomplete?: string | undefined | null; disabled?: boolean | string | undefined | null; form?: string | undefined | null; formaction?: string | undefined | null; From 1469e0e5a915e6b42b9953dbb48fe57a74518056 Mon Sep 17 00:00:00 2001 From: Ming-jun Lu <40516784+mingjunlu@users.noreply.github.com> Date: Wed, 27 Dec 2023 01:01:04 +0800 Subject: [PATCH 2/3] Prevent dev toolbar tooltip from overflowing (#9512) * fix: prevent dev toolbar toolip from overflowing * test: add a test case for dev toolbar toolip position * Create small-emus-deny.md --------- Co-authored-by: Bjorn Lu --- .changeset/small-emus-deny.md | 5 ++++ packages/astro/e2e/dev-overlay.test.js | 26 +++++++++++++++++++ .../src/pages/tooltip-position.astro | 21 +++++++++++++++ .../dev-overlay/plugins/utils/highlight.ts | 6 ++++- 4 files changed, 57 insertions(+), 1 deletion(-) create mode 100644 .changeset/small-emus-deny.md create mode 100644 packages/astro/e2e/fixtures/dev-overlay/src/pages/tooltip-position.astro diff --git a/.changeset/small-emus-deny.md b/.changeset/small-emus-deny.md new file mode 100644 index 000000000000..4926c0655c81 --- /dev/null +++ b/.changeset/small-emus-deny.md @@ -0,0 +1,5 @@ +--- +"astro": patch +--- + +Prevents dev toolbar tooltip from overflowing outside of the screen diff --git a/packages/astro/e2e/dev-overlay.test.js b/packages/astro/e2e/dev-overlay.test.js index b61a3e10e756..0a0fca6dd4ce 100644 --- a/packages/astro/e2e/dev-overlay.test.js +++ b/packages/astro/e2e/dev-overlay.test.js @@ -139,6 +139,32 @@ test.describe('Dev Overlay', () => { await expect(auditWindow.locator('astro-dev-toolbar-icon[icon=check-circle]')).toBeVisible(); }); + test('adjusts tooltip position if off-screen', async ({ page, astro }) => { + await page.goto(astro.resolveUrl('/tooltip-position')); + + const overlay = page.locator('astro-dev-toolbar'); + const pluginButton = overlay.locator('button[data-plugin-id="astro:audit"]'); + await pluginButton.click(); + + const auditCanvas = overlay.locator( + 'astro-dev-toolbar-plugin-canvas[data-plugin-id="astro:audit"]' + ); + const auditHighlights = auditCanvas.locator('astro-dev-toolbar-highlight'); + for (const highlight of await auditHighlights.all()) { + await expect(highlight).toBeVisible(); + await highlight.hover(); + const tooltip = highlight.locator('astro-dev-toolbar-tooltip'); + await expect(tooltip).toBeVisible(); + const tooltipBox = await tooltip.boundingBox(); + const { clientWidth, clientHeight } = await page.evaluate(() => ({ + clientWidth: document.documentElement.clientWidth, + clientHeight: document.documentElement.clientHeight, + })); + expect(tooltipBox.x + tooltipBox.width).toBeLessThan(clientWidth); + expect(tooltipBox.y + tooltipBox.height).toBeLessThan(clientHeight); + } + }); + test('can open Settings plugin', async ({ page, astro }) => { await page.goto(astro.resolveUrl('/')); diff --git a/packages/astro/e2e/fixtures/dev-overlay/src/pages/tooltip-position.astro b/packages/astro/e2e/fixtures/dev-overlay/src/pages/tooltip-position.astro new file mode 100644 index 000000000000..a11ff40405ec --- /dev/null +++ b/packages/astro/e2e/fixtures/dev-overlay/src/pages/tooltip-position.astro @@ -0,0 +1,21 @@ +--- + +--- + +
+ + + + +
+ + diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts index 6ad37aad2af2..f7defec1f2e9 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts @@ -57,13 +57,17 @@ export function attachTooltipToHighlight( const originalRect = originalElement.getBoundingClientRect(); const dialogRect = tooltip.getBoundingClientRect(); - // If the tooltip is going to be off the screen, show it above the element instead + // Prevent the tooltip from being off the screen if (originalRect.top < dialogRect.height) { // Not enough space above, show below tooltip.style.top = `${originalRect.height + 15}px`; } else { tooltip.style.top = `-${tooltip.offsetHeight}px`; } + if (dialogRect.right > document.documentElement.clientWidth) { + // Not enough space on the right, align to the right + tooltip.style.right = '0px'; + } }); }); From 0ee255ae36969361d87fcd424d83fd9aa7b34b7a Mon Sep 17 00:00:00 2001 From: Ming-jun Lu Date: Tue, 26 Dec 2023 17:02:03 +0000 Subject: [PATCH 3/3] [ci] format --- .../src/runtime/client/dev-overlay/plugins/utils/highlight.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts b/packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts index f7defec1f2e9..726905b71d4b 100644 --- a/packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts +++ b/packages/astro/src/runtime/client/dev-overlay/plugins/utils/highlight.ts @@ -66,8 +66,8 @@ export function attachTooltipToHighlight( } if (dialogRect.right > document.documentElement.clientWidth) { // Not enough space on the right, align to the right - tooltip.style.right = '0px'; - } + tooltip.style.right = '0px'; + } }); });