feat(dialog): add quick property to skip animations

material-components · Feb 21, 2024 · ee591b3 · ee591b3
1 parent 3e934e1
commit ee591b3
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 1 deletion.
diff --git a/dialog/demo/demo.ts b/dialog/demo/demo.ts
@@ -13,13 +13,17 @@ import {
   materialInitsToStoryInits,
   setUpDemo,
 } from './material-collection.js';
-import {Knob, textInput} from './index.js';
+import {boolInput, Knob, textInput} from './index.js';
 
 import {stories, StoryKnobs} from './stories.js';
 
 const collection = new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>(
   'Dialog',
   [
+    new Knob("quick", {
+      defaultValue: false,
+      ui: boolInput(),
+    }),
     new Knob('icon', {defaultValue: '', ui: textInput()}),
     new Knob('headline', {defaultValue: 'Dialog', ui: textInput()}),
     new Knob('supportingText', {

diff --git a/dialog/demo/stories.ts b/dialog/demo/stories.ts
@@ -19,6 +19,7 @@ import {css, html, nothing} from 'lit';
 
 /** Knob types for dialog stories. */
 export interface StoryKnobs {
+  quick: boolean;
   icon: string;
   headline: string;
   supportingText: string;

diff --git a/dialog/internal/dialog.ts b/dialog/internal/dialog.ts
@@ -59,6 +59,11 @@ export class Dialog extends LitElement {
     }
   }
 
+  /**
+   * Skips the opening and closing animations.
+   */
+  @property({type: Boolean}) quick = false;
+
   /**
    * Gets or sets the dialog's return value, usually to indicate which button
    * a user pressed to close it.
@@ -396,6 +401,10 @@ export class Dialog extends LitElement {
   }
 
   private async animateDialog(animation: DialogAnimation) {
+    if (this.quick) {
+      return;
+    }
+
     const {dialog, scrim, container, headline, content, actions} = this;
     if (!dialog || !scrim || !container || !headline || !content || !actions) {
       return;