feat(flex): add support for rem units (#901)

Enable support for rem units in FlexDirective Closes #898
angular · Dec 4, 2018 · 5990ed0 · 5990ed0
1 parent 1205588
commit 5990ed0
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 4 deletions.
diff --git a/src/lib/flex/flex/flex.spec.ts b/src/lib/flex/flex/flex.spec.ts
@@ -497,6 +497,15 @@ describe('flex directive', () => {
       }, styler);
     });
 
+    it('should set a min-width and max-width when basis is a rem value', () => {
+      componentWithTemplate(`<div fxFlex='12rem'></div>`);
+      expectNativeEl(fixture).toHaveStyle({
+        'flex': '1 1 12rem',
+        'max-width': '12rem',
+        'min-width': '12rem'
+      }, styler);
+    });
+
     describe('', () => {
 
       it('should ignore fxLayout settings on same element', () => {

diff --git a/src/lib/flex/flex/flex.ts b/src/lib/flex/flex/flex.ts
@@ -61,9 +61,9 @@ export class FlexStyleBuilder extends StyleBuilder {
     const hasCalc = String(basis).indexOf('calc') > -1;
     const usingCalc = hasCalc || (basis === 'auto');
     const isPercent = String(basis).indexOf('%') > -1 && !hasCalc;
-    const hasUnits = String(basis).indexOf('px') > -1 || String(basis).indexOf('em') > -1 ||
-      String(basis).indexOf('vw') > -1 || String(basis).indexOf('vh') > -1;
-    const isPx = String(basis).indexOf('px') > -1 || usingCalc;
+    const hasUnits = String(basis).indexOf('px') > -1 || String(basis).indexOf('rem') > -1 ||
+      String(basis).indexOf('em') > -1 || String(basis).indexOf('vw') > -1 ||
+      String(basis).indexOf('vh') > -1;
 
     let isValue = (hasCalc || hasUnits);
 
@@ -166,7 +166,7 @@ export class FlexStyleBuilder extends StyleBuilder {
 
     // Fix for issues 277, 534, and 728
     if (basis !== '0%' && basis !== '0px' && basis !== '0.000000001px' && basis !== 'auto') {
-      css[min] = isFixed || (isPx && grow) ? basis : null;
+      css[min] = isFixed || (isValue && grow) ? basis : null;
       css[max] = isFixed || (!usingCalc && shrink) ? basis : null;
     }