diff --git a/packages/calcite-components/src/components/dialog/dialog.e2e.ts b/packages/calcite-components/src/components/dialog/dialog.e2e.ts index 1f1d5858a7d..541ac7c0994 100644 --- a/packages/calcite-components/src/components/dialog/dialog.e2e.ts +++ b/packages/calcite-components/src/components/dialog/dialog.e2e.ts @@ -1104,6 +1104,52 @@ describe("calcite-dialog", () => { expect(computedStyle.blockSize).toBe(`${initialHeight}px`); expect(computedStyle.inlineSize).toBe(`${initialWidth}px`); }); + + it("should honor minBlockSize and minInlineSize when resizing", async () => { + const page = await newE2EPage(); + await page.setContent( + html`

+ Lorem ipsum odor amet, consectetur adipiscing elit. Egestas magnis porta tristique magnis justo tincidunt. + Lacinia et euismod massa aliquam venenatis sem arcu tellus. Sociosqu ultrices hac sociosqu euismod euismod + eros ante. Sagittis vehicula lobortis morbi habitant dignissim quis per! Parturient a penatibus himenaeos ut + ultrices; lacinia inceptos a. Volutpat nibh ad massa primis nascetur cras tristique ultrices lacus. Arcu + fermentum tellus quis ad facilisis ultrices eros imperdiet. +

`, + ); + await skipAnimations(page); + await page.setViewport({ width: 1200, height: 1200 }); + await page.waitForChanges(); + const container = await page.find(`calcite-dialog >>> .${CSS.dialog}`); + + let computedStyle = await container.getComputedStyle(); + const initialBlockSize = computedStyle.blockSize; + const initialHeight = parseInt(initialBlockSize); + const initialInlineSize = computedStyle.inlineSize; + const initialWidth = parseInt(initialInlineSize); + + await dispatchDialogKeydown({ page, key: "ArrowUp", shiftKey: true }); + + computedStyle = await container.getComputedStyle(); + expect(computedStyle.blockSize).toBe(`${initialHeight}px`); + expect(computedStyle.inlineSize).toBe(`${initialWidth}px`); + + await dispatchDialogKeydown({ page, key: "ArrowLeft", shiftKey: true }); + + computedStyle = await container.getComputedStyle(); + expect(computedStyle.blockSize).toBe(`${initialHeight}px`); + expect(computedStyle.inlineSize).toBe(`${initialWidth}px`); + }); }); describe("theme", () => { diff --git a/packages/calcite-components/src/components/dialog/dialog.tsx b/packages/calcite-components/src/components/dialog/dialog.tsx index cd03b324203..2486fa6b603 100644 --- a/packages/calcite-components/src/components/dialog/dialog.tsx +++ b/packages/calcite-components/src/components/dialog/dialog.tsx @@ -435,8 +435,16 @@ export class Dialog extends LitElement implements OpenCloseComponent { switch (key) { case "ArrowUp": if (shiftKey && resizable && transitionEl) { + const { minBlockSize } = window.getComputedStyle(transitionEl); + const minHeight = getStylePixelValue(minBlockSize); + const height = this.getTransitionElDOMRect().height; + + if (height <= minHeight) { + return; + } + this.updateSize({ - size: this.getTransitionElDOMRect().height - resizeShiftStep, + size: height - resizeShiftStep, type: "blockSize", }); resizePosition.bottom -= resizeShiftStep; @@ -469,8 +477,16 @@ export class Dialog extends LitElement implements OpenCloseComponent { break; case "ArrowLeft": if (shiftKey && resizable && transitionEl) { + const { minInlineSize } = window.getComputedStyle(transitionEl); + const minWidth = getStylePixelValue(minInlineSize); + const width = this.getTransitionElDOMRect().width; + + if (width <= minWidth) { + return; + } + this.updateSize({ - size: this.getTransitionElDOMRect().width - resizeShiftStep, + size: width - resizeShiftStep, type: "inlineSize", }); resizePosition.right -= resizeShiftStep;