feat(Dialog): update dialog design specs (#1288)

---------
Co-authored-by: André Nogueira <[email protected]>
Co-authored-by: Eszter <[email protected]>

Author: 3 people

package-lock.json

@@ -72,7 +72,8 @@
         "react-popper": "2.3.0",
         "react-virtualized": "9.22.5",
         "remove-accents": "0.5.0",
-        "tippy.js": "6.3.7"
+        "tippy.js": "6.3.7",
+        "use-resize-observer": "9.1.0"
     },
     "peerDependencies": {
         "react": ">=16.8.6",

package.json

@@ -0,0 +1,7 @@
+export class ResizeObserverMock {
+    observe = jest.fn();
+
+    unobserve = jest.fn();
+
+    disconnect = jest.fn();
+}

src/__mocks__/resizeObserverMock.js

@@ -1,11 +1,15 @@
 import * as React from 'react';
-import { Dialog, DialogProps } from '../Dialog';
+import { Dialog, ButtonProps, DialogProps } from '../Dialog';
 
-export interface AlertProps extends DialogProps {
+export interface Props {
     /** Alerts do not have cancel button */
     cancelButton?: never;
+    /** Properties of the accept button */
+    acceptButton: ButtonProps;
 }
 
-export const Alert: React.FC<AlertProps> = (props) => <Dialog {...props} />;
+export const Alert: React.FC<Props & DialogProps> = ({ acceptButton, onRequestClose, ...rest }) => (
+    <Dialog acceptButton={acceptButton} onRequestClose={acceptButton.onClick} {...rest} />
+);
 
 Alert.displayName = 'Alert';

src/components/Dialogs/Alert/Alert.tsx

@@ -3,12 +3,16 @@ import { render, RenderResult, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 import '@testing-library/jest-dom';
 import { Alert } from '../Alert';
+import { ResizeObserverMock } from '../../../../__mocks__/resizeObserverMock';
 
 describe('Alert', () => {
     const mockOnAccept = jest.fn();
+    const mockOnClose = jest.fn();
     let view: RenderResult;
 
     beforeEach(() => {
+        global.ResizeObserver = ResizeObserverMock;
+
         view = render(
             <Alert
                 isOpen
@@ -32,6 +36,7 @@ describe('Alert', () => {
             <Alert
                 isOpen
                 acceptButton={{ onClick: mockOnAccept, label: 'OK' }}
+                closeButton={{ onClick: mockOnClose, label: 'Close' }}
                 ariaHideApp={false}
                 contentLabel="Content label"
                 title="Title"
@@ -46,7 +51,7 @@ describe('Alert', () => {
 
     it('should call onAccept cb when button is clicked', async () => {
         const user = userEvent.setup();
-        await user.click(screen.getByRole('button'));
+        await user.click(screen.getByRole('button', { name: /OK/i }));
 
         expect(mockOnAccept).toHaveBeenCalledTimes(1);
     });

src/components/Dialogs/Alert/__tests__/Alert.spec.tsx

@@ -30,7 +30,6 @@ exports[`Alert should render correctly 1`] = `
       >
         <div
           class="Dialog__content"
-          role="alert"
         >
           Body of the alert
         </div>
@@ -82,14 +81,41 @@ exports[`Alert should render correctly with title 1`] = `
         tabindex="-1"
       >
         <div
-          class="Dialog__content"
+          class="Dialog__header"
           role="alert"
         >
-          <h2
-            class="Heading Heading--level_h2 Dialog__title"
+          <h3
+            class="Heading Heading--level_h3 Dialog__title"
           >
             Title
-          </h2>
+          </h3>
+          <button
+            aria-label="Close"
+            class="Button Button--variant_ghost Button--context_secondary Dialog__closeButton"
+            type="button"
+          >
+            <svg
+              fill="currentColor"
+              height="1em"
+              stroke="currentColor"
+              stroke-width="0"
+              viewBox="0 0 24 24"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M0 0h24v24H0z"
+                fill="none"
+              />
+              <path
+                d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+              />
+            </svg>
+          </button>
+        </div>
+        <div
+          class="Dialog__content"
+        >
           Body of the alert
         </div>
         <div

src/components/Dialogs/Alert/__tests__/__snapshots__/Alert.spec.tsx.snap

@@ -1 +1 @@
-export { Alert, AlertProps } from './Alert';
+export { Alert, Props as AlertProps } from './Alert';

src/components/Dialogs/Alert/index.ts

@@ -1,11 +1,23 @@
 import * as React from 'react';
 import { Dialog, DialogProps, ButtonProps } from '../Dialog';
 
-export interface ConfirmProps extends DialogProps {
+export interface Props {
     /** Properties of the cancel button */
     cancelButton: ButtonProps;
 }
 
-export const Confirm: React.FC<ConfirmProps> = (props) => <Dialog {...props} />;
+export const Confirm: React.FC<Props & DialogProps> = ({
+    cancelButton,
+    onRequestClose,
+    ...rest
+}) => (
+    <Dialog
+        cancelButton={cancelButton}
+        shouldCloseOnEsc
+        shouldCloseOnOverlayClick={false}
+        onRequestClose={cancelButton.onClick}
+        {...rest}
+    />
+);
 
 Confirm.displayName = 'Confirm';

src/components/Dialogs/Confirm/Confirm.tsx

@@ -5,11 +5,16 @@ import '@testing-library/jest-dom';
 import { Confirm } from '../Confirm';
 
 describe('Confirm', () => {
-    const mockOnAccept = jest.fn();
-    const mockOnCancel = jest.fn();
+    let mockOnAccept: jest.Mock;
+    let mockOnCancel: jest.Mock;
+    let mockOnClose: jest.Mock;
     let view: RenderResult;
 
     beforeEach(() => {
+        mockOnAccept = jest.fn();
+        mockOnCancel = jest.fn();
+        mockOnClose = jest.fn();
+
         view = render(
             <Confirm
                 isOpen
@@ -35,6 +40,7 @@ describe('Confirm', () => {
                 isOpen
                 acceptButton={{ onClick: mockOnAccept, label: 'OK' }}
                 cancelButton={{ onClick: mockOnCancel, label: 'Cancel' }}
+                closeButton={{ onClick: mockOnClose, label: 'Close' }}
                 ariaHideApp={false}
                 contentLabel="Content Label"
                 title="Title"
@@ -47,16 +53,38 @@ describe('Confirm', () => {
         expect(screen.getAllByRole('heading')).toHaveLength(1);
     });
 
-    it('should call onCancel callback when button is clicked', async () => {
+    it('should call onAccept callback when OK button is clicked', async () => {
         const user = userEvent.setup();
-        await user.click(screen.getAllByRole('button')[1]);
+        await user.click(screen.getByRole('button', { name: 'OK' }));
 
         expect(mockOnAccept).toHaveBeenCalledTimes(1);
     });
-    it('should call onCancel callback when button is clicked', async () => {
+
+    it('should call onCancel callback when cancel button is clicked', async () => {
         const user = userEvent.setup();
-        await user.click(screen.getAllByRole('button')[0]);
+        await user.click(screen.getByRole('button', { name: 'Cancel' }));
 
         expect(mockOnCancel).toHaveBeenCalledTimes(1);
     });
+
+    it('should call onCancel callback when close button is clicked', async () => {
+        view.rerender(
+            <Confirm
+                isOpen
+                acceptButton={{ onClick: mockOnAccept, label: 'OK' }}
+                cancelButton={{ onClick: mockOnCancel, label: 'Cancel' }}
+                closeButton={{ onClick: mockOnClose, label: 'Close' }}
+                ariaHideApp={false}
+                contentLabel="Content Label"
+                title="Title"
+            >
+                Body of the confirm
+            </Confirm>
+        );
+
+        const user = userEvent.setup();
+        await user.click(screen.getByLabelText('Close'));
+
+        expect(mockOnClose).toHaveBeenCalledTimes(1);
+    });
 });