feat(overlay): set overlay size (#1583)

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._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`;
+}

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

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;