From bbbc2e97511e0dae4005250a687e6badf329f29a Mon Sep 17 00:00:00 2001 From: Pavel Klibani Date: Thu, 30 Nov 2023 01:04:43 +0100 Subject: [PATCH] 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 --- .../web-react/src/components/Header/README.md | 62 ++++++++++++------- .../Header/demo/HeaderInvertedWithActions.tsx | 2 +- .../HeaderInvertedWithActionsAndDialog.tsx | 8 ++- packages/web-react/src/types/header.ts | 1 + 4 files changed, 50 insertions(+), 23 deletions(-) diff --git a/packages/web-react/src/components/Header/README.md b/packages/web-react/src/components/Header/README.md index 0284ec350e..44f4a813cd 100644 --- 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 [``][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 index 5ec4aa8773..a331b92f07 100644 --- 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 = () => { - + diff --git a/packages/web-react/src/components/Header/demo/HeaderInvertedWithActionsAndDialog.tsx b/packages/web-react/src/components/Header/demo/HeaderInvertedWithActionsAndDialog.tsx index fabe455e9e..fdc6d33c5f 100644 --- 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 = () => { - + diff --git a/packages/web-react/src/types/header.ts b/packages/web-react/src/types/header.ts index c589a57f7b..08e1ac27ac 100644 --- 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; };