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
material-components · Aug 7, 2023 · 39ae5a6 · 39ae5a6
1 parent 1f2f706
commit 39ae5a6
Show file tree

Hide file tree

Showing 4 changed files with 6 additions and 113 deletions.
diff --git a/dialog/demo/demo.ts b/dialog/demo/demo.ts
@@ -14,7 +14,6 @@ import {stories, StoryKnobs} from './stories.js';
 
 const collection =
     new MaterialCollection<KnobTypesToKnobs<StoryKnobs>>('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
@@ -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<StoryKnobs> = {
   name: '<md-dialog>',
-  render({fullscreen, footerHidden, icon, headline, supportingText}) {
+  render({footerHidden, icon, headline, supportingText}) {
     return html`
       <md-filled-button @click=${clickHandler}>Open</md-filled-button>
       <md-dialog
-          .fullscreen=${fullscreen}
           .footerHidden=${footerHidden}
       >
         <md-icon slot="headline-prefix">${icon}</md-icon>
@@ -51,11 +49,10 @@ const standard: MaterialStoryInit<StoryKnobs> = {
 const alert: MaterialStoryInit<StoryKnobs> = {
 
   name: 'Alert',
-  render({fullscreen, footerHidden, icon, headline, supportingText}) {
+  render({footerHidden, icon, headline, supportingText}) {
     return html`
       <md-filled-button @click=${clickHandler}>Open</md-filled-button>
         <md-dialog
-            .fullscreen=${fullscreen}
             .footerHidden=${footerHidden}
         >
           <span slot="header">Alert dialog</span>
@@ -67,11 +64,10 @@ const alert: MaterialStoryInit<StoryKnobs> = {
 
 const confirm: MaterialStoryInit<StoryKnobs> = {
   name: 'Confirm',
-  render({fullscreen, footerHidden, icon, headline, supportingText}) {
+  render({footerHidden, icon, headline, supportingText}) {
     return html`
       <md-filled-button @click=${clickHandler}>Open</md-filled-button>
       <md-dialog style="--md-dialog-container-max-inline-size: 320px;"
-          .fullscreen=${fullscreen}
           .footerHidden=${footerHidden}
       >
         <md-icon slot="headline-prefix">delete_outline</md-icon>
@@ -94,11 +90,10 @@ const choose: MaterialStoryInit<StoryKnobs> = {
       align-items: center;
     }
     `,
-  render({fullscreen, footerHidden, icon, headline, supportingText}) {
+  render({footerHidden, icon, headline, supportingText}) {
     return html`
       <md-filled-button @click=${clickHandler}>Open</md-filled-button>
       <md-dialog
-          .fullscreen=${fullscreen}
           .footerHidden=${footerHidden}
       >
         <span slot="header">Choose your favorite pet</span>
@@ -128,10 +123,6 @@ const contacts: MaterialStoryInit<StoryKnobs> = {
       align-items: center;
     }
 
-    .contacts[showing-fullscreen] [slot="header"] {
-      flex-direction: row;
-    }
-
     .contacts .headline {
       flex: 1;
     }
@@ -148,11 +139,10 @@ const contacts: MaterialStoryInit<StoryKnobs> = {
     .contact-row > * {
       flex: 1;
     }`,
-  render({fullscreen, footerHidden, icon, headline, supportingText}) {
+  render({footerHidden, icon, headline, supportingText}) {
     return html`
       <md-filled-button @click=${clickHandler}>Open</md-filled-button>
       <md-dialog class="contacts"
-          .fullscreen=${fullscreen}
           .footerHidden=${footerHidden}
       >
         <span slot="header">
@@ -179,11 +169,10 @@ const contacts: MaterialStoryInit<StoryKnobs> = {
 
 const floatingSheet: MaterialStoryInit<StoryKnobs> = {
   name: 'Floating sheet',
-  render({fullscreen, footerHidden, icon, headline, supportingText}) {
+  render({footerHidden, icon, headline, supportingText}) {
     return html`
       <md-filled-button @click=${clickHandler}>Open</md-filled-button>
       <md-dialog
-          .fullscreen=${fullscreen}
           .footerHidden=${footerHidden}
       >
       <span slot="header">

diff --git 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
@@ -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) {