fix(flex): add min-width to elements with flex basis using px values

Need to specify the min- widths/heights css when using fxFlex=“<val>px” Fixes #68.
angular · Dec 28, 2016 · 3fe5ea3 · 3fe5ea3
1 parent a77de3c
commit 3fe5ea3
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 8 deletions.
diff --git a/src/lib/flexbox/api/flex.spec.ts b/src/lib/flexbox/api/flex.spec.ts
@@ -83,6 +83,21 @@ describe('flex directive', () => {
         'flex' : '1 2 0.9em'
       });
     });
+    it('should set a min-width when the shrink == 0', () => {
+      expectDOMFrom(`<div fxFlex="1 0 37px"></div>`).toHaveCssStyle({
+        'flex' : '1 0 37px',
+        'max-width' : '37px',
+        'min-width' : '37px',
+        'box-sizing': 'border-box',
+      });
+    });
+    it('should set a min-width when basis is a Px value', () => {
+      expectDOMFrom(`<div fxFlex="312px"></div>`).toHaveCssStyle({
+        'flex' : '1 1 312px',
+        'max-width' : '312px',
+        'min-width' : '312px'
+      });
+    });
 
     describe('', () => {
 
@@ -92,6 +107,7 @@ describe('flex directive', () => {
           </div>
         `)
         .not.toHaveCssStyle({
+          'flex-direction': 'row',
           'max-height' : '37%',
         });
       });

diff --git a/src/lib/flexbox/api/flex.ts b/src/lib/flexbox/api/flex.ts
@@ -178,8 +178,8 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges,
    * Validate the value to be one of the acceptable value options
    * Use default fallback of "row"
    */
-  private _validateValue(grow: number, shrink: number, basis: string|number|FlexBasisAlias) {
-    let css;
+  private _validateValue(grow: number|string, shrink: number|string, basis: string|number|FlexBasisAlias) {
+    let css, isValue;
     let direction = (this._layout === 'column') || (this._layout == 'column-reverse') ?
         'column' :
         'row';
@@ -216,6 +216,7 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges,
         css = extendObject(clearStyles, {'flex': '1 1 auto'});
         break;
       case 'none':
+        shrink = 0;
         css = extendObject(clearStyles, {'flex': '0 0 auto'});
         break;
       case 'nogrow':
@@ -225,16 +226,18 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges,
         css = extendObject(clearStyles, {'flex': 'none'});
         break;
       case 'noshrink':
+        shrink = 0;
         css = extendObject(clearStyles, {'flex': '1 0 auto'});
         break;
 
       default:
         let isPercent = String(basis).indexOf('%') > -1;
-        let isValue = String(basis).indexOf('px') > -1 ||
-                      String(basis).indexOf('calc') > -1 ||
-                      String(basis).indexOf('em') > -1 ||
-                      String(basis).indexOf('vw') > -1 ||
-                      String(basis).indexOf('vh') > -1;
+
+        isValue = String(basis).indexOf('px') > -1 ||
+                  String(basis).indexOf('calc') > -1 ||
+                  String(basis).indexOf('em') > -1 ||
+                  String(basis).indexOf('vw') > -1 ||
+                  String(basis).indexOf('vh') > -1;
 
         // Defaults to percentage sizing unless `px` is explicitly set
         if (!isValue && !isPercent && !isNaN(basis as any))
@@ -253,9 +256,11 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges,
 
     let max = (direction === 'row') ? 'max-width' : 'max-height';
     let min = (direction === 'row') ? 'min-width' : 'min-height';
+
     let usingCalc = String(basis).indexOf('calc') > -1;
+    let isPx = String(basis).indexOf('px') > -1 || usingCalc;
 
-    css[min] = (basis == '0%') ? 0 : null;
+    css[min] = (basis == '0%') ? 0 : isPx ?  basis : null;
     css[max] = (basis == '0%') ? 0 : usingCalc ? null : basis;
 
     return extendObject(css, {'box-sizing': 'border-box'});