diff --git a/package-lock.json b/package-lock.json index 228952a7124..feb42cab509 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3810,6 +3810,12 @@ "node": ">=18" } }, + "node_modules/@interactjs/types": { + "version": "1.10.27", + "resolved": "https://registry.npmjs.org/@interactjs/types/-/types-1.10.27.tgz", + "integrity": "sha512-BUdv0cvs4H5ODuwft2Xp4eL8Vmi3LcihK42z0Ft/FbVJZoRioBsxH+LlsBdK4tAie7PqlKGy+1oyOncu1nQ6eA==", + "license": "MIT" + }, "node_modules/@isaacs/cliui": { "version": "8.0.2", "dev": true, @@ -18596,6 +18602,15 @@ "node": ">=8" } }, + "node_modules/interactjs": { + "version": "1.10.27", + "resolved": "https://registry.npmjs.org/interactjs/-/interactjs-1.10.27.tgz", + "integrity": "sha512-y/8RcCftGAF24gSp76X2JS3XpHiUvDQyhF8i7ujemBz77hwiHDuJzftHx7thY8cxGogwGiPJ+o97kWB6eAXnsA==", + "license": "MIT", + "dependencies": { + "@interactjs/types": "1.10.27" + } + }, "node_modules/internal-slot": { "version": "1.0.7", "dev": true, @@ -35210,6 +35225,7 @@ "composed-offset-position": "0.0.6", "dayjs": "1.11.12", "focus-trap": "7.5.4", + "interactjs": "1.10.27", "lodash-es": "4.17.21", "sortablejs": "1.15.1", "timezone-groups": "0.9.1", diff --git a/packages/calcite-components/package.json b/packages/calcite-components/package.json index 60d821f1525..4c8ac6b2ff1 100644 --- a/packages/calcite-components/package.json +++ b/packages/calcite-components/package.json @@ -69,6 +69,7 @@ "composed-offset-position": "0.0.6", "dayjs": "1.11.12", "focus-trap": "7.5.4", + "interactjs": "1.10.27", "lodash-es": "4.17.21", "sortablejs": "1.15.1", "timezone-groups": "0.9.1", diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index fc2fbdecd78..b9bb50416b7 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -1696,6 +1696,10 @@ export namespace Components { * A description for the component. */ "description": string; + /** + * When `true`, the component is draggable. + */ + "dragEnabled": boolean; /** * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed */ @@ -1753,6 +1757,10 @@ export namespace Components { * Specifies the placement of the dialog. */ "placement": DialogPlacement; + /** + * When `true`, the component is resizable. + */ + "resizable": boolean; /** * Specifies the size of the component. */ @@ -9703,6 +9711,10 @@ declare namespace LocalJSX { * A description for the component. */ "description"?: string; + /** + * When `true`, the component is draggable. + */ + "dragEnabled"?: boolean; /** * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed */ @@ -9780,6 +9792,10 @@ declare namespace LocalJSX { * Specifies the placement of the dialog. */ "placement"?: DialogPlacement; + /** + * When `true`, the component is resizable. + */ + "resizable"?: boolean; /** * Specifies the size of the component. */ diff --git a/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages.json b/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages.json index 0c5bb0e5a1c..635d1916df2 100644 --- a/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages.json +++ b/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages.json @@ -1,3 +1,5 @@ { - "close": "Close" + "close": "Close", + "resizeEnabled": "Resize enabled. Use the shift and arrow keys to resize the dialog.", + "dragEnabled": "Drag enabled. Use the arrow keys to move the dialog." } diff --git a/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_en.json b/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_en.json index 0c5bb0e5a1c..635d1916df2 100644 --- a/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_en.json +++ b/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_en.json @@ -1,3 +1,5 @@ { - "close": "Close" + "close": "Close", + "resizeEnabled": "Resize enabled. Use the shift and arrow keys to resize the dialog.", + "dragEnabled": "Drag enabled. Use the arrow keys to move the dialog." } diff --git a/packages/calcite-components/src/components/dialog/dialog.e2e.ts b/packages/calcite-components/src/components/dialog/dialog.e2e.ts index 4d669f54110..f4e02be30b8 100644 --- a/packages/calcite-components/src/components/dialog/dialog.e2e.ts +++ b/packages/calcite-components/src/components/dialog/dialog.e2e.ts @@ -9,17 +9,39 @@ import { renders, slots, t9n, + themed, } from "../../tests/commonTests"; import { html } from "../../../support/formatting"; import { GlobalTestProps, isElementFocused, skipAnimations } from "../../tests/utils"; import { IDS as PanelIDS } from "../panel/resources"; import { DialogMessages } from "./assets/dialog/t9n"; -import { CSS, SLOTS } from "./resources"; +import { CSS, dialogDragStep, dialogResizeStep, SLOTS } from "./resources"; type TestWindow = GlobalTestProps<{ beforeClose: () => Promise; }>; +const dispatchDialogKeydown = async ({ + page, + key, + shiftKey = false, +}: { + page: E2EPage; + key: string; + shiftKey?: boolean; +}): Promise => { + await page.$eval( + `calcite-dialog >>> .${CSS.dialog}`, + (el: HTMLDivElement, key, shiftKey) => { + el.dispatchEvent(new KeyboardEvent("keydown", { key, shiftKey, bubbles: true })); + }, + key, + shiftKey, + ); + + await page.waitForChanges(); +}; + describe("calcite-dialog", () => { describe("renders", () => { renders("calcite-dialog", { display: "flex", visible: true }); @@ -53,6 +75,10 @@ describe("calcite-dialog", () => { propertyName: "closeDisabled", value: true, }, + { + propertyName: "dragEnabled", + value: true, + }, { propertyName: "escapeDisabled", value: true, @@ -93,6 +119,10 @@ describe("calcite-dialog", () => { propertyName: "overlayPositioning", value: "fixed", }, + { + propertyName: "resizable", + value: true, + }, { propertyName: "scale", value: "s", @@ -114,6 +144,10 @@ describe("calcite-dialog", () => { propertyName: "description", defaultValue: undefined, }, + { + propertyName: "dragEnabled", + defaultValue: false, + }, { propertyName: "escapeDisabled", defaultValue: false, @@ -166,6 +200,10 @@ describe("calcite-dialog", () => { propertyName: "overlayPositioning", defaultValue: "absolute", }, + { + propertyName: "resizable", + defaultValue: false, + }, { propertyName: "scale", defaultValue: "m", @@ -622,16 +660,21 @@ describe("calcite-dialog", () => { it("has correct aria role/attribute", async () => { const page = await newE2EPage(); - await page.setContent(``); + await page.setContent(`Hello world!`); + await page.waitForChanges(); + const dialog = await page.find("calcite-dialog"); - expect(dialog).toEqualAttribute("role", "dialog"); - expect(dialog).toEqualAttribute("aria-modal", "false"); + const dialogContainer = await page.find(`calcite-dialog >>> .${CSS.dialog}`); - dialog.setProperty("modal", true); await page.waitForChanges(); + expect(dialogContainer).toEqualAttribute("role", "dialog"); + expect(dialogContainer).toEqualAttribute("aria-modal", "false"); - expect(dialog).toEqualAttribute("role", "dialog"); - expect(dialog).toEqualAttribute("aria-modal", "true"); + dialog.setProperty("modal", true); + + await page.waitForChanges(); + expect(dialogContainer).toEqualAttribute("role", "dialog"); + expect(dialogContainer).toEqualAttribute("aria-modal", "true"); }); it("closes and allows re-opening when Escape key is pressed", async () => { @@ -851,15 +894,16 @@ describe("calcite-dialog", () => { }); it("should set embedded on slotted alerts", async () => { - const page = await newE2EPage({ - html: html` + const page = await newE2EPage(); + await page.setContent( + html` test
Hello there!
This is an alert with a general piece of information. Cool, innit?
 `, - }); + ); await page.waitForChanges(); const alert = await page.find("calcite-alert"); @@ -867,20 +911,213 @@ describe("calcite-dialog", () => { expect(await alert.getProperty("embedded")).toBe(true); }); - it("should not close when slotted panels are closed", async () => { - const page = await newE2EPage({ - html: html` - - `, + describe("keyboard movement", () => { + it("should move properly via arrow keys", async () => { + const page = await newE2EPage(); + await page.setContent( + html`Hello world!`, + ); + 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("matrix(1, 0, 0, 1, 0, 0)"); + + 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)"); + + 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)"); }); - await page.waitForChanges(); + }); - const closeButton = await page.find(`calcite-panel >>> #${PanelIDS.close}`); + describe("keyboard assistive text", () => { + it("should not have assistive text by default", async () => { + const page = await newE2EPage(); + await page.setContent( + html`Hello world!`, + ); + await skipAnimations(page); + await page.waitForChanges(); + const assistiveTextElement = await page.find(`calcite-dialog >>> .${CSS.assistiveText}`); + expect(assistiveTextElement).toBeNull(); + }); - await closeButton.click(); - await page.waitForChanges(); + it("should have assistive text when resizable", async () => { + const page = await newE2EPage(); + await page.setContent( + html`Hello world!`, + ); + await skipAnimations(page); + await page.waitForChanges(); + const assistiveTextElement = await page.find(`calcite-dialog >>> .${CSS.assistiveText}`); + expect(assistiveTextElement).not.toBeNull(); + expect(assistiveTextElement.getAttribute("aria-live")).toBe("polite"); + const messages = await import(`./assets/dialog/t9n/messages.json`); + expect(assistiveTextElement.textContent.trim()).toBe(messages.resizeEnabled); + }); - const dialog = await page.find("calcite-dialog"); - expect(await dialog.getProperty("open")).toBe(true); + it("should have assistive text when dragEnabled", async () => { + const page = await newE2EPage(); + await page.setContent( + html`Hello world!`, + ); + await skipAnimations(page); + await page.waitForChanges(); + const assistiveTextElement = await page.find(`calcite-dialog >>> .${CSS.assistiveText}`); + expect(assistiveTextElement).not.toBeNull(); + expect(assistiveTextElement.getAttribute("aria-live")).toBe("polite"); + const messages = await import(`./assets/dialog/t9n/messages.json`); + expect(assistiveTextElement.textContent.trim()).toBe(messages.dragEnabled); + }); + + it("should have assistive text when resizable and dragEnabled", async () => { + const page = await newE2EPage(); + await page.setContent( + html`Hello world!`, + ); + await skipAnimations(page); + await page.waitForChanges(); + const assistiveTextElement = await page.find(`calcite-dialog >>> .${CSS.assistiveText}`); + expect(assistiveTextElement).not.toBeNull(); + expect(assistiveTextElement.getAttribute("aria-live")).toBe("polite"); + const messages = await import(`./assets/dialog/t9n/messages.json`); + expect(assistiveTextElement.textContent).toBe(`${messages.dragEnabled} ${messages.resizeEnabled}`); + }); + }); + + describe("keyboard resize", () => { + it("should resize properly via shift and arrow keys", async () => { + const page = await newE2EPage(); + await page.setContent( + html`

+ Lorem ipsum odor amet, consectetuer 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 initialInlineSize = computedStyle.inlineSize; + const initialHeight = parseInt(initialBlockSize, 10); + const initialWidth = parseInt(initialInlineSize, 10); + + await dispatchDialogKeydown({ page, key: "ArrowUp", shiftKey: true }); + + computedStyle = await container.getComputedStyle(); + expect(computedStyle.blockSize).toBe(`${initialHeight - dialogResizeStep}px`); + expect(computedStyle.inlineSize).toBe(`${initialWidth}px`); + + await dispatchDialogKeydown({ page, key: "ArrowDown", 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 - dialogResizeStep}px`); + + await dispatchDialogKeydown({ page, key: "ArrowRight", shiftKey: true }); + + computedStyle = await container.getComputedStyle(); + expect(computedStyle.blockSize).toBe(`${initialHeight}px`); + expect(computedStyle.inlineSize).toBe(`${initialWidth}px`); + }); + }); + + describe("theme", () => { + themed( + async () => { + const page = await newE2EPage(); + await page.setContent(html`

Hello world!

`); + // set large page to ensure test dialog isn't becoming fullscreen + await page.setViewport({ width: 1440, height: 1440 }); + await skipAnimations(page); + return { page, tag: "calcite-dialog" }; + }, + { + "--calcite-dialog-scrim-background-color": { + shadowSelector: `.${CSS.scrim}`, + targetProp: "--calcite-scrim-background-color", + }, + "--calcite-dialog-size-x": { + shadowSelector: `.${CSS.dialog}`, + targetProp: "inlineSize", + }, + "--calcite-dialog-min-size-x": { + shadowSelector: `.${CSS.dialog}`, + targetProp: "minInlineSize", + }, + "--calcite-dialog-max-size-x": { + shadowSelector: `.${CSS.dialog}`, + targetProp: "maxInlineSize", + }, + "--calcite-dialog-size-y": { + shadowSelector: `.${CSS.dialog}`, + targetProp: "blockSize", + }, + "--calcite-dialog-min-size-y": { + shadowSelector: `.${CSS.dialog}`, + targetProp: "minBlockSize", + }, + "--calcite-dialog-max-size-y": { + shadowSelector: `.${CSS.dialog}`, + targetProp: "maxBlockSize", + }, + "--calcite-dialog-content-space": { + shadowSelector: `.${CSS.panel}`, + targetProp: "--calcite-internal-dialog-content-padding", + }, + "--calcite-dialog-footer-space": { + shadowSelector: `.${CSS.panel}`, + targetProp: "--calcite-panel-footer-padding", + }, + "--calcite-dialog-offset-x": { + shadowSelector: `.${CSS.dialog}`, + targetProp: "insetInlineStart", + }, + "--calcite-dialog-offset-y": { + shadowSelector: `.${CSS.dialog}`, + targetProp: "insetBlockStart", + }, + }, + ); + + it("should not close when slotted panels are closed", async () => { + const page = await newE2EPage({ + html: html` + + `, + }); + await page.waitForChanges(); + + const closeButton = await page.find(`calcite-panel >>> #${PanelIDS.close}`); + + await closeButton.click(); + await page.waitForChanges(); + + const dialog = await page.find("calcite-dialog"); + expect(await dialog.getProperty("open")).toBe(true); + }); }); }); diff --git a/packages/calcite-components/src/components/dialog/dialog.scss b/packages/calcite-components/src/components/dialog/dialog.scss index 1d5d4fa9339..0b5de775088 100644 --- a/packages/calcite-components/src/components/dialog/dialog.scss +++ b/packages/calcite-components/src/components/dialog/dialog.scss @@ -5,7 +5,11 @@ * * @prop --calcite-dialog-scrim-background-color: Specifies the background color of the component's scrim. * @prop --calcite-dialog-size-x: Specifies the width of the component, using `px`, `em`, `rem`, `vw`, or `%`. Does not exceed the viewport's width - applies when `placement="cover"` is set. + * @prop --calcite-dialog-min-size-x: Specifies the minimum width of the component, using `px`, `em`, `rem`, `vw`, or `%`. + * @prop --calcite-dialog-max-size-x: Specifies the maximum width of the component, using `px`, `em`, `rem`, `vw`, or `%`. * @prop --calcite-dialog-size-y: Specifies the height of the component, using `px`, `em`, `rem`, `vh`, or `%`. Does not exceed the viewport's height - applies when `placement="cover"` is set. + * @prop --calcite-dialog-min-size-y: Specifies the minimum height of the component, using `px`, `em`, `rem`, `vh`, or `%`. + * @prop --calcite-dialog-max-size-y: Specifies the maximum height of the component, using `px`, `em`, `rem`, `vh`, or `%`. * @prop --calcite-dialog-content-space: Specifies the padding of the component's content. * @prop --calcite-dialog-footer-space: Specifies the padding of the component's footer. * @prop --calcite-dialog-border-color: Specifies the component's border color. @@ -20,6 +24,7 @@ inset-0 z-overlay pointer-events-none; + --calcite-internal-dialog-animation-offset: 20px; } :host([modal]) { @@ -34,7 +39,7 @@ flex items-center justify-center - overflow-y-hidden + overflow-hidden opacity-0 z-overlay; visibility: hidden; @@ -78,27 +83,21 @@ } :host([scale="s"]) { - --calcite-internal-dialog-content-padding: var(--calcite-spacing-sm); - --calcite-internal-dialog-padding: theme("spacing.3"); - --calcite-internal-dialog-padding-large: theme("spacing.4"); - --calcite-internal-dialog-title-text: theme("fontSize.1h"); - --calcite-internal-dialog-content-text: theme("fontSize.n1"); + --calcite-internal-dialog-content-padding: var(--calcite-dialog-content-space, var(--calcite-spacing-sm)); + --calcite-internal-dialog-min-size-x: 198px; + --calcite-internal-dialog-min-size-y: 140px; } :host([scale="m"]) { - --calcite-internal-dialog-content-padding: var(--calcite-spacing-md); - --calcite-internal-dialog-padding: theme("spacing.4"); - --calcite-internal-dialog-padding-large: theme("spacing.5"); - --calcite-internal-dialog-title-text: theme("fontSize.2h"); - --calcite-internal-dialog-content-text: theme("fontSize.0"); + --calcite-internal-dialog-content-padding: var(--calcite-dialog-content-space, var(--calcite-spacing-md)); + --calcite-internal-dialog-min-size-x: 288px; + --calcite-internal-dialog-min-size-y: 180px; } :host([scale="l"]) { - --calcite-internal-dialog-content-padding: var(--calcite-spacing-lg); - --calcite-internal-dialog-padding: theme("spacing.5"); - --calcite-internal-dialog-padding-large: theme("spacing.6"); - --calcite-internal-dialog-title-text: theme("fontSize.3h"); - --calcite-internal-dialog-content-text: theme("fontSize.1"); + --calcite-internal-dialog-content-padding: var(--calcite-dialog-content-space, var(--calcite-spacing-lg)); + --calcite-internal-dialog-min-size-x: 388px; + --calcite-internal-dialog-min-size-y: 220px; } .scrim { @@ -122,7 +121,6 @@ calcite-panel { .dialog { @apply pointer-events-none - float-none m-6 box-border flex @@ -136,31 +134,26 @@ calcite-panel { -webkit-overflow-scrolling: touch; visibility: hidden; transition: - transform var(--calcite-internal-animation-timing-slow) $easing-function, - visibility 0ms linear var(--calcite-internal-animation-timing-slow), + inset-block var(--calcite-internal-animation-timing-slow) $easing-function, opacity var(--calcite-internal-animation-timing-slow) $easing-function; - --calcite-internal-dialog-hidden-position: translate3d(0, 20px, 0); - --calcite-internal-dialog-shown-position: translate3d(0, 0, 0); + min-inline-size: var(--calcite-dialog-min-size-x, var(--calcite-internal-dialog-min-size-x)); + max-inline-size: var(--calcite-dialog-max-size-x, 100%); + min-block-size: var(--calcite-dialog-min-size-y, var(--calcite-internal-dialog-min-size-y)); + max-block-size: var(--calcite-dialog-max-size-y, 100%); - inset-inline-start: var(--calcite-dialog-offset-x); - inset-block-start: var(--calcite-dialog-offset-y); + // these internal vars allow handling the animation when an offset is being used. + --calcite-internal-dialog-hidden-position: calc( + var(--calcite-dialog-offset-y, 0px) + var(--calcite-internal-dialog-animation-offset) + ); + --calcite-internal-dialog-shown-position: var(--calcite-dialog-offset-y, 0); - &--opening { - &-idle { - transform: var(--calcite-internal-dialog-hidden-position); - } - &-active { - transform: var(--calcite-internal-dialog-shown-position); - } - } + inset-inline-start: var(--calcite-dialog-offset-x, 0); + inset-block-start: var(--calcite-internal-dialog-hidden-position); - &--closing { - &-idle { - transform: var(--calcite-internal-dialog-shown-position); - } + &--opening { &-active { - transform: var(--calcite-internal-dialog-hidden-position); + inset-block-start: var(--calcite-internal-dialog-shown-position); } } } @@ -184,11 +177,8 @@ calcite-panel { visible opacity-100; transition: - transform var(--calcite-internal-animation-timing-slow) $easing-function, - visibility 0ms linear, - opacity var(--calcite-internal-animation-timing-slow) $easing-function, - max-inline-size var(--calcite-internal-animation-timing-slow) $easing-function, - max-block-size var(--calcite-internal-animation-timing-slow) $easing-function; + inset-block var(--calcite-internal-animation-timing-slow) $easing-function, + opacity var(--calcite-internal-animation-timing-slow) $easing-function; transition-delay: 0ms; } } @@ -198,8 +188,6 @@ calcite-panel { */ @mixin dialog-size($size, $width) { :host([width-scale="#{$size}"]) .dialog { - @apply max-h-full - max-w-full; inline-size: var(--calcite-dialog-size-x, $width); block-size: var(--calcite-dialog-size-y, auto); } @@ -212,6 +200,13 @@ calcite-panel { max-h-full w-full max-w-full; + inset-inline-start: 0; + inset-block-start: var(--calcite-internal-dialog-animation-offset); + &--opening { + &-active { + inset-block-start: 0; + } + } } } } @@ -236,8 +231,6 @@ calcite-panel { h-full w-full rounded-none; - --calcite-internal-dialog-hidden-position: translate3D(0, 20px, 0) scale(0.95); - --calcite-internal-dialog-shown-position: translate3D(0, 0, 0) scale(1); } .panel { @apply rounded-none; @@ -290,4 +283,8 @@ calcite-panel { } } +.assistive-text { + @apply sr-only; +} + @include base-component(); diff --git a/packages/calcite-components/src/components/dialog/dialog.stories.ts b/packages/calcite-components/src/components/dialog/dialog.stories.ts index 97670089cc0..c829ea2fea0 100644 --- a/packages/calcite-components/src/components/dialog/dialog.stories.ts +++ b/packages/calcite-components/src/components/dialog/dialog.stories.ts @@ -20,6 +20,8 @@ type DialogStoryArgs = Pick< | "menuOpen" | "modal" | "overlayPositioning" + | "dragEnabled" + | "resizable" | "outsideCloseDisabled" >; @@ -38,6 +40,8 @@ export default { loading: false, menuOpen: false, modal: false, + dragEnabled: false, + resizable: false, overlayPositioning: overlayPositioning.defaultValue, outsideCloseDisabled: false, }, @@ -89,6 +93,8 @@ const menuActionsContent = html` html` +
{this.modal ? ( ) : null} -
+
+
Loading
@@ -788,6 +789,105 @@

Dialog

+
+
drag-enabled & resizable
+ +
+ +

+ The small dialog is perfect for short confirmation dialogs or very compact interfaces with few elements. +

+ Back + Cancel + Save + + + + Scale Small + +
+ +
+ +

+ The small dialog is perfect for short confirmation dialogs or very compact interfaces with few elements. +

+ Back + Cancel + Save + + + + Scale Medium + +
+ +
+ +
+

+ The small dialog is perfect for short confirmation dialogs or very compact interfaces with few elements. +

+
+ Back + Cancel + Save + + + + Scale Large + +
+
+ +
+
Placement: center
diff --git a/packages/calcite-components/src/tests/utils/cssTokenValues.ts b/packages/calcite-components/src/tests/utils/cssTokenValues.ts index 9d37c8628fb..6078facef86 100644 --- a/packages/calcite-components/src/tests/utils/cssTokenValues.ts +++ b/packages/calcite-components/src/tests/utils/cssTokenValues.ts @@ -19,7 +19,7 @@ export function getTokenValue(token: string): string { shadow$: "rgb(255, 255, 255) 0px 0px 0px 4px, rgb(255, 105, 180) 0px 0px 0px 5px inset, rgb(0, 191, 255) 0px 0px 0px 9px", "(z-index)$": "42", - "(columns|gap|height|offset|radius|size|space|width)": "42px", + "(columns|gap|height|offset|radius|size|size-y|size-x|space|space-x|space-y|width)": "42px", } as const; const match = Object.entries(tokenValueMap).find(([regexStr]) => {