Fixed vertical scroll, renamed actions to footer

Amsterdam · Sep 12, 2024 · a308c82 · a308c82
1 parent 1f29f35
commit a308c82
Show file tree

Hide file tree

Showing 4 changed files with 30 additions and 23 deletions.
diff --git 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
@@ -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<HTMLDialogElement>,
   ) => (
     <dialog {...restProps} ref={ref} className={clsx('ams-dialog', className)}>
-      <form className="ams-dialog__form" method="dialog">
+      <div className="ams-dialog__wrapper">
         <header className="ams-dialog__header">
           <Heading size="level-4">{heading}</Heading>
           <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>}
-      </form>
+        {footer && <footer className="ams-dialog__footer">{footer}</footer>}
+      </div>
     </dialog>
   ),
 )

diff --git 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
@@ -11,24 +11,28 @@ const meta = {
   title: 'Components/Containers/Dialog',
   component: Dialog,
   args: {
-    actions: (
+    footer: (
       <>
-        <Button type="submit">Doorgaan</Button>
+        <Button type="submit" form="dialog">
+          Doorgaan
+        </Button>
         <Button onClick={Dialog.close} variant="tertiary">
           Stoppen
         </Button>
       </>
     ),
     children: (
-      <Paragraph>
-        Weet u zeker dat u door wilt gaan met het uitvoeren van deze actie? Dat verwijdert gegevens die nog niet
-        opgeslagen zijn.
-      </Paragraph>
+      <form method="dialog" id="dialog">
+        <Paragraph>
+          Weet u zeker dat u door wilt gaan met het uitvoeren van deze actie? Dat verwijdert gegevens die nog niet
+          opgeslagen zijn.
+        </Paragraph>
+      </form>
     ),
     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: <Button onClick={Dialog.close}>Sluiten</Button>,
+    footer: <Button onClick={Dialog.close}>Sluiten</Button>,
     children: [
       <Heading level={2} size="level-5" key={1}>
         Algemeen
@@ -134,9 +138,11 @@ export const TriggerButton: Story = {
 
 export const VerticalButtons: Story = {
   args: {
-    actions: (
+    footer: (
       <>
-        <Button type="submit">Lange teksten op deze knoppen</Button>
+        <Button type="submit" form="dialog">
+          Lange teksten op deze knoppen
+        </Button>
         <Button onClick={Dialog.close} variant="tertiary">
           Om verticaal stapelen te demonstreren
         </Button>