fix(Modal): api alignment (#2440)

- **Question for review:** Should `Modal.Close` be a compound component? 🤔 - Fixes #2063 - Fixes #1177 --------- Co-authored-by: barsnes <[email protected]>
digdir · Sep 25, 2024 · 1002d87 · 1002d87
1 parent 6f07d0c
commit 1002d87
Show file tree

Hide file tree

Showing 20 changed files with 495 additions and 748 deletions.
diff --git a/.changeset/hip-schools-greet.md b/.changeset/hip-schools-greet.md
@@ -0,0 +1,14 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+Modal:
+- Rename `Modal.Dialog` to `Modal`
+- Rename `Modal.Root` to `Modal.Context`
+- Replace `onInteractOutside` event with `backdropClose` boolean
+- Replace `closeButton` and `closeButtonTitle` on `Modal.Header` with `closeButton` on `Modal`
+- Add border to `Modal.Header` and `Modal.Footer`
+- Remove `Modal.Content`
+- Remove `onBeforeClose`
+- Remove `subtitle` from `Modal.Header`
diff --git a/apps/_components/src/ColorModal/ColorModal.tsx b/apps/_components/src/ColorModal/ColorModal.tsx
@@ -52,18 +52,17 @@ export const ColorModal = ({
   weight,
 }: ColorModalProps) => {
   return (
-    <Modal.Root>
-      <Modal.Dialog
+    <Modal.Context>
+      <Modal
         ref={colorModalRef}
         style={{
           maxWidth: '1050px',
         }}
-        onInteractOutside={() => colorModalRef.current?.close()}
       >
         <Modal.Header>
           {`${capitalizeFirstLetter(namespace)} ${capitalizeFirstLetter(getColorNameFromNumber(weight))}`}
         </Modal.Header>
-        <Modal.Content className={classes.modalContent}>
+        <div className={classes.modalContent}>
           <div className={classes.description}>
             {getColorDescription({
               weight,
@@ -121,8 +120,8 @@ export const ColorModal = ({
               </Accordion.Content>
             </Accordion.Item>
           </Accordion.Root> */}
-        </Modal.Content>
-      </Modal.Dialog>
-    </Modal.Root>
+        </div>
+      </Modal>
+    </Modal.Context>
   );
 };
diff --git a/apps/theme/components/TokenModal/TokenModal.module.css b/apps/theme/components/TokenModal/TokenModal.module.css
@@ -22,10 +22,6 @@
   padding-right: 0;
 }
 
-.modalContent {
-  padding-bottom: 24px;
-}
-
 .tabs {
   margin-bottom: 16px;
 }
@@ -34,7 +30,7 @@
   margin-bottom: 16px;
 }
 
-.modalHeader h2 {
+.modalHeader {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -55,11 +51,6 @@
   font-weight: 500;
 }
 
-.modalHeader > button {
-  right: 22px;
-  top: 22px;
-}
-
 .hiddenGlobalBtn {
   position: absolute;
   left: 0;

diff --git a/apps/theme/components/TokenModal/TokenModal.tsx b/apps/theme/components/TokenModal/TokenModal.tsx
@@ -69,107 +69,102 @@ export const TokenModal = ({
   }, []);
 
   return (
-    <Modal.Root>
+    <Modal.Context>
       <Modal.Trigger
         onClick={() => {
           return modalRef.current?.showModal();
         }}
       >
         Ta i bruk tema
       </Modal.Trigger>
-      <Modal.Dialog
-        ref={modalRef}
-        onInteractOutside={() => modalRef.current?.close()}
-        style={{
-          maxWidth: '1400px',
-        }}
+      <Modal
         className={classes.modal}
+        style={{ maxWidth: 1400 }}
+        ref={modalRef}
       >
-        <Modal.Header className={classes.modalHeader}>
+        <Heading className={classes.modalHeader} size='xs' spacing>
           <img src='img/emblem.svg' alt='' className={classes.emblem} />
           <span className={classes.headerText}>Kopier fargetema</span>
-        </Modal.Header>
-        <Modal.Content className={classes.modalContent}>
-          <Ingress size='xs' spacing>
-            Velg et av alternativene under for å ta i bruk design-tokens med
-            ditt tema.
-          </Ingress>
-          <Heading level={3} size='xs' spacing>
-            Alt 1. Design tokens
-          </Heading>
-          <Textfield
-            label='Navn på tema'
-            description="Kun bokstaver, tall og bindestrek. Eks: 'mitt-tema'"
-            value={themeName}
-            onChange={(e) => {
-              const value = e.currentTarget.value
-                .replace(/\s+/g, '-')
-                .replace(/[^A-Z0-9-]+/gi, '')
-                .toLowerCase();
+        </Heading>
+        <Ingress size='xs' spacing>
+          Velg et av alternativene under for å ta i bruk design-tokens med ditt
+          tema.
+        </Ingress>
+        <Heading level={3} size='xs' spacing>
+          Alt 1. Design tokens
+        </Heading>
+        <Textfield
+          label='Navn på tema'
+          description="Kun bokstaver, tall og bindestrek. Eks: 'mitt-tema'"
+          value={themeName}
+          onChange={(e) => {
+            const value = e.currentTarget.value
+              .replace(/\s+/g, '-')
+              .replace(/[^A-Z0-9-]+/gi, '')
+              .toLowerCase();
 
-              setThemeName(value);
-            }}
-            style={{ marginBlock: 'var(--ds-spacing-4)' }}
-          ></Textfield>
-          <Paragraph spacing>
-            Kopier kommandosnutten under og kjør på maskinen din for å generere
-            alle design tokens (json-filer). Sørg for at du har{' '}
-            <Link href='https://nodejs.org' target='_blank'>
-              Node.js (åpnes i ny fane)
-            </Link>{' '}
-            installert på maskinen din.
-          </Paragraph>
-          <div
-            className={classes.snippet}
-            style={{ marginBottom: 'var(--ds-spacing-8)' }}
+            setThemeName(value);
+          }}
+          style={{ marginBlock: 'var(--ds-spacing-4)' }}
+        />
+        <Paragraph spacing>
+          Kopier kommandosnutten under og kjør på maskinen din for å generere
+          alle design tokens (json-filer). Sørg for at du har{' '}
+          <Link href='https://nodejs.org' target='_blank'>
+            Node.js (åpnes i ny fane)
+          </Link>{' '}
+          installert på maskinen din.
+        </Paragraph>
+        <div
+          className={classes.snippet}
+          style={{ marginBottom: 'var(--ds-spacing-8)' }}
+        >
+          <CodeSnippet syntax='shell'>{cliSnippet}</CodeSnippet>
+        </div>
+        <Heading level={3} size='xs' spacing>
+          Alt 2. Figma plugin
+        </Heading>
+        <Paragraph spacing>
+          JSON for bruk med Designsystemet{' '}
+          <Link
+            href='https://www.figma.com/community/plugin/1382044395533039221/designsystemet-beta'
+            target='_blank'
           >
-            <CodeSnippet syntax='shell'>{cliSnippet}</CodeSnippet>
-          </div>
-          <Heading level={3} size='xs' spacing>
-            Alt 2. Figma plugin
-          </Heading>
-          <Paragraph spacing>
-            JSON for bruk med Designsystemet{' '}
-            <Link
-              href='https://www.figma.com/community/plugin/1382044395533039221/designsystemet-beta'
-              target='_blank'
-            >
-              Figma Plugin (åpnes i ny fane)
-            </Link>{' '}
-            og{' '}
-            <Link
-              href='https://www.figma.com/community/file/1322138390374166141/designsystemet-core-ui-kit'
-              target='_blank'
-            >
-              Figma UI kit (åpnes i ny fane)
-            </Link>
-            .
-          </Paragraph>
-          <Paragraph spacing>
-            Dette alternativet er kun ment for rask prototyping av valgt tema i
-            Figma. For å bruke design tokens i produksjon, anbefales det å bruke
-            alternativ 1.
-          </Paragraph>
-          <div className={classes.content}>
-            <div className={classes.column}>
-              <Heading level={4} size='2xs' spacing>
-                Light Mode
-              </Heading>
-              <div className={classes.snippet}>
-                <CodeSnippet language='json'>{lightThemeSnippet}</CodeSnippet>
-              </div>
+            Figma Plugin (åpnes i ny fane)
+          </Link>{' '}
+          og{' '}
+          <Link
+            href='https://www.figma.com/community/file/1322138390374166141/designsystemet-core-ui-kit'
+            target='_blank'
+          >
+            Figma UI kit (åpnes i ny fane)
+          </Link>
+          .
+        </Paragraph>
+        <Paragraph spacing>
+          Dette alternativet er kun ment for rask prototyping av valgt tema i
+          Figma. For å bruke design tokens i produksjon, anbefales det å bruke
+          alternativ 1.
+        </Paragraph>
+        <div className={classes.content}>
+          <div className={classes.column}>
+            <Heading level={4} size='2xs' spacing>
+              Light Mode
+            </Heading>
+            <div className={classes.snippet}>
+              <CodeSnippet language='json'>{lightThemeSnippet}</CodeSnippet>
             </div>
-            <div className={classes.column}>
-              <Heading level={4} size='2xs' spacing>
-                Dark Mode
-              </Heading>
-              <div className={classes.snippet}>
-                <CodeSnippet language='json'>{darkThemeSnippet}</CodeSnippet>
-              </div>
+          </div>
+          <div className={classes.column}>
+            <Heading level={4} size='2xs' spacing>
+              Dark Mode
+            </Heading>
+            <div className={classes.snippet}>
+              <CodeSnippet language='json'>{darkThemeSnippet}</CodeSnippet>
             </div>
           </div>
-        </Modal.Content>
-      </Modal.Dialog>
-    </Modal.Root>
+        </div>
+      </Modal>
+    </Modal.Context>
   );
 };