fix(dialog): no longer apply transform styling unless dragEnabled or …

…resizable (#10503) **Related Issue:** #10500 ## Summary - no longer apply transform styling unless dragEnabled or resizable - add e2e test
Esri · Oct 11, 2024 · e63054c · e63054c
1 parent 31abf45
commit e63054c
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 4 deletions.
diff --git a/packages/calcite-components/src/components/dialog/dialog.e2e.ts b/packages/calcite-components/src/components/dialog/dialog.e2e.ts
@@ -921,6 +921,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`<calcite-dialog open> test </calcite-dialog>`);
+    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();
@@ -931,19 +942,19 @@ 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})`);
 
       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");
     });
   });
 

diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx
@@ -605,18 +605,26 @@ 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);
     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({