refactor(Modal): ♻️ Move styling to modal.css (#1937)

packages/css/index.css

@@ -18,6 +18,7 @@
 @import url('./heading.css');
 @import url('./paragraph.css');
 @import url('./radio.css');
+@import url('./modal.css');
 @import url('./list.css');
 @import url('./card.css');
 @import url('./link.css');

packages/css/modal.css

@@ -0,0 +1,106 @@
+@layer fds.modal {
+  .fds-modal {
+    padding: 0;
+    width: 100%;
+    max-width: 650px;
+    border: none;
+    border-radius: var(--fds-border_radius-medium);
+    box-shadow: var(--fds-shadow-xlarge);
+  }
+
+  .fds-modal::backdrop {
+    background-color: rgb(0 0 0 / 0.5);
+    animation: fade-in 300ms ease-in-out;
+  }
+
+  .fds-modal[open] {
+    animation:
+      slide-in 300ms ease-in-out,
+      fade-in 300ms ease-in-out;
+  }
+
+  .fds-modal > hr {
+    margin: var(--fds-spacing-3) 0 !important;
+    border-color: var(--fds-semantic-border-divider-subtle);
+  }
+
+  .fds-modal--lock-scroll {
+    overflow: hidden;
+  }
+
+  @media (max-width: 650px) {
+    .fds-modal {
+      min-width: 100%;
+      max-width: 100%;
+      border-radius: 0;
+    }
+  }
+
+  @media (prefers-reduced-motion: reduce) {
+    .fds-modal[open] {
+      animation: none;
+    }
+
+    .fds-modal::backdrop {
+      animation: none;
+    }
+  }
+
+  @keyframes slide-in {
+    0% {
+      transform: translateY(50px);
+    }
+
+    100% {
+      transform: translateY(0);
+    }
+  }
+
+  @keyframes fade-in {
+    0% {
+      opacity: 0;
+    }
+
+    100% {
+      opacity: 1;
+    }
+  }
+
+  .fds-modal__header {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    padding-top: var(--fds-spacing-6);
+    padding-bottom: var(--fds-spacing-2);
+    padding-left: var(--fds-spacing-6);
+    padding-right: var(--fds-spacing-18);
+    gap: var(--fds-spacing-1);
+    color: var(--fds-semantic-text-neutral-default);
+  }
+
+  .fds-modal__header--no-button {
+    padding-right: var(--fds-spacing-6);
+  }
+
+  .fds-modal__header__button {
+    position: absolute;
+    top: var(--fds-spacing-3);
+    right: var(--fds-spacing-3);
+  }
+
+  .fds-modal__footer {
+    display: flex;
+    align-items: center;
+    gap: var(--fds-spacing-4);
+    padding-top: var(--fds-spacing-3);
+    padding-bottom: var(--fds-spacing-6);
+    padding-left: var(--fds-spacing-6);
+    padding-right: var(--fds-spacing-6);
+  }
+
+  .fds-modal__content {
+    padding: var(--fds-spacing-2) var(--fds-spacing-6);
+    max-height: 80vh;
+    overflow-y: auto;
+  }
+}

packages/css/react-css-modules.css

@@ -1089,117 +1089,6 @@
   }
 }
 
-@layer fds.modal-content {
-  .fds-modalcontent-modalContent-4af8b711 {
-    padding: var(--fds-spacing-2) var(--fds-spacing-6);
-    max-height: 80vh;
-    overflow-y: auto;
-  }
-}
-
-@layer fds.modal {
-  .fds-modal-modal-a6ba173 {
-    padding: 0;
-    width: 100%;
-    max-width: 650px;
-    border: none;
-    border-radius: var(--fds-border_radius-medium);
-    box-shadow: var(--fds-shadow-xlarge);
-  }
-
-  .fds-modal-modal-a6ba173::backdrop {
-    background-color: rgb(0 0 0 / 0.5);
-    animation: fds-modal-fade-in-a6ba173 300ms ease-in-out;
-  }
-
-  .fds-modal-modal-a6ba173[open] {
-    animation: fds-modal-slide-in-a6ba173 300ms ease-in-out, fds-modal-fade-in-a6ba173 300ms ease-in-out;
-  }
-
-  .fds-modal-modal-a6ba173 > hr {
-    margin: var(--fds-spacing-3) 0 !important;
-    border-color: var(--fds-semantic-border-divider-subtle);
-  }
-
-  @media (max-width: 650px) {
-    .fds-modal-modal-a6ba173 {
-      min-width: 100%;
-      max-width: 100%;
-      border-radius: 0;
-    }
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .fds-modal-modal-a6ba173[open] {
-      animation: none;
-    }
-
-    .fds-modal-modal-a6ba173::backdrop {
-      animation: none;
-    }
-  }
-
-  .fds-modal-lockScroll-a6ba173 {
-    overflow: hidden;
-  }
-
-  @keyframes fds-modal-slide-in-a6ba173 {
-    0% {
-      transform: translateY(50px);
-    }
-
-    100% {
-      transform: translateY(0);
-    }
-  }
-
-  @keyframes fds-modal-fade-in-a6ba173 {
-    0% {
-      opacity: 0;
-    }
-
-    100% {
-      opacity: 1;
-    }
-  }
-}
-
-@layer fds.modal-footer {
-  .fds-modalfooter-modalFooter-d3aee3bf {
-    display: flex;
-    align-items: center;
-    gap: var(--fds-spacing-4);
-    padding-top: var(--fds-spacing-3);
-    padding-bottom: var(--fds-spacing-6);
-    padding-left: var(--fds-spacing-6);
-    padding-right: var(--fds-spacing-6);
-  }
-}
-
-@layer fds.modal-header {
-  .fds-modalheader-modalHeader-47e4ee5b {
-    display: flex;
-    justify-content: space-between;
-    flex-direction: column;
-    padding-top: var(--fds-spacing-6);
-    padding-bottom: var(--fds-spacing-2);
-    padding-left: var(--fds-spacing-6);
-    padding-right: var(--fds-spacing-18);
-    gap: var(--fds-spacing-1);
-    color: var(--fds-semantic-text-neutral-default);
-  }
-
-  .fds-modalheader-modalHeaderButton-47e4ee5b {
-    position: absolute;
-    top: var(--fds-spacing-3);
-    right: var(--fds-spacing-3);
-  }
-
-  .fds-modalheader-modalHeader-47e4ee5b.fds-modalheader-noCloseButton-47e4ee5b {
-    padding-right: var(--fds-spacing-6);
-  }
-}
-
 @layer fds.dropdownmenu-group {
   .fds-dropdownmenugroup-section-79852df0 {
     margin: 0;

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

@@ -1,10 +1,8 @@
 import { forwardRef } from 'react';
 import type { HTMLAttributes } from 'react';
-import cl from 'clsx';
+import cl from 'clsx/lite';
 import { Slot } from '@radix-ui/react-slot';
 
-import classes from './ModalContent.module.css';
-
 export type ModalContentProps = {
   /**
    * Change the default rendered element for the one passed as a child, merging their props and behavior.
@@ -20,7 +18,7 @@ export const ModalContent = forwardRef<HTMLDivElement, ModalContentProps>(
     return (
       <Component
         ref={ref}
-        className={cl(classes.modalContent, className)}
+        className={cl('fds-modal__content', className)}
         {...rest}
       />
     );

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

@@ -6,9 +6,8 @@ import {
 import type { DialogHTMLAttributes } from 'react';
 import { forwardRef, useContext, useEffect, useRef } from 'react';
 import { Slot } from '@radix-ui/react-slot';
-import cl from 'clsx';
+import cl from 'clsx/lite';
 
-import classes from './Modal.module.css';
 import { useScrollLock } from './useScrollLock';
 import { useModalState } from './useModalState';
 import { ModalContext } from './ModalRoot';
@@ -62,7 +61,7 @@ export const ModalDialog = forwardRef<HTMLDialogElement, ModalDialogProps>(
     };
 
     const mergedRefs = useMergeRefs([modalRef, ref, modalDialogRef]);
-    useScrollLock(modalDialogRef, classes.lockScroll);
+    useScrollLock(modalDialogRef, 'fds-modal--lock-scroll');
 
     useEffect(() => {
       setOpen(open);
@@ -116,7 +115,7 @@ export const ModalDialog = forwardRef<HTMLDialogElement, ModalDialogProps>(
     return (
       <Component
         ref={mergedRefs}
-        className={cl(classes.modal, className)}
+        className={cl('fds-modal', className)}
         onCancel={onCancel}
         {...rest}
       >

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

@@ -1,10 +1,8 @@
 import type { HTMLAttributes } from 'react';
 import { forwardRef } from 'react';
-import cl from 'clsx';
+import cl from 'clsx/lite';
 import { Slot } from '@radix-ui/react-slot';
 
-import classes from './ModalFooter.module.css';
-
 export type ModalFooterProps = {
   /**
    * Change the default rendered element for the one passed as a child, merging their props and behavior.
@@ -20,7 +18,7 @@ export const ModalFooter = forwardRef<HTMLElement, ModalFooterProps>(
     return (
       <Component
         ref={ref}
-        className={cl(classes.modalFooter, className)}
+        className={cl('fds-modal__footer', className)}
         {...rest}
       />
     );