diff --git a/src/components/Modal/README.md b/src/components/Modal/README.md index 46fc0ad..0558370 100644 --- a/src/components/Modal/README.md +++ b/src/components/Modal/README.md @@ -41,6 +41,8 @@ import { BBBModal } from 'bbb-ui-components-react'; | `noFooter` | `boolean` | `false` | Hides the modal footer. | | `footerContent` | `React.ReactNode` | `null` | Custom content for the footer. | | `stickyFooter` | `boolean` | `true` | Makes the footer sticky. | +| `testId` | `string` | — | Test identifier applied to the modal element (native `ReactModal` prop). | +| `closeButtonDataTest` | `string` | — | Test identifier applied to the close button. Omitted if empty. | | `children` | `React.ReactNode` | — | Modal content. | | `...props` | `ReactModal.Props` | — | Any other props are passed down to the underlying `react-modal` instance. | diff --git a/src/components/Modal/component.stories.tsx b/src/components/Modal/component.stories.tsx index 35355ab..e126ede 100644 --- a/src/components/Modal/component.stories.tsx +++ b/src/components/Modal/component.stories.tsx @@ -67,6 +67,14 @@ const meta = { control: 'boolean', description: 'When true, the footer is sticky to the bottom.', }, + testId: { + control: 'text', + description: 'Test identifier applied to the modal element (native ReactModal prop).', + }, + closeButtonDataTest: { + control: 'text', + description: 'Test identifier applied to the close button. Omitted if empty.', + }, children: { control: false, description: 'Modal body content.', diff --git a/src/components/Modal/component.tsx b/src/components/Modal/component.tsx index 7b5e97c..244d6fc 100644 --- a/src/components/Modal/component.tsx +++ b/src/components/Modal/component.tsx @@ -27,9 +27,16 @@ const Modal: React.FC = ({ noFooter = false, footerContent = null, stickyFooter = true, + testId, + closeButtonDataTest, children, ...rest }) => { + let _closeButtonDataTest = closeButtonDataTest; + + if (testId && !closeButtonDataTest) { + _closeButtonDataTest = `${testId}-close-button`; + } const renderFooter = useCallback((isSticky: boolean) => ( <> @@ -50,6 +57,7 @@ const Modal: React.FC = ({ shouldCloseOnOverlayClick={shouldCloseOnOverlayClick} shouldCloseOnEsc={shouldCloseOnEsc} appElement={appElement} + testId={testId} > = ({ onClick={onRequestClose} variant="subtle" ariaLabel="close" + {...(_closeButtonDataTest ? { dataTest: _closeButtonDataTest } : {})} /> diff --git a/src/components/Modal/types.ts b/src/components/Modal/types.ts index f3d0b5b..ac94554 100644 --- a/src/components/Modal/types.ts +++ b/src/components/Modal/types.ts @@ -18,5 +18,7 @@ export interface ModalProps extends Omit { noFooter?: boolean; stickyFooter?: boolean; footerContent?: React.ReactNode; + testId?: string; + closeButtonDataTest?: string; children: React.ReactNode; }