LG-4952: Updates Modal component to use dialog element

.changeset/soft-files-explain.md

@@ -0,0 +1,7 @@
+---
+'@leafygreen-ui/confirmation-modal': major
+'@leafygreen-ui/marketing-modal': major
+'@leafygreen-ui/modal': major
+---
+
+Upgrades components to use the native `dialog` HTML element. This means we no longer have to handle focus trapping ourselves, and can rely on the browser to do that for us. The API for all modal components is not changing, but the DOM structure of the Modal components themselves have changed drastically, as well as where they are placed within the DOM itself.

packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.spec.tsx

@@ -1,10 +1,5 @@
 import React, { useState } from 'react';
-import {
-  act,
-  fireEvent,
-  render,
-  waitForElementToBeRemoved,
-} from '@testing-library/react';
+import { act, fireEvent, render, waitFor } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import { axe } from 'jest-axe';
 
@@ -22,10 +17,12 @@
   return (
     <ConfirmationModal
       title="Title text"
-      buttonText="Confirm"
+      confirmButtonProps={{
+        onClick: () => setOpen(false),
+        children: 'Confirm',
+      }}
+      cancelButtonProps={{ onClick: () => setOpen(false) }}
       open={open}
-      onConfirm={() => setOpen(false)}
-      onCancel={() => setOpen(false)}
       {...props}
     >
       {props.children ?? 'Content text'}
@@ -40,6 +37,26 @@
 }
 
 describe('packages/confirmation-modal', () => {
+  beforeAll(() => {
+    HTMLDialogElement.prototype.show = jest.fn(function mock(
+      this: HTMLDialogElement,
+    ) {
+      this.open = true;
+    });
+
+    HTMLDialogElement.prototype.showModal = jest.fn(function mock(
+      this: HTMLDialogElement,
+    ) {
+      this.open = true;
+    });
+
+    HTMLDialogElement.prototype.close = jest.fn(function mock(
+      this: HTMLDialogElement,
+    ) {
+      this.open = false;
+    });
+  });
+
   describe('a11y', () => {
     test('does not have basic accessibility issues', async () => {
       const { container, getByText } = renderModal({ open: true });
@@ -55,9 +72,10 @@
     });
   });
 
-  test('does not render if closed', () => {
-    renderModal();
-    expect(document.body.innerHTML).toEqual('<div></div>');
+  test('is not visible when closed', () => {
+    const { getByRole } = renderModal();
+    const dialog = getByRole('dialog', { hidden: true });
+    expect(dialog).not.toBeVisible();
   });
 
   test('renders if open', () => {
@@ -188,21 +206,19 @@
   describe('closes when', () => {
     test('escape key is pressed', async () => {
       const { getByRole } = renderModal({ open: true });
-      const modal = getByRole('dialog');
 
       fireEvent.keyDown(document, { key: 'Escape', keyCode: 27 });
 
-      await waitForElementToBeRemoved(modal);
+      await waitFor(() => getByRole('dialog', { hidden: true }));
     });
 
     test('x icon is clicked', async () => {
       const { getByLabelText, getByRole } = renderModal({ open: true });
-      const modal = getByRole('dialog');
 
       const x = getByLabelText('Close modal');
       fireEvent.click(x);
 
-      await waitForElementToBeRemoved(modal);
+      await waitFor(() => getByRole('dialog', { hidden: true }));
     });
   });
 
@@ -271,7 +287,7 @@
               requiredInputText,
             });
 
           const modal = getByRole('dialog');
           const confirmationButton = await findByTestId(
             LGIDS_CONFIRMATION_MODAL.confirm,
           );
@@ -298,7 +314,7 @@
 
           userEvent.click(buttonToClick);
 
-          await waitForElementToBeRemoved(modal);
+          await waitFor(() => getByRole('dialog', { hidden: true }));
 
           rerender(
             <ConfirmationModal
@@ -349,13 +365,12 @@
       const confirmationButton = getByText('Confirm').closest('button');
       expect(confirmationButton).toHaveAttribute('aria-disabled', 'false');
 
-      const modal = getByRole('dialog');
       const button = getByText('Confirm');
       expect(button).toBeVisible();
 
       // Modal doesn't close when button is clicked
       fireEvent.click(button);
-      await waitForElementToBeRemoved(modal);
+      await waitFor(() => getByRole('dialog', { hidden: true }));
     });
 
     test('"confirmButtonProps" has "disabled: false"', async () => {
@@ -369,13 +384,12 @@
       const confirmationButton = getByText('Confirm').closest('button');
       expect(confirmationButton).toHaveAttribute('aria-disabled', 'false');
 
-      const modal = getByRole('dialog');
       const button = getByText('Confirm');
       expect(button).toBeVisible();
 
       // Modal doesn't close when button is clicked
       fireEvent.click(button);
-      await waitForElementToBeRemoved(modal);
+      await waitFor(() => getByRole('dialog', { hidden: true }));
     });
   });
 

packages/confirmation-modal/src/ConfirmationModal/ConfirmationModal.tsx

@@ -17,7 +17,7 @@ import {
   buttonStyle,
   contentDarkModeStyles,
   contentStyle,
-  contentVariantStyles,
+  footerStyle,
   textEntryInputStyle,
   titleStyle,
   warningIconStyle,
@@ -40,7 +40,7 @@ export const ConfirmationModal = React.forwardRef(
       cancelButtonProps = {},
       ...modalProps
     }: ConfirmationModalProps,
-    forwardRef: React.ForwardedRef<HTMLDivElement | null>,
+    forwardRef: React.ForwardedRef<HTMLDialogElement | null>,
   ) => {
     const [confirmEnabled, setConfirmEnabled] = useState(!requiredInputText);
     const { theme, darkMode } = useDarkMode(darkModeProp);
@@ -97,13 +97,13 @@ export const ConfirmationModal = React.forwardRef(
     return (
       <Modal
         {...modalProps}
-        contentClassName={baseModalStyle}
+        className={baseModalStyle}
         setOpen={handleCancel}
         darkMode={darkMode}
         ref={forwardRef}
       >
         <div
-          className={cx(contentStyle, contentVariantStyles[variant], {
+          className={cx(contentStyle, {
             [contentDarkModeStyles]: darkMode,
           })}
         >
@@ -125,7 +125,7 @@ export const ConfirmationModal = React.forwardRef(
           {children}
           {textEntryConfirmation}
         </div>
-        <Footer>
+        <Footer className={footerStyle}>
           <Button
             {...confirmButtonProps}
             data-testid={LGIDS_CONFIRMATION_MODAL.confirm}

packages/confirmation-modal/src/ConfirmationModal/styles.ts

@@ -3,16 +3,13 @@ import { Theme } from '@leafygreen-ui/lib';
 import { palette } from '@leafygreen-ui/palette';
 import { typeScales } from '@leafygreen-ui/tokens';
 
-import { Variant } from './ConfirmationModal.types';
-
 export const titleStyle = css`
   line-height: 32px;
   margin-bottom: 10px;
 `;
 
 export const baseModalStyle = css`
   width: 600px;
-  padding: initial;
   letter-spacing: 0;
 `;
 
@@ -25,15 +22,6 @@ export const contentDarkModeStyles = css`
   color: ${palette.gray.light1};
 `;
 
-export const contentVariantStyles: Record<Variant, string> = {
-  [Variant.Default]: css`
-    padding: 40px 36px 0px;
-  `,
-  [Variant.Danger]: css`
-    padding: 40px 36px 0px 78px;
-  `,
-};
-
 export const textEntryInputStyle = css`
   width: 300px;
   margin-top: 14px;
@@ -79,3 +67,8 @@ export const warningIconThemeStyle: Record<Theme, string> = {
     background: ${palette.red.dark2};
   `,
 };
+
+export const footerStyle = css`
+  margin-top: 24px;
+  padding: 0;
+`;

packages/marketing-modal/src/MarketingModal/MarketingModal.spec.tsx

@@ -1,10 +1,5 @@
 import React, { useState } from 'react';
-import {
-  act,
-  fireEvent,
-  render,
-  waitForElementToBeRemoved,
-} from '@testing-library/react';
+import { act, fireEvent, render, waitFor } from '@testing-library/react';
 import { axe } from 'jest-axe';
 
 import MarketingModal from '..';
@@ -39,6 +34,26 @@ function renderModal(
 }
 
 describe('packages/marketing-modal', () => {
+  beforeAll(() => {
+    HTMLDialogElement.prototype.show = jest.fn(function mock(
+      this: HTMLDialogElement,
+    ) {
+      this.open = true;
+    });
+
+    HTMLDialogElement.prototype.showModal = jest.fn(function mock(
+      this: HTMLDialogElement,
+    ) {
+      this.open = true;
+    });
+
+    HTMLDialogElement.prototype.close = jest.fn(function mock(
+      this: HTMLDialogElement,
+    ) {
+      this.open = false;
+    });
+  });
+
   describe('a11y', () => {
     test('does not have basic accessibility issues', async () => {
       const { container, getByText } = renderModal({ open: true });
@@ -53,13 +68,19 @@ describe('packages/marketing-modal', () => {
       expect(newResults).toHaveNoViolations();
     });
   });
-  test('does not render if closed', () => {
-    renderModal();
-    expect(document.body.innerHTML).toEqual('<div></div>');
+
+  test('is not visible when closed', () => {
+    const { getByRole } = renderModal();
+    const dialog = getByRole('dialog', { hidden: true });
+    expect(dialog).not.toBeVisible();
   });
 
-  test('renders if open', () => {
-    const { getByText, getByLabelText } = renderModal({ open: true });
+  test('is visible if open', () => {
+    const { getByText, getByLabelText, getByRole } = renderModal({
+      open: true,
+    });
+    const dialog = getByRole('dialog');
+    expect(dialog).toBeVisible();
     expect(getByLabelText('Image graphic')).toBeVisible();
     expect(getByText('Title text')).toBeVisible();
     expect(getByText('Content text')).toBeVisible();
@@ -112,21 +133,19 @@ describe('packages/marketing-modal', () => {
   describe('closes when', () => {
     test('escape key is pressed', async () => {
       const { getByRole } = renderModal({ open: true });
-      const modal = getByRole('dialog');
 
       fireEvent.keyDown(document, { key: 'Escape', keyCode: 27 });
 
-      await waitForElementToBeRemoved(modal);
+      await waitFor(() => getByRole('dialog', { hidden: true }));
     });
 
     test('x icon is clicked', async () => {
       const { getByLabelText, getByRole } = renderModal({ open: true });
-      const modal = getByRole('dialog');
 
       const x = getByLabelText('Close modal');
       fireEvent.click(x);
 
-      await waitForElementToBeRemoved(modal);
+      await waitFor(() => getByRole('dialog', { hidden: true }));
     });
   });
 

packages/marketing-modal/src/MarketingModal/MarketingModal.styles.ts

@@ -9,7 +9,7 @@ export const titleStyle = css`
 
 export const baseModalStyle = css`
   width: 600px;
-  padding: initial;
+  padding: unset;
   overflow: hidden;
 `;
 

packages/marketing-modal/src/MarketingModal/MarketingModal.tsx

@@ -48,7 +48,7 @@ const MarketingModal = ({
   return (
     <Modal
       {...modalProps}
-      contentClassName={baseModalStyle}
+      className={baseModalStyle}
       setOpen={onClose}
       darkMode={darkMode}
       closeIconColor={closeIconColor}