fix(fxFlex): prevent setting min/max-size when grow/shrink is zero (#160

)

handle various scenarios of grow/shrink being zero:
*  set `min-width`/`min-height` only if `grow != 0`
*  set `max-width`/`max-height` only if `shink != 0`
*  set both min and max if both `grow == 0` AND `shink == 0`
*  add tests for these scenarios
*  remove max-width from  test "should set a min-width when the shrink == 0"

fixes #153

Signed-off-by: Somo <[email protected]>

src/lib/flexbox/api/flex.spec.ts

@@ -151,11 +151,52 @@ describe('flex directive', () => {
     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 and max-width when the grow == 0 and shrink == 0', () => {
+      expectDOMFrom(`<div fxFlex="0 0 375px"></div>`).toHaveCssStyle({
+        'flex': '0 0 375px',
+        'max-width': '375px',
+        'min-width': '375px',
+        'box-sizing': 'border-box',
+      });
+    });
+
+
+    it('should not set max-width to 69px when fxFlex="1 0 69px"', () => {
+      expectDOMFrom(`<div fxFlex="1 0 69px"></div>`).not.toHaveCssStyle({
+        'max-width': '69px',
+      });
+    });
+
+    it('should not set a max-width when the shrink == 0', () => {
+      let fRef = componentWithTemplate(`<div fxFlex="1 0 303px"></div>`);
+      fRef.detectChanges();
+
+      let dom = fRef.debugElement.children[0].nativeElement;
+      let maxWidthStyle = getDOM().getStyle(dom, 'max-width');
+
+      expect(maxWidthStyle).toBeFalsy();
+    });
+
+    it('should not set min-width to 96px when fxFlex="0 1 96px"', () => {
+      expectDOMFrom(`<div fxFlex="0 1 96px"></div>`).not.toHaveCssStyle({
+        'min-width': '96px',
+      });
+    });
+
+    it('should not set a min-width when the grow == 0', () => {
+      let fRef = componentWithTemplate(`<div fxFlex="0 1 313px"></div>`);
+      fRef.detectChanges();
+
+      let dom = fRef.debugElement.children[0].nativeElement;
+      let minWidthStyle = getDOM().getStyle(dom, 'min-width');
+
+      expect(minWidthStyle).toBeFalsy();
+    });
+
     it('should set a min-width when basis is a Px value', () => {
       expectDOMFrom(`<div fxFlex="312px"></div>`).toHaveCssStyle({
         'flex': '1 1 312px',

src/lib/flexbox/api/flex.ts

@@ -226,6 +226,14 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges,
         'column' :
         'row';
 
+    if ( grow == "0" ) {
+      grow = 0;
+    }
+
+    if ( shrink == "0" ) {
+      shrink = 0;
+    }
+
     // flex-basis allows you to specify the initial/starting main-axis size of the element,
     // before anything else is computed. It can either be a percentage or an absolute value.
     // It is, however, not the breaking point for flex-grow/shrink properties
@@ -250,6 +258,7 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges,
         break;
       case 'initial':   // default
       case 'nogrow':
+        grow = 0;
         css = extendObject(clearStyles, {'flex': '0 1 auto'});
         break;
       case 'grow':
@@ -263,6 +272,7 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges,
         css = extendObject(clearStyles, {'flex': `${grow} ${shrink} auto`});
         break;
       case 'none':
+        grow = 0;
         shrink = 0;
         css = extendObject(clearStyles, {'flex': '0 0 auto'});
         break;
@@ -300,8 +310,13 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges,
     let usingCalc = String(basis).indexOf('calc') > -1;
     let isPx = String(basis).indexOf('px') > -1 || usingCalc;
 
-    css[min] = (basis == '0%') ? 0 : isPx ? basis : null;
-    css[max] = (basis == '0%') ? 0 : usingCalc ? null : basis;
+
+    // make box inflexible when shrink and grow are both zero
+    // should not set a min when the grow is zero
+    // should not set a max when the shrink is zero
+    let isFixed = !grow && !shrink;
+    css[min] = (basis == '0%') ? 0 : isFixed || (isPx && grow) ? basis : null;
+    css[max] = (basis == '0%') ? 0 : isFixed || (!usingCalc && shrink) ? basis : null;
 
     return extendObject(css, {'box-sizing': 'border-box'});
   }