From cad59457768c980a5e8d77e3161cfb9bbb50ed74 Mon Sep 17 00:00:00 2001
From: Andrew Holloway <booc0mtaco@users.noreply.github.com>
Date: Tue, 21 May 2024 13:25:11 -0500
Subject: [PATCH] fix(Modal): address QA updates

- add low and high emphasis
- add detail to story descriptions
- add in button component instead of clickable icon
- remove tooltips from stories
---
 src/components/Modal/Modal-v2.module.css      |  86 ++-
 src/components/Modal/Modal-v2.stories.tsx     |  85 ++-
 src/components/Modal/Modal-v2.test.tsx        |   2 +-
 src/components/Modal/Modal-v2.tsx             |  51 +-
 .../__snapshots__/Modal-v2.test.tsx.snap      | 600 +++++++++++-------
 5 files changed, 492 insertions(+), 332 deletions(-)

diff --git a/src/components/Modal/Modal-v2.module.css b/src/components/Modal/Modal-v2.module.css
index fa8a40ac6..1700a56de 100755
--- a/src/components/Modal/Modal-v2.module.css
+++ b/src/components/Modal/Modal-v2.module.css
@@ -23,8 +23,13 @@
  * The inverted background of the modal to provide contrast with the actual modal.
  */
 .modal__overlay {
-  background-color: var(--eds-theme-color-background-utility-overlay-low-emphasis);
-  opacity: 0.5;
+  &.modal__overlay--emphasis-high {
+    background-color: rgb(from var(--eds-theme-color-background-utility-overlay-high-emphasis) r g b / 0.8);
+  }
+  
+  &.modal__overlay--emphasis-low {
+    background-color: rgb(from var(--eds-theme-color-background-utility-overlay-low-emphasis) r g b / 0.5);
+  }
 }
 
 /**
@@ -81,8 +86,6 @@
  */
 .modal__content {
   position: relative;
-  height: 43.125rem;
-  max-height: 90vh;
   overflow: hidden;
   
   /** 
@@ -95,31 +98,67 @@
   display: flex;
   flex-direction: column;
   
-  width: 22.5rem;
-
   background-color: var(--eds-theme-color-background-utility-container);
 }
 
 /**
- * The medium modal size used for the md modal.
- * Also used for the lg modal size for when the screen size is smaller than 75rem.
+ * The large modal size used for the lg/default modal.
  */
-.modal__content--md {
+.modal__content--lg {
+  @media all and (min-width: $eds-bp-xs) {
+    width: 100%;
+    height: 100%;
+  }
+
+  @media all and (min-width: $eds-bp-sm) {
+    max-height: 40rem;
+    max-width: 50rem;
+  }
+
   @media all and (min-width: $eds-bp-md) {
-    width: 42rem;
+    max-height: 40rem;
+    max-width: 50rem;
+  }
+
+  @media all and (min-width: $eds-bp-lg) {
+    max-height: 40rem;
+    max-width: 60rem;
+  }
+
+  @media all and (min-width: $eds-bp-xl) {
+    max-height: 40rem;
+    max-width: 60rem;
+    --modal-horizontal-padding: 4rem;
   }
 }
 
 /**
- * The large modal size used for the lg/default modal.
+ * The small modal size used for the modal.
  */
-.modal__content--lg {
+ .modal__content--sm {
+  @media all and (min-width: $eds-bp-xs) {
+    max-height: 30rem;
+    max-width: 35rem;
+  }
+
+  @media all and (min-width: $eds-bp-sm) {
+    max-height: 30rem;
+    max-width: 25rem;
+  }
+
+  @media all and (min-width: $eds-bp-md) {
+    max-height: 30rem;
+    max-width: 25rem;
+  }
+
   @media all and (min-width: $eds-bp-xl) {
-    width: 64rem;
+    max-height: 30rem;
+    max-width: 35rem;
     --modal-horizontal-padding: 4rem;
   }
 }
 
+
 /**
  * Allows scrolling of the modal content except for sticky footer.
  * This functionality is our intended scroll behavior but consuming teams can 
@@ -133,30 +172,9 @@
  * The modal close button.
  */
 .modal__close-button {
-  border: 0;
-  background-color: transparent;
-
   position: absolute;
   top: 0;
   right: 0;
-
-  width: 3rem;
-  height: 3rem;
-
-  cursor: pointer;
-
-  z-index: 1;
-
-  color: var(--eds-theme-color-icon-utility-default-secondary);
-}
-
-/**
- * The modal close icon that resides in the close button.
- */
-.modal__close-icon {
-  position: absolute;
-  top: 0.5rem;
-  right: 0.5rem;
 }
 
 /*------------------------------------*\
diff --git a/src/components/Modal/Modal-v2.stories.tsx b/src/components/Modal/Modal-v2.stories.tsx
index 6d15715d3..03b57ace9 100644
--- a/src/components/Modal/Modal-v2.stories.tsx
+++ b/src/components/Modal/Modal-v2.stories.tsx
@@ -7,7 +7,6 @@ import { Heading, Text } from '../../';
 import { chromaticViewports, storybookViewports } from '../../util/viewports';
 import { ButtonV2 as Button } from '../Button';
 import { ButtonGroupV2 as ButtonGroup } from '../ButtonGroup';
-import { TooltipV2 as Tooltip } from '../Tooltip';
 
 export default {
   title: 'Components/V2/Modal',
@@ -42,6 +41,14 @@ export default {
         'Toggles scrollable variant of the modal. If modal is scrollable, footer is not, and vice versa.',
       type: 'boolean',
     },
+    size: {
+      description: 'Max size of the modal, which responds to the viewport',
+      control: {
+        type: 'select',
+      },
+      options: ['sm', 'lg'],
+      defaultValue: 'lg',
+    },
   },
   decorators: [(Story) => <div className="p-8">{Story()}</div>],
 } as Meta<typeof Modal>;
@@ -87,12 +94,9 @@ export const Default: StoryObj<Args> = {
       </Modal.Body>
       <Modal.Footer>
         <ButtonGroup>
-          {/* This has to be manually tested since Tooltip tests are flaky in Chromatic */}
-          <Tooltip text="Tooltip should spawn on top of modal">
-            <Button onClick={() => {}} rank="primary">
-              Primary Action
-            </Button>
-          </Tooltip>
+          <Button onClick={() => {}} rank="primary">
+            Primary Action
+          </Button>
           <Button onClick={() => {}} rank="secondary">
             Secondary
           </Button>
@@ -102,6 +106,16 @@ export const Default: StoryObj<Args> = {
   ),
 };
 
+/**
+ * Modals can also have a more emphasized backdrop overlay
+ */
+export const HighEmphasis: StoryObj<Args> = {
+  args: {
+    overlayEmphasis: 'high',
+  },
+  render: Default.render,
+};
+
 /**
  * Modals can contain long, scrollable text. This is not recommended, however.
  */
@@ -187,12 +201,9 @@ export const WithLongTextScrollable: StoryObj<InteractiveArgs> = {
       </Modal.Body>
       <Modal.Footer>
         <ButtonGroup>
-          {/* This has to be manually tested since Tooltip tests are flaky in Chromatic */}
-          <Tooltip text="Tooltip should spawn on top of modal">
-            <Button onClick={() => {}} rank="primary">
-              Primary Action
-            </Button>
-          </Tooltip>
+          <Button onClick={() => {}} rank="primary">
+            Primary Action
+          </Button>
           <Button onClick={() => {}} rank="secondary">
             Secondary
           </Button>
@@ -235,12 +246,9 @@ export const ContentDefault: Story = {
         </Modal.Body>
         <Modal.Footer>
           <ButtonGroup>
-            {/* This has to be manually tested since Tooltip tests are flaky in Chromatic */}
-            <Tooltip text="Tooltip should spawn on top of modal">
-              <Button onClick={() => {}} rank="primary">
-                Primary Action
-              </Button>
-            </Tooltip>
+            <Button onClick={() => {}} rank="primary">
+              Primary Action
+            </Button>
             <Button onClick={() => {}} rank="secondary">
               Secondary
             </Button>
@@ -259,13 +267,13 @@ export const ContentDefault: Story = {
 
 /**
  * `Modal` provides `size`, which allows control over the natural width of the modal. This does not affect the contents
- * of the modal.
+ * of the modal except to wrap text.
  */
-export const Medium: Story = {
+export const Large: Story = {
   ...ContentDefault,
   args: {
     ...ContentDefault.args,
-    size: 'md',
+    size: 'lg',
   },
 };
 
@@ -288,7 +296,7 @@ export const LayoutVertical: Story = {
   ...ContentDefault,
   args: {
     ...ContentDefault.args,
-    size: 'md',
+    size: 'lg',
     children: (
       <>
         <Modal.Header>
@@ -300,12 +308,9 @@ export const LayoutVertical: Story = {
         </Modal.Body>
         <Modal.Footer>
           <ButtonGroup buttonLayout="vertical">
-            {/* This has to be manually tested since Tooltip tests are flaky in Chromatic */}
-            <Tooltip text="Tooltip should spawn on top of modal">
-              <Button isFullWidth onClick={() => {}} rank="primary">
-                Primary Action
-              </Button>
-            </Tooltip>
+            <Button isFullWidth onClick={() => {}} rank="primary">
+              Primary Action
+            </Button>
             <Button isFullWidth onClick={() => {}} rank="secondary">
               Secondary
             </Button>
@@ -334,7 +339,7 @@ export const LayoutVerticalWithTertiary: Story = {
   ...ContentDefault,
   args: {
     ...ContentDefault.args,
-    size: 'md',
+    size: 'lg',
     children: (
       <>
         <Modal.Header>
@@ -346,12 +351,9 @@ export const LayoutVerticalWithTertiary: Story = {
         </Modal.Body>
         <Modal.Footer>
           <ButtonGroup buttonLayout="vertical">
-            {/* This has to be manually tested since Tooltip tests are flaky in Chromatic */}
-            <Tooltip text="Tooltip should spawn on top of modal">
-              <Button isFullWidth onClick={() => {}} rank="primary">
-                Primary Action
-              </Button>
-            </Tooltip>
+            <Button isFullWidth onClick={() => {}} rank="primary">
+              Primary Action
+            </Button>
             <Button isFullWidth onClick={() => {}} rank="tertiary">
               Tertiary
             </Button>
@@ -379,7 +381,7 @@ export const WithCriticalButton: Story = {
   ...ContentDefault,
   args: {
     ...ContentDefault.args,
-    size: 'md',
+    size: 'lg',
     children: (
       <>
         <Modal.Header>
@@ -391,12 +393,9 @@ export const WithCriticalButton: Story = {
         </Modal.Body>
         <Modal.Footer>
           <ButtonGroup>
-            {/* This has to be manually tested since Tooltip tests are flaky in Chromatic */}
-            <Tooltip text="Tooltip should spawn on top of modal">
-              <Button onClick={() => {}} rank="primary" variant="critical">
-                Critical Action
-              </Button>
-            </Tooltip>
+            <Button onClick={() => {}} rank="primary" variant="critical">
+              Critical Action
+            </Button>
           </ButtonGroup>
         </Modal.Footer>
       </>
diff --git a/src/components/Modal/Modal-v2.test.tsx b/src/components/Modal/Modal-v2.test.tsx
index 9af8960ad..a9db9bf49 100644
--- a/src/components/Modal/Modal-v2.test.tsx
+++ b/src/components/Modal/Modal-v2.test.tsx
@@ -60,7 +60,7 @@ describe('Modal', () => {
     });
     await user.click(openModalButton);
     const closeButton = await screen.findByRole('button', {
-      name: 'close modal',
+      name: 'close',
     });
     await user.click(closeButton);
     await waitFor(() => {
diff --git a/src/components/Modal/Modal-v2.tsx b/src/components/Modal/Modal-v2.tsx
index 9ac0b9e79..df4247563 100644
--- a/src/components/Modal/Modal-v2.tsx
+++ b/src/components/Modal/Modal-v2.tsx
@@ -5,8 +5,9 @@ import React from 'react';
 
 import type { ExtractProps } from '../../util/utility-types';
 import type { Size } from '../../util/variant-types';
+
+import { ButtonV2 as Button } from '../Button';
 import Heading from '../Heading';
-import { IconV2 as Icon } from '../Icon';
 import Text from '../Text';
 
 import styles from './Modal-v2.module.css';
@@ -78,12 +79,17 @@ type ModalContentProps = {
   onClose: () => void;
   // Design API
   /**
-   * Max size of the modal. Defaults to 'lg'.
-   * Will still break responsively.
+   * Max size of the modal, which responds to the viewport
    *
    * **Default is `"lg"`**.
    */
-  size?: Extract<Size, 'xs' | 'sm' | 'md' | 'lg' | 'xl'>;
+  size?: Extract<Size, 'sm' | 'lg'>;
+  /**
+   * Emphasis used on the backgound overlay (behind the modal)
+   *
+   * **Default is `"low"`**.
+   */
+  overlayEmphasis?: 'low' | 'high';
 };
 
 type ModalProps = ModalContentProps & {
@@ -230,29 +236,27 @@ export const ModalContent = (props: ModalContentProps) => {
   const componentClassName = clsx(
     styles['modal__content'],
     isScrollable && styles['modal__content--scrollable'],
-    (size === 'md' || size === 'lg') && styles['modal__content--md'],
-    size === 'lg' && styles['modal__content--lg'],
+    size && styles[`modal__content--${size}`],
     className,
   );
 
-  const closeIconClassName = clsx(styles['modal__close-icon']);
-
   return (
     <ModalContext.Provider value={{ isScrollable }}>
       <div className={componentClassName} {...other}>
-        {/* TODO: this should be a button instance? */}
         {!hideCloseButton && (
-          <button className={styles['modal__close-button']} onClick={onClose}>
-            <Icon
-              className={closeIconClassName}
-              name="close"
-              purpose="informative"
-              size="1.5rem"
-              title="close modal"
-            />
-          </button>
+          <Button
+            aria-label="close"
+            className={styles['modal__close-button']}
+            context="default"
+            icon="close"
+            iconLayout="icon-only"
+            onClick={onClose}
+            rank="tertiary"
+            variant="neutral"
+          >
+            Close
+          </Button>
         )}
-
         {children}
       </div>
     </ModalContext.Provider>
@@ -277,6 +281,7 @@ export const Modal = (props: ModalProps) => {
     modalContainerClassName,
     onClose,
     open,
+    overlayEmphasis = 'low',
     ...rest
   } = props;
   const { children } = rest;
@@ -310,7 +315,13 @@ export const Modal = (props: ModalProps) => {
         // Passing onClose to the Dialog allows it to close the modal when the ESC key is triggered.
         onClose={onClose}
       >
-        <Dialog.Overlay className={styles['modal__overlay']} />
+        <Dialog.Overlay
+          className={clsx(
+            styles['modal__overlay'],
+            overlayEmphasis &&
+              styles[`modal__overlay--emphasis-${overlayEmphasis}`],
+          )}
+        />
 
         <ModalContent onClose={onClose} {...rest} />
       </Dialog>
diff --git a/src/components/Modal/__snapshots__/Modal-v2.test.tsx.snap b/src/components/Modal/__snapshots__/Modal-v2.test.tsx.snap
index f02068678..1bf94df45 100644
--- a/src/components/Modal/__snapshots__/Modal-v2.test.tsx.snap
+++ b/src/components/Modal/__snapshots__/Modal-v2.test.tsx.snap
@@ -2,30 +2,33 @@
 
 exports[`Modal ContentDefault story renders snapshot 1`] = `
 <div
-  class="modal__content modal__content--md modal__content--lg"
+  class="modal__content modal__content--lg"
   data-testid="non-interactive"
   open=""
 >
   <button
-    class="modal__close-button"
-  >
-    <svg
-      class="icon modal__close-icon"
-      fill="currentColor"
-      height="1.5rem"
-      role="img"
-      style="--icon-size: 1.5rem;"
-      viewBox="0 0 24 24"
-      width="1.5rem"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <title>
-        close modal
-      </title>
-      <path
-        d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
-      />
-    </svg>
+    aria-label="close"
+    class="button button--context-default button--layout-icon-only button--tertiary button--lg button--variant-neutral modal__close-button"
+    type="button"
+  >
+    <span
+      class="button__text"
+    >
+      <svg
+        aria-hidden="true"
+        class="icon"
+        fill="currentColor"
+        height="1.5rem"
+        style="--icon-size: 1.5rem;"
+        viewBox="0 0 24 24"
+        width="1.5rem"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
+        />
+      </svg>
+    </span>
   </button>
   <div
     class="modal-header"
@@ -92,33 +95,36 @@ exports[`Modal Default story renders snapshot 1`] = `
 >
   <div
     aria-hidden="true"
-    class="modal__overlay"
+    class="modal__overlay modal__overlay--emphasis-low"
     data-headlessui-state="open"
     id="headlessui-dialog-overlay-:r1:"
   />
   <div
-    class="modal__content modal__content--md modal__content--lg"
+    class="modal__content modal__content--lg"
   >
     <button
-      class="modal__close-button"
+      aria-label="close"
+      class="button button--context-default button--layout-icon-only button--tertiary button--lg button--variant-neutral modal__close-button"
+      type="button"
     >
-      <svg
-        class="icon modal__close-icon"
-        fill="currentColor"
-        height="1.5rem"
-        role="img"
-        style="--icon-size: 1.5rem;"
-        viewBox="0 0 24 24"
-        width="1.5rem"
-        xmlns="http://www.w3.org/2000/svg"
+      <span
+        class="button__text"
       >
-        <title>
-          close modal
-        </title>
-        <path
-          d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          class="icon"
+          fill="currentColor"
+          height="1.5rem"
+          style="--icon-size: 1.5rem;"
+          viewBox="0 0 24 24"
+          width="1.5rem"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
+          />
+        </svg>
+      </span>
     </button>
     <div
       class="modal-header"
@@ -177,32 +183,134 @@ exports[`Modal Default story renders snapshot 1`] = `
 </div>
 `;
 
-exports[`Modal LayoutVertical story renders snapshot 1`] = `
+exports[`Modal HighEmphasis story renders snapshot 1`] = `
 <div
-  class="modal__content modal__content--md"
+  aria-labelledby="headlessui-dialog-title-:r5:"
+  aria-modal="true"
+  class="modal"
+  data-headlessui-state="open"
+  id="headlessui-dialog-:r3:"
+  role="dialog"
+>
+  <div
+    aria-hidden="true"
+    class="modal__overlay modal__overlay--emphasis-high"
+    data-headlessui-state="open"
+    id="headlessui-dialog-overlay-:r4:"
+  />
+  <div
+    class="modal__content modal__content--lg"
+  >
+    <button
+      aria-label="close"
+      class="button button--context-default button--layout-icon-only button--tertiary button--lg button--variant-neutral modal__close-button"
+      type="button"
+    >
+      <span
+        class="button__text"
+      >
+        <svg
+          aria-hidden="true"
+          class="icon"
+          fill="currentColor"
+          height="1.5rem"
+          style="--icon-size: 1.5rem;"
+          viewBox="0 0 24 24"
+          width="1.5rem"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
+          />
+        </svg>
+      </span>
+    </button>
+    <div
+      class="modal-header"
+    >
+      <h2
+        class="heading heading--headline-md"
+        data-headlessui-state="open"
+        id="headlessui-dialog-title-:r5:"
+      >
+        Modal Title
+      </h2>
+      <div
+        class="text text--headline-sm modal-sub-title"
+      >
+        Modal Sub-title
+      </div>
+    </div>
+    <div
+      class="modal-body"
+    >
+      <div
+        class="fpo h-full w-full"
+      >
+        Modal Content
+      </div>
+    </div>
+    <div
+      class="modal-footer"
+    >
+      <div
+        class="button-group button-group--horizontal"
+      >
+        <button
+          class="button button--layout-none button--primary button--lg button--variant-default"
+          type="button"
+        >
+          <span
+            class="button__text"
+          >
+            Primary Action
+          </span>
+        </button>
+        <button
+          class="button button--layout-none button--secondary button--lg button--variant-default"
+          type="button"
+        >
+          <span
+            class="button__text"
+          >
+            Secondary
+          </span>
+        </button>
+      </div>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Modal Large story renders snapshot 1`] = `
+<div
+  class="modal__content modal__content--lg"
   data-testid="non-interactive"
   open=""
 >
   <button
-    class="modal__close-button"
-  >
-    <svg
-      class="icon modal__close-icon"
-      fill="currentColor"
-      height="1.5rem"
-      role="img"
-      style="--icon-size: 1.5rem;"
-      viewBox="0 0 24 24"
-      width="1.5rem"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <title>
-        close modal
-      </title>
-      <path
-        d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
-      />
-    </svg>
+    aria-label="close"
+    class="button button--context-default button--layout-icon-only button--tertiary button--lg button--variant-neutral modal__close-button"
+    type="button"
+  >
+    <span
+      class="button__text"
+    >
+      <svg
+        aria-hidden="true"
+        class="icon"
+        fill="currentColor"
+        height="1.5rem"
+        style="--icon-size: 1.5rem;"
+        viewBox="0 0 24 24"
+        width="1.5rem"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
+        />
+      </svg>
+    </span>
   </button>
   <div
     class="modal-header"
@@ -231,10 +339,10 @@ exports[`Modal LayoutVertical story renders snapshot 1`] = `
     class="modal-footer"
   >
     <div
-      class="button-group button-group--vertical"
+      class="button-group button-group--horizontal"
     >
       <button
-        class="button button--layout-none button--full-width button--primary button--lg button--variant-default"
+        class="button button--layout-none button--primary button--lg button--variant-default"
         type="button"
       >
         <span
@@ -244,7 +352,7 @@ exports[`Modal LayoutVertical story renders snapshot 1`] = `
         </span>
       </button>
       <button
-        class="button button--layout-none button--full-width button--secondary button--lg button--variant-default"
+        class="button button--layout-none button--secondary button--lg button--variant-default"
         type="button"
       >
         <span
@@ -258,32 +366,35 @@ exports[`Modal LayoutVertical story renders snapshot 1`] = `
 </div>
 `;
 
-exports[`Modal LayoutVerticalWithTertiary story renders snapshot 1`] = `
+exports[`Modal LayoutVertical story renders snapshot 1`] = `
 <div
-  class="modal__content modal__content--md"
+  class="modal__content modal__content--lg"
   data-testid="non-interactive"
   open=""
 >
   <button
-    class="modal__close-button"
-  >
-    <svg
-      class="icon modal__close-icon"
-      fill="currentColor"
-      height="1.5rem"
-      role="img"
-      style="--icon-size: 1.5rem;"
-      viewBox="0 0 24 24"
-      width="1.5rem"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <title>
-        close modal
-      </title>
-      <path
-        d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
-      />
-    </svg>
+    aria-label="close"
+    class="button button--context-default button--layout-icon-only button--tertiary button--lg button--variant-neutral modal__close-button"
+    type="button"
+  >
+    <span
+      class="button__text"
+    >
+      <svg
+        aria-hidden="true"
+        class="icon"
+        fill="currentColor"
+        height="1.5rem"
+        style="--icon-size: 1.5rem;"
+        viewBox="0 0 24 24"
+        width="1.5rem"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
+        />
+      </svg>
+    </span>
   </button>
   <div
     class="modal-header"
@@ -325,13 +436,13 @@ exports[`Modal LayoutVerticalWithTertiary story renders snapshot 1`] = `
         </span>
       </button>
       <button
-        class="button button--layout-none button--full-width button--tertiary button--lg button--variant-default"
+        class="button button--layout-none button--full-width button--secondary button--lg button--variant-default"
         type="button"
       >
         <span
           class="button__text"
         >
-          Tertiary
+          Secondary
         </span>
       </button>
     </div>
@@ -339,32 +450,35 @@ exports[`Modal LayoutVerticalWithTertiary story renders snapshot 1`] = `
 </div>
 `;
 
-exports[`Modal Medium story renders snapshot 1`] = `
+exports[`Modal LayoutVerticalWithTertiary story renders snapshot 1`] = `
 <div
-  class="modal__content modal__content--md"
+  class="modal__content modal__content--lg"
   data-testid="non-interactive"
   open=""
 >
   <button
-    class="modal__close-button"
-  >
-    <svg
-      class="icon modal__close-icon"
-      fill="currentColor"
-      height="1.5rem"
-      role="img"
-      style="--icon-size: 1.5rem;"
-      viewBox="0 0 24 24"
-      width="1.5rem"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <title>
-        close modal
-      </title>
-      <path
-        d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
-      />
-    </svg>
+    aria-label="close"
+    class="button button--context-default button--layout-icon-only button--tertiary button--lg button--variant-neutral modal__close-button"
+    type="button"
+  >
+    <span
+      class="button__text"
+    >
+      <svg
+        aria-hidden="true"
+        class="icon"
+        fill="currentColor"
+        height="1.5rem"
+        style="--icon-size: 1.5rem;"
+        viewBox="0 0 24 24"
+        width="1.5rem"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
+        />
+      </svg>
+    </span>
   </button>
   <div
     class="modal-header"
@@ -393,10 +507,10 @@ exports[`Modal Medium story renders snapshot 1`] = `
     class="modal-footer"
   >
     <div
-      class="button-group button-group--horizontal"
+      class="button-group button-group--vertical"
     >
       <button
-        class="button button--layout-none button--primary button--lg button--variant-default"
+        class="button button--layout-none button--full-width button--primary button--lg button--variant-default"
         type="button"
       >
         <span
@@ -406,13 +520,13 @@ exports[`Modal Medium story renders snapshot 1`] = `
         </span>
       </button>
       <button
-        class="button button--layout-none button--secondary button--lg button--variant-default"
+        class="button button--layout-none button--full-width button--tertiary button--lg button--variant-default"
         type="button"
       >
         <span
           class="button__text"
         >
-          Secondary
+          Tertiary
         </span>
       </button>
     </div>
@@ -422,30 +536,33 @@ exports[`Modal Medium story renders snapshot 1`] = `
 
 exports[`Modal Mobile story renders snapshot 1`] = `
 <div
-  class="modal__content modal__content--md modal__content--lg"
+  class="modal__content modal__content--lg"
   data-testid="non-interactive"
   open=""
 >
   <button
-    class="modal__close-button"
-  >
-    <svg
-      class="icon modal__close-icon"
-      fill="currentColor"
-      height="1.5rem"
-      role="img"
-      style="--icon-size: 1.5rem;"
-      viewBox="0 0 24 24"
-      width="1.5rem"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <title>
-        close modal
-      </title>
-      <path
-        d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
-      />
-    </svg>
+    aria-label="close"
+    class="button button--context-default button--layout-icon-only button--tertiary button--lg button--variant-neutral modal__close-button"
+    type="button"
+  >
+    <span
+      class="button__text"
+    >
+      <svg
+        aria-hidden="true"
+        class="icon"
+        fill="currentColor"
+        height="1.5rem"
+        style="--icon-size: 1.5rem;"
+        viewBox="0 0 24 24"
+        width="1.5rem"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
+        />
+      </svg>
+    </span>
   </button>
   <div
     class="modal-header"
@@ -503,30 +620,33 @@ exports[`Modal Mobile story renders snapshot 1`] = `
 
 exports[`Modal MobileLandscape story renders snapshot 1`] = `
 <div
-  class="modal__content modal__content--md modal__content--lg"
+  class="modal__content modal__content--lg"
   data-testid="non-interactive"
   open=""
 >
   <button
-    class="modal__close-button"
-  >
-    <svg
-      class="icon modal__close-icon"
-      fill="currentColor"
-      height="1.5rem"
-      role="img"
-      style="--icon-size: 1.5rem;"
-      viewBox="0 0 24 24"
-      width="1.5rem"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <title>
-        close modal
-      </title>
-      <path
-        d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
-      />
-    </svg>
+    aria-label="close"
+    class="button button--context-default button--layout-icon-only button--tertiary button--lg button--variant-neutral modal__close-button"
+    type="button"
+  >
+    <span
+      class="button__text"
+    >
+      <svg
+        aria-hidden="true"
+        class="icon"
+        fill="currentColor"
+        height="1.5rem"
+        style="--icon-size: 1.5rem;"
+        viewBox="0 0 24 24"
+        width="1.5rem"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
+        />
+      </svg>
+    </span>
   </button>
   <div
     class="modal-header"
@@ -584,30 +704,33 @@ exports[`Modal MobileLandscape story renders snapshot 1`] = `
 
 exports[`Modal Small story renders snapshot 1`] = `
 <div
-  class="modal__content"
+  class="modal__content modal__content--sm"
   data-testid="non-interactive"
   open=""
 >
   <button
-    class="modal__close-button"
-  >
-    <svg
-      class="icon modal__close-icon"
-      fill="currentColor"
-      height="1.5rem"
-      role="img"
-      style="--icon-size: 1.5rem;"
-      viewBox="0 0 24 24"
-      width="1.5rem"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <title>
-        close modal
-      </title>
-      <path
-        d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
-      />
-    </svg>
+    aria-label="close"
+    class="button button--context-default button--layout-icon-only button--tertiary button--lg button--variant-neutral modal__close-button"
+    type="button"
+  >
+    <span
+      class="button__text"
+    >
+      <svg
+        aria-hidden="true"
+        class="icon"
+        fill="currentColor"
+        height="1.5rem"
+        style="--icon-size: 1.5rem;"
+        viewBox="0 0 24 24"
+        width="1.5rem"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
+        />
+      </svg>
+    </span>
   </button>
   <div
     class="modal-header"
@@ -665,30 +788,33 @@ exports[`Modal Small story renders snapshot 1`] = `
 
 exports[`Modal Tablet story renders snapshot 1`] = `
 <div
-  class="modal__content modal__content--md modal__content--lg"
+  class="modal__content modal__content--lg"
   data-testid="non-interactive"
   open=""
 >
   <button
-    class="modal__close-button"
-  >
-    <svg
-      class="icon modal__close-icon"
-      fill="currentColor"
-      height="1.5rem"
-      role="img"
-      style="--icon-size: 1.5rem;"
-      viewBox="0 0 24 24"
-      width="1.5rem"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <title>
-        close modal
-      </title>
-      <path
-        d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
-      />
-    </svg>
+    aria-label="close"
+    class="button button--context-default button--layout-icon-only button--tertiary button--lg button--variant-neutral modal__close-button"
+    type="button"
+  >
+    <span
+      class="button__text"
+    >
+      <svg
+        aria-hidden="true"
+        class="icon"
+        fill="currentColor"
+        height="1.5rem"
+        style="--icon-size: 1.5rem;"
+        viewBox="0 0 24 24"
+        width="1.5rem"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
+        />
+      </svg>
+    </span>
   </button>
   <div
     class="modal-header"
@@ -746,30 +872,33 @@ exports[`Modal Tablet story renders snapshot 1`] = `
 
 exports[`Modal WithCriticalButton story renders snapshot 1`] = `
 <div
-  class="modal__content modal__content--md"
+  class="modal__content modal__content--lg"
   data-testid="non-interactive"
   open=""
 >
   <button
-    class="modal__close-button"
-  >
-    <svg
-      class="icon modal__close-icon"
-      fill="currentColor"
-      height="1.5rem"
-      role="img"
-      style="--icon-size: 1.5rem;"
-      viewBox="0 0 24 24"
-      width="1.5rem"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <title>
-        close modal
-      </title>
-      <path
-        d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
-      />
-    </svg>
+    aria-label="close"
+    class="button button--context-default button--layout-icon-only button--tertiary button--lg button--variant-neutral modal__close-button"
+    type="button"
+  >
+    <span
+      class="button__text"
+    >
+      <svg
+        aria-hidden="true"
+        class="icon"
+        fill="currentColor"
+        height="1.5rem"
+        style="--icon-size: 1.5rem;"
+        viewBox="0 0 24 24"
+        width="1.5rem"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
+        />
+      </svg>
+    </span>
   </button>
   <div
     class="modal-header"
@@ -817,42 +946,45 @@ exports[`Modal WithCriticalButton story renders snapshot 1`] = `
 
 exports[`Modal WithLongTextScrollable story renders snapshot 1`] = `
 <div
-  aria-labelledby="headlessui-dialog-title-:r5:"
+  aria-labelledby="headlessui-dialog-title-:r8:"
   aria-modal="true"
   class="modal"
   data-headlessui-state="open"
-  id="headlessui-dialog-:r3:"
+  id="headlessui-dialog-:r6:"
   role="dialog"
 >
   <div
     aria-hidden="true"
-    class="modal__overlay"
+    class="modal__overlay modal__overlay--emphasis-low"
     data-headlessui-state="open"
-    id="headlessui-dialog-overlay-:r4:"
+    id="headlessui-dialog-overlay-:r7:"
   />
   <div
-    class="modal__content modal__content--scrollable modal__content--md modal__content--lg"
+    class="modal__content modal__content--scrollable modal__content--lg"
   >
     <button
-      class="modal__close-button"
+      aria-label="close"
+      class="button button--context-default button--layout-icon-only button--tertiary button--lg button--variant-neutral modal__close-button"
+      type="button"
     >
-      <svg
-        class="icon modal__close-icon"
-        fill="currentColor"
-        height="1.5rem"
-        role="img"
-        style="--icon-size: 1.5rem;"
-        viewBox="0 0 24 24"
-        width="1.5rem"
-        xmlns="http://www.w3.org/2000/svg"
+      <span
+        class="button__text"
       >
-        <title>
-          close modal
-        </title>
-        <path
-          d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
-        />
-      </svg>
+        <svg
+          aria-hidden="true"
+          class="icon"
+          fill="currentColor"
+          height="1.5rem"
+          style="--icon-size: 1.5rem;"
+          viewBox="0 0 24 24"
+          width="1.5rem"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M18.3 5.71c-.39-.39-1.02-.39-1.41 0L12 10.59 7.11 5.7c-.39-.39-1.02-.39-1.41 0-.39.39-.39 1.02 0 1.41L10.59 12 5.7 16.89c-.39.39-.39 1.02 0 1.41.39.39 1.02.39 1.41 0L12 13.41l4.89 4.89c.39.39 1.02.39 1.41 0 .39-.39.39-1.02 0-1.41L13.41 12l4.89-4.89c.38-.38.38-1.02 0-1.4z"
+          />
+        </svg>
+      </span>
     </button>
     <div
       class="modal-header"
@@ -860,7 +992,7 @@ exports[`Modal WithLongTextScrollable story renders snapshot 1`] = `
       <h2
         class="heading heading--headline-md"
         data-headlessui-state="open"
-        id="headlessui-dialog-title-:r5:"
+        id="headlessui-dialog-title-:r8:"
       >
         Modal Title
       </h2>