fix(Modal): block (#2583)

Fixes #2522

---------

Co-authored-by: Tobias Barsnes <tobias.barsnes@digdir.no>

Author: 2 people

.changeset/nine-cameras-peel.md

@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+Modal: Remove `Modal.Header` and `Modal.Footer`, replace with `Modal.Block`

apps/_components/src/ColorModal/ColorModal.tsx

@@ -59,10 +59,10 @@ export const ColorModal = ({
           maxWidth: '1050px',
         }}
       >
-        <Modal.Header>
+        <Modal.Block>
           {`${capitalizeFirstLetter(namespace)} ${capitalizeFirstLetter(getColorNameFromNumber(weight))}`}
-        </Modal.Header>
-        <div className={classes.modalContent}>
+        </Modal.Block>
+        <Modal.Block className={classes.modalContent}>
           <div className={classes.description}>
             {getColorDescription({
               weight,
@@ -120,7 +120,7 @@ export const ColorModal = ({
               </Accordion.Content>
             </Accordion.Item>
           </Accordion.Root> */}
-        </div>
+        </Modal.Block>
       </Modal>
     </Modal.Context>
   );

packages/css/modal.css

@@ -6,8 +6,8 @@
   --dsc-modal-divider: 1px solid var(--ds-color-neutral-border-subtle);
   --dsc-modal-max-height: 80vh;
   --dsc-modal-max-width: 40rem;
-  --dsc-modal-padding-invert: calc(var(--dsc-modal-padding) * -1);
   --dsc-modal-padding: var(--ds-spacing-6);
+  --close-top-right: calc(var(--dsc-modal-padding) * -1 + var(--dsc-modal-close-margin));
 
   background: var(--dsc-modal-background);
   border-radius: min(1rem, var(--ds-border-radius-lg));
@@ -31,6 +31,12 @@
       fade-in 300ms ease-in-out;
   }
 
+  &:has(> .ds-modal__block) {
+    --close-top-right: var(--dsc-modal-close-margin);
+
+    padding: 0; /* Let Modal.Block own the padding */
+  }
+
   @media (max-width: 40rem) {
     min-width: 100%;
     max-width: 100%;
@@ -46,10 +52,8 @@
 
   /* Close button */
   & > form[method='dialog']:first-child > button:only-child {
-    --margin-top-right: calc(var(--dsc-modal-padding-invert) + var(--dsc-modal-close-margin));
-
     float: right;
-    margin: var(--margin-top-right) var(--margin-top-right) var(--dsc-modal-close-margin) var(--dsc-modal-close-margin);
+    margin: var(--close-top-right) var(--close-top-right) var(--dsc-modal-close-margin) var(--dsc-modal-close-margin);
     color: inherit;
 
     &::before {
@@ -63,18 +67,12 @@
   }
 }
 
-.ds-modal__header {
-  border-bottom: var(--dsc-modal-divider);
-  margin-block: var(--dsc-modal-padding-invert) var(--dsc-modal-padding);
-  margin-inline: var(--dsc-modal-padding-invert);
+.ds-modal__block {
   padding: var(--dsc-modal-padding);
-}
 
-.ds-modal__footer {
-  border-top: var(--dsc-modal-divider);
-  margin-block: var(--dsc-modal-padding) var(--dsc-modal-padding-invert);
-  margin-inline: var(--dsc-modal-padding-invert);
-  padding: var(--dsc-modal-padding);
+  & + & {
+    border-top: var(--dsc-modal-divider);
+  }
 }
 
 /* Prevent scroll when open */

packages/react/src/components/Card/Card.mdx

@@ -26,7 +26,7 @@ import { Card } from '@digdir/designsystemet-react';
 
 <br />
 
-### Card.Block
+### Med `Block`
 
 Bruk flere `Card.Block` hvis du vil dele opp kortet med skillelinjer eller legge inn utfallende bilder eller video.
 Merk at innhold kan ikke plasseres direkte i `Card` dersom du bruker `Card.Block`; da burde alt innholdet være inni en av av kortets `Card.Block`-seksjoner.

packages/react/src/components/Modal/ModaContent.tsx

@@ -23,11 +23,11 @@ Les [MDN Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog)
 <Modal.Context>
   <Modal.Trigger>Open Modal</Modal.Trigger>
   <Modal>
-    <Modal.Header>
+    <Modal.Block>
       <Heading size="xs">Header</Heading>
-    </Modal.Header>
-    Content
-    <Modal.Footer>Footer</Modal.Footer>
+    </Modal.Block>
+    <Modal.Block>Content</Modal.Block>
+    <Modal.Block>Footer</Modal.Block>
   </Modal>
 </Modal.Context>
 ```
@@ -57,9 +57,10 @@ Vi bruker `backdropClose={true}` proppen for å lukke modalen når brukeren klik
 
 <Canvas of={ModalStories.BackdropClose} />
 
-### Med `Header` og `Footer`
+### Med `Block`
 
-Du kan legge til `Modal.Header` og `Modal.Footer` for å få på topp- og bunn-område med sikkelinje.
+Bruk flere `Modal.Block` hvis du vil dele opp modalen med skillelinjer til for eksempel topp- og bunn-område.
+Merk at innhold kan ikke plasseres direkte i `Modal` dersom du bruker `Modal.Block`; da burde alt innholdet være inni en av av modalens `Modal.Block`-seksjoner.
 
 <Canvas of={ModalStories.WithHeaderAndFooter} />
 
@@ -81,6 +82,6 @@ Bruk `overflow: visible` for å la innhold gå utenfor modalen.
 
 <Canvas of={ModalStories.ModalWithCombobox} />
 
-### `Modal.Header`
+### `Modal.Block`
 
-<ArgTypes of={Modal.Header} />
+<ArgTypes of={Modal.Block} />

packages/react/src/components/Modal/Modal.mdx

@@ -80,32 +80,35 @@ export const WithHeaderAndFooter: StoryFn<typeof Modal> = () => (
   <Modal.Context>
     <Modal.Trigger>Open Modal</Modal.Trigger>
     <Modal>
-      <Modal.Header>
+      <Modal.Block>
         <Paragraph size='sm'>Her er det også divider</Paragraph>
         <Heading size='xs'>Vi kan legge divider under header</Heading>
-      </Modal.Header>
-      <Paragraph style={{ marginBottom: 'var(--ds-spacing-2)' }}>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
-        sodales eros justo. Aenean non mi ipsum. Cras viverra elit nec vulputate
-        mattis. Nunc placerat euismod pulvinar. Sed nec fringilla nulla, sit
-        amet ultricies ante. Morbi egestas venenatis massa, eu interdum leo
-        rutrum eu. Nulla varius, mi ac feugiat lacinia, magna eros ullamcorper
-        arcu, vel tincidunt erat leo nec tortor. Sed ut dui arcu. Morbi commodo
-        ipsum hendrerit est imperdiet imperdiet. Etiam sed maximus nisi. Quisque
-        posuere posuere orci, non egestas risus facilisis a. Vivamus non tempus
-        felis, in maximus lorem. Class aptent taciti sociosqu ad litora torquent
-        per conubia nostra, per inceptos himenaeos.
-      </Paragraph>
-      <Paragraph>
-        Etiam nec tincidunt est. Integer semper sodales efficitur. Pellentesque
-        pellentesque varius leo id congue. Integer lacinia porttitor massa id
-        euismod. Maecenas porta, magna nec interdum eleifend, risus magna
-        condimentum neque, a gravida nisl risus a elit. Donec accumsan metus et
-        lectus placerat varius. Donec tristique odio arcu. Donec cursus leo a
-        dui auctor pulvinar. Sed in elit urna. Nunc vitae magna sed nibh
-        elementum dignissim et ut massa.
-      </Paragraph>
-      <Modal.Footer>Og over footer</Modal.Footer>
+      </Modal.Block>
+      <Modal.Block>
+        <Paragraph style={{ marginBottom: 'var(--ds-spacing-2)' }}>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur
+          sodales eros justo. Aenean non mi ipsum. Cras viverra elit nec
+          vulputate mattis. Nunc placerat euismod pulvinar. Sed nec fringilla
+          nulla, sit amet ultricies ante. Morbi egestas venenatis massa, eu
+          interdum leo rutrum eu. Nulla varius, mi ac feugiat lacinia, magna
+          eros ullamcorper arcu, vel tincidunt erat leo nec tortor. Sed ut dui
+          arcu. Morbi commodo ipsum hendrerit est imperdiet imperdiet. Etiam sed
+          maximus nisi. Quisque posuere posuere orci, non egestas risus
+          facilisis a. Vivamus non tempus felis, in maximus lorem. Class aptent
+          taciti sociosqu ad litora torquent per conubia nostra, per inceptos
+          himenaeos.
+        </Paragraph>
+        <Paragraph>
+          Etiam nec tincidunt est. Integer semper sodales efficitur.
+          Pellentesque pellentesque varius leo id congue. Integer lacinia
+          porttitor massa id euismod. Maecenas porta, magna nec interdum
+          eleifend, risus magna condimentum neque, a gravida nisl risus a elit.
+          Donec accumsan metus et lectus placerat varius. Donec tristique odio
+          arcu. Donec cursus leo a dui auctor pulvinar. Sed in elit urna. Nunc
+          vitae magna sed nibh elementum dignissim et ut massa.
+        </Paragraph>
+      </Modal.Block>
+      <Modal.Block>Og over footer</Modal.Block>
     </Modal>
   </Modal.Context>
 );
@@ -175,28 +178,30 @@ export const ModalWithCombobox: StoryFn<typeof Modal> = () => {
       <Modal.Context>
         <Modal.Trigger>Open Modal</Modal.Trigger>
         <Modal style={{ overflow: 'visible' }} ref={modalRef}>
-          <Modal.Header>
+          <Modal.Block>
             <Heading size='xs'>Modal med combobox</Heading>
-          </Modal.Header>
-          <Combobox portal={false} label='Velg sted' autoFocus>
-            <Combobox.Empty>Fant ingen treff</Combobox.Empty>
-            <Combobox.Option value='leikanger'>Leikanger</Combobox.Option>
-            <Combobox.Option value='oslo'>Oslo</Combobox.Option>
-            <Combobox.Option value='bronnoysund'>Brønnøysund</Combobox.Option>
-            <Combobox.Option value='stavanger'>Stavanger</Combobox.Option>
-            <Combobox.Option value='trondheim'>Trondheim</Combobox.Option>
-            <Combobox.Option value='tromso'>Tromsø</Combobox.Option>
-            <Combobox.Option value='bergen'>Bergen</Combobox.Option>
-            <Combobox.Option value='moirana'>Mo i Rana</Combobox.Option>
-          </Combobox>
-          <Modal.Footer>
+          </Modal.Block>
+          <Modal.Block>
+            <Combobox portal={false} label='Velg sted' autoFocus>
+              <Combobox.Empty>Fant ingen treff</Combobox.Empty>
+              <Combobox.Option value='leikanger'>Leikanger</Combobox.Option>
+              <Combobox.Option value='oslo'>Oslo</Combobox.Option>
+              <Combobox.Option value='bronnoysund'>Brønnøysund</Combobox.Option>
+              <Combobox.Option value='stavanger'>Stavanger</Combobox.Option>
+              <Combobox.Option value='trondheim'>Trondheim</Combobox.Option>
+              <Combobox.Option value='tromso'>Tromsø</Combobox.Option>
+              <Combobox.Option value='bergen'>Bergen</Combobox.Option>
+              <Combobox.Option value='moirana'>Mo i Rana</Combobox.Option>
+            </Combobox>
+          </Modal.Block>
+          <Modal.Block>
             <Button
               variant='secondary'
               onClick={() => modalRef.current?.close()}
             >
               Avbryt
             </Button>
-          </Modal.Footer>
+          </Modal.Block>
         </Modal>
       </Modal.Context>
     </>

packages/react/src/components/Modal/Modal.stories.tsx

@@ -40,7 +40,7 @@ describe('Modal', () => {
     const { user } = await render({
       children: (
         <>
-          <Modal.Header>{HEADER_TITLE}</Modal.Header>
+          <Modal.Block>{HEADER_TITLE}</Modal.Block>
         </>
       ),
     });
@@ -99,7 +99,7 @@ describe('Modal', () => {
       open: true,
       children: (
         <>
-          <Modal.Header>{HEADER_TITLE}</Modal.Header>
+          <Modal.Block>{HEADER_TITLE}</Modal.Block>
         </>
       ),
     });

packages/react/src/components/Modal/Modal.test.tsx

@@ -3,21 +3,21 @@ import cl from 'clsx/lite';
 import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
 
-export type ModalFooterProps = {
+export type ModalBlockProps = {
   /**
    * Change the default rendered element for the one passed as a child, merging their props and behavior.
    * @default false
    */
   asChild?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
 
-export const ModalFooter = forwardRef<HTMLDivElement, ModalFooterProps>(
-  function ModalFooter({ asChild, className, ...rest }, ref) {
+export const ModalBlock = forwardRef<HTMLDivElement, ModalBlockProps>(
+  function ModalBlock({ asChild, className, ...rest }, ref) {
     const Component = asChild ? Slot : 'div';
 
     return (
       <Component
-        className={cl('ds-modal__footer', className)}
+        className={cl('ds-modal__block', className)}
         ref={ref}
         {...rest}
       />

packages/react/src/components/Modal/ModalFooter.tsx packages/react/src/components/Modal/ModalBlock.tsx

@@ -1,24 +1,20 @@
 import { Modal as ModalParent } from './Modal';
+import { ModalBlock } from './ModalBlock';
 import { ModalContext } from './ModalContext';
-import { ModalFooter } from './ModalFooter';
-import { ModalHeader } from './ModalHeader';
 import { ModalTrigger } from './ModalTrigger';
 
 const Modal = Object.assign(ModalParent, {
+  Block: ModalBlock,
   Context: ModalContext,
-  Footer: ModalFooter,
-  Header: ModalHeader,
   Trigger: ModalTrigger,
 });
 
+Modal.Block.displayName = 'Modal.Block';
 Modal.Context.displayName = 'Modal.Context';
-Modal.Footer.displayName = 'Modal.Footer';
-Modal.Header.displayName = 'Modal.Header';
 Modal.Trigger.displayName = 'Modal.Trigger';
 
+export type { ModalBlockProps } from './ModalBlock';
 export type { ModalContextProps } from './ModalContext';
-export type { ModalFooterProps } from './ModalFooter';
-export type { ModalHeaderProps } from './ModalHeader';
 export type { ModalProps } from './Modal';
 export type { ModalTriggerProps } from './ModalTrigger';
-export { Modal, ModalContext, ModalFooter, ModalHeader, ModalTrigger };
+export { Modal, ModalBlock, ModalContext, ModalTrigger };