chore(dialog): wrap close button in element

PiperOrigin-RevId: 688495446
material-components · Oct 22, 2024 · ef11212 · ef11212
1 parent c4e5361
commit ef11212
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 13 deletions.
diff --git 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
@@ -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});
   }
 }