@momentum-design/components 0.85.8 → 0.85.9

package/dist/components/dialog/dialog.component.d.ts

@@ -5,7 +5,7 @@ declare const Dialog_base: import("../../utils/mixins/index.types").Constructor<
 /**
  * Dialog component is a modal dialog that can be used to display information or prompt the user for input.
  * It can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.
- * The dialog is available in three sizes: small, medium, and large. It may also receive custom styling/sizing.
+ * The dialog is available in 5 sizes: small, medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.
  * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.
  *
  * The dialog can be controlled solely through the `visible` property, no trigger element is required.
@@ -81,7 +81,7 @@ declare class Dialog extends Dialog_base {
      */
     zIndex: number;
     /**
-     * The size of the dialog, can be 'small' (432px width), 'medium' (656px width), or 'large' (992px width)
+     * The size of the dialog, can be 'small' (432px width), 'medium' (656px width), 'large' (992px width), 'xlarge' (90% width) or 'fullscreen' (100% width).
      * @default small
      */
     size: DialogSize;

package/dist/components/dialog/dialog.component.js

@@ -22,7 +22,7 @@ import styles from './dialog.styles';
 /**
  * Dialog component is a modal dialog that can be used to display information or prompt the user for input.
  * It can be used to create custom dialogs where content for the body and footer actions is provided by the consumer.
- * The dialog is available in three sizes: small, medium, and large. It may also receive custom styling/sizing.
+ * The dialog is available in 5 sizes: small, medium, large, xlarge and fullscreen. It may also receive custom styling/sizing.
  * The dialog interrupts the user and will block interaction with the rest of the application until it is closed.
  *
  * The dialog can be controlled solely through the `visible` property, no trigger element is required.
@@ -94,7 +94,7 @@ class Dialog extends PreventScrollMixin(FocusTrapMixin(CardAndDialogFooterMixin(
          */
         this.zIndex = DEFAULTS.Z_INDEX;
         /**
-         * The size of the dialog, can be 'small' (432px width), 'medium' (656px width), or 'large' (992px width)
+         * The size of the dialog, can be 'small' (432px width), 'medium' (656px width), 'large' (992px width), 'xlarge' (90% width) or 'fullscreen' (100% width).
          * @default small
          */
         this.size = DEFAULTS.SIZE;

package/dist/components/dialog/dialog.constants.d.ts

@@ -15,6 +15,6 @@ declare const DEFAULTS: {
     readonly DISABLE_ARIA_HAS_POPUP: false;
     readonly FOCUS_TRAP: true;
 };
-declare const DIALOG_SIZE: readonly ["small", "medium", "large"];
+declare const DIALOG_SIZE: readonly ["small", "medium", "large", "xlarge", "fullscreen"];
 declare const DIALOG_ROLE: readonly ["dialog", "alertdialog"];
 export { TAG_NAME, DEFAULTS, DIALOG_SIZE, DIALOG_ROLE, DIALOG_VARIANT };

package/dist/components/dialog/dialog.constants.js

@@ -16,6 +16,6 @@ const DEFAULTS = {
     DISABLE_ARIA_HAS_POPUP: false,
     FOCUS_TRAP: true,
 };
-const DIALOG_SIZE = ['small', 'medium', 'large'];
+const DIALOG_SIZE = ['small', 'medium', 'large', 'xlarge', 'fullscreen'];
 const DIALOG_ROLE = ['dialog', 'alertdialog'];
 export { TAG_NAME, DEFAULTS, DIALOG_SIZE, DIALOG_ROLE, DIALOG_VARIANT };

package/dist/components/dialog/dialog.styles.js

@@ -7,13 +7,14 @@ const styles = css `
     --mdc-dialog-description-text-color: var(--mds-color-theme-text-secondary-normal);
     --mdc-dialog-elevation-3: var(--mds-elevation-3);
     --mdc-dialog-width: 27rem; /* Default to small */
+    --mdc-dialog-padding: 1.5rem;
 
     background-color: var(--mdc-dialog-primary-background-color);
     border: 0.0625rem solid var(--mdc-dialog-border-color);
     border-radius: 0.5rem;
     filter: var(--mdc-dialog-elevation-3);
     display: none;
-    padding: 1rem;
+    padding: var(--mdc-dialog-padding);
     flex-direction: column;
     justify-content: center;
     align-items: center;
@@ -40,6 +41,23 @@ const styles = css `
     --mdc-dialog-width: 62rem;
   }
 
+  :host([size='xlarge']) {
+    --mdc-dialog-width: 90%;
+  }
+
+  @media (max-width: 62rem) {
+    :host([size='xlarge']) {
+      --mdc-dialog-width: 100%;
+    }
+  }
+
+  :host([size='fullscreen']) {
+    --mdc-dialog-width: 100%;
+    height: 100%;
+    border: none;
+    border-radius: 0;
+  }
+
   :host {
     width: var(--mdc-dialog-width);
     max-width: 100%;
@@ -91,14 +109,13 @@ const styles = css `
 
   :host::part(dialog-close-btn) {
     position: absolute;
-    top: 1rem;
-    right: 1rem;
-    cursor: pointer;
+    top: var(--mdc-dialog-padding);
+    right: var(--mdc-dialog-padding);
   }
 
   :host(:dir(rtl))::part(dialog-close-btn) {
     right: auto;
-    left: 1rem;
+    left: var(--mdc-dialog-padding);
   }
 
   mdc-text::part(text) {