fixup! Fix(web-react): HeaderDialog demo missed closeOnBackdropClick …

…prop
lmc-eu · Nov 30, 2023 · a9f7a23 · a9f7a23
1 parent bbbc2e9
commit a9f7a23
Show file tree

Hide file tree

Showing 5 changed files with 13 additions and 20 deletions.
diff --git a/packages/web-react/src/components/Dialog/Dialog.tsx b/packages/web-react/src/components/Dialog/Dialog.tsx
@@ -7,7 +7,7 @@ import { useCancelEvent, useClickOutside } from '../../hooks';
 // 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, ...restProps } = props;
+  const { children, isOpen, onClose, closeOnBackdropClick = true, ...restProps } = props;
   const dialogElementRef: MutableRefObject<ForwardedRef<HTMLDialogElement | null>> = useRef(ref);
   const contentElementRef: MutableRefObject<HTMLElement | null> = useRef(null);
 

diff --git a/packages/web-react/src/components/Header/README.md b/packages/web-react/src/components/Header/README.md
@@ -294,15 +294,15 @@ const [isOpen, setOpen] = useState(false);
 
 ### API
 
-| Name                   | Type                                           | Default | Required | Description                                           |
-| ---------------------- | ---------------------------------------------- | ------- | -------- | ----------------------------------------------------- |
-| `children`             | `ReactNode`                                    | —       | ✕        | Children node                                         |
-| `closeOnBackdropClick` | `bool`                                         | `true`  | ✕        | Whether the modal will close when backdrop is clicked |
-| `id`                   | `string`                                       | —       | ✔        | ID to be linked in HeaderMobileActions                |
-| `isOpen`               | `bool`                                         | `false` | ✔        | Open state                                            |
-| `onClose`              | `(event: ClickEvent or KeyboardEvent) => void` | —       | ✔        | Callback for dialog when closed                       |
-| `UNSAFE_className`     | `string`                                       | —       | ✕        | HeaderDialog custom class name                        |
-| `UNSAFE_style`         | `CSSProperties`                                | —       | ✕        | HeaderDialog custom style                             |
+| Name                   | Type                                           | Default | Required | Description                                                  |
+| ---------------------- | ---------------------------------------------- | ------- | -------- | ------------------------------------------------------------ |
+| `children`             | `ReactNode`                                    | —       | ✕        | Children node                                                |
+| `closeOnBackdropClick` | `bool`                                         | `true`  | ✕        | Whether the HeaderDialog will close when backdrop is clicked |
+| `id`                   | `string`                                       | —       | ✔        | ID to be linked in HeaderMobileActions                       |
+| `isOpen`               | `bool`                                         | `false` | ✔        | Open state                                                   |
+| `onClose`              | `(event: ClickEvent or KeyboardEvent) => void` | —       | ✔        | Callback for dialog when closed                              |
+| `UNSAFE_className`     | `string`                                       | —       | ✕        | HeaderDialog custom class name                               |
+| `UNSAFE_style`         | `CSSProperties`                                | —       | ✕        | HeaderDialog custom style                                    |
 
 The component further inherits properties from the [`<dialog>`][mdn-dialog-element] element.
 

diff --git a/packages/web-react/src/components/Header/demo/HeaderInvertedWithActions.tsx b/packages/web-react/src/components/Header/demo/HeaderInvertedWithActions.tsx
@@ -54,7 +54,7 @@ const HeaderInvertedWithActions = () => {
           <Button color="inverted">Enterprise</Button>
         </HeaderDesktopActions>
       </Header>
-      <HeaderDialog id="header_dialog_example" isOpen={isOpen} onClose={handleClose} closeOnBackdropClick>
+      <HeaderDialog id="header_dialog_example" isOpen={isOpen} onClose={handleClose}>
         <HeaderDialogCloseButton />
         <HeaderDialogActions color="primary" aria-label="Main navigation">
           <HeaderDialogNav>

diff --git a/packages/web-react/src/components/Header/demo/HeaderInvertedWithActionsAndDialog.tsx b/packages/web-react/src/components/Header/demo/HeaderInvertedWithActionsAndDialog.tsx
@@ -73,13 +73,7 @@ const HeaderInvertedWithActionsAndDialog = () => {
           </Button>
         </HeaderDesktopActions>
       </Header>
-      <HeaderDialog
-        id="header_dialog_example_1"
-        aria-label="Menu"
-        isOpen={isMenuOpen}
-        onClose={handleMenuClose}
-        closeOnBackdropClick
-      >
+      <HeaderDialog id="header_dialog_example_1" aria-label="Menu" isOpen={isMenuOpen} onClose={handleMenuClose}>
         <HeaderDialogCloseButton />
         <HeaderDialogActions color="primary" aria-label="Main navigation">
           <HeaderDialogNav>

diff --git a/packages/web-react/src/components/Modal/Modal.tsx b/packages/web-react/src/components/Modal/Modal.tsx
@@ -7,7 +7,7 @@ import { ModalProvider } from './ModalContext';
 import Dialog from '../Dialog/Dialog';
 
 const Modal = (props: SpiritModalProps) => {
-  const { children, isOpen, onClose, closeOnBackdropClick = true, id, ...restProps } = props;
+  const { children, isOpen, onClose, id, ...restProps } = props;
   const { classProps } = useModalStyleProps();
   const { styleProps, props: otherProps } = useStyleProps(restProps);
 
@@ -27,7 +27,6 @@ const Modal = (props: SpiritModalProps) => {
         id={id}
         isOpen={isOpen}
         onClose={onClose}
-        closeOnBackdropClick={closeOnBackdropClick}
         className={classNames(classProps.root, styleProps.className)}
         aria-labelledby={`${id}__title`}
       >