fix(dialog): incorrect elevation layering

PiperOrigin-RevId: 518039204
material-components · Mar 20, 2023 · 028e44e · 028e44e
1 parent 6700947
commit 028e44e
Show file tree

Hide file tree

Showing 4 changed files with 12 additions and 6 deletions.
diff --git a/button/lib/_text-button.scss b/button/lib/_text-button.scss
@@ -46,7 +46,7 @@ $_custom-property-prefix: 'text-button';
       --_#{$token}: #{$value};
     }
 
-    --_container-color: unset;
+    --_container-color: none;
   }
 }
 

diff --git a/dialog/lib/_dialog.scss b/dialog/lib/_dialog.scss
@@ -9,6 +9,7 @@
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
+@use '../../elevation/elevation';
 @use '../../sass/color';
 @use '../../sass/resolvers';
 @use '../../sass/shape';
@@ -119,9 +120,12 @@
     position: absolute;
     inset: 0;
     border-radius: inherit;
-    --md-elevation-level: var(--_container-elevation);
-    --md-elevation-surface-tine-color: var(
-      --_container-surface-tint-layer-color
+
+    @include elevation.theme(
+      (
+        level: var(--_container-elevation),
+        surface-tint: var(--_container-surface-tint-layer-color),
+      )
     );
   }
 

diff --git a/dialog/lib/_tokens.scss b/dialog/lib/_tokens.scss
@@ -8,6 +8,7 @@
 @use 'sass:string';
 // go/keep-sorted end
 // go/keep-sorted start
+@use '../../elevation/lib/elevation';
 @use '../../sass/color';
 @use '../../sass/shape';
 @use '../../sass/string-ext';
@@ -85,5 +86,6 @@ $_fullscreen-tokens: (
  */
 @function md-comp-dialog-values() {
   $tokens: remove-unsupported-tokens(tokens.md-comp-dialog-values());
+  $tokens: elevation.resolve-tokens($tokens, 'container-elevation');
   @return map.merge(map.merge($tokens, $_tokens), $_fullscreen-tokens);
 }
diff --git a/dialog/lib/dialog.ts b/dialog/lib/dialog.ts
@@ -275,6 +275,7 @@ export class Dialog extends LitElement {
         @pointermove=${this.handlePointerMove}
         @pointerup=${this.handleDragEnd}
       >
+        <md-elevation surface></md-elevation>
         <header class="header">
           <slot name="header">
             <slot name="headline-prefix"></slot>
@@ -288,7 +289,6 @@ export class Dialog extends LitElement {
         <footer class="footer">
           <slot name="footer"></slot>
         </footer>
-        <md-elevation surface></md-elevation>
       </div>
     </dialog>`;
   }
@@ -544,4 +544,4 @@ export class Dialog extends LitElement {
     this.dragging = false;
     this.dragInfo = undefined;
   }
-}
+}
-Original file line number
+Diff line change
@@ Expand Up / @@ -46,7 +46,7 @@ $_custom-property-prefix: 'text-button'; @@
           --_#{$token}: #{$value};
         }
-        --_container-color: unset;
+        --_container-color: none;
       }
     }
@@ Expand Down @@