From d9cc1079e2f784fd7002b7f785fcfdaa750cb240 Mon Sep 17 00:00:00 2001
From: Aram <37216945+alimpens@users.noreply.github.com>
Date: Thu, 29 Aug 2024 13:11:56 +0200
Subject: [PATCH 1/2] fix: Close Dialog without submit (#1547)

Co-authored-by: Vincent Smedinga <v.smedinga@amsterdam.nl>
---
 packages/css/src/components/dialog/README.md       |  5 +++++
 packages/react/src/Dialog/Dialog.tsx               | 10 +++++++---
 packages/react/src/Dialog/index.ts                 |  2 +-
 storybook/src/components/Dialog/Dialog.docs.mdx    |  9 +++------
 storybook/src/components/Dialog/Dialog.stories.tsx | 13 +++----------
 5 files changed, 19 insertions(+), 20 deletions(-)

diff --git a/packages/css/src/components/dialog/README.md b/packages/css/src/components/dialog/README.md
index b05e331c97..4f03235889 100644
--- a/packages/css/src/components/dialog/README.md
+++ b/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)
diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx
index 6cebcf0f55..4bc61fb923 100644
--- a/packages/react/src/Dialog/Dialog.tsx
+++ b/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>}
diff --git a/packages/react/src/Dialog/index.ts b/packages/react/src/Dialog/index.ts
index a53afb069f..a41fb84284 100644
--- a/packages/react/src/Dialog/index.ts
+++ b/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'
diff --git a/storybook/src/components/Dialog/Dialog.docs.mdx b/storybook/src/components/Dialog/Dialog.docs.mdx
index ba4cd43ea8..2ec6f0c83a 100644
--- a/storybook/src/components/Dialog/Dialog.docs.mdx
+++ b/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
 
diff --git a/storybook/src/components/Dialog/Dialog.stories.tsx b/storybook/src/components/Dialog/Dialog.stories.tsx
index 08505065c3..a5878073f7 100644
--- a/storybook/src/components/Dialog/Dialog.stories.tsx
+++ b/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>
     ),

From 0cf50e977553dda861dc9c2b99a697a357159947 Mon Sep 17 00:00:00 2001
From: "github-actions[bot]"
 <41898282+github-actions[bot]@users.noreply.github.com>
Date: Thu, 29 Aug 2024 13:17:46 +0200
Subject: [PATCH 2/2] chore: release main (#1549)

Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
---
 .release-please-manifest.json | 4 ++--
 packages/css/CHANGELOG.md     | 7 +++++++
 packages/css/package.json     | 2 +-
 packages/react/CHANGELOG.md   | 7 +++++++
 packages/react/package.json   | 2 +-
 5 files changed, 18 insertions(+), 4 deletions(-)

diff --git a/.release-please-manifest.json b/.release-please-manifest.json
index 4f5090d232..07f500a7bf 100644
--- a/.release-please-manifest.json
+++ b/.release-please-manifest.json
@@ -1,6 +1,6 @@
 {
-  "packages/css": "0.11.0",
-  "packages/react": "0.11.0",
+  "packages/css": "0.11.1",
+  "packages/react": "0.11.1",
   "proprietary/assets": "0.2.1",
   "proprietary/react-icons": "0.1.12",
   "proprietary/tokens": "0.11.0"
diff --git a/packages/css/CHANGELOG.md b/packages/css/CHANGELOG.md
index f397ed5104..1e79d6ab7d 100644
--- a/packages/css/CHANGELOG.md
+++ b/packages/css/CHANGELOG.md
@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.11.1](https://github.com/Amsterdam/design-system/compare/design-system-css-v0.11.0...design-system-css-v0.11.1) (2024-08-29)
+
+
+### Bug Fixes
+
+* Close Dialog without submit ([#1547](https://github.com/Amsterdam/design-system/issues/1547)) ([d9cc107](https://github.com/Amsterdam/design-system/commit/d9cc1079e2f784fd7002b7f785fcfdaa750cb240))
+
 ## [0.11.0](https://github.com/Amsterdam/design-system/compare/design-system-css-v0.10.0...design-system-css-v0.11.0) (2024-07-25)
 
 
diff --git a/packages/css/package.json b/packages/css/package.json
index 834186577d..f72e31ac7f 100644
--- a/packages/css/package.json
+++ b/packages/css/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.11.0",
+  "version": "0.11.1",
   "author": "Community for NL Design System",
   "description": "CSS files for components for the City of Amsterdam based on the NL Design System architecture",
   "license": "EUPL-1.2",
diff --git a/packages/react/CHANGELOG.md b/packages/react/CHANGELOG.md
index 7c9312994c..09dc4aea95 100644
--- a/packages/react/CHANGELOG.md
+++ b/packages/react/CHANGELOG.md
@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.11.1](https://github.com/Amsterdam/design-system/compare/design-system-react-v0.11.0...design-system-react-v0.11.1) (2024-08-29)
+
+
+### Bug Fixes
+
+* Close Dialog without submit ([#1547](https://github.com/Amsterdam/design-system/issues/1547)) ([d9cc107](https://github.com/Amsterdam/design-system/commit/d9cc1079e2f784fd7002b7f785fcfdaa750cb240))
+
 ## [0.11.0](https://github.com/Amsterdam/design-system/compare/design-system-react-v0.10.0...design-system-react-v0.11.0) (2024-07-25)
 
 
diff --git a/packages/react/package.json b/packages/react/package.json
index cfa7aa3e20..29e70c8447 100644
--- a/packages/react/package.json
+++ b/packages/react/package.json
@@ -1,5 +1,5 @@
 {
-  "version": "0.11.0",
+  "version": "0.11.1",
   "author": "Community for NL Design System",
   "description": "React component library bundle for the City of Amsterdam based on the NL Design System architecture",
   "license": "EUPL-1.2",