Merge remote-tracking branch 'origin/main' into develop

Amsterdam · Aug 29, 2024 · a6b4db4 · a6b4db4
2 parents d4da3f7 + 0cf50e9
commit a6b4db4
Show file tree

Hide file tree

Showing 10 changed files with 37 additions and 24 deletions.
diff --git 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
@@ -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
@@ -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/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/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
@@ -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",

diff --git 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
@@ -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
@@ -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
@@ -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>
     ),