From 8613fe6a5845f87c7264254bdc114341fef7d824 Mon Sep 17 00:00:00 2001
From: Elizabeth Mitchell <lizmitchell@google.com>
Date: Mon, 11 Sep 2023 14:53:11 -0700
Subject: [PATCH] fix(dialog)!: change content margin to padding

BREAKING CHANGE: if overriding margin on a dialog's content, swap it to padding. If a dialog's slotted first or last child has built-in margin (such as `<h3>` or `<p>`), remove the top/bottom margin as needed (since margin swapped to padding, there's no more margin collapsing).

PiperOrigin-RevId: 564509429
---
 dialog/internal/_dialog.scss | 19 +++++++++++--------
 1 file changed, 11 insertions(+), 8 deletions(-)

diff --git a/dialog/internal/_dialog.scss b/dialog/internal/_dialog.scss
index 3b641f2b64..318434d8ac 100644
--- a/dialog/internal/_dialog.scss
+++ b/dialog/internal/_dialog.scss
@@ -136,9 +136,10 @@
   slot[name='headline']::slotted(*) {
     align-items: center;
     align-self: stretch;
+    box-sizing: border-box;
     display: flex;
     gap: 8px;
-    margin: 24px 24px 0;
+    padding: 24px 24px 0;
   }
 
   .icon {
@@ -149,22 +150,22 @@
     color: var(--_icon-color);
     fill: currentColor;
     font-size: var(--_icon-size);
-    margin-top: 24px;
+    padding-top: 24px;
     height: var(--_icon-size);
     width: var(--_icon-size);
   }
 
   .has-icon slot[name='headline']::slotted(*) {
     justify-content: center;
-    margin-top: 16px;
+    padding-top: 16px;
   }
 
   .scrollable slot[name='headline']::slotted(*) {
-    margin-bottom: 16px;
+    padding-bottom: 16px;
   }
 
   .scrollable.has-headline slot[name='content']::slotted(*) {
-    margin-top: 8px;
+    padding-top: 8px;
   }
 
   .container {
@@ -217,7 +218,8 @@
   }
 
   slot[name='content']::slotted(*) {
-    margin: 24px;
+    box-sizing: border-box;
+    padding: 24px;
   }
 
   // Anchors are used with an IntersectionObserver to determine when the content
@@ -239,14 +241,15 @@
   }
 
   slot[name='actions']::slotted(*) {
+    box-sizing: border-box;
     display: flex;
     gap: 8px;
     justify-content: flex-end;
-    margin: 16px 24px 24px;
+    padding: 16px 24px 24px;
   }
 
   .has-actions slot[name='content']::slotted(*) {
-    margin-bottom: 8px;
+    padding-bottom: 8px;
   }
 
   md-divider {