feat(dialog): support minWidth, minHeight, maxWidth and maxHeight

src/demo-app/dialog/dialog-demo.html

@@ -23,6 +23,24 @@ <h2>Dialog dimensions</h2>
       </mat-form-field>
     </p>
 
+    <p>
+      <mat-form-field>
+        <input matInput [(ngModel)]="config.minWidth" placeholder="Min Width">
+      </mat-form-field>
+      <mat-form-field>
+        <input matInput [(ngModel)]="config.minHeight" placeholder="Min Height">
+      </mat-form-field>
+    </p>
+
+    <p>
+      <mat-form-field>
+        <input matInput [(ngModel)]="config.maxWidth" placeholder="Max Width">
+      </mat-form-field>
+      <mat-form-field>
+        <input matInput [(ngModel)]="config.maxHeight" placeholder="Max Height">
+      </mat-form-field>
+    </p>
+
     <h2>Dialog position</h2>
 
     <p>

src/demo-app/dialog/dialog-demo.ts

@@ -1,7 +1,21 @@
 import {Component, Inject, ViewChild, TemplateRef} from '@angular/core';
 import {DOCUMENT} from '@angular/platform-browser';
-import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
-
+import {
+  DialogPosition,
+  MatDialog,
+  MatDialogConfig,
+  MatDialogRef,
+  MAT_DIALOG_DATA
+} from '@angular/material';
+
+/**
+ * Appeases the AOT type checker for the template by extending `MatDialogConfig`
+ * to disallow `position` from being undefined, given that it’s optional.
+ * Guards cannot be set on the template because the values are bound to NgModel.
+ */
+interface MatDemoDialogConfig extends MatDialogConfig {
+  position: DialogPosition;
+}
 
 @Component({
   moduleId: module.id,
@@ -14,7 +28,7 @@ export class DialogDemo {
   lastAfterClosedResult: string;
   lastBeforeCloseResult: string;
   actionsAlignment: string;
-  config = {
+  config: MatDemoDialogConfig = {
     disableClose: false,
     panelClass: 'custom-overlay-pane-class',
     hasBackdrop: true,

src/lib/dialog/dialog-config.ts

@@ -57,6 +57,26 @@ export class MatDialogConfig {
   /** Height of the dialog. */
   height?: string = '';
 
+  /** Min-width of the dialog. */
+  minWidth?: string = '';
+
+  /**
+   * Min-height of the dialog.
+   * For this value to be effectively applied, `height` may also need to be defined.
+   * See https://www.w3.org/TR/CSS2/visudet.html#min-max-widths
+   */
+  minHeight?: string = '';
+
+  /** Max-width of the dialog. */
+  maxWidth?: string = '80vw';
+
+  /**
+   * Max-height of the dialog.
+   * For this value to be effectively applied, `height` may also need to be defined.
+   * See https://www.w3.org/TR/CSS2/visudet.html#min-max-widths
+   */
+  maxHeight?: string = '';
+
   /** Position overrides. */
   position?: DialogPosition;
 

src/lib/dialog/dialog.scss

@@ -5,7 +5,6 @@
 
 $mat-dialog-padding: 24px !default;
 $mat-dialog-border-radius: 2px !default;
-$mat-dialog-max-width: 80vw !default;
 $mat-dialog-max-height: 65vh !default;
 $mat-dialog-button-margin: 8px !default;
 
@@ -17,7 +16,6 @@ $mat-dialog-button-margin: 8px !default;
   border-radius: $mat-dialog-border-radius;
   box-sizing: border-box;
   overflow: auto;
-  max-width: $mat-dialog-max-width;
   outline: 0;
 
   // The dialog container should completely fill its parent overlay element.

src/lib/dialog/dialog.spec.ts

@@ -336,6 +336,69 @@ describe('MatDialog', () => {
     expect(overlayPane.style.height).toBe('100px');
   });
 
+  it('should should override the min-width of the overlay pane', () => {
+    dialog.open(PizzaMsg, {
+      minWidth: '500px'
+    });
+
+    viewContainerFixture.detectChanges();
+
+    let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+
+    expect(overlayPane.style.minWidth).toBe('500px');
+  });
+
+  it('should should override the max-width of the overlay pane', fakeAsync(() => {
+    let dialogRef = dialog.open(PizzaMsg);
+
+    viewContainerFixture.detectChanges();
+
+    let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+
+    expect(overlayPane.style.maxWidth).toBe('80vw',
+      'Expected dialog to set a default max-width on overlay pane');
+
+    dialogRef.close();
+
+    tick(500);
+    viewContainerFixture.detectChanges();
+    flushMicrotasks();
+
+    dialogRef = dialog.open(PizzaMsg, {
+      maxWidth: '100px'
+    });
+
+    viewContainerFixture.detectChanges();
+
+    overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+
+    expect(overlayPane.style.maxWidth).toBe('100px');
+  }));
+
+  it('should should override the min-height of the overlay pane', () => {
+    dialog.open(PizzaMsg, {
+      minHeight: '300px'
+    });
+
+    viewContainerFixture.detectChanges();
+
+    let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+
+    expect(overlayPane.style.minHeight).toBe('300px');
+  });
+
+  it('should should override the max-height of the overlay pane', () => {
+    dialog.open(PizzaMsg, {
+      maxHeight: '100px'
+    });
+
+    viewContainerFixture.detectChanges();
+
+    let overlayPane = overlayContainerElement.querySelector('.cdk-overlay-pane') as HTMLElement;
+
+    expect(overlayPane.style.maxHeight).toBe('100px');
+  });
+
   it('should should override the top offset of the overlay pane', () => {
     dialog.open(PizzaMsg, {
       position: {

src/lib/dialog/dialog.ts

@@ -190,7 +190,11 @@ export class MatDialog {
       scrollStrategy: this._scrollStrategy(),
       panelClass: dialogConfig.panelClass,
       hasBackdrop: dialogConfig.hasBackdrop,
-      direction: dialogConfig.direction
+      direction: dialogConfig.direction,
+      minWidth: dialogConfig.minWidth,
+      minHeight: dialogConfig.minHeight,
+      maxWidth: dialogConfig.maxWidth,
+      maxHeight: dialogConfig.maxHeight
     });
 
     if (dialogConfig.backdropClass) {