Fix: [IGL-107] Dialog and Modal spacing (#618)

workleap · Dec 20, 2023 · 26614d0 · 26614d0
1 parent 6b4f9bf
commit 26614d0
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/.changeset/nasty-camels-glow.md b/.changeset/nasty-camels-glow.md
@@ -0,0 +1,6 @@
+---
+"@igloo-ui/dialog": patch
+"@igloo-ui/modal": patch
+---
+
+Fixed the spacing for titles and buttons inside the Modal and Dialog components to match figma.
diff --git a/packages/Dialog/src/dialog.scss b/packages/Dialog/src/dialog.scss
@@ -41,12 +41,12 @@
     --ids-dialog-content-padding: 0 var(--hop-space-inset-md) var(--hop-space-inset-md);
     --ids-dialog-sub-title-line-height: var(--hop-body-md-line-height);
     --ids-dialog-sub-title-color: var(--hop-neutral-text-weak);
-    --ids-dialog-sub-title-padding-top: var(--hop-space-stack-sm);
+    --ids-dialog-sub-title-padding-top: var(--hop-space-inset-md);
     --ids-dialog-close-margin: 0;
     --ids-dialog-close-align: flex-end;
     --ids-dialog-close-position: relative;
     --ids-dialog-close-padding-x: var(--hop-space-inset-xl);
-    --ids-dialog-buttons-margin: var(--hop-space-stack-lg) 0 calc(-1 * var(--hop-space-inset-md));
+    --ids-dialog-buttons-margin: var(--hop-space-stack-xl) 0 calc(-1 * var(--hop-space-inset-sm));
     --ids-dialog-button-margin: var(--hop-space-stack-sm) 0;
     --ids-dialog-button-width: 2rem;
 }
@@ -70,7 +70,7 @@
         --ids-dialog-close-margin: 0;
         --ids-dialog-close-position: absolute;
         --ids-dialog-content-padding: 0 var(--hop-space-inset-lg) var(--hop-space-inset-lg);
-        --ids-dialog-buttons-margin: var(--hop-space-stack-lg) calc(-1 * var(--hop-space-inset-sm)) 0;
+        --ids-dialog-buttons-margin: var(--hop-space-stack-xl) calc(-1 * var(--hop-space-inset-sm)) 0;
         --ids-dialog-button-margin: 0 var(--hop-space-inset-sm);
         --ids-dialog-header-font-size: var(--hop-heading-lg-font-size);
         --ids-dialog-header-line-height: var(--hop-heading-lg-line-height);

diff --git a/packages/Modal/src/modal.scss b/packages/Modal/src/modal.scss
@@ -11,6 +11,8 @@
     --ids-modal-background: #{tokens.$samoyed};
     --ids-modal-text: #{tokens.$black};
     --ids-modal-padding: #{tokens.$space-3};
+    --ids-modal-padding-with-header: #{tokens.$space-3};
+    --ids-modal-padding-full-content: #{tokens.$space-3};
     --ids-modal-index: #{tokens.$z-index-100};
     --ids-modal-shadow: none;
     --ids-modal-radius: 0;
@@ -47,6 +49,8 @@
     --ids-modal-background: var(--hop-neutral-surface);
     --ids-modal-text: var(--hop-neutral-text);
     --ids-modal-padding: var(--hop-space-inset-md);
+    --ids-modal-padding-with-header: var(--hop-space-inset-md);
+    --ids-modal-padding-full-content: var(--hop-space-inset-md);
     --ids-modal-index: 100;
     --ids-modal-shadow: none;
     --ids-modal-radius: 0;
@@ -103,6 +107,7 @@
         --ids-modal-close-margin: -#{tokens.$space-2} -#{tokens.$space-2} #{tokens.$space-0} #{tokens.$space-0};
         --ids-modal-close-align: flex-end;
         --ids-modal-padding: #{tokens.$space-4};
+        --ids-modal-padding-with-header: #{tokens.$space-4};
         --ids-modal-full-content-display: none;
     }
 
@@ -130,6 +135,7 @@
         --ids-modal-close-margin: var(--hop-space-inset-lg);
         --ids-modal-close-align: flex-end;
         --ids-modal-padding: var(--hop-space-inset-lg);
+        --ids-modal-padding-with-header: var(--hop-space-inset-md) var(--hop-space-inset-lg) var(--hop-space-inset-lg);
         --ids-modal-full-content-display: none;
     }
 }
@@ -275,8 +281,13 @@
 .ids-modal__content {
     padding: var(--ids-modal-padding);
 
+    .ids-modal--with-title &,
+    .ids-modal--closable & {
+        padding: var(--ids-modal-padding-with-header);
+    }
+
     .ids-modal--full-content & {
-        --ids-modal-padding: #{tokens.$space-3};
+        padding: var(--ids-modal-padding-full-content);
     }
 }