fix: Close Dialog without submit

packages/css/src/components/dialog/README.md

@@ -25,6 +25,11 @@ Also, this approach keeps the order of buttons consistent on both narrow and wid
 | Shift + Tab | Moves focus to the previous focusable element inside the dialog. |
 | Escape      | Closes the dialog.                                               |
 
+## Closing Dialog without submit
+
+You can close a Dialog without submitting by using `<button type="button" onClick={closeDialog}>`.
+This uses the `closeDialog` function from the React package.
+
 ## References
 
 - [HTMLDialogElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement)

packages/react/src/Dialog/Dialog.tsx

@@ -4,7 +4,7 @@
  */
 
 import clsx from 'clsx'
-import { forwardRef } from 'react'
+import { forwardRef, MouseEvent } from 'react'
 import type { DialogHTMLAttributes, ForwardedRef, PropsWithChildren, ReactNode } from 'react'
 import { Heading } from '../Heading'
 import { IconButton } from '../IconButton'
@@ -18,16 +18,20 @@ export type DialogProps = {
   heading: string
 } & PropsWithChildren<DialogHTMLAttributes<HTMLDialogElement>>
 
+export const closeDialog = (event: MouseEvent<HTMLButtonElement>) => event.currentTarget.closest('dialog')?.close()
+
+export const openDialog = (id: string) => (document.querySelector(id) as HTMLDialogElement)?.showModal()
+
 export const Dialog = forwardRef(
   (
     { actions, children, className, closeButtonLabel = 'Sluiten', heading, ...restProps }: DialogProps,
     ref: ForwardedRef<HTMLDialogElement>,
   ) => (
     <dialog {...restProps} ref={ref} className={clsx('ams-dialog', className)}>
-      <form method="dialog" className="ams-dialog__form">
+      <form className="ams-dialog__form" method="dialog">
         <header className="ams-dialog__header">
           <Heading size="level-4">{heading}</Heading>
-          <IconButton formNoValidate label={closeButtonLabel} size="level-4" />
+          <IconButton label={closeButtonLabel} onClick={closeDialog} size="level-4" type="button" />
         </header>
         <article className="ams-dialog__article">{children}</article>
         {actions && <footer className="ams-dialog__footer">{actions}</footer>}

packages/react/src/Dialog/index.ts

@@ -1,2 +1,2 @@
-export { Dialog } from './Dialog'
+export { closeDialog, Dialog, openDialog } from './Dialog'
 export type { DialogProps } from './Dialog'

storybook/src/components/Dialog/Dialog.docs.mdx

@@ -24,13 +24,10 @@ Click or tap the button to open a dialog.
 
 <Canvas of={DialogStories.TriggerButton} />
 
-Some basic example code to open and close a dialog:
+To open the dialog, use the `openDialog` function from the React package.
+Pass the Dialog’s `id` to the function to select it.
 
-```ts
-const openDialog = () => (document.querySelector("#openDialog") as HTMLDialogElement)?.showModal();
-
-const closeDialog = (e: MouseEvent<HTMLButtonElement>) => e.currentTarget.closest("dialog")?.close();
-```
+To close the Dialog, use the `closeDialog` function.
 
 ## Vertically Stacked Buttons
 

storybook/src/components/Dialog/Dialog.stories.tsx

@@ -3,14 +3,9 @@
  * Copyright Gemeente Amsterdam
  */
 
-import { Button, Heading, Paragraph } from '@amsterdam/design-system-react'
-import { Dialog } from '@amsterdam/design-system-react/src'
+import { Button, closeDialog, Heading, Paragraph } from '@amsterdam/design-system-react'
+import { Dialog, openDialog } from '@amsterdam/design-system-react/src'
 import { Meta, StoryObj } from '@storybook/react'
-import { MouseEvent } from 'react'
-
-const closeDialog = (event: MouseEvent<HTMLButtonElement>) => {
-  return event.currentTarget.closest('dialog')?.close()
-}
 
 const meta = {
   title: 'Components/Containers/Dialog',
@@ -130,9 +125,7 @@ export const TriggerButton: Story = {
   decorators: [
     (Story) => (
       <article>
-        <Button onClick={() => (document.querySelector('#openDialog') as HTMLDialogElement)?.showModal()}>
-          Open Dialog
-        </Button>
+        <Button onClick={() => openDialog('#openDialog')}>Open Dialog</Button>
         <Story />
       </article>
     ),