diff --git a/dialog/demo/demo.ts b/dialog/demo/demo.ts index fedba95756..becca08c7e 100644 --- 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>('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 index a33d6d2347..4b5a0f1937 100644 --- 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 = { name: '', render({ - transition, fullscreen, modeless, footerHidden, @@ -53,7 +51,6 @@ const standard: MaterialStoryInit = { .modeless=${modeless} .footerHidden=${footerHidden} .stacked=${stacked} - .transition=${transition!} > ${icon} ${headline} @@ -67,7 +64,6 @@ const alert: MaterialStoryInit = { name: 'Alert', render({ - transition, fullscreen, modeless, footerHidden, @@ -83,7 +79,6 @@ const alert: MaterialStoryInit = { .modeless=${modeless} .footerHidden=${footerHidden} .stacked=${stacked} - .transition=${transition!} > Alert dialog This is a standard alert dialog. Alert dialogs interrupt users with urgent information, details, or actions. @@ -95,7 +90,6 @@ const alert: MaterialStoryInit = { const confirm: MaterialStoryInit = { name: 'Confirm', render({ - transition, fullscreen, modeless, footerHidden, @@ -106,12 +100,11 @@ const confirm: MaterialStoryInit = { }) { return html` Open - delete_outline Permanently delete? @@ -134,7 +127,6 @@ const choose: MaterialStoryInit = { } `, render({ - transition, fullscreen, modeless, footerHidden, @@ -150,7 +142,6 @@ const choose: MaterialStoryInit = { .modeless=${modeless} .footerHidden=${footerHidden} .stacked=${stacked} - .transition=${transition!} > Choose your favorite pet

@@ -200,7 +191,6 @@ const contacts: MaterialStoryInit = { flex: 1; }`, render({ - transition, fullscreen, modeless, footerHidden, @@ -216,7 +206,6 @@ const contacts: MaterialStoryInit = { .modeless=${modeless} .footerHidden=${footerHidden} .stacked=${stacked} - .transition=${transition!} > close @@ -243,7 +232,6 @@ const contacts: MaterialStoryInit = { const floatingSheet: MaterialStoryInit = { name: 'Floating sheet', render({ - transition, fullscreen, modeless, footerHidden, @@ -259,7 +247,6 @@ const floatingSheet: MaterialStoryInit = { .modeless=${modeless} .footerHidden=${footerHidden} .stacked=${stacked} - .transition=${transition!} > Floating Sheet diff --git a/dialog/internal/_dialog.scss b/dialog/internal/_dialog.scss index 3f6e47652b..4bdbd5e94b 100644 --- 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,7 +227,7 @@ $_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; @@ -235,62 +235,24 @@ $_closing-transition-easing: map.get( --_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 index b05da0bdb7..a3264ae564 100644 --- 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; /**