From 43d66d6b439644b69c84938740ef28534debcc6a Mon Sep 17 00:00:00 2001
From: Emilio Martinez-Cordero
Date: Tue, 3 Oct 2017 00:12:29 -0700
Subject: [PATCH 1/8] feat(dialog): support minWidth, minHeight, maxWidth and
maxHeight
* Adds Dialog support for `minWidth`, `minHeight`, `maxWidth` and `maxHeight` via config. Mostly delegates to Overlay.
* Moves declared `max-width` on `. mat-dialog-container` stylesheet to be authored via `MatDialogConfig`, providing the same default `80vw` value. Without this change, there would likely be undesired layout results due to different constraints being set on the overlay container vs the nested the dialog container.
* Added note on `minHeight` and `maxHeight` regarding the potential need to also set a `height` due to the rules around computed height resolution (https://www.w3.org/TR/CSS2/visudet.html#min-max-widths). Any value set on `height` as a default would probably be assuming too much and may have varying results across browsers.
---
src/lib/dialog/dialog-config.ts | 20 ++++++++++++++++++++
src/lib/dialog/dialog.scss | 2 --
src/lib/dialog/dialog.ts | 6 +++++-
3 files changed, 25 insertions(+), 3 deletions(-)
diff --git a/src/lib/dialog/dialog-config.ts b/src/lib/dialog/dialog-config.ts
index f2dc3e0bd500..4f89264369f4 100644
--- a/src/lib/dialog/dialog-config.ts
+++ b/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;
diff --git a/src/lib/dialog/dialog.scss b/src/lib/dialog/dialog.scss
index 2f04aec0b4cb..4a72cc903a01 100644
--- a/src/lib/dialog/dialog.scss
+++ b/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.
diff --git a/src/lib/dialog/dialog.ts b/src/lib/dialog/dialog.ts
index 38621ce96286..894f32ef59a3 100644
--- a/src/lib/dialog/dialog.ts
+++ b/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) {
From f4c23b9f3a4be71fec54a2549942b5ad60c9504d Mon Sep 17 00:00:00 2001
From: Emilio Martinez-Cordero
Date: Tue, 3 Oct 2017 00:45:57 -0700
Subject: [PATCH 2/8] test(dialog): add tests for minWidth, minHeight, maxWidth
and maxHeight
---
src/lib/dialog/dialog.spec.ts | 63 +++++++++++++++++++++++++++++++++++
1 file changed, 63 insertions(+)
diff --git a/src/lib/dialog/dialog.spec.ts b/src/lib/dialog/dialog.spec.ts
index 1ce22f92d319..4d4b0fde7242 100644
--- a/src/lib/dialog/dialog.spec.ts
+++ b/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: {
From 0cc61ae0fe3ae40e7777e322e7d2913ed7a54510 Mon Sep 17 00:00:00 2001
From: Emilio Martinez-Cordero
Date: Tue, 3 Oct 2017 00:49:16 -0700
Subject: [PATCH 3/8] demo(dialog): add fields for minWidth, minHeight,
maxWidth and maxHeight
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
Not adding `minWidth`, `minHeight`, `maxWidth` and `maxHeight` to `config` to avoid overriding the default value of `maxWidth` particularly—the type checker will require it to be a string. Instead, setting `config` to type `MatDialogConfig` is prefered to appease the type checker since those four properties are optional.
---
src/demo-app/dialog/dialog-demo.html | 18 ++++++++++++++++++
src/demo-app/dialog/dialog-demo.ts | 4 ++--
2 files changed, 20 insertions(+), 2 deletions(-)
diff --git a/src/demo-app/dialog/dialog-demo.html b/src/demo-app/dialog/dialog-demo.html
index ffceaaae13bf..b54508cf30b0 100644
--- a/src/demo-app/dialog/dialog-demo.html
+++ b/src/demo-app/dialog/dialog-demo.html
@@ -23,6 +23,24 @@
Dialog dimensions
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
Dialog position
diff --git a/src/demo-app/dialog/dialog-demo.ts b/src/demo-app/dialog/dialog-demo.ts
index 87c67b151e18..05f29786bda2 100644
--- a/src/demo-app/dialog/dialog-demo.ts
+++ b/src/demo-app/dialog/dialog-demo.ts
@@ -1,6 +1,6 @@
import {Component, Inject, ViewChild, TemplateRef} from '@angular/core';
import {DOCUMENT} from '@angular/platform-browser';
-import {MatDialog, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
+import {MatDialog, MatDialogConfig, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
@Component({
@@ -14,7 +14,7 @@ export class DialogDemo {
lastAfterClosedResult: string;
lastBeforeCloseResult: string;
actionsAlignment: string;
- config = {
+ config: Partial = {
disableClose: false,
panelClass: 'custom-overlay-pane-class',
hasBackdrop: true,
From 3582d1475be503ed3c1d0a057fa054a4fdbfb18b Mon Sep 17 00:00:00 2001
From: Emilio Martinez-Cordero
Date: Tue, 3 Oct 2017 03:02:28 -0700
Subject: [PATCH 4/8] demo(dialog): address AOT issues
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
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.
---
src/demo-app/dialog/dialog-demo.ts | 20 +++++++++++++++++---
1 file changed, 17 insertions(+), 3 deletions(-)
diff --git a/src/demo-app/dialog/dialog-demo.ts b/src/demo-app/dialog/dialog-demo.ts
index 05f29786bda2..c7c979202f83 100644
--- a/src/demo-app/dialog/dialog-demo.ts
+++ b/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, MatDialogConfig, 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: Partial = {
+ config: MatDemoDialogConfig = {
disableClose: false,
panelClass: 'custom-overlay-pane-class',
hasBackdrop: true,
From a30dc0bed9b422e507ba01f9119d2b9c6190de5b Mon Sep 17 00:00:00 2001
From: Emilio Martinez-Cordero
Date: Tue, 3 Oct 2017 11:32:33 -0700
Subject: [PATCH 5/8] chore(dialog): address feedback regarding over-verbose
comments
---
src/lib/dialog/dialog-config.ts | 12 ++----------
1 file changed, 2 insertions(+), 10 deletions(-)
diff --git a/src/lib/dialog/dialog-config.ts b/src/lib/dialog/dialog-config.ts
index 4f89264369f4..63e6fffcb2c3 100644
--- a/src/lib/dialog/dialog-config.ts
+++ b/src/lib/dialog/dialog-config.ts
@@ -60,21 +60,13 @@ export class MatDialogConfig {
/** 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
- */
+ /** Min-height of the dialog */
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
- */
+ /** Max-height of the dialog */
maxHeight?: string = '';
/** Position overrides. */
From 8e69f7b8ad0621689f2131cf9bb47bc9e8fa701c Mon Sep 17 00:00:00 2001
From: Emilio Martinez-Cordero
Date: Tue, 3 Oct 2017 11:33:53 -0700
Subject: [PATCH 6/8] fix(dialog): address feedback to not initialize some
dialog config props
---
src/lib/dialog/dialog-config.ts | 6 +++---
1 file changed, 3 insertions(+), 3 deletions(-)
diff --git a/src/lib/dialog/dialog-config.ts b/src/lib/dialog/dialog-config.ts
index 63e6fffcb2c3..000c7fb3944a 100644
--- a/src/lib/dialog/dialog-config.ts
+++ b/src/lib/dialog/dialog-config.ts
@@ -58,16 +58,16 @@ export class MatDialogConfig {
height?: string = '';
/** Min-width of the dialog. */
- minWidth?: string = '';
+ minWidth?: string;
/** Min-height of the dialog */
- minHeight?: string = '';
+ minHeight?: string;
/** Max-width of the dialog. */
maxWidth?: string = '80vw';
/** Max-height of the dialog */
- maxHeight?: string = '';
+ maxHeight?: string;
/** Position overrides. */
position?: DialogPosition;
From 2b1c7334157c16e0195557de2f537f24d3e27f6f Mon Sep 17 00:00:00 2001
From: Emilio Martinez-Cordero
Date: Tue, 3 Oct 2017 11:55:42 -0700
Subject: [PATCH 7/8] demo(dialog): set init values for minWidth, minHeight,
maxWidth and maxHeight
---
src/demo-app/dialog/dialog-demo.ts | 25 ++++++++-----------------
1 file changed, 8 insertions(+), 17 deletions(-)
diff --git a/src/demo-app/dialog/dialog-demo.ts b/src/demo-app/dialog/dialog-demo.ts
index c7c979202f83..1895b6e31f48 100644
--- a/src/demo-app/dialog/dialog-demo.ts
+++ b/src/demo-app/dialog/dialog-demo.ts
@@ -1,21 +1,8 @@
import {Component, Inject, ViewChild, TemplateRef} from '@angular/core';
import {DOCUMENT} from '@angular/platform-browser';
-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;
-}
+import {MatDialog, MatDialogConfig, MatDialogRef, MAT_DIALOG_DATA} from '@angular/material';
+
+const defaultDialogConfig = new MatDialogConfig();
@Component({
moduleId: module.id,
@@ -28,13 +15,17 @@ export class DialogDemo {
lastAfterClosedResult: string;
lastBeforeCloseResult: string;
actionsAlignment: string;
- config: MatDemoDialogConfig = {
+ config = {
disableClose: false,
panelClass: 'custom-overlay-pane-class',
hasBackdrop: true,
backdropClass: '',
width: '',
height: '',
+ minWidth: '',
+ minHeight: '',
+ maxWidth: defaultDialogConfig.maxWidth,
+ maxHeight: '',
position: {
top: '',
bottom: '',
From 3b4036146e97827ed687190f08cbadebd1e247d9 Mon Sep 17 00:00:00 2001
From: Emilio Martinez-Cordero
Date: Thu, 5 Oct 2017 11:12:39 -0700
Subject: [PATCH 8/8] chore(dialog): allow number|string for min/max widths and
heights
---
src/lib/dialog/dialog-config.ts | 16 ++++++++--------
1 file changed, 8 insertions(+), 8 deletions(-)
diff --git a/src/lib/dialog/dialog-config.ts b/src/lib/dialog/dialog-config.ts
index 000c7fb3944a..3c4c901a0075 100644
--- a/src/lib/dialog/dialog-config.ts
+++ b/src/lib/dialog/dialog-config.ts
@@ -57,17 +57,17 @@ export class MatDialogConfig {
/** Height of the dialog. */
height?: string = '';
- /** Min-width of the dialog. */
- minWidth?: string;
+ /** Min-width of the dialog. If a number is provided, pixel units are assumed. */
+ minWidth?: number | string;
- /** Min-height of the dialog */
- minHeight?: string;
+ /** Min-height of the dialog. If a number is provided, pixel units are assumed. */
+ minHeight?: number | string;
- /** Max-width of the dialog. */
- maxWidth?: string = '80vw';
+ /** Max-width of the dialog. If a number is provided, pixel units are assumed. Defaults to 80vw */
+ maxWidth?: number | string = '80vw';
- /** Max-height of the dialog */
- maxHeight?: string;
+ /** Max-height of the dialog. If a number is provided, pixel units are assumed. */
+ maxHeight?: number | string;
/** Position overrides. */
position?: DialogPosition;