fix(dialog)!: remove transition and scrim tokens

PiperOrigin-RevId: 552535303
material-components · Jul 31, 2023 · e581142 · e581142
1 parent 3681b58
commit e581142
Show file tree

Hide file tree

Showing 6 changed files with 34 additions and 58 deletions.
diff --git a/catalog/src/components/nav-drawer.ts b/catalog/src/components/nav-drawer.ts
@@ -252,7 +252,7 @@ import {SignalElement} from '../signals/signal-element.js';
     }
 
     .scrim {
-      background-color: var(--md-dialog-scrim-color, rgba(0, 0, 0, 0.32));
+      background-color: rgba(0, 0, 0, 0.32);
     }
 
     @media (max-width: 900px) {
@@ -368,7 +368,7 @@ import {SignalElement} from '../signals/signal-element.js';
         }
 
         .scrim {
-          background-color: var(--md-dialog-scrim-color, rgba(0, 0, 0, 0.75));
+          background-color: rgba(0, 0, 0, 0.75);
         }
       }
 

diff --git a/dialog/dialog_test.ts b/dialog/dialog_test.ts
@@ -22,12 +22,7 @@ interface DialogTestProps {
 
 function getDialogTemplate(props?: DialogTestProps) {
   return html`
-    <md-dialog
-      .modeless=${props?.modeless ?? false}
-      style="
-        --md-dialog-opening-transition-duration: 0ms;
-        --md-dialog-closing-transition-duration: 0ms;
-      ">
+    <md-dialog .modeless=${props?.modeless ?? false}>
       <div class="content">Content
         <input dialog-focus>
       </div>

diff --git a/dialog/harness.ts b/dialog/harness.ts
@@ -60,7 +60,7 @@ export class DialogHarness extends Harness<Dialog> {
     await this.transitionComplete();
     const dialogElement = await this.getInteractiveElement();
     const {backgroundColor, display} =
-        getComputedStyle(dialogElement, '::before');
+        getComputedStyle(dialogElement, '::backdrop');
     const hiddenBg = `rgba(0, 0, 0, 0)`;
     return backgroundColor !== hiddenBg && display !== 'none';
   }

diff --git a/dialog/internal/_dialog.scss b/dialog/internal/_dialog.scss
@@ -3,19 +3,31 @@
 // SPDX-License-Identifier: Apache-2.0
 //
 
-// PUBLIC PROPERTIES
-
 // go/keep-sorted start
 @use 'sass:map';
 // go/keep-sorted end
 // go/keep-sorted start
 @use '../../elevation/elevation';
 @use '../../internal/sass/theme';
-@use './tokens';
+@use '../../tokens';
+@use './tokens' as md-dialog-tokens;
 // go/keep-sorted end
 
+$_md-sys-motion: tokens.md-sys-motion-values();
+// Basing on https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration#27a05b8b-02b1-4695-a7e4-70797f205222
+$_opening-transition-duration: map.get($_md-sys-motion, 'duration-medium4');
+$_opening-transition-easing: map.get(
+  $_md-sys-motion,
+  'easing-emphasized-decelerate'
+);
+$_closing-transition-duration: map.get($_md-sys-motion, 'duration-short4');
+$_closing-transition-easing: map.get(
+  $_md-sys-motion,
+  'easing-emphasized-accelerate'
+);
+
 @mixin styles() {
-  $tokens: tokens.md-comp-dialog-values();
+  $tokens: md-dialog-tokens.md-comp-dialog-values();
   $tokens: theme.create-theme-vars($tokens, 'dialog');
 
   :host {
@@ -24,13 +36,6 @@
     }
   }
 
-  @media (prefers-reduced-motion: reduce) {
-    :host {
-      --_opening-transition-duration: 0;
-      --_closing-transition-duration: 0;
-    }
-  }
-
   .dialog {
     position: fixed;
     align-items: center;
@@ -64,19 +69,8 @@
     background: none;
   }
 
-  // Note, using ::before as scrim because ::backdrop cannot inherit custom properties.
-  .dialog::before {
-    content: '';
-    position: absolute;
-    z-index: -1;
-    inset: 0;
-    block-size: 100dvh;
-    inline-size: 100dvw;
-    pointer-events: none;
-  }
-
   // Hide scrim when modeless.
-  :host([modeless]) .dialog:before {
+  :host([modeless]) .dialog::backdrop {
     display: none;
   }
 
@@ -198,31 +192,31 @@
     transform: none;
   }
 
-  .dialog::before {
+  .dialog::backdrop {
     transition: background-color linear;
     background-color: transparent;
   }
 
-  :host([showing-open]) .dialog::before {
-    background-color: var(--_scrim-color);
+  :host([showing-open]) .dialog::backdrop {
+    background-color: rgb(0 0 0 / 32%);
   }
 
-  :host([opening]) .dialog::before {
-    transition-duration: calc(var(--_opening-transition-duration) / 2);
+  :host([opening]) .dialog::backdrop {
+    transition-duration: $_opening-transition-duration / 2;
   }
 
-  :host([closing]) .dialog::before {
-    transition-duration: calc(var(--_closing-transition-duration) / 2);
+  :host([closing]) .dialog::backdrop {
+    transition-duration: $_closing-transition-duration / 2;
   }
 
   :host([opening]) .container {
-    transition-duration: var(--_opening-transition-duration);
-    transition-timing-function: var(--_opening-transition-easing);
+    transition-duration: $_opening-transition-duration;
+    transition-timing-function: $_opening-transition-easing;
   }
 
   :host([closing]) .container {
-    transition-duration: var(--_closing-transition-duration);
-    transition-timing-function: var(--_closing-transition-easing);
+    transition-duration: $_closing-transition-duration;
+    transition-timing-function: $_closing-transition-easing;
   }
 
   :host([trasition][closing]) .container > * {

diff --git a/dialog/internal/_tokens.scss b/dialog/internal/_tokens.scss
@@ -28,16 +28,6 @@ $_tokens: (
   container-inset-block-start: auto,
   container-inset-block-end: auto,
 
-  // Transition
-  // Basing on https://m3.material.io/styles/motion/easing-and-duration/applying-easing-and-duration#27a05b8b-02b1-4695-a7e4-70797f205222
-  opening-transition-duration: map.get($_md-sys-motion, 'duration-medium4'),
-  opening-transition-easing:
-    map.get($_md-sys-motion, 'easing-emphasized-decelerate'),
-  closing-transition-duration: map.get($_md-sys-motion, 'duration-short4'),
-  closing-transition-easing:
-    map.get($_md-sys-motion, 'easing-emphasized-accelerate'),
-  // Scrim
-  scrim-color: rgba(0, 0, 0, 0.32),
   // Content
   container-block-padding: 24px,
   container-inline-padding: 24px,

diff --git a/dialog/internal/dialog.ts b/dialog/internal/dialog.ts
@@ -18,9 +18,6 @@ import {createThrottle, msFromTimeCSSValue} from '../../internal/motion/animatio
  */
 export const CLOSE_ACTION = 'close';
 
-const OPENING_TRANSITION_PROP = '--_opening-transition-duration';
-const CLOSING_TRANSITION_PROP = '--_closing-transition-duration';
-
 /**
  * A dialog component.
  *
@@ -361,8 +358,8 @@ export class Dialog extends LitElement {
       this.dispatchActionEvent(this.open ? 'opening' : 'closing');
     }
     // Compute desired transition duration.
-    const duration = msFromTimeCSSValue(getComputedStyle(this).getPropertyValue(
-        this.open ? OPENING_TRANSITION_PROP : CLOSING_TRANSITION_PROP));
+    const duration = msFromTimeCSSValue(
+        getComputedStyle(this.containerElement!).transitionDuration);
     let promise = this.updateComplete;
     if (duration > 0) {
       promise = new Promise((r) => {