feat(dialog): adds new dialog component and deprecates the modal comp…

…onent (#9751) **Related Issue:** #7886 ## Summary - Adds new `calcite-dialog` component. - Includes e2e, stories, demos, resources - Updates stencil config to note new component - Panel esc key should emit close event - Adds `dialogs` slot to `calcite-shell` for slotting dialogs. - Deprecates `calcite-modal` component. - cleans up global style imports - makes `focusTrapDisabled` optional on FocusTrapComponent ## Notes - Animations need review
Esri · Jul 26, 2024 · 0cdd327 · 0cdd327
1 parent 89aa526
commit 0cdd327
Show file tree

Hide file tree

Showing 63 changed files with 4,040 additions and 14 deletions.
diff --git a/packages/calcite-components/.storybook/resources.ts b/packages/calcite-components/.storybook/resources.ts
@@ -25,6 +25,7 @@ import { TextType } from "../src/components/input/interfaces.ts";
 import { TimeZoneMode } from "../src/components/input-time-zone/interfaces.ts";
 import { DisplayMode } from "../src/components/sheet/interfaces.ts";
 import { ShellDisplayMode } from "../src/components/shell/interfaces.ts";
+import { OverlayPositioning } from "../src/components";
 
 interface AttributeMetadata<T> {
   values: T[];
@@ -58,6 +59,7 @@ interface CommonAttributes {
   mode: AttributeMetadata<TimeZoneMode>;
   selectionAppearance: AttributeMetadata<SelectionAppearance>;
   shellDisplayMode: AttributeMetadata<ShellDisplayMode>;
+  overlayPositioning: AttributeMetadata<OverlayPositioning>;
 }
 
 const logicalFlowPositionOptions: LogicalFlowPosition[] = ["inline-start", "inline-end", "block-start", "block-end"];
@@ -114,6 +116,7 @@ const textTypeOptions: TextType[] = [
 ];
 const modeOptions: TimeZoneMode[] = ["offset", "name"];
 const selectionAppearanceOptions: SelectionAppearance[] = ["icon", "border"];
+const overlayPositioningOptions: OverlayPositioning[] = ["absolute", "fixed"];
 const shellDisplayModeOptions: ShellDisplayMode[] = ["dock", "float", "overlay"];
 
 export const ATTRIBUTES: CommonAttributes = {
@@ -213,6 +216,10 @@ export const ATTRIBUTES: CommonAttributes = {
     values: modeOptions,
     defaultValue: modeOptions[0],
   },
+  overlayPositioning: {
+    values: overlayPositioningOptions,
+    defaultValue: overlayPositioningOptions[0],
+  },
   selectionAppearance: {
     values: selectionAppearanceOptions,
     defaultValue: selectionAppearanceOptions[0],

diff --git a/packages/calcite-components/src/assets/styles/global.scss b/packages/calcite-components/src/assets/styles/global.scss
@@ -1,4 +1,4 @@
-@import "~@esri/calcite-base/dist/_index";
+@import "~@esri/calcite-base/dist/index";
 @import "~@esri/calcite-design-tokens/dist/scss/index";
 @import "~@esri/calcite-design-tokens/dist/scss/core";
 

diff --git a/packages/calcite-components/src/assets/styles/includes.scss b/packages/calcite-components/src/assets/styles/includes.scss
@@ -1,5 +1,5 @@
 @import "~@esri/calcite-colors/dist/colors";
-@import "~@esri/calcite-base/dist/_index";
+@import "~@esri/calcite-base/dist/index";
 @import "~@esri/calcite-design-tokens/dist/scss/index";
 @import "~@esri/calcite-design-tokens/dist/scss/core";
 

diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts
@@ -37,6 +37,9 @@ import { ComboboxMessages } from "./components/combobox/assets/combobox/t9n";
 import { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n";
 import { DateLocaleData } from "./components/date-picker/utils";
 import { HoverRange } from "./utils/date";
+import { DialogMessages } from "./components/dialog/assets/dialog/t9n";
+import { OverlayPositioning as OverlayPositioning1 } from "./components";
+import { DialogPlacement } from "./components/dialog/interfaces";
 import { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces";
 import { ItemKeyboardEvent } from "./components/dropdown/interfaces";
 import { FilterMessages } from "./components/filter/assets/filter/t9n";
@@ -130,6 +133,9 @@ export { ComboboxMessages } from "./components/combobox/assets/combobox/t9n";
 export { DatePickerMessages } from "./components/date-picker/assets/date-picker/t9n";
 export { DateLocaleData } from "./components/date-picker/utils";
 export { HoverRange } from "./utils/date";
+export { DialogMessages } from "./components/dialog/assets/dialog/t9n";
+export { OverlayPositioning as OverlayPositioning1 } from "./components";
+export { DialogPlacement } from "./components/dialog/interfaces";
 export { RequestedItem as RequestedItem2 } from "./components/dropdown-group/interfaces";
 export { ItemKeyboardEvent } from "./components/dropdown/interfaces";
 export { FilterMessages } from "./components/filter/assets/filter/t9n";
@@ -1654,6 +1660,92 @@ export namespace Components {
          */
         "selectedDate": Date;
     }
+    interface CalciteDialog {
+        /**
+          * Passes a function to run before the component closes.
+         */
+        "beforeClose": () => Promise<void>;
+        /**
+          * When `true`, disables the component's close button.
+         */
+        "closeDisabled": boolean;
+        /**
+          * A description for the component.
+         */
+        "description": string;
+        /**
+          * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed
+         */
+        "embedded": boolean;
+        /**
+          * The component header text.
+         */
+        "heading": string;
+        /**
+          * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.
+         */
+        "headingLevel": HeadingLevel;
+        /**
+          * Specifies the kind of the component, which will style the top border.
+         */
+        "kind": Extract<"brand" | "danger" | "info" | "success" | "warning", Kind>;
+        /**
+          * When `true`, a busy indicator is displayed.
+         */
+        "loading": boolean;
+        /**
+          * When `true`, the action menu items in the `header-menu-actions` slot are open.
+         */
+        "menuOpen": boolean;
+        /**
+          * Use this property to override individual strings used by the component.
+         */
+        "messageOverrides": Partial<DialogMessages>;
+        /**
+          * Made into a prop for testing purposes only
+         */
+        "messages": DialogMessages;
+        /**
+          * When `true`, displays a scrim blocking interaction underneath the component.
+         */
+        "modal": boolean;
+        /**
+          * When `true`, displays and positions the component.
+         */
+        "open": boolean;
+        /**
+          * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+         */
+        "overlayPositioning": OverlayPositioning1;
+        /**
+          * Specifies the placement of the dialog.
+         */
+        "placement": DialogPlacement;
+        /**
+          * Specifies the size of the component.
+         */
+        "scale": Scale;
+        /**
+          * Scrolls the component's content to a specified set of coordinates.
+          * @example myCalciteFlowItem.scrollContentTo({   left: 0, // Specifies the number of pixels along the X axis to scroll the window or element.   top: 0, // Specifies the number of pixels along the Y axis to scroll the window or element   behavior: "auto" // Specifies whether the scrolling should animate smoothly (smooth), or happen instantly in a single jump (auto, the default value). });
+          * @param options - allows specific coordinates to be defined.
+          * @returns - promise that resolves once the content is scrolled to.
+         */
+        "scrollContentTo": (options?: ScrollToOptions) => Promise<void>;
+        /**
+          * Sets focus on the component's "close" button (the first focusable item).
+          * @returns - A promise that is resolved when the operation has completed.
+         */
+        "setFocus": () => Promise<void>;
+        /**
+          * Updates the element(s) that are used within the focus-trap of the component.
+         */
+        "updateFocusTrapElements": () => Promise<void>;
+        /**
+          * Specifies the width of the component.
+         */
+        "widthScale": Scale;
+    }
     interface CalciteDropdown {
         /**
           * When `true`, the component will remain open after a selection is made.  If the `selectionMode` of the selected `calcite-dropdown-item`'s containing `calcite-dropdown-group` is `"none"`, the component will always close.
@@ -5888,6 +5980,10 @@ export interface CalciteDatePickerMonthHeaderCustomEvent<T> extends CustomEvent<
     detail: T;
     target: HTMLCalciteDatePickerMonthHeaderElement;
 }
+export interface CalciteDialogCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLCalciteDialogElement;
+}
 export interface CalciteDropdownCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLCalciteDropdownElement;
@@ -6570,6 +6666,27 @@ declare global {
         prototype: HTMLCalciteDatePickerMonthHeaderElement;
         new (): HTMLCalciteDatePickerMonthHeaderElement;
     };
+    interface HTMLCalciteDialogElementEventMap {
+        "calciteDialogBeforeClose": void;
+        "calciteDialogClose": void;
+        "calciteDialogBeforeOpen": void;
+        "calciteDialogOpen": void;
+        "calciteDialogScroll": void;
+    }
+    interface HTMLCalciteDialogElement extends Components.CalciteDialog, HTMLStencilElement {
+        addEventListener<K extends keyof HTMLCalciteDialogElementEventMap>(type: K, listener: (this: HTMLCalciteDialogElement, ev: CalciteDialogCustomEvent<HTMLCalciteDialogElementEventMap[K]>) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;
+        addEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | AddEventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLCalciteDialogElementEventMap>(type: K, listener: (this: HTMLCalciteDialogElement, ev: CalciteDialogCustomEvent<HTMLCalciteDialogElementEventMap[K]>) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof DocumentEventMap>(type: K, listener: (this: Document, ev: DocumentEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener<K extends keyof HTMLElementEventMap>(type: K, listener: (this: HTMLElement, ev: HTMLElementEventMap[K]) => any, options?: boolean | EventListenerOptions): void;
+        removeEventListener(type: string, listener: EventListenerOrEventListenerObject, options?: boolean | EventListenerOptions): void;
+    }
+    var HTMLCalciteDialogElement: {
+        prototype: HTMLCalciteDialogElement;
+        new (): HTMLCalciteDialogElement;
+    };
     interface HTMLCalciteDropdownElementEventMap {
         "calciteDropdownSelect": void;
         "calciteDropdownBeforeClose": void;
@@ -7881,6 +7998,7 @@ declare global {
         "calcite-date-picker-day": HTMLCalciteDatePickerDayElement;
         "calcite-date-picker-month": HTMLCalciteDatePickerMonthElement;
         "calcite-date-picker-month-header": HTMLCalciteDatePickerMonthHeaderElement;
+        "calcite-dialog": HTMLCalciteDialogElement;
         "calcite-dropdown": HTMLCalciteDropdownElement;
         "calcite-dropdown-group": HTMLCalciteDropdownGroupElement;
         "calcite-dropdown-item": HTMLCalciteDropdownItemElement;
@@ -9518,6 +9636,96 @@ declare namespace LocalJSX {
          */
         "selectedDate"?: Date;
     }
+    interface CalciteDialog {
+        /**
+          * Passes a function to run before the component closes.
+         */
+        "beforeClose"?: () => Promise<void>;
+        /**
+          * When `true`, disables the component's close button.
+         */
+        "closeDisabled"?: boolean;
+        /**
+          * A description for the component.
+         */
+        "description"?: string;
+        /**
+          * This internal property, managed by a containing calcite-shell, is used to inform the component if special configuration or styles are needed
+         */
+        "embedded"?: boolean;
+        /**
+          * The component header text.
+         */
+        "heading"?: string;
+        /**
+          * Specifies the heading level of the component's `heading` for proper document structure, without affecting visual styling.
+         */
+        "headingLevel"?: HeadingLevel;
+        /**
+          * Specifies the kind of the component, which will style the top border.
+         */
+        "kind"?: Extract<"brand" | "danger" | "info" | "success" | "warning", Kind>;
+        /**
+          * When `true`, a busy indicator is displayed.
+         */
+        "loading"?: boolean;
+        /**
+          * When `true`, the action menu items in the `header-menu-actions` slot are open.
+         */
+        "menuOpen"?: boolean;
+        /**
+          * Use this property to override individual strings used by the component.
+         */
+        "messageOverrides"?: Partial<DialogMessages>;
+        /**
+          * Made into a prop for testing purposes only
+         */
+        "messages"?: DialogMessages;
+        /**
+          * When `true`, displays a scrim blocking interaction underneath the component.
+         */
+        "modal"?: boolean;
+        /**
+          * Fires when the component is requested to be closed and before the closing transition begins.
+         */
+        "onCalciteDialogBeforeClose"?: (event: CalciteDialogCustomEvent<void>) => void;
+        /**
+          * Fires when the component is added to the DOM but not rendered, and before the opening transition begins.
+         */
+        "onCalciteDialogBeforeOpen"?: (event: CalciteDialogCustomEvent<void>) => void;
+        /**
+          * Fires when the component is closed and animation is complete.
+         */
+        "onCalciteDialogClose"?: (event: CalciteDialogCustomEvent<void>) => void;
+        /**
+          * Fires when the component is open and animation is complete.
+         */
+        "onCalciteDialogOpen"?: (event: CalciteDialogCustomEvent<void>) => void;
+        /**
+          * Fires when the content is scrolled.
+         */
+        "onCalciteDialogScroll"?: (event: CalciteDialogCustomEvent<void>) => void;
+        /**
+          * When `true`, displays and positions the component.
+         */
+        "open"?: boolean;
+        /**
+          * Determines the type of positioning to use for the overlaid content.  Using `"absolute"` will work for most cases. The component will be positioned inside of overflowing parent containers and will affect the container's layout.  `"fixed"` should be used to escape an overflowing parent container, or when the reference element's `position` CSS property is `"fixed"`.
+         */
+        "overlayPositioning"?: OverlayPositioning1;
+        /**
+          * Specifies the placement of the dialog.
+         */
+        "placement"?: DialogPlacement;
+        /**
+          * Specifies the size of the component.
+         */
+        "scale"?: Scale;
+        /**
+          * Specifies the width of the component.
+         */
+        "widthScale"?: Scale;
+    }
     interface CalciteDropdown {
         /**
           * When `true`, the component will remain open after a selection is made.  If the `selectionMode` of the selected `calcite-dropdown-item`'s containing `calcite-dropdown-group` is `"none"`, the component will always close.
@@ -13881,6 +14089,7 @@ declare namespace LocalJSX {
         "calcite-date-picker-day": CalciteDatePickerDay;
         "calcite-date-picker-month": CalciteDatePickerMonth;
         "calcite-date-picker-month-header": CalciteDatePickerMonthHeader;
+        "calcite-dialog": CalciteDialog;
         "calcite-dropdown": CalciteDropdown;
         "calcite-dropdown-group": CalciteDropdownGroup;
         "calcite-dropdown-item": CalciteDropdownItem;
@@ -13997,6 +14206,7 @@ declare module "@stencil/core" {
             "calcite-date-picker-day": LocalJSX.CalciteDatePickerDay & JSXBase.HTMLAttributes<HTMLCalciteDatePickerDayElement>;
             "calcite-date-picker-month": LocalJSX.CalciteDatePickerMonth & JSXBase.HTMLAttributes<HTMLCalciteDatePickerMonthElement>;
             "calcite-date-picker-month-header": LocalJSX.CalciteDatePickerMonthHeader & JSXBase.HTMLAttributes<HTMLCalciteDatePickerMonthHeaderElement>;
+            "calcite-dialog": LocalJSX.CalciteDialog & JSXBase.HTMLAttributes<HTMLCalciteDialogElement>;
             "calcite-dropdown": LocalJSX.CalciteDropdown & JSXBase.HTMLAttributes<HTMLCalciteDropdownElement>;
             "calcite-dropdown-group": LocalJSX.CalciteDropdownGroup & JSXBase.HTMLAttributes<HTMLCalciteDropdownGroupElement>;
             "calcite-dropdown-item": LocalJSX.CalciteDropdownItem & JSXBase.HTMLAttributes<HTMLCalciteDropdownItemElement>;

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
@@ -0,0 +1,3 @@
+{
+  "close": "Close"
+}
diff --git a/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_ar.json b/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_ar.json
@@ -0,0 +1,3 @@
+{
+  "close": "إغلاق"
+}
diff --git a/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_bg.json b/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_bg.json
@@ -0,0 +1,3 @@
+{
+  "close": "Затваряне"
+}
diff --git a/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_bs.json b/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_bs.json
@@ -0,0 +1,3 @@
+{
+  "close": "Zatvori"
+}
diff --git a/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_ca.json b/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_ca.json
@@ -0,0 +1,3 @@
+{
+  "close": "Tanca"
+}
diff --git a/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_cs.json b/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_cs.json
@@ -0,0 +1,3 @@
+{
+  "close": "Zavřít"
+}
diff --git a/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_da.json b/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_da.json
@@ -0,0 +1,3 @@
+{
+  "close": "Luk"
+}
diff --git a/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_de.json b/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_de.json
@@ -0,0 +1,3 @@
+{
+  "close": "Schließen"
+}
diff --git a/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_el.json b/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_el.json
@@ -0,0 +1,3 @@
+{
+  "close": "Κλείσιμο"
+}
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
@@ -0,0 +1,3 @@
+{
+  "close": "Close"
+}
diff --git a/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_es.json b/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_es.json
@@ -0,0 +1,3 @@
+{
+  "close": "Cerrar"
+}
diff --git a/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_et.json b/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_et.json
@@ -0,0 +1,3 @@
+{
+  "close": "Sule"
+}
diff --git a/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_fi.json b/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_fi.json
@@ -0,0 +1,3 @@
+{
+  "close": "Sulje"
+}
diff --git a/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_fr.json b/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_fr.json
@@ -0,0 +1,3 @@
+{
+  "close": "Fermer"
+}
diff --git a/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_he.json b/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_he.json
@@ -0,0 +1,3 @@
+{
+  "close": "סגירה"
+}
diff --git a/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_hr.json b/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_hr.json
@@ -0,0 +1,3 @@
+{
+  "close": "Zatvori"
+}
diff --git a/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_hu.json b/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_hu.json
@@ -0,0 +1,3 @@
+{
+  "close": "Bezárás"
+}
diff --git a/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_id.json b/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_id.json
@@ -0,0 +1,3 @@
+{
+  "close": "Tutup"
+}
diff --git a/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_it.json b/packages/calcite-components/src/components/dialog/assets/dialog/t9n/messages_it.json
@@ -0,0 +1,3 @@
+{
+  "close": "Chiudi"
+}