From ddfac27f1a4aea231093e29e73030689666fadee Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Tue, 8 Oct 2024 11:17:59 -0700 Subject: [PATCH 1/5] fix(dialog): do not apply transform styling when resizing and dragging are not enabled. #10500 --- .../calcite-components/src/components/dialog/dialog.tsx | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx index 421e18dfe26..7f5472c5068 100644 --- a/packages/calcite-components/src/components/dialog/dialog.tsx +++ b/packages/calcite-components/src/components/dialog/dialog.tsx @@ -609,12 +609,19 @@ export class Dialog dragPosition: { x, y }, resizePosition, transitionEl, + dragEnabled, + resizable, } = this; if (!transitionEl) { return; } + if (!dragEnabled && !resizable) { + transitionEl.style.transform = null; + return; + } + const { top, right, bottom, left } = this.getAdjustedResizePosition(resizePosition); const translateX = Math.round(x + left + right); From d180a6440969bd8d9035d16faa9a88fc2b577087 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Tue, 8 Oct 2024 13:13:43 -0700 Subject: [PATCH 2/5] cleanup --- packages/calcite-components/src/components/dialog/dialog.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx index 7f5472c5068..277568b76ad 100644 --- a/packages/calcite-components/src/components/dialog/dialog.tsx +++ b/packages/calcite-components/src/components/dialog/dialog.tsx @@ -627,7 +627,8 @@ export class Dialog const translateX = Math.round(x + left + right); const translateY = Math.round(y + top + bottom); - transitionEl.style.transform = `translate(${translateX}px, ${translateY}px)`; + transitionEl.style.transform = + translateX || translateY ? `translate(${translateX}px, ${translateY}px)` : null; } private updateSize({ From 1ec14730433bda16bf45b60eacbac37549c6530d Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Tue, 8 Oct 2024 13:22:38 -0700 Subject: [PATCH 3/5] add test --- .../src/components/dialog/dialog.e2e.ts | 11 +++++++++++ 1 file changed, 11 insertions(+) diff --git a/packages/calcite-components/src/components/dialog/dialog.e2e.ts b/packages/calcite-components/src/components/dialog/dialog.e2e.ts index 456eda76160..d12f1cc8d92 100644 --- a/packages/calcite-components/src/components/dialog/dialog.e2e.ts +++ b/packages/calcite-components/src/components/dialog/dialog.e2e.ts @@ -926,6 +926,17 @@ describe("calcite-dialog", () => { expect(await alert.getProperty("embedded")).toBe(true); }); + it("should not set transform when not dragEnabled or resizable", async () => { + const page = await newE2EPage(); + await page.setContent(html` test `); + await skipAnimations(page); + await page.setViewport({ width: 1200, height: 1200 }); + await page.waitForChanges(); + + const container = await page.find(`calcite-dialog >>> .${CSS.dialog}`); + expect((await container.getComputedStyle()).transform).toBe("none"); + }); + describe("keyboard movement", () => { it("should move properly via arrow keys", async () => { const page = await newE2EPage(); From 48d940b1327a203822fa95619ae98ef17d82d9a4 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Tue, 8 Oct 2024 13:43:41 -0700 Subject: [PATCH 4/5] fix test --- packages/calcite-components/src/components/dialog/dialog.e2e.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/calcite-components/src/components/dialog/dialog.e2e.ts b/packages/calcite-components/src/components/dialog/dialog.e2e.ts index d12f1cc8d92..4f806ff443a 100644 --- a/packages/calcite-components/src/components/dialog/dialog.e2e.ts +++ b/packages/calcite-components/src/components/dialog/dialog.e2e.ts @@ -947,7 +947,7 @@ describe("calcite-dialog", () => { await page.setViewport({ width: 1200, height: 1200 }); await page.waitForChanges(); const container = await page.find(`calcite-dialog >>> .${CSS.dialog}`); - expect((await container.getComputedStyle()).transform).toBe("matrix(1, 0, 0, 1, 0, 0)"); + expect((await container.getComputedStyle()).transform).toBe("none"); await dispatchDialogKeydown({ page, key: "ArrowDown", shiftKey: false }); expect((await container.getComputedStyle()).transform).toBe(`matrix(1, 0, 0, 1, 0, ${dialogDragStep})`); From 49f11635fb60306e6caf6410ddf46d03491acc72 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Tue, 8 Oct 2024 13:48:33 -0700 Subject: [PATCH 5/5] fix test --- .../calcite-components/src/components/dialog/dialog.e2e.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/packages/calcite-components/src/components/dialog/dialog.e2e.ts b/packages/calcite-components/src/components/dialog/dialog.e2e.ts index 4f806ff443a..5e8c44b332b 100644 --- a/packages/calcite-components/src/components/dialog/dialog.e2e.ts +++ b/packages/calcite-components/src/components/dialog/dialog.e2e.ts @@ -953,13 +953,13 @@ describe("calcite-dialog", () => { expect((await container.getComputedStyle()).transform).toBe(`matrix(1, 0, 0, 1, 0, ${dialogDragStep})`); await dispatchDialogKeydown({ page, key: "ArrowUp", shiftKey: false }); - expect((await container.getComputedStyle()).transform).toBe("matrix(1, 0, 0, 1, 0, 0)"); + expect((await container.getComputedStyle()).transform).toBe("none"); await dispatchDialogKeydown({ page, key: "ArrowLeft", shiftKey: false }); expect((await container.getComputedStyle()).transform).toBe(`matrix(1, 0, 0, 1, -${dialogDragStep}, 0)`); await dispatchDialogKeydown({ page, key: "ArrowRight", shiftKey: false }); - expect((await container.getComputedStyle()).transform).toBe("matrix(1, 0, 0, 1, 0, 0)"); + expect((await container.getComputedStyle()).transform).toBe("none"); }); });