From a308c82b97f0a4704dbf7fa01f791923bdee3aa6 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Thu, 12 Sep 2024 13:06:26 +0200 Subject: [PATCH 01/10] Fixed vertical scroll, renamed actions to footer --- .../css/src/components/dialog/dialog.scss | 11 ++++---- packages/react/src/Dialog/Dialog.tsx | 10 +++---- .../src/components/ams/dialog.tokens.json | 6 ++--- .../src/components/Dialog/Dialog.stories.tsx | 26 ++++++++++++------- 4 files changed, 30 insertions(+), 23 deletions(-) diff --git a/packages/css/src/components/dialog/dialog.scss b/packages/css/src/components/dialog/dialog.scss index 4d074151b8..38d6b3ac55 100644 --- a/packages/css/src/components/dialog/dialog.scss +++ b/packages/css/src/components/dialog/dialog.scss @@ -13,7 +13,6 @@ background-color: var(--ams-dialog-background-color); border: var(--ams-dialog-border); inline-size: var(--ams-dialog-inline-size); - max-block-size: var(--ams-dialog-max-block-size); max-inline-size: var(--ams-dialog-max-inline-size); @include reset-dialog; @@ -24,11 +23,13 @@ } } -.ams-dialog__form { +.ams-dialog__wrapper { display: grid; - gap: var(--ams-dialog-form-gap); - padding-block: var(--ams-dialog-form-padding-block); - padding-inline: var(--ams-dialog-form-padding-inline); + gap: var(--ams-dialog-wrapper-gap); + grid-template-rows: auto 1fr auto; + max-block-size: var(--ams-dialog-wrapper-max-block-size); + padding-block: var(--ams-dialog-wrapper-padding-block); + padding-inline: var(--ams-dialog-wrapper-padding-inline); } .ams-dialog__article { diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx index 275641539f..8caeb910b6 100644 --- a/packages/react/src/Dialog/Dialog.tsx +++ b/packages/react/src/Dialog/Dialog.tsx @@ -11,7 +11,7 @@ import { IconButton } from '../IconButton' export type DialogProps = { /** The button(s) in the footer. Start with a primary button. */ - actions?: ReactNode + footer?: ReactNode /** The label for the button that dismisses the Dialog. */ closeButtonLabel?: string /** The text for the Heading. */ @@ -23,18 +23,18 @@ const openDialog = (id: string) => (document.querySelector(id) as HTMLDialogElem const DialogRoot = forwardRef( ( - { actions, children, className, closeButtonLabel = 'Sluiten', heading, ...restProps }: DialogProps, + { footer, children, className, closeButtonLabel = 'Sluiten', heading, ...restProps }: DialogProps, ref: ForwardedRef, ) => ( -
+
{heading}
{children}
- {actions &&
{actions}
} - + {footer &&
{footer}
} +
), ) diff --git a/proprietary/tokens/src/components/ams/dialog.tokens.json b/proprietary/tokens/src/components/ams/dialog.tokens.json index f30655d97f..3d71a99df7 100644 --- a/proprietary/tokens/src/components/ams/dialog.tokens.json +++ b/proprietary/tokens/src/components/ams/dialog.tokens.json @@ -3,11 +3,11 @@ "dialog": { "background-color": { "value": "{ams.color.primary-white}" }, "border": { "value": "0" }, - "inline-size": { "value": "calc(100% - 2 * {ams.space.grid.md})" }, - "max-block-size": { "value": "calc(100% - 2 * {ams.space.grid.md})" }, + "inline-size": { "value": "calc(100dvw - 2 * {ams.space.grid.md})" }, "max-inline-size": { "value": "48rem" }, - "form": { + "wrapper": { "gap": { "value": "{ams.space.md}" }, + "max-block-size": { "value": "calc(100dvh - 4 * {ams.space.grid.md})" }, "padding-block": { "value": "{ams.space.grid.md}" }, "padding-inline": { "value": "{ams.space.grid.lg}" } }, diff --git a/storybook/src/components/Dialog/Dialog.stories.tsx b/storybook/src/components/Dialog/Dialog.stories.tsx index 28117efbac..8cebc33854 100644 --- a/storybook/src/components/Dialog/Dialog.stories.tsx +++ b/storybook/src/components/Dialog/Dialog.stories.tsx @@ -11,24 +11,28 @@ const meta = { title: 'Components/Containers/Dialog', component: Dialog, args: { - actions: ( + footer: ( <> - + ), children: ( - - Weet u zeker dat u door wilt gaan met het uitvoeren van deze actie? Dat verwijdert gegevens die nog niet - opgeslagen zijn. - +
+ + Weet u zeker dat u door wilt gaan met het uitvoeren van deze actie? Dat verwijdert gegevens die nog niet + opgeslagen zijn. + +
), heading: 'Niet alle gegevens zijn opgeslagen', }, argTypes: { - actions: { + footer: { table: { disable: true }, }, }, @@ -67,7 +71,7 @@ export const Default: Story = { export const WithScrollbar: Story = { args: { - actions: , + footer: , children: [ Algemeen @@ -134,9 +138,11 @@ export const TriggerButton: Story = { export const VerticalButtons: Story = { args: { - actions: ( + footer: ( <> - + From f6505ec637e15d3c70669b30daa82b39961c90df Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Thu, 12 Sep 2024 13:25:40 +0200 Subject: [PATCH 02/10] Unique ids to make it work --- .../src/components/Dialog/Dialog.docs.mdx | 10 +++ .../src/components/Dialog/Dialog.stories.tsx | 68 +++++++++++++++---- 2 files changed, 63 insertions(+), 15 deletions(-) diff --git a/storybook/src/components/Dialog/Dialog.docs.mdx b/storybook/src/components/Dialog/Dialog.docs.mdx index 60625eaa5b..63da2e9d62 100644 --- a/storybook/src/components/Dialog/Dialog.docs.mdx +++ b/storybook/src/components/Dialog/Dialog.docs.mdx @@ -14,6 +14,16 @@ import README from "../../../../packages/css/src/components/dialog/README.md?raw ## Examples +### Form dialog + +The preferred way to handle a dialog is by using a `
` element. The submit button +will automatically close the dialog and return the value of the submit or cancel button. It is optional, +to allow for custom handling of the dialog, so you need to add this form to the children if required. +Then if you want to have sticky buttons in the footer, you can have a submit button outside of the `` +by using the form attribute to target the `id` of the form. + + + ### With scrollbar Content taller than the dialog itself will scroll. diff --git a/storybook/src/components/Dialog/Dialog.stories.tsx b/storybook/src/components/Dialog/Dialog.stories.tsx index 8cebc33854..ce4090aabd 100644 --- a/storybook/src/components/Dialog/Dialog.stories.tsx +++ b/storybook/src/components/Dialog/Dialog.stories.tsx @@ -12,22 +12,15 @@ const meta = { component: Dialog, args: { footer: ( - <> - - - + ), children: ( - - - Weet u zeker dat u door wilt gaan met het uitvoeren van deze actie? Dat verwijdert gegevens die nog niet - opgeslagen zijn. - - + + Weet u zeker dat u door wilt gaan met het uitvoeren van deze actie? Dat verwijdert gegevens die nog niet + opgeslagen zijn. + ), heading: 'Niet alle gegevens zijn opgeslagen', }, @@ -69,6 +62,43 @@ export const Default: Story = { }, } +export const FormDialog: Story = { + args: { + open: true, + footer: ( + <> + + + + ), + children: ( +
+ + Weet u zeker dat u door wilt gaan met het uitvoeren van deze actie? Dat verwijdert gegevens die nog niet + opgeslagen zijn. + +
+ ), + }, + decorators: [ + (Story) => ( +
+ +
+ ), + ], + parameters: { + docs: { + story: { height: '32em' }, + }, + layout: 'fullscreen', + }, +} + export const WithScrollbar: Story = { args: { footer: , @@ -140,7 +170,7 @@ export const VerticalButtons: Story = { args: { footer: ( <> - ), + children: ( +
+ + Weet u zeker dat u door wilt gaan met het uitvoeren van deze actie? Dat verwijdert gegevens die nog niet + opgeslagen zijn. + +
+ ), open: true, }, decorators: [ From 09f2956ec386849746a74587e6ab77df270678aa Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Thu, 12 Sep 2024 13:27:49 +0200 Subject: [PATCH 03/10] Rename wrapper to content --- packages/css/src/components/dialog/dialog.scss | 10 +++++----- packages/react/src/Dialog/Dialog.tsx | 2 +- .../tokens/src/components/ams/dialog.tokens.json | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/packages/css/src/components/dialog/dialog.scss b/packages/css/src/components/dialog/dialog.scss index 38d6b3ac55..7a3c87e80e 100644 --- a/packages/css/src/components/dialog/dialog.scss +++ b/packages/css/src/components/dialog/dialog.scss @@ -23,13 +23,13 @@ } } -.ams-dialog__wrapper { +.ams-dialog__content { display: grid; - gap: var(--ams-dialog-wrapper-gap); + gap: var(--ams-dialog-content-gap); grid-template-rows: auto 1fr auto; - max-block-size: var(--ams-dialog-wrapper-max-block-size); - padding-block: var(--ams-dialog-wrapper-padding-block); - padding-inline: var(--ams-dialog-wrapper-padding-inline); + max-block-size: var(--ams-dialog-content-max-block-size); + padding-block: var(--ams-dialog-content-padding-block); + padding-inline: var(--ams-dialog-content-padding-inline); } .ams-dialog__article { diff --git a/packages/react/src/Dialog/Dialog.tsx b/packages/react/src/Dialog/Dialog.tsx index 8caeb910b6..f81cd1f5cd 100644 --- a/packages/react/src/Dialog/Dialog.tsx +++ b/packages/react/src/Dialog/Dialog.tsx @@ -27,7 +27,7 @@ const DialogRoot = forwardRef( ref: ForwardedRef, ) => ( -
+
{heading} diff --git a/proprietary/tokens/src/components/ams/dialog.tokens.json b/proprietary/tokens/src/components/ams/dialog.tokens.json index 3d71a99df7..d1ba0d0bdf 100644 --- a/proprietary/tokens/src/components/ams/dialog.tokens.json +++ b/proprietary/tokens/src/components/ams/dialog.tokens.json @@ -5,7 +5,7 @@ "border": { "value": "0" }, "inline-size": { "value": "calc(100dvw - 2 * {ams.space.grid.md})" }, "max-inline-size": { "value": "48rem" }, - "wrapper": { + "content": { "gap": { "value": "{ams.space.md}" }, "max-block-size": { "value": "calc(100dvh - 4 * {ams.space.grid.md})" }, "padding-block": { "value": "{ams.space.grid.md}" }, From ba8de61c905c871d7716e8a7e9cd78caeef24598 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Thu, 12 Sep 2024 15:08:36 +0200 Subject: [PATCH 04/10] Improved documentation --- packages/react/src/Dialog/Dialog.test.tsx | 6 +++--- storybook/src/components/Dialog/Dialog.docs.mdx | 12 +++++++----- storybook/src/components/Dialog/Dialog.stories.tsx | 2 +- 3 files changed, 11 insertions(+), 9 deletions(-) diff --git a/packages/react/src/Dialog/Dialog.test.tsx b/packages/react/src/Dialog/Dialog.test.tsx index 71a7beb457..877cc494bc 100644 --- a/packages/react/src/Dialog/Dialog.test.tsx +++ b/packages/react/src/Dialog/Dialog.test.tsx @@ -66,13 +66,13 @@ describe('Dialog', () => { expect(getByText('Test content')).toBeInTheDocument() }) - it('renders actions when provided', () => { - const { getByText } = render(Click Me} />) + it('renders footer when provided', () => { + const { getByText } = render(Click Me} />) expect(getByText('Click Me')).toBeInTheDocument() }) - it('does not render actions when not provided', () => { + it('does not render footer when not provided', () => { const { queryByText } = render() expect(queryByText('Click Me')).not.toBeInTheDocument() diff --git a/storybook/src/components/Dialog/Dialog.docs.mdx b/storybook/src/components/Dialog/Dialog.docs.mdx index 63da2e9d62..00014daa71 100644 --- a/storybook/src/components/Dialog/Dialog.docs.mdx +++ b/storybook/src/components/Dialog/Dialog.docs.mdx @@ -16,11 +16,13 @@ import README from "../../../../packages/css/src/components/dialog/README.md?raw ### Form dialog -The preferred way to handle a dialog is by using a `
` element. The submit button -will automatically close the dialog and return the value of the submit or cancel button. It is optional, -to allow for custom handling of the dialog, so you need to add this form to the children if required. -Then if you want to have sticky buttons in the footer, you can have a submit button outside of the `` -by using the form attribute to target the `id` of the form. +The `` element is a practical way to manage dialogs. +It simplifies the process by automatically handling the closure and data submission +when a user interacts with a submit or cancel button. For more complex scenarios, +developers can opt for custom handling by adding the form as a child element. +Additionally, creating sticky buttons in a dialog's footer is achievable by placing +a submit button outside the `` and associating it with the form's ID using the +`form` attribute. diff --git a/storybook/src/components/Dialog/Dialog.stories.tsx b/storybook/src/components/Dialog/Dialog.stories.tsx index ce4090aabd..9d18825c22 100644 --- a/storybook/src/components/Dialog/Dialog.stories.tsx +++ b/storybook/src/components/Dialog/Dialog.stories.tsx @@ -67,7 +67,7 @@ export const FormDialog: Story = { open: true, footer: ( <> - , children: [ - + Algemeen , - + De gemeente Amsterdam verwerkt bij de uitvoering van haar taken en verplichtingen persoonsgegevens. De manier waarop de gemeente Amsterdam om gaat met persoonsgegevens is vastgelegd in het stedelijk kader verwerken persoonsgegevens. , - + Deze verklaring geeft aanvullende informatie over de omgang met persoonsgegevens door de gemeente Amsterdam en over uw mogelijkheden tot het uitoefenen van uw rechten met betrekking tot persoonsgegevens. , - + Meer specifieke informatie over privacy en de verwerking van persoonsgegevens door de gemeente Amsterdam kunt u op de hoofdpagina vinden. , - + Vanwege nieuwe wetgeving of andere ontwikkelingen, past de gemeente regelmatig haar processen aan. Dit kunnen ook wijzigingen zijn in de wijze van het verwerken van persoonsgegevens. Wij raden u daarom aan om regelmatig deze pagina te bekijken. Deze pagina wordt doorlopend geactualiseerd. , - + Geldende wet- en regelgeving en reikwijdte , - + Vanaf 25 mei 2018 is de Algemene verordening gegevensbescherming (Avg) van toepassing op alle verwerkingen van persoonsgegevens. Deze Europese wetgeving heeft directe werking in Nederland. Voor die zaken die nationaal geregeld moeten worden, is de Uitvoeringswet Avg in Nederland aanvullend van toepassing. Deze wetteksten kunt u From e67cc7779a963a86c37d7240a8d689721084fd2b Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Fri, 13 Sep 2024 16:51:07 +0200 Subject: [PATCH 07/10] Update storybook/src/components/Dialog/Dialog.docs.mdx Co-authored-by: Aram <37216945+alimpens@users.noreply.github.com> --- storybook/src/components/Dialog/Dialog.docs.mdx | 15 ++++++--------- 1 file changed, 6 insertions(+), 9 deletions(-) diff --git a/storybook/src/components/Dialog/Dialog.docs.mdx b/storybook/src/components/Dialog/Dialog.docs.mdx index ae66d7ca52..1ff4165496 100644 --- a/storybook/src/components/Dialog/Dialog.docs.mdx +++ b/storybook/src/components/Dialog/Dialog.docs.mdx @@ -14,15 +14,12 @@ import README from "../../../../packages/css/src/components/dialog/README.md?raw ## Examples -### Form dialog - -The `` element is a practical way to manage dialogs. -It simplifies the process by automatically handling the closure and data submission -when a user interacts with a submit or cancel button. For more complex scenarios, -developers can opt for custom handling by adding the form as a child element. -Additionally, creating sticky buttons in a dialog's footer is achievable by placing -a submit button outside the `` and associating it with the form's ID using the -`form` attribute. +### Form in a Dialog + +Set `method="dialog"` when using a form in Dialog. +This closes the Dialog when submitting the form. +Pass the submit Button to the `footer` prop, +and link it to the form by passing its `id` to the Buttons `form` attribute. From 288510988272dce93467657d38ecf59e1d1f80f0 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Fri, 13 Sep 2024 17:04:54 +0200 Subject: [PATCH 08/10] Check for no footer --- packages/react/src/Dialog/Dialog.test.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/packages/react/src/Dialog/Dialog.test.tsx b/packages/react/src/Dialog/Dialog.test.tsx index 877cc494bc..f32dee8bba 100644 --- a/packages/react/src/Dialog/Dialog.test.tsx +++ b/packages/react/src/Dialog/Dialog.test.tsx @@ -73,9 +73,11 @@ describe('Dialog', () => { }) it('does not render footer when not provided', () => { - const { queryByText } = render() + const { container } = render() - expect(queryByText('Click Me')).not.toBeInTheDocument() + const component = container.querySelector('footer') + + expect(component).not.toBeInTheDocument() }) it('renders DialogClose button', () => { From 72508b22e273415ae5fdf4655ad6e8a525bb4368 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Mon, 16 Sep 2024 10:41:51 +0200 Subject: [PATCH 09/10] ReturnValue explainer --- storybook/src/components/Dialog/Dialog.docs.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/storybook/src/components/Dialog/Dialog.docs.mdx b/storybook/src/components/Dialog/Dialog.docs.mdx index 1ff4165496..8cbcd2ba7e 100644 --- a/storybook/src/components/Dialog/Dialog.docs.mdx +++ b/storybook/src/components/Dialog/Dialog.docs.mdx @@ -20,6 +20,7 @@ Set `method="dialog"` when using a form in Dialog. This closes the Dialog when submitting the form. Pass the submit Button to the `footer` prop, and link it to the form by passing its `id` to the Buttons `form` attribute. +The Dialog returns the value of the submit Button, so you can check which Button was clicked. From ea560ce703acb0026592bd3bbc0d01841d7a3aa3 Mon Sep 17 00:00:00 2001 From: Niels Roozemond Date: Tue, 17 Sep 2024 10:36:27 +0200 Subject: [PATCH 10/10] Update storybook/src/components/Dialog/Dialog.docs.mdx Co-authored-by: Aram <37216945+alimpens@users.noreply.github.com> --- storybook/src/components/Dialog/Dialog.docs.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/storybook/src/components/Dialog/Dialog.docs.mdx b/storybook/src/components/Dialog/Dialog.docs.mdx index 8cbcd2ba7e..5b2f8b1ca0 100644 --- a/storybook/src/components/Dialog/Dialog.docs.mdx +++ b/storybook/src/components/Dialog/Dialog.docs.mdx @@ -21,6 +21,7 @@ This closes the Dialog when submitting the form. Pass the submit Button to the `footer` prop, and link it to the form by passing its `id` to the Buttons `form` attribute. The Dialog returns the value of the submit Button, so you can check which Button was clicked. +For more information, see [Handling the return value from the dialog (MDN)](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog#handling_the_return_value_from_the_dialog).