diff --git a/src/components/feedback/Modal.tsx b/src/components/feedback/Modal.tsx index 43bdfc83..c6a793f1 100644 --- a/src/components/feedback/Modal.tsx +++ b/src/components/feedback/Modal.tsx @@ -36,6 +36,7 @@ const noop = () => {}; /** * Show a modal + * @deprecated - Use `ModalDialog` instead */ const ModalNext = function Modal({ children, diff --git a/src/next.ts b/src/next.ts index 1ae5ea4f..8fc09c93 100644 --- a/src/next.ts +++ b/src/next.ts @@ -22,7 +22,13 @@ export { TableRow, Thumbnail, } from './components/data'; -export { Dialog, Modal, Spinner, SpinnerOverlay } from './components/feedback'; +export { + Dialog, + Modal, + ModalDialog, + Spinner, + SpinnerOverlay, +} from './components/feedback'; export { Button, ButtonBase, @@ -78,6 +84,7 @@ export type { export type { DialogProps, ModalProps, + ModalDialogProps, SpinnerProps, SpinnerOverlayProps, } from './components/feedback'; diff --git a/src/pattern-library/components/patterns/feedback/DialogPage.tsx b/src/pattern-library/components/patterns/feedback/DialogPage.tsx index 3626d870..713042a7 100644 --- a/src/pattern-library/components/patterns/feedback/DialogPage.tsx +++ b/src/pattern-library/components/patterns/feedback/DialogPage.tsx @@ -407,10 +407,6 @@ export default function DialogPage() { deprecated Modal component.

-

- ModalDialog is still under development and is not yet - part of the package API. -

@@ -497,11 +493,6 @@ export default function DialogPage() { tables (ARIA {'`role="grid"`'}) or tabs (ARIA{' '} {'`role="tablist"`'}).

-

- - Keyboard navigation for embedded widgets is under development. - -

} diff --git a/src/pattern-library/components/patterns/feedback/ModalPage.tsx b/src/pattern-library/components/patterns/feedback/ModalPage.tsx index 96de62c4..972a44dc 100644 --- a/src/pattern-library/components/patterns/feedback/ModalPage.tsx +++ b/src/pattern-library/components/patterns/feedback/ModalPage.tsx @@ -103,6 +103,19 @@ export default function ModalPage() {

} > + + + + This implementation of + + Modal + {' '} + is deprecated. Use + ModalDialog or Dialog instead, which + provide a similar API and enhanced accessibility. + + +