feat(modal): css changes (#2418)

part of #2295 I am not renaming anything is this PR. That belongs in it's own PR
digdir · Sep 17, 2024 · f71185c · f71185c
1 parent 5bf8c21
commit f71185c
Show file tree

Hide file tree

Showing 3 changed files with 75 additions and 67 deletions.
diff --git a/.changeset/heavy-rabbits-boil.md b/.changeset/heavy-rabbits-boil.md
@@ -0,0 +1,6 @@
+---
+"@digdir/designsystemet-css": patch
+"@digdir/designsystemet-react": patch
+---
+
+Modal: css changes
diff --git a/packages/css/modal.css b/packages/css/modal.css
@@ -1,5 +1,5 @@
 .ds-modal {
-  --dsc-modal-max-width: 650px;
+  --dsc-modal-max-width: 40rem;
   --dsc-modal-background: var(--ds-color-neutral-background-default);
   --dsc-modal-color: var(--ds-color-neutral-text-default);
   --dsc-modal-backdrop-background: rgb(0 0 0 / 0.5);
@@ -16,76 +16,84 @@
   box-shadow: var(--ds-shadow-xl);
   background-color: var(--dsc-modal-background);
   color: var(--dsc-modal-color);
-}
-
-.ds-modal::backdrop {
-  background-color: var(--dsc-modal-backdrop-background);
-  animation: fade-in 300ms ease-in-out;
-}
 
-.ds-modal[open] {
-  animation:
-    slide-in 300ms ease-in-out,
-    fade-in 300ms ease-in-out;
-}
-
-.ds-modal > hr {
-  margin: var(--ds-spacing-3) 0 !important;
-  border-color: var(--ds-color-neutral-border-subtle);
-}
-
-.ds-modal--lock-scroll {
-  overflow: hidden;
-}
+  &::backdrop {
+    background-color: var(--dsc-modal-backdrop-background);
+    animation: fade-in 300ms ease-in-out;
+  }
 
-@media (max-width: 650px) {
-  .ds-modal {
-    min-width: 100%;
-    max-width: 100%;
-    border-radius: 0;
+  &[open] {
+    animation:
+      slide-in 300ms ease-in-out,
+      fade-in 300ms ease-in-out;
   }
-}
 
-@media (prefers-reduced-motion: reduce) {
-  .ds-modal[open] {
-    animation: none;
+  & > hr {
+    margin: var(--ds-spacing-3) 0 !important;
   }
 
-  .ds-modal::backdrop {
-    animation: none;
+  @media (max-width: 40rem) {
+    & {
+      min-width: 100%;
+      max-width: 100%;
+      border-radius: 0;
+    }
   }
-}
 
-.ds-modal__header {
-  display: flex;
-  justify-content: space-between;
-  flex-direction: column;
-  padding: var(--dsc-modal-header-padding);
-  gap: var(--ds-spacing-1);
-  color: var(--dsc-modal-color);
-}
+  @media (prefers-reduced-motion: reduce) {
+    &[open] {
+      animation: none;
+    }
 
-.ds-modal__header--no-button {
-  --dsc-modal-header-padding: var(--ds-spacing-6) var(--ds-spacing-6) var(--ds-spacing-2) var(--ds-spacing-6);
-}
+    &::backdrop {
+      animation: none;
+    }
+  }
 
-.ds-modal__header__button {
-  position: absolute;
-  top: var(--ds-spacing-3);
-  right: var(--ds-spacing-3);
-}
+  &.ds-modal--lock-scroll {
+    overflow: hidden;
+  }
 
-.ds-modal__footer {
-  display: flex;
-  align-items: center;
-  gap: var(--ds-spacing-4);
-  padding: var(--dsc-modal-footer-padding);
-}
+  .ds-modal__header {
+    display: flex;
+    justify-content: space-between;
+    flex-direction: column;
+    padding: var(--dsc-modal-header-padding);
+    gap: var(--ds-spacing-1);
+
+    &:not(:has(> .ds-modal__header__button)) {
+      --dsc-modal-header-padding: var(--ds-spacing-6) var(--ds-spacing-6) var(--ds-spacing-2) var(--ds-spacing-6);
+    }
+
+    .ds-modal__header__button {
+      position: absolute;
+      top: var(--ds-spacing-3);
+      right: var(--ds-spacing-3);
+      color: var(--dsc-modal-color);
+
+      &::before {
+        content: '';
+        background: currentcolor;
+        height: 1.5em;
+        width: 1.5em;
+        mask: center/contain no-repeat
+          url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1em' height='1em' fill='none' viewBox='0 0 24 24' focusable='false' role='img'%3E%3Cpath fill='currentColor' d='M6.53 5.47a.75.75 0 0 0-1.06 1.06L10.94 12l-5.47 5.47a.75.75 0 1 0 1.06 1.06L12 13.06l5.47 5.47a.75.75 0 1 0 1.06-1.06L13.06 12l5.47-5.47a.75.75 0 0 0-1.06-1.06L12 10.94z'%3E%3C/path%3E%3C/svg%3E");
+      }
+    }
+  }
 
-.ds-modal__content {
-  padding: var(--dsc-modal-content-padding);
-  max-height: var(--dsc-modal-content-max-height);
-  overflow-y: auto;
+  .ds-modal__footer {
+    display: flex;
+    align-items: center;
+    gap: var(--ds-spacing-4);
+    padding: var(--dsc-modal-footer-padding);
+  }
+
+  .ds-modal__content {
+    padding: var(--dsc-modal-content-padding);
+    max-height: var(--dsc-modal-content-max-height);
+    overflow-y: auto;
+  }
 }
 
 @keyframes slide-in {

diff --git a/packages/react/src/components/Modal/ModalHeader.tsx b/packages/react/src/components/Modal/ModalHeader.tsx
@@ -51,11 +51,7 @@ export const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(
     return (
       <Component
         ref={ref}
-        className={cl(
-          'ds-modal__header',
-          !closeButton && 'ds-modal__header--no-button',
-          className,
-        )}
+        className={cl('ds-modal__header', className)}
         {...rest}
       >
         {subtitle && (
@@ -77,9 +73,7 @@ export const ModalHeader = forwardRef<HTMLDivElement, ModalHeaderProps>(
             icon
             className='ds-modal__header__button'
             title={closeButtonTitle}
-          >
-            <XMarkIcon title={closeButtonTitle} fontSize='1.5em' />
-          </Button>
+          />
         )}
       </Component>
     );