fix(flex): fix use of values with 'auto' (#122)

* for cases where the flex-basis === "auto", use the specified or default values of shrink and grow. * add tests for flex-bases == "auto", "none", "initial", "noshrink", and "nogrow" Fixes #120.
angular · Jan 24, 2017 · 04d24d5 · 04d24d5
1 parent 6482c12
commit 04d24d5
Show file tree

Hide file tree

Showing 2 changed files with 49 additions and 17 deletions.
diff --git a/src/lib/flexbox/api/flex.spec.ts b/src/lib/flexbox/api/flex.spec.ts
@@ -90,6 +90,18 @@ describe('flex directive', () => {
         'box-sizing': 'border-box',
       });
     });
+    it('should work with "1 0 auto" values', () => {
+      expectDOMFrom(`<div fxFlex="1 0 auto"></div>`).toHaveCssStyle({
+        'flex': '1 0 auto',
+        'box-sizing': 'border-box',
+      });
+    });
+    it('should work with "1 1 auto" values', () => {
+      expectDOMFrom(`<div fxFlex="1 1 auto"></div>`).toHaveCssStyle({
+        'flex': '1 1 auto',
+        'box-sizing': 'border-box',
+      });
+    });
     it('should work with calc values', () => {
       // @see http://caniuse.com/#feat=calc for IE issues with calc()
       if ( !isIE ) {
@@ -99,11 +111,37 @@ describe('flex directive', () => {
         });
       }
     });
-    it('should work with named values', () => {
+
+    it('should work with "auto" values', () => {
+      expectDOMFrom(`<div fxFlex="auto"></div>`).toHaveCssStyle({
+        'flex': '1 1 auto'
+      });
+    });
+    it('should work with "nogrow" values', () => {
       expectDOMFrom(`<div fxFlex="nogrow"></div>`).toHaveCssStyle({
         'flex': '0 1 auto'
       });
     });
+    it('should work with "grow" values', () => {
+      expectDOMFrom(`<div fxFlex="grow"></div>`).toHaveCssStyle({
+        'flex': '1 1 100%'
+      });
+    });
+    it('should work with "initial" values', () => {
+      expectDOMFrom(`<div fxFlex="initial"></div>`).toHaveCssStyle({
+        'flex': '0 1 auto'
+      });
+    });
+    it('should work with "noshrink" values', () => {
+      expectDOMFrom(`<div fxFlex="noshrink"></div>`).toHaveCssStyle({
+        'flex': '1 0 auto'
+      });
+    });
+    it('should work with "none" values', () => {
+      expectDOMFrom(`<div fxFlex="none"></div>`).toHaveCssStyle({
+        'flex': '0 0 auto'
+      });
+    });
 
     it('should work with full-spec values', () => {
       expectDOMFrom(`<div fxFlex="1 2 0.9em"></div>`).toHaveCssStyle({

diff --git a/src/lib/flexbox/api/flex.ts b/src/lib/flexbox/api/flex.ts
@@ -41,7 +41,7 @@ export type FlexBasisAlias = 'grow' | 'initial' | 'auto' | 'none' | 'nogrow' | '
 @Directive({
   selector: `
   [fxFlex],
-  [fxFlex.xs]
+  [fxFlex.xs],
   [fxFlex.gt-xs],
   [fxFlex.sm],
   [fxFlex.gt-sm]
@@ -249,30 +249,24 @@ export class FlexDirective extends BaseFxDirective implements OnInit, OnChanges,
       case '':
         css = extendObject(clearStyles, {'flex': '1 1 0.000000001px'});
         break;
+      case 'initial':   // default
+      case 'nogrow':
+        css = extendObject(clearStyles, {'flex': '0 1 auto'});
+        break;
       case 'grow':
         css = extendObject(clearStyles, {'flex': '1 1 100%'});
         break;
-      case 'initial':
-        css = extendObject(clearStyles, {'flex': '0 1 auto'});
-        break;  // default
-      case 'auto':
-        css = extendObject(clearStyles, {'flex': '1 1 auto'});
-        break;
-      case 'none':
+      case 'noshrink':
         shrink = 0;
-        css = extendObject(clearStyles, {'flex': '0 0 auto'});
+        css = extendObject(clearStyles, {'flex': '1 0 auto'});
         break;
-      case 'nogrow':
-        css = extendObject(clearStyles, {'flex': '0 1 auto'});
+      case 'auto':
+        css = extendObject(clearStyles, {'flex': `${grow} ${shrink} auto`});
         break;
       case 'none':
-        css = extendObject(clearStyles, {'flex': 'none'});
-        break;
-      case 'noshrink':
         shrink = 0;
-        css = extendObject(clearStyles, {'flex': '1 0 auto'});
+        css = extendObject(clearStyles, {'flex': '0 0 auto'});
         break;
-
       default:
         let isPercent = String(basis).indexOf('%') > -1;