Feat(web-react): ModalHeader hide close button prop DS-1063

- New prop for ModalHeader to hide the close button
- New prop for disable escape key to close the modal
- Added new demo with those new props

packages/web-react/src/components/Dialog/Dialog.tsx

@@ -7,7 +7,7 @@ import { useDialog } from './useDialog';
 // Solved using `as MutableRefObject<HTMLDialogElement | null>` but I do not like it
 
 const Dialog = (props: DialogProps, ref: ForwardedRef<HTMLDialogElement | null>): JSX.Element => {
-  const { children, isOpen, onClose, closeOnBackdropClick = true, ...restProps } = props;
+  const { children, isOpen, onClose, closeOnBackdropClick = true, closeOnEscapeKeyDown, ...restProps } = props;
   const dialogElementRef: MutableRefObject<ForwardedRef<HTMLDialogElement | null>> = useRef(ref);
   const contentElementRef: MutableRefObject<HTMLElement | null> = useRef(null);
 
@@ -28,7 +28,12 @@ const Dialog = (props: DialogProps, ref: ForwardedRef<HTMLDialogElement | null>)
   });
 
   // handles closing using Escape key
-  useCancelEvent(dialogElementRef as MutableRefObject<HTMLDialogElement | null>, onClose);
+  useCancelEvent(
+    dialogElementRef as MutableRefObject<HTMLDialogElement | null>,
+    onClose,
+    closeOnEscapeKeyDown as boolean,
+    isOpen,
+  );
 
   /**
    * Make sure that there is only one child wrapped in dialog element.

packages/web-react/src/components/Modal/ModalHeader.tsx

@@ -6,8 +6,13 @@ import ModalCloseButton from './ModalCloseButton';
 import { useModalContext } from './ModalContext';
 import { useModalStyleProps } from './useModalStyleProps';
 
+const defaultProps: ModalHeaderProps = {
+  hideCloseButton: false,
+};
+
 const ModalHeader = (props: ModalHeaderProps) => {
-  const { children, closeLabel = 'Close', ...restProps } = props;
+  const propsWithDefaults = { ...defaultProps, ...props };
+  const { children, closeLabel, hideCloseButton, ...restProps } = propsWithDefaults;
 
   const { classProps } = useModalStyleProps();
   const { styleProps, props: otherProps } = useStyleProps(restProps);
@@ -20,7 +25,7 @@ const ModalHeader = (props: ModalHeaderProps) => {
           {children}
         </h2>
       )}
-      <ModalCloseButton id={id} isOpen={isOpen} label={closeLabel} onClose={onClose} />
+      {!hideCloseButton && <ModalCloseButton id={id} isOpen={isOpen} label={closeLabel} onClose={onClose} />}
     </header>
   );
 };

packages/web-react/src/components/Modal/README.md

@@ -60,14 +60,15 @@ Example:
 
 ### API
 
-| Name                   | Type                                           | Default  | Required | Description                                           |
-| ---------------------- | ---------------------------------------------- | -------- | -------- | ----------------------------------------------------- |
-| `alignmentY`           | [AlignmentY dictionary][dictionary-alignment]  | `center` | ✕        | Vertical alignment of modal                           |
-| `children`             | `ReactNode`                                    | —        | ✕        | Children node                                         |
-| `closeOnBackdropClick` | `bool`                                         | `true`   | ✕        | Whether the modal will close when backdrop is clicked |
-| `id`                   | `string`                                       | —        | ✓        | Modal ID                                              |
-| `isOpen`               | `bool`                                         | `false`  | ✓        | Open state                                            |
-| `onClose`              | `(event: ClickEvent or KeyboardEvent) => void` | —        | ✓        | Callback on dialog closed                             |
+| Name                   | Type                                           | Default  | Required | Description                                             |
+| ---------------------- | ---------------------------------------------- | -------- | -------- | ------------------------------------------------------- |
+| `alignmentY`           | [AlignmentY dictionary][dictionary-alignment]  | `center` | ✕        | Vertical alignment of modal                             |
+| `children`             | `ReactNode`                                    | —        | ✕        | Children node                                           |
+| `closeOnBackdropClick` | `bool`                                         | `true`   | ✕        | Whether the modal will close when backdrop is clicked   |
+| `closeOnEscapeKeyDown` | `bool`                                         | `true`   | ✕        | Whether the modal will close when escape key is pressed |
+| `id`                   | `string`                                       | —        | ✓        | Modal ID                                                |
+| `isOpen`               | `bool`                                         | `false`  | ✓        | Open state                                              |
+| `onClose`              | `(event: ClickEvent or KeyboardEvent) => void` | —        | ✓        | Callback on dialog closed                               |
 
 Also, all properties of the [`<dialog>` element][mdn-dialog] are supported.
 
@@ -165,12 +166,26 @@ accessible name for the dialog, e.g. using the `aria-label` attribute on
 </Modal>
 ```
 
+### Hidden Close Button
+
+The close button can by hidden by adding `hideCloseButton` prop to `ModalHeader` component.
+
+```jsx
+<Modal id="modal-example">
+  <ModalDialog>
+    <ModalHeader hideCloseButton />
+    <ModalBody>…</ModalBody>
+  </ModalDialog>
+</Modal>
+```
+
 ### API
 
-| Name         | Type        | Default | Required | Description        |
-| ------------ | ----------- | ------- | -------- | ------------------ |
-| `children`   | `ReactNode` | —       | ✕        | Children node      |
-| `closeLabel` | `string`    | —       | ✕        | Close button label |
+| Name              | Type        | Default | Required | Description                    |
+| ----------------- | ----------- | ------- | -------- | ------------------------------ |
+| `children`        | `ReactNode` | —       | ✕        | Children node                  |
+| `closeLabel`      | `string`    | `Close` | ✕        | Close button label             |
+| `hideCloseButton` | `bool`      | `false` | ✕        | Whether close button is hidden |
 
 On top of the API options, the components accept [additional attributes][readme-additional-attributes].
 If you need more control over the styling of a component, you can use [style props][readme-style-props]

packages/web-react/src/components/Modal/__tests__/ModalHeader.test.tsx

@@ -1,4 +1,6 @@
 import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import React from 'react';
 import { classNamePrefixProviderTest } from '../../../../tests/providerTests/classNamePrefixProviderTest';
 import { restPropsTest } from '../../../../tests/providerTests/restPropsTest';
 import { stylePropsTest } from '../../../../tests/providerTests/stylePropsTest';
@@ -10,4 +12,24 @@ describe('ModalHeader', () => {
   stylePropsTest(ModalHeader);
 
   restPropsTest(ModalHeader, 'header');
+
+  it('should have close button', () => {
+    render(<ModalHeader id="test">Modal Title</ModalHeader>);
+
+    const closeButton = screen.getByRole('button');
+
+    expect(closeButton).toBeInTheDocument();
+  });
+
+  it('should not have close button', () => {
+    render(
+      <ModalHeader id="test" hideCloseButton>
+        Modal Title
+      </ModalHeader>,
+    );
+
+    const closeButton = screen.queryByRole('button');
+
+    expect(closeButton).not.toBeInTheDocument();
+  });
 });

packages/web-react/src/components/Modal/demo/ModalHiddenCloseButton.tsx

@@ -0,0 +1,48 @@
+import React, { useState } from 'react';
+import { Button } from '../../Button';
+import Modal from '../Modal';
+import ModalBody from '../ModalBody';
+import ModalDialog from '../ModalDialog';
+import ModalFooter from '../ModalFooter';
+import ModalHeader from '../ModalHeader';
+
+const ModalHiddenCloseButton = () => {
+  const [isOpen, setOpen] = useState(false);
+  const toggleModal = () => setOpen(!isOpen);
+  const handleClose = () => setOpen(false);
+
+  return (
+    <>
+      <Button onClick={toggleModal}>Open Modal</Button>
+
+      <Modal
+        id="example-hidden-close-button"
+        isOpen={isOpen}
+        onClose={handleClose}
+        closeOnBackdropClick={false}
+        closeOnEscapeKeyDown={false}
+      >
+        <ModalDialog>
+          <ModalHeader id="example-hidden-close-button" hideCloseButton>
+            Modal Title
+          </ModalHeader>
+          <ModalBody>
+            <p>
+              Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam at excepturi laudantium magnam mollitia
+              perferendis reprehenderit, voluptate. Cum delectus dicta ducimus eligendi excepturi natus perferendis
+              provident unde. Eveniet, iste, molestiae?
+            </p>
+          </ModalBody>
+          <ModalFooter>
+            <Button onClick={handleClose}>Primary action</Button>
+            <Button color="secondary" onClick={handleClose}>
+              Secondary action
+            </Button>
+          </ModalFooter>
+        </ModalDialog>
+      </Modal>
+    </>
+  );
+};
+
+export default ModalHiddenCloseButton;

packages/web-react/src/components/Modal/demo/index.tsx

@@ -9,6 +9,7 @@ import DocsSection from '../../../../docs/DocsSections';
 import { IconsProvider } from '../../../context';
 import ModalDefault from './ModalDefault';
 import ModalDisabledBackdropClick from './ModalDisabledBackdropClick';
+import ModalHiddenCloseButton from './ModalHiddenCloseButton';
 import ModalScrollingLongContent from './ModalScrollingLongContent';
 import ModalStacking from './ModalStacking';
 
@@ -27,6 +28,9 @@ ReactDOM.createRoot(document.getElementById('root') as HTMLElement).render(
       <DocsSection title="Disabled Backdrop Click">
         <ModalDisabledBackdropClick />
       </DocsSection>
+      <DocsSection title="Hidden Close Button">
+        <ModalHiddenCloseButton />
+      </DocsSection>
     </IconsProvider>
   </React.StrictMode>,
 );

packages/web-react/src/components/Modal/stories/Modal.stories.tsx

@@ -33,12 +33,28 @@ const meta: Meta<typeof Modal> = {
         defaultValue: { summary: 'false' },
       },
     },
+    closeOnBackdropClick: {
+      control: 'boolean',
+      description: 'Whether the modal should close when the backdrop is clicked',
+      table: {
+        defaultValue: { summary: 'true' },
+      },
+    },
+    closeOnEscapeKeyDown: {
+      control: 'boolean',
+      description: 'Whether the modal should close when the escape key is pressed',
+      table: {
+        defaultValue: { summary: 'true' },
+      },
+    },
   },
   args: {
     alignmentY: AlignmentY.CENTER,
     id: 'modal',
     isOpen: false,
     onClose: fn(),
+    closeOnEscapeKeyDown: true,
+    closeOnBackdropClick: true,
   },
 };
 

packages/web-react/src/components/Modal/stories/ModalHeader.stories.tsx

@@ -13,13 +13,23 @@ const meta: Meta<typeof ModalHeader> = {
     },
     closeLabel: {
       control: 'text',
+      description: 'The label for the close button',
       table: {
         defaultValue: { summary: 'Close' },
       },
     },
+    hideCloseButton: {
+      control: 'boolean',
+      description: 'Whether to hide the close button',
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
   },
   args: {
     children: 'Modal Header',
+    closeLabel: 'Close',
+    hideCloseButton: false,
   },
 };
 

packages/web-react/src/hooks/useCancelEvent.ts

@@ -1,25 +1,61 @@
-import { useCallback, useEffect, MutableRefObject } from 'react';
+import { useCallback, MutableRefObject } from 'react';
+import { useIsomorphicLayoutEffect } from './useIsomorphicLayoutEffect';
+
+// TODO: Remove `isOpen` and listeners with `handleKeyDown` when Chrome fixes the bug,
+// right now Chrome is bugged and sends un-cancelable events, so closing modal based on
+// `cancel` event is not possible in chrome.
+// FireFox and Safari are working fine.
 
 const EVENT_CANCEL = 'cancel';
+const EVENT_KEYDOWN = 'keydown'; // ! Removed when bug in chrome will be fixed
 
-export const useCancelEvent = (ref: MutableRefObject<HTMLElement | null>, callback: (event: Event) => void) => {
+export const useCancelEvent = (
+  ref: MutableRefObject<HTMLElement | null>,
+  callback: (event: Event) => void,
+  closeOnEscapeKeyDown: boolean = true,
+  isOpen: boolean = false, // ! Removed when bug in chrome will be fixed
+) => {
   const handleCancel = useCallback(
     (event: Event) => {
+      // Do nothing if there is no reference or no callback
+      if (!ref || !callback) {
+        return;
+      }
+
+      // Do nothing if the event was already processed.
+      if (event.defaultPrevented) {
+        return;
+      }
+
       event.preventDefault();
 
-      callback(event);
+      if (callback && closeOnEscapeKeyDown) {
+        callback(event);
+      }
+    },
+    [ref, callback, closeOnEscapeKeyDown],
+  );
+
+  // ! Removed when bug in chrome will be fixed
+  const handleKeyDown = useCallback(
+    (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && !closeOnEscapeKeyDown && isOpen) {
+        event.preventDefault();
+      }
     },
-    [callback],
+    [closeOnEscapeKeyDown, isOpen],
   );
 
-  useEffect(() => {
+  useIsomorphicLayoutEffect(() => {
     const node = ref?.current;
 
     if (node) {
       node.addEventListener(EVENT_CANCEL, handleCancel);
+      document.addEventListener(EVENT_KEYDOWN, handleKeyDown); // ! Removed when bug in chrome will be fixed
 
       return () => {
         node.removeEventListener(EVENT_CANCEL, handleCancel);
+        document.removeEventListener(EVENT_KEYDOWN, handleKeyDown); // ! Removed when bug in chrome will be fixed
       };
     }
 

packages/web-react/src/types/modal.ts

@@ -17,11 +17,12 @@ export type ModalDialogHandlingProps = {
   isOpen: boolean;
   onClose: (event: ClickEvent) => void;
   closeOnBackdropClick?: boolean;
+  closeOnEscapeKeyDown?: boolean;
 };
 
 export interface ModalCloseButtonProps extends ModalDialogHandlingProps {
   id: string;
-  label: string;
+  label?: string;
 }
 
 export type ModalDialogBaseProps<E extends ElementType = ModalDialogElementType> = {
@@ -49,6 +50,7 @@ export interface ModalBodyProps extends SpiritDivElementProps, ChildrenProps {}
 
 export interface ModalHeaderProps extends SpiritElementProps, ChildrenProps {
   closeLabel?: string;
+  hideCloseButton?: boolean;
 }
 
 export interface ModalFooterProps extends SpiritElementProps, ChildrenProps {