From ffbc295bf1ab005c566493f21e1abc499564c61d Mon Sep 17 00:00:00 2001
From: Kara <kara@users.noreply.github.com>
Date: Mon, 24 Oct 2016 17:05:34 -0700
Subject: [PATCH] feat(overlay): set overlay size (#1583)

---
 src/lib/core/overlay/overlay-ref.ts   | 16 +++++++++
 src/lib/core/overlay/overlay-state.ts |  8 ++++-
 src/lib/core/overlay/overlay.spec.ts  | 51 +++++++++++++++++++++++++++
 3 files changed, 74 insertions(+), 1 deletion(-)

diff --git a/src/lib/core/overlay/overlay-ref.ts b/src/lib/core/overlay/overlay-ref.ts
index aba1cac1e112..60cf3b28662d 100644
--- a/src/lib/core/overlay/overlay-ref.ts
+++ b/src/lib/core/overlay/overlay-ref.ts
@@ -23,6 +23,7 @@ export class OverlayRef implements PortalHost {
     }
 
     let attachResult = this._portalHost.attach(portal);
+    this.updateSize();
     this.updatePosition();
 
     return attachResult;
@@ -58,6 +59,17 @@ export class OverlayRef implements PortalHost {
     }
   }
 
+  /** Updates the size of the overlay based on the overlay config. */
+  updateSize() {
+    if (this._state.width || this._state.width === 0) {
+      this._pane.style.width = formatCssUnit(this._state.width);
+    }
+
+    if (this._state.height || this._state.height === 0) {
+      this._pane.style.height = formatCssUnit(this._state.height);
+    }
+  }
+
   /** Attaches a backdrop for this overlay. */
   private _attachBackdrop() {
     this._backdropElement = document.createElement('div');
@@ -98,3 +110,7 @@ export class OverlayRef implements PortalHost {
     }
   }
 }
+
+function formatCssUnit(value: number | string) {
+  return typeof value === 'string' ? value as string : `${value}px`;
+}
diff --git a/src/lib/core/overlay/overlay-state.ts b/src/lib/core/overlay/overlay-state.ts
index 95d9dcef3fbb..dd6486f0cac0 100644
--- a/src/lib/core/overlay/overlay-state.ts
+++ b/src/lib/core/overlay/overlay-state.ts
@@ -12,10 +12,16 @@ export class OverlayState {
   /** Whether the overlay has a backdrop. */
   hasBackdrop: boolean = false;
 
+  /** Custom class to add to the backdrop **/
   backdropClass: string = 'md-overlay-dark-backdrop';
 
+  /** The width of the overlay panel. If a number is provided, pixel units are assumed. **/
+  width: number | string;
+
+  /** The height of the overlay panel. If a number is provided, pixel units are assumed. **/
+  height: number | string;
+
   // TODO(jelbourn): configuration still to add
-  // - overlay size
   // - focus trap
   // - disable pointer events
   // - z-index
diff --git a/src/lib/core/overlay/overlay.spec.ts b/src/lib/core/overlay/overlay.spec.ts
index 804ced72010c..2f896c4d8a2d 100644
--- a/src/lib/core/overlay/overlay.spec.ts
+++ b/src/lib/core/overlay/overlay.spec.ts
@@ -98,6 +98,57 @@ describe('Overlay', () => {
     });
   });
 
+  describe('size', () => {
+    let state: OverlayState;
+
+    beforeEach(() => {
+      state = new OverlayState();
+    });
+
+    it('should apply the width set in the config', () => {
+      state.width = 500;
+
+      overlay.create(state).attach(componentPortal);
+      const pane = overlayContainerElement.children[0] as HTMLElement;
+      expect(pane.style.width).toEqual('500px');
+    });
+
+    it('should support using other units if a string width is provided', () => {
+      state.width = '200%';
+
+      overlay.create(state).attach(componentPortal);
+      const pane = overlayContainerElement.children[0] as HTMLElement;
+      expect(pane.style.width).toEqual('200%');
+    });
+
+    it('should apply the height set in the config', () => {
+      state.height = 500;
+
+      overlay.create(state).attach(componentPortal);
+      const pane = overlayContainerElement.children[0] as HTMLElement;
+      expect(pane.style.height).toEqual('500px');
+    });
+
+    it('should support using other units if a string height is provided', () => {
+      state.height = '100vh';
+
+      overlay.create(state).attach(componentPortal);
+      const pane = overlayContainerElement.children[0] as HTMLElement;
+      expect(pane.style.height).toEqual('100vh');
+    });
+
+    it('should support zero widths and heights', () => {
+      state.width = 0;
+      state.height = 0;
+
+      overlay.create(state).attach(componentPortal);
+      const pane = overlayContainerElement.children[0] as HTMLElement;
+      expect(pane.style.width).toEqual('0px');
+      expect(pane.style.height).toEqual('0px');
+    });
+
+  });
+
   describe('backdrop', () => {
     let config: OverlayState;