feat(overlay): add maxWidth and maxHeight (#6508)

Author: jelbourn

src/cdk/overlay/overlay-ref.ts

@@ -176,6 +176,14 @@ export class OverlayRef implements PortalHost {
     if (this._state.minHeight || this._state.minHeight === 0) {
       this._pane.style.minHeight = formatCssUnit(this._state.minHeight);
     }
+
+    if (this._state.maxWidth || this._state.maxWidth === 0) {
+      this._pane.style.maxWidth = formatCssUnit(this._state.maxWidth);
+    }
+
+    if (this._state.maxHeight || this._state.maxHeight === 0) {
+      this._pane.style.maxHeight = formatCssUnit(this._state.maxHeight);
+    }
   }
 
   /** Toggles the pointer events for the overlay pane element. */

src/cdk/overlay/overlay-state.ts

@@ -44,6 +44,12 @@ export class OverlayState {
   /** The min-height of the overlay panel. If a number is provided, pixel units are assumed. */
   minHeight?: number | string;
 
+  /** The max-width of the overlay panel. If a number is provided, pixel units are assumed. */
+  maxWidth?: number | string;
+
+  /** The max-height of the overlay panel. If a number is provided, pixel units are assumed. */
+  maxHeight?: number | string;
+
   /** The direction of the text in the overlay panel. */
   direction?: Direction = 'ltr';
 

src/cdk/overlay/overlay.spec.ts

@@ -295,6 +295,22 @@ describe('Overlay', () => {
       expect(pane.style.minHeight).toEqual('500px');
     });
 
+    it('should apply the max width set in the config', () => {
+      state.maxWidth = 200;
+
+      overlay.create(state).attach(componentPortal);
+      const pane = overlayContainerElement.children[0] as HTMLElement;
+      expect(pane.style.maxWidth).toEqual('200px');
+    });
+
+
+    it('should apply the max height set in the config', () => {
+      state.maxHeight = 500;
+
+      overlay.create(state).attach(componentPortal);
+      const pane = overlayContainerElement.children[0] as HTMLElement;
+      expect(pane.style.maxHeight).toEqual('500px');
+    });
 
     it('should support zero widths and heights', () => {
       state.width = 0;
@@ -305,7 +321,6 @@ describe('Overlay', () => {
       expect(pane.style.width).toEqual('0px');
       expect(pane.style.height).toEqual('0px');
     });
-
   });
 
   describe('backdrop', () => {