fix(dialog)!: remove transitions

PiperOrigin-RevId: 552539713
material-components · Jul 31, 2023 · 2d1c580 · 2d1c580
1 parent 5adbf73
commit 2d1c580
Show file tree

Hide file tree

Showing 4 changed files with 9 additions and 82 deletions.
diff --git a/dialog/demo/demo.ts b/dialog/demo/demo.ts
@@ -8,26 +8,12 @@ import './index.js';
 import './material-collection.js';
 
 import {KnobTypesToKnobs, MaterialCollection, materialInitsToStoryInits, setUpDemo} from './material-collection.js';
-import {boolInput, Knob, selectDropdown, 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('transition', {
-        defaultValue: 'grow-down',
-        ui: selectDropdown({
-          options: [
-            {label: 'grow-down', value: 'grow-down'},
-            {label: 'grow-up', value: 'grow-up'},
-            {label: 'grow-left', value: 'grow-left'},
-            {label: 'grow-right', value: 'grow-right'},
-            {label: 'grow', value: 'grow'},
-            {label: 'shrink', value: 'shrink'},
-            {label: 'none', value: ''},
-          ]
-        })
-      }),
       new Knob('fullscreen', {defaultValue: false, ui: boolInput()}),
       new Knob('modeless', {defaultValue: false, ui: boolInput()}),
       new Knob('footerHidden', {defaultValue: false, ui: boolInput()}),

diff --git a/dialog/demo/stories.ts b/dialog/demo/stories.ts
@@ -19,7 +19,6 @@ import {css, html} from 'lit';
 
 /** Knob types for dialog stories. */
 export interface StoryKnobs {
-  transition: string|undefined;
   fullscreen: boolean;
   modeless: boolean;
   footerHidden: boolean;
@@ -37,7 +36,6 @@ function clickHandler(event: Event) {
 const standard: MaterialStoryInit<StoryKnobs> = {
   name: '<md-dialog>',
   render({
-    transition,
     fullscreen,
     modeless,
     footerHidden,
@@ -53,7 +51,6 @@ const standard: MaterialStoryInit<StoryKnobs> = {
           .modeless=${modeless}
           .footerHidden=${footerHidden}
           .stacked=${stacked}
-          .transition=${transition!}
       >
         <md-icon slot="headline-prefix">${icon}</md-icon>
         <span slot="headline">${headline}</span>
@@ -67,7 +64,6 @@ const alert: MaterialStoryInit<StoryKnobs> = {
 
   name: 'Alert',
   render({
-    transition,
     fullscreen,
     modeless,
     footerHidden,
@@ -83,7 +79,6 @@ const alert: MaterialStoryInit<StoryKnobs> = {
             .modeless=${modeless}
             .footerHidden=${footerHidden}
             .stacked=${stacked}
-            .transition=${transition!}
         >
           <span slot="header">Alert dialog</span>
           <span>This is a standard alert dialog. Alert dialogs interrupt users with urgent information, details, or actions.</span>
@@ -95,7 +90,6 @@ const alert: MaterialStoryInit<StoryKnobs> = {
 const confirm: MaterialStoryInit<StoryKnobs> = {
   name: 'Confirm',
   render({
-    transition,
     fullscreen,
     modeless,
     footerHidden,
@@ -106,12 +100,11 @@ const confirm: MaterialStoryInit<StoryKnobs> = {
   }) {
     return html`
       <md-filled-button @click=${clickHandler}>Open</md-filled-button>
-      <md-dialog transition="condense" style="--md-dialog-container-max-inline-size: 320px;"
+      <md-dialog style="--md-dialog-container-max-inline-size: 320px;"
           .fullscreen=${fullscreen}
           .modeless=${modeless}
           .footerHidden=${footerHidden}
           .stacked=${stacked}
-          .transition=${transition!}
       >
         <md-icon slot="headline-prefix">delete_outline</md-icon>
         <span slot="headline">Permanently delete?</span>
@@ -134,7 +127,6 @@ const choose: MaterialStoryInit<StoryKnobs> = {
     }
     `,
   render({
-    transition,
     fullscreen,
     modeless,
     footerHidden,
@@ -150,7 +142,6 @@ const choose: MaterialStoryInit<StoryKnobs> = {
           .modeless=${modeless}
           .footerHidden=${footerHidden}
           .stacked=${stacked}
-          .transition=${transition!}
       >
         <span slot="header">Choose your favorite pet</span>
         <p>
@@ -200,7 +191,6 @@ const contacts: MaterialStoryInit<StoryKnobs> = {
       flex: 1;
     }`,
   render({
-    transition,
     fullscreen,
     modeless,
     footerHidden,
@@ -216,7 +206,6 @@ const contacts: MaterialStoryInit<StoryKnobs> = {
           .modeless=${modeless}
           .footerHidden=${footerHidden}
           .stacked=${stacked}
-          .transition=${transition!}
       >
         <span slot="header">
           <md-standard-icon-button dialog-action="close"><md-icon>close</md-icon></md-standard-icon-button>
@@ -243,7 +232,6 @@ const contacts: MaterialStoryInit<StoryKnobs> = {
 const floatingSheet: MaterialStoryInit<StoryKnobs> = {
   name: 'Floating sheet',
   render({
-    transition,
     fullscreen,
     modeless,
     footerHidden,
@@ -259,7 +247,6 @@ const floatingSheet: MaterialStoryInit<StoryKnobs> = {
           .modeless=${modeless}
           .footerHidden=${footerHidden}
           .stacked=${stacked}
-          .transition=${transition!}
       >
       <span slot="header">
         <span style="flex: 1;">Floating Sheet</span>

diff --git a/dialog/internal/_dialog.scss b/dialog/internal/_dialog.scss
@@ -185,12 +185,12 @@ $_closing-transition-easing: map.get(
     opacity: 0;
   }
 
-  :host([transition][showing-open]) .container > * {
+  :host([showing-open]) .container > * {
     opacity: 1;
     transform: none;
   }
 
-  :host([transition][showing-open]) .container {
+  :host([showing-open]) .container {
     opacity: 1;
     transform: none;
   }
@@ -227,70 +227,32 @@ $_closing-transition-easing: map.get(
     opacity: 0;
   }
 
-  :host([transition='grow-down']) {
+  :host {
     --_opening-transform: scale(1, 0.1) translateY(-20%);
     --_closing-transform: scale(1, 0.9) translateY(-10%);
     --_origin: top;
     --_opening-content-transform: scale(1, 2);
     --_origin-footer: bottom;
   }
 
-  :host([transition='grow-up']) {
-    --_opening-transform: scale(1, 0.1) translateY(20%);
-    --_closing-transform: scale(1, 0.9) translateY(10%);
-    --_origin: bottom;
-    --_opening-content-transform: scale(1, 2);
-    --_origin-footer: bottom;
-  }
-
-  :host([transition='grow-left']) {
-    --_opening-transform: scale(0.1, 1) translateX(20%);
-    --_closing-transform: scale(0.9, 1) translateX(10%);
-    --_origin: right;
-    --_opening-content-transform: none;
-    --_origin-footer: none;
-  }
-
-  :host([transition='grow-right']) {
-    --_opening-transform: scale(0.1, 1) translateX(-20%);
-    --_closing-transform: scale(0.9, 1) translateX(-10%);
-    --_origin: left;
-    --_opening-content-transform: none;
-    --_origin-footer: none;
-  }
-
-  :host([transition^='grow-']) .container {
+  .container {
     transform-origin: var(--_origin);
     transform: var(--_opening-transform);
   }
 
-  :host([transition^='grow-']) .container > * {
+  .container > * {
     transform-origin: var(--_origin);
     transform: var(--_opening-content-transform);
   }
 
-  :host([transition^='grow-']) .footer {
+  .footer {
     transform-origin: var(--_origin-footer);
   }
 
-  :host([transition^='grow-'][closing]) {
+  :host([closing]) {
     transform: var(--_closing-transform);
   }
 
-  :host([transition='shrink']) .container {
-    transform: scale(1.2);
-  }
-
-  :host([transition='grow']) .container {
-    transform: scale(0.8);
-  }
-
-  :host([transition='shrink'][closing]) .container,
-  :host([transition='grow'][closing]) .container {
-    transition-duration: 0;
-    transform: none;
-  }
-
   // fullscreen
   :host([showing-fullscreen]) {
     --_container-max-block-size: none;

diff --git a/dialog/internal/dialog.ts b/dialog/internal/dialog.ts
@@ -181,14 +181,6 @@ export class Dialog extends LitElement {
   @state() private opening = false;
   @state() private closing = false;
 
-  /**
-   * Transition kind. Supported options include: grow, shrink, grow-down,
-   * grow-up, grow-left, and grow-right.
-   *
-   * Defaults to grow-down.
-   */
-  @property({reflect: true}) transition = 'grow-down';
-
   private currentAction: string|undefined;
 
   /**