feat(overlay): set overlay size

Author: kara

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._pane.style.width = `${this._state.width}px`;
+    }
+
+    if (this._state.height) {
+      this._pane.style.height = `${this._state.height}px`;
+    }
+  }
+
   /** Attaches a backdrop for this overlay. */
   private _attachBackdrop() {
     this._backdropElement = document.createElement('div');

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 **/
+  width: number;
+
+  /** The height of the overlay panel **/
+  height: number;
+
   // TODO(jelbourn): configuration still to add
-  // - overlay size
   // - focus trap
   // - disable pointer events
   // - z-index

src/lib/core/overlay/overlay.spec.ts

@@ -98,6 +98,30 @@ 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 = (<HTMLElement>overlayContainerElement.children[0]);
+      expect(pane.style.width).toEqual('500px');
+    });
+
+    it('should apply the height set in the config', () => {
+      state.height = 500;
+
+      overlay.create(state).attach(componentPortal);
+      const pane = (<HTMLElement>overlayContainerElement.children[0]);
+      expect(pane.style.height).toEqual('500px');
+    });
+  });
+
   describe('backdrop', () => {
     let config: OverlayState;