From 39ae5a694723d83674eab06dcee9f8a3c5d7d764 Mon Sep 17 00:00:00 2001 From: Elizabeth Mitchell Date: Mon, 7 Aug 2023 13:55:36 -0700 Subject: [PATCH] fix(dialog)!: remove fullscreen temporarily BREAKING CHANGE: Fullscreen dialogs weren't matching spec, so we're removing them for now to avoid future breaking changes. They will be re-added later. PiperOrigin-RevId: 554583471 --- dialog/demo/demo.ts | 1 - dialog/demo/stories.ts | 23 +++++------------ dialog/internal/_dialog.scss | 45 -------------------------------- dialog/internal/dialog.ts | 50 ------------------------------------ 4 files changed, 6 insertions(+), 113 deletions(-) diff --git a/dialog/demo/demo.ts b/dialog/demo/demo.ts index c127c15f9b..47062fa304 100644 --- a/dialog/demo/demo.ts +++ b/dialog/demo/demo.ts @@ -14,7 +14,6 @@ import {stories, StoryKnobs} from './stories.js'; const collection = new MaterialCollection>('Dialog', [ - new Knob('fullscreen', {defaultValue: false, ui: boolInput()}), new Knob('footerHidden', {defaultValue: false, ui: boolInput()}), new Knob('icon', {defaultValue: '', ui: textInput()}), new Knob('headline', {defaultValue: 'Dialog', ui: textInput()}), diff --git a/dialog/demo/stories.ts b/dialog/demo/stories.ts index ce88641fd0..cdab421365 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 { - fullscreen: boolean; footerHidden: boolean; icon: string; headline: string; @@ -33,11 +32,10 @@ function clickHandler(event: Event) { const standard: MaterialStoryInit = { name: '', - render({fullscreen, footerHidden, icon, headline, supportingText}) { + render({footerHidden, icon, headline, supportingText}) { return html` Open ${icon} @@ -51,11 +49,10 @@ const standard: MaterialStoryInit = { const alert: MaterialStoryInit = { name: 'Alert', - render({fullscreen, footerHidden, icon, headline, supportingText}) { + render({footerHidden, icon, headline, supportingText}) { return html` Open Alert dialog @@ -67,11 +64,10 @@ const alert: MaterialStoryInit = { const confirm: MaterialStoryInit = { name: 'Confirm', - render({fullscreen, footerHidden, icon, headline, supportingText}) { + render({footerHidden, icon, headline, supportingText}) { return html` Open delete_outline @@ -94,11 +90,10 @@ const choose: MaterialStoryInit = { align-items: center; } `, - render({fullscreen, footerHidden, icon, headline, supportingText}) { + render({footerHidden, icon, headline, supportingText}) { return html` Open Choose your favorite pet @@ -128,10 +123,6 @@ const contacts: MaterialStoryInit = { align-items: center; } - .contacts[showing-fullscreen] [slot="header"] { - flex-direction: row; - } - .contacts .headline { flex: 1; } @@ -148,11 +139,10 @@ const contacts: MaterialStoryInit = { .contact-row > * { flex: 1; }`, - render({fullscreen, footerHidden, icon, headline, supportingText}) { + render({footerHidden, icon, headline, supportingText}) { return html` Open @@ -179,11 +169,10 @@ const contacts: MaterialStoryInit = { const floatingSheet: MaterialStoryInit = { name: 'Floating sheet', - render({fullscreen, footerHidden, icon, headline, supportingText}) { + render({footerHidden, icon, headline, supportingText}) { return html` Open diff --git a/dialog/internal/_dialog.scss b/dialog/internal/_dialog.scss index 07d92fac17..737e716f7d 100644 --- a/dialog/internal/_dialog.scss +++ b/dialog/internal/_dialog.scss @@ -236,47 +236,6 @@ $_closing-transition-easing: map.get( transform: var(--_closing-transform); } - // fullscreen - :host([showing-fullscreen]) { - --_container-max-block-size: none; - --_container-max-inline-size: none; - } - - :host([showing-fullscreen]) .container { - block-size: 100dvh; - inline-size: 100dvw; - border-radius: 0px; - padding-block-start: 0; - padding-block-end: 0; - } - - :host([showing-fullscreen]) .header { - justify-content: space-between; - flex-direction: row; - max-block-size: 56px; - // Note, the 8px here is not per spec, but needed to make the explicit 56px not be cramped. - padding-block-start: 8px; - // TODO: should there be explicit tokens for these? - padding-inline: 4px; - gap: 4px; - } - - :host([showing-fullscreen]) .content { - margin-block-start: 0; - margin-block-end: 0; - } - - :host([showing-fullscreen]) .footer { - max-block-size: 56px; - // Note, the 8px here is not per spec, but needed to make the explicit 56px not be cramped. - padding-block-end: 8px; - } - - // Hide bottom divider on fullscreen since it's common not to have footer actions. - :host([showing-fullscreen]) .scroll-divider-footer .content { - border-block-end-color: transparent; - } - // High contrast mode @media screen and (forced-colors: active), (-ms-high-contrast: active) { .container { @@ -297,8 +256,4 @@ $_closing-transition-easing: map.get( display: flex; align-items: center; } - - :host([showing-fullscreen]) [name='headline']::slotted(*) { - flex: 1; - } } diff --git a/dialog/internal/dialog.ts b/dialog/internal/dialog.ts index 5dbda64084..cbeff1e94e 100644 --- a/dialog/internal/dialog.ts +++ b/dialog/internal/dialog.ts @@ -33,26 +33,6 @@ export class Dialog extends LitElement { */ @property({type: Boolean}) open = false; - /** - * Setting fullscreen displays the dialog fullscreen on small screens. - * This can be customized via the `fullscreenBreakpoint` property. - * When showing fullscreen, the header will take up less vertical space, and - * the dialog will have a `showing-fullscreen`attribute, allowing content to - * be styled in this state. - */ - @property({type: Boolean}) fullscreen = false; - - /** - * A media query string specifying the breakpoint at which the dialog - * should be shown fullscreen. Note, this only applies when the `fullscreen` - * property is set. - * - * By default, the dialog is shown fullscreen on screens less than 600px wide - * or 400px tall. - */ - @property({attribute: 'fullscreen-breakpoint'}) - fullscreenBreakpoint = '(max-width: 600px), (max-height: 400px)'; - /** * Hides the dialog footer, making any content slotted into the footer * inaccessible. @@ -120,7 +100,6 @@ export class Dialog extends LitElement { /** * Private properties that reflect for styling manually in `updated`. */ - @state() private showingFullscreen = false; @state() private showingOpen = false; @state() private opening = false; @state() private closing = false; @@ -200,9 +179,6 @@ export class Dialog extends LitElement { // only closing if was opened previously... this.closing = !this.open && changed.get('open'); } - if (changed.has('fullscreen') || changed.has('fullscreenBreakpoint')) { - this.updateFullscreen(); - } } protected override firstUpdated() { @@ -218,9 +194,6 @@ export class Dialog extends LitElement { // Reflect internal state to facilitate styling. this.reflectStateProp(changed, 'opening', this.opening); this.reflectStateProp(changed, 'closing', this.closing); - this.reflectStateProp( - changed, 'showingFullscreen', this.showingFullscreen, - 'showing-fullscreen'); this.reflectStateProp( changed, 'showingOpen', this.showingOpen, 'showing-open'); if (!changed.has('open')) { @@ -311,29 +284,6 @@ export class Dialog extends LitElement { this.dispatchEvent(new CustomEvent(type, {detail, bubbles: true})); } - /* Live media query for matching user specified fullscreen breakpoint. */ - private fullscreenQuery?: MediaQueryList; - private fullscreenQueryListener: - ((event: MediaQueryListEvent) => void)|undefined = undefined; - private updateFullscreen() { - if (this.fullscreenQuery !== undefined) { - this.fullscreenQuery.removeEventListener( - 'change', this.fullscreenQueryListener!); - this.fullscreenQuery = this.fullscreenQueryListener = undefined; - } - if (!this.fullscreen) { - this.showingFullscreen = false; - return; - } - this.fullscreenQuery = window.matchMedia(this.fullscreenBreakpoint); - this.fullscreenQuery.addEventListener( - 'change', - (this.fullscreenQueryListener = (event: MediaQueryListEvent) => { - this.showingFullscreen = event.matches; - })); - this.showingFullscreen = this.fullscreenQuery.matches; - } - // handles native close/cancel events and we just ensure // internal state is in sync. private handleDialogDismiss(event: Event) {