From ef11212d006e8c29ca2f4986f218f68d458dd7da Mon Sep 17 00:00:00 2001
From: Schabse Laks <slaks@google.com>
Date: Tue, 22 Oct 2024 04:36:39 -0700
Subject: [PATCH] chore(dialog): wrap close button in element

PiperOrigin-RevId: 688495446
---
 packages/mdc-dialog/README.md    | 17 ++++++++++-------
 packages/mdc-dialog/_mixins.scss | 14 ++++++++------
 2 files changed, 18 insertions(+), 13 deletions(-)

diff --git a/packages/mdc-dialog/README.md b/packages/mdc-dialog/README.md
index 52ee9fe8579..918a050d87c 100644
--- a/packages/mdc-dialog/README.md
+++ b/packages/mdc-dialog/README.md
@@ -257,10 +257,11 @@ Full-screen dialogs group a series of tasks, such as creating a calendar entry w
         <h2 class="mdc-dialog__title" id="my-dialog-title">
           Full-Screen Dialog Title
         </h2>
-        <button class="mdc-icon-button material-icons mdc-dialog__close"
-                data-mdc-dialog-action="close">
-          close
-        </button>
+        <div class="mdc-dialog__close-tooltip-wrapper">
+          <button class="mdc-icon-button material-icons mdc-dialog__close" data-mdc-dialog-action="close">
+            close
+          </button>
+        </div>
       </div>
       <div class="mdc-dialog__content" id="my-dialog-content">
         Lorem ipsum dolor sit amet, consectetur adipiscing elit.
@@ -308,9 +309,11 @@ absolutely positioned. Sheet content can have no default padding by using the
   <div class="mdc-dialog__scrim" data-mdc-dialog-action="cancel"></div>
   <div class="mdc-dialog__container">
     <div class="mdc-dialog__surface" tabindex="-1">
-      <button class="mdc-icon-button material-icons mdc-dialog__close" data-mdc-dialog-action="close">
-        close
-      </button>
+      <div class="mdc-dialog__close-tooltip-wrapper">
+        <button class="mdc-icon-button material-icons mdc-dialog__close" data-mdc-dialog-action="close">
+          close
+        </button>
+      </div>
       <div class="mdc-dialog__content test-dialog__content">
         <div class="test-sheet__content">
           <h3>Sheets</h3>
diff --git a/packages/mdc-dialog/_mixins.scss b/packages/mdc-dialog/_mixins.scss
index b5d11f40f3c..4223688426b 100644
--- a/packages/mdc-dialog/_mixins.scss
+++ b/packages/mdc-dialog/_mixins.scss
@@ -229,7 +229,7 @@
       }
     }
 
-    .mdc-dialog__close {
+    .mdc-dialog__close-tooltip-wrapper {
       @include feature-targeting.targets($feat-structure) {
         top: 5px;
       }
@@ -253,13 +253,13 @@
 
   // Needed so that close affordance is aligned as if there was a title.
   .mdc-dialog--fullscreen--titleless {
-    .mdc-dialog__close {
+    .mdc-dialog__close-tooltip-wrapper {
       @include feature-targeting.targets($feat-structure) {
         margin-top: 4px;
       }
     }
 
-    &.mdc-dialog--scrollable .mdc-dialog__close {
+    &.mdc-dialog--scrollable .mdc-dialog__close-tooltip-wrapper {
       @include feature-targeting.targets($feat-structure) {
         margin-top: 0;
       }
@@ -515,7 +515,7 @@
   }
 
   .mdc-dialog--sheet {
-    .mdc-dialog__container .mdc-dialog__close {
+    .mdc-dialog__container .mdc-dialog__close-tooltip-wrapper {
       @include feature-targeting.targets($feat-structure) {
         right: variables.$sheet-close-icon-right;
         top: variables.$sheet-close-icon-top;
@@ -1051,7 +1051,8 @@
 /// @param  {Number} $title-side-padding - Space between the edge of the close
 ///   icon button and edge of the title.
 @mixin _fullscreen-header($close-icon-padding, $title-side-padding) {
-  .mdc-dialog__close {
+  .mdc-dialog__close-tooltip-wrapper {
+    position: relative;
     order: -1;
     @include theme.property(left, -#{$close-icon-padding});
   }
@@ -1072,7 +1073,8 @@
 /// Defines styles for the header bar when a dialog is modal.
 /// @param  {Number} $close-icon-padding - Padding on close icon button.
 @mixin _modal-header($close-icon-padding) {
-  .mdc-dialog__close {
+  .mdc-dialog__close-tooltip-wrapper {
+    position: relative;
     @include theme.property(right, -#{$close-icon-padding});
   }
 }