fix(overlay): incorrectly calculating using minWidth and minHeight as a string (#18540)

We use `minWidth` and `minHeight` to figure out whether an overlay can fit with its flexible dimensions. The problem is that the values can be either a string or a number, and if they're a string, the comparison breaks down because the value we're comparing it against is always a number.

These changes also add a couple of extra tests for `minWidth` and `minHeight` since we didn't have any.

Fixes #18486.

Author: crisbeto

src/cdk/overlay/position/flexible-connected-position-strategy.spec.ts

@@ -2079,6 +2079,100 @@ describe('FlexibleConnectedPositionStrategy', () => {
         expect(boundingBoxStyle.maxHeight).toBeFalsy();
       });
 
+    it('should collapse the overlay vertically if overlay is outside of viewport, but taller ' +
+      'than the minHeight', () => {
+        const bottomOffset = OVERLAY_HEIGHT / 2;
+        originElement.style.bottom = `${bottomOffset}px`;
+        originElement.style.left = '50%';
+        originElement.style.position = 'fixed';
+
+        positionStrategy
+          .withFlexibleDimensions()
+          .withPush(true)
+          .withPositions([{
+            overlayY: 'top',
+            overlayX: 'start',
+            originY: 'bottom',
+            originX: 'start',
+          }]);
+
+        attachOverlay({positionStrategy, minHeight: bottomOffset - 1});
+        const overlayRect = overlayRef.overlayElement.getBoundingClientRect();
+
+        expect(Math.floor(overlayRect.height)).toBe(bottomOffset);
+      });
+
+    it('should collapse the overlay vertically if overlay is outside of viewport, but taller ' +
+      'than the minHeight that is set as a pixel string', () => {
+        const bottomOffset = OVERLAY_HEIGHT / 2;
+        originElement.style.bottom = `${bottomOffset}px`;
+        originElement.style.left = '50%';
+        originElement.style.position = 'fixed';
+
+        positionStrategy
+          .withFlexibleDimensions()
+          .withPush(true)
+          .withPositions([{
+            overlayY: 'top',
+            overlayX: 'start',
+            originY: 'bottom',
+            originX: 'start',
+          }]);
+
+        attachOverlay({positionStrategy, minHeight: `${bottomOffset - 1}px`});
+        const overlayRect = overlayRef.overlayElement.getBoundingClientRect();
+
+        expect(Math.floor(overlayRect.height)).toBe(bottomOffset);
+      });
+
+    it('should collapse the overlay horizontally if overlay is outside of viewport, but wider ' +
+      'than the minWidth', () => {
+        const rightOffset = OVERLAY_WIDTH / 2;
+        originElement.style.top = '50%';
+        originElement.style.right = `${rightOffset}px`;
+        originElement.style.position = 'fixed';
+
+        positionStrategy
+          .withFlexibleDimensions()
+          .withPush(true)
+          .withPositions([{
+            overlayY: 'top',
+            overlayX: 'start',
+            originY: 'top',
+            originX: 'end',
+          }]);
+
+        attachOverlay({positionStrategy, minWidth: rightOffset});
+        const overlayRect = overlayRef.overlayElement.getBoundingClientRect();
+
+        expect(Math.floor(overlayRect.width)).toBe(rightOffset);
+      });
+
+    it('should collapse the overlay horizontally if overlay is outside of viewport, but wider ' +
+      'than the minWidth that is set as a pixel string', () => {
+        const rightOffset = OVERLAY_WIDTH / 2;
+        originElement.style.top = '50%';
+        originElement.style.right = `${rightOffset}px`;
+        originElement.style.position = 'fixed';
+
+        positionStrategy
+          .withFlexibleDimensions()
+          .withPush(true)
+          .withPositions([{
+            overlayY: 'top',
+            overlayX: 'start',
+            originY: 'top',
+            originX: 'end',
+          }]);
+
+        attachOverlay({positionStrategy, minWidth: `${rightOffset}px`});
+        const overlayRect = overlayRef.overlayElement.getBoundingClientRect();
+
+        expect(Math.floor(overlayRect.width)).toBe(rightOffset);
+      });
+
+
+
   });
 
   describe('onPositionChange with scrollable view properties', () => {

src/cdk/overlay/position/flexible-connected-position-strategy.ts

@@ -29,6 +29,9 @@ import {OverlayContainer} from '../overlay-container';
 /** Class to be added to the overlay bounding box. */
 const boundingBoxClass = 'cdk-overlay-connected-position-bounding-box';
 
+/** Regex used to split a string on its CSS units. */
+const cssUnitPattern = /([A-Za-z%]+)$/;
+
 /** Possible values that can be set as the origin of a FlexibleConnectedPositionStrategy. */
 export type FlexibleConnectedPositionStrategyOrigin = ElementRef | HTMLElement | Point & {
   width?: number;
@@ -567,8 +570,8 @@ export class FlexibleConnectedPositionStrategy implements PositionStrategy {
     if (this._hasFlexibleDimensions) {
       const availableHeight = viewport.bottom - point.y;
       const availableWidth = viewport.right - point.x;
-      const minHeight = this._overlayRef.getConfig().minHeight;
-      const minWidth = this._overlayRef.getConfig().minWidth;
+      const minHeight = getPixelValue(this._overlayRef.getConfig().minHeight);
+      const minWidth = getPixelValue(this._overlayRef.getConfig().minWidth);
 
       const verticalFit = fit.fitsInViewportVertically ||
           (minHeight != null && minHeight <= availableHeight);
@@ -1199,3 +1202,17 @@ function extendStyles(destination: CSSStyleDeclaration,
 
   return destination;
 }
+
+
+/**
+ * Extracts the pixel value as a number from a value, if it's a number
+ * or a CSS pixel string (e.g. `1337px`). Otherwise returns null.
+ */
+function getPixelValue(input: number|string|null|undefined): number|null {
+  if (typeof input !== 'number' && input != null) {
+    const [value, units] = input.split(cssUnitPattern);
+    return (!units || units === 'px') ? parseFloat(value) : null;
+  }
+
+  return input || null;
+}