mirror of
https://github.com/material-components/material-web.git
synced 2024-09-11 13:46:10 +03:00
fix(dialog)!: remove transitions
PiperOrigin-RevId: 552539713
This commit is contained in:
parent
5adbf730d3
commit
2d1c58022e
@ -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()}),
|
||||
|
@ -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>
|
||||
|
@ -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;
|
||||
|
@ -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;
|
||||
|
||||
/**
|
||||
|
Loading…
Reference in New Issue
Block a user