Fix(web-react): HeaderDialog demo missed closeOnBackdropClick prop

- Added closeOnBackdropClick prop to HeaderDialog demo to show it is possible to close the dialog when clicking on backdrop - Updated HeaderDialog API table to show the new prop solve #DS-1075
lmc-eu · Nov 30, 2023 · bbbc2e9 · bbbc2e9
1 parent c0ec4aa
commit bbbc2e9
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 23 deletions.
diff --git a/packages/web-react/src/components/Header/README.md b/packages/web-react/src/components/Header/README.md
@@ -6,19 +6,38 @@ your specific design goals.
 
 The Header is a composition of several subcomponents:
 
-- [Header](#minimal-header)
-  - [HeaderMobileActions](#mobile-only-actions)
-  - [HeaderDesktopActions](#desktop-only-actions)
-    - [HeaderNav](#navigation)
-      - [HeaderNavItem](#navigation)
-        - [HeaderLink](#navigation)
-- [HeaderDialog](#header-dialog)
-  - [HeaderDialogCloseButton](#close-button)
-  - [HeaderDialogActions](#primary-and-secondary-actions)
-    - [HeaderDialogNav](#navigation-1)
-      - [HeaderDialogNavItem](#navigation-1)
-        - [HeaderDialogLink](#navigation-1)
-        - [HeaderDialogText](#navigation-1)
+- [Header and HeaderDialog](#header-and-headerdialog)
+  - [Accessibility Guidelines](#accessibility-guidelines)
+  - [Minimal Header](#minimal-header)
+  - [Color Variants](#color-variants)
+  - [Simple Header](#simple-header)
+  - [API](#api)
+  - [Supported Content](#supported-content)
+  - [Header](#header)
+    - [Mobile-Only Actions](#mobile-only-actions)
+      - [Custom Mobile Actions](#custom-mobile-actions)
+      - [API](#api-1)
+    - [Desktop-Only Actions](#desktop-only-actions)
+      - [API](#api-2)
+      - [Navigation](#navigation)
+      - [Other Content](#other-content)
+        - [HeaderNav API](#headernav-api)
+        - [HeaderNavItem API](#headernavitem-api)
+        - [HeaderLink API](#headerlink-api)
+        - [HeaderButton API](#headerbutton-api)
+  - [Header Dialog](#header-dialog)
+    - [API](#api-3)
+    - [Close Button](#close-button)
+      - [API](#api-4)
+    - [Primary and Secondary Actions](#primary-and-secondary-actions)
+      - [API](#api-5)
+      - [Navigation](#navigation-1)
+        - [HeaderDialogNav API](#headerdialognav-api)
+        - [HeaderDialogNavItem API](#headerdialognavitem-api)
+        - [HeaderDialogLink API](#headerdialoglink-api)
+        - [HeaderDialogButton API](#headerdialogbutton-api)
+        - [HeaderDialogText API](#headerdialogtext-api)
+  - [Composition](#composition)
 
 ## Accessibility Guidelines
 
@@ -275,14 +294,15 @@ const [isOpen, setOpen] = useState(false);
 
 ### API
 
-| Name               | Type                                           | Default | Required | Description                            |
-| ------------------ | ---------------------------------------------- | ------- | -------- | -------------------------------------- |
-| `children`         | `ReactNode`                                    | —       | ✕        | Children node                          |
-| `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 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                             |
 
 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}>
+      <HeaderDialog id="header_dialog_example" isOpen={isOpen} onClose={handleClose} closeOnBackdropClick>
         <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,7 +73,13 @@ const HeaderInvertedWithActionsAndDialog = () => {
           </Button>
         </HeaderDesktopActions>
       </Header>
-      <HeaderDialog id="header_dialog_example_1" aria-label="Menu" isOpen={isMenuOpen} onClose={handleMenuClose}>
+      <HeaderDialog
+        id="header_dialog_example_1"
+        aria-label="Menu"
+        isOpen={isMenuOpen}
+        onClose={handleMenuClose}
+        closeOnBackdropClick
+      >
         <HeaderDialogCloseButton />
         <HeaderDialogActions color="primary" aria-label="Main navigation">
           <HeaderDialogNav>

diff --git a/packages/web-react/src/types/header.ts b/packages/web-react/src/types/header.ts
@@ -14,6 +14,7 @@ export type HeaderActionsColorType = 'primary' | 'secondary';
 export type HeaderColorType = 'inverted' | 'transparent';
 
 export type HeaderDialogHandlingProps = {
+  closeOnBackdropClick?: boolean;
   isOpen: boolean;
   onClose: (event: ClickEvent) => void;
 };