feat: add x-large and xx-large sizes to modal

pages/modal/sizes.page.tsx

@@ -0,0 +1,40 @@
+// Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
+// SPDX-License-Identifier: Apache-2.0
+import React, { useState } from 'react';
+
+import Button from '~components/button';
+import Modal from '~components/modal';
+import SpaceBetween from '~components/space-between';
+
+import { SimplePage } from '../app/templates';
+import ScreenshotArea from '../utils/screenshot-area';
+
+export default function SizesPage() {
+  const [size, setSize] = useState<'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'max'>('medium');
+  const [visible, setVisible] = useState(false);
+
+  const sizes = ['small', 'medium', 'large', 'x-large', 'xx-large', 'max'] as const;
+
+  return (
+    <SimplePage title="Modal sizes">
+      <SpaceBetween size="s">
+        {sizes.map(size => (
+          <Button
+            key={size}
+            onClick={() => {
+              setSize(size);
+              setVisible(true);
+            }}
+          >
+            {size}
+          </Button>
+        ))}
+      </SpaceBetween>
+      <ScreenshotArea>
+        <Modal visible={visible} onDismiss={() => setVisible(false)} header={`${size} modal`} size={size}>
+          This is a {size} modal.
+        </Modal>
+      </ScreenshotArea>
+    </SimplePage>
+  );
+}

src/__tests__/snapshot-tests/__snapshots__/documenter.test.ts.snap

@@ -17542,8 +17542,8 @@ of the most recent getModalRoot call as an argument.",
     {
       "defaultValue": "'medium'",
       "description": "Sets the width of the modal. \`max\` uses variable width up to the
-largest size allowed by the design guidelines. Other sizes
-(\`small\`/\`medium\`/\`large\`) have fixed widths.",
+largest size allowed by the design guidelines. Other sizes have fixed widths:
+\`small\` (320px), \`medium\` (600px), \`large\` (820px), \`x-large\` (1024px), \`xx-large\` (1280px).",
       "inlineType": {
         "name": "ModalProps.Size",
         "type": "union",
@@ -17552,6 +17552,8 @@ largest size allowed by the design guidelines. Other sizes
           "max",
           "medium",
           "large",
+          "x-large",
+          "xx-large",
         ],
       },
       "name": "size",

src/modal/__tests__/modal.test.tsx

@@ -112,7 +112,7 @@ describe('Modal component', () => {
 
   describe('size property', () => {
     it('displays correct size', () => {
-      (['small', 'medium', 'large', 'max'] as ModalProps.Size[]).forEach(size => {
+      (['small', 'medium', 'large', 'x-large', 'xx-large', 'max'] as ModalProps.Size[]).forEach(size => {
         const wrapper = renderModal({ size });
         expect(wrapper.findDialog().getElement()).toHaveClass(styles[size]);
       });

src/modal/interfaces.ts

@@ -26,8 +26,8 @@ export interface BaseModalProps {
 export interface ModalProps extends BaseComponentProps, BaseModalProps {
   /**
    * Sets the width of the modal. `max` uses variable width up to the
-   * largest size allowed by the design guidelines. Other sizes
-   * (`small`/`medium`/`large`) have fixed widths.
+   * largest size allowed by the design guidelines. Other sizes have fixed widths:
+   * `small` (320px), `medium` (600px), `large` (820px), `x-large` (1024px), `xx-large` (1280px).
    */
   size?: ModalProps.Size;
   /**
@@ -81,7 +81,7 @@ export interface ModalProps extends BaseComponentProps, BaseModalProps {
 }
 
 export namespace ModalProps {
-  export type Size = 'small' | 'medium' | 'large' | 'max';
+  export type Size = 'small' | 'medium' | 'large' | 'x-large' | 'xx-large' | 'max';
 
   export interface DismissDetail {
     reason: string;

src/modal/styles.scss

@@ -66,6 +66,14 @@ $modal-z-index: 5000;
     max-inline-size: 820px;
   }
 
+  &.x-large {
+    max-inline-size: 1024px;
+  }
+
+  &.xx-large {
+    max-inline-size: 1280px;
+  }
+
   &.max.breakpoint-xs {
     // viewport - (closed app layout panel widths + 20px on each side)
     max-inline-size: calc(100vw - (2 * 4 * #{styles.$base-size} + #{awsui.$space-xxxl}));