Flex Fix

packages/flex/__tests__/flexCol.test.tsx

@@ -5,6 +5,7 @@ import {
   setColumnSizing,
   setColumnOffset,
   setGutterWidth,
+  parseNumberToTwoDecimals,
   FlexCol
 } from '../src/FlexCol';
 
@@ -40,13 +41,13 @@ describe('FlexCol', () => {
   describe('setColumnSizing', () => {
     it('should return a string percentage value when provided with a number value as arg', () => {
       const baseColumn = 8.3;
-      const expected = '33.2%';
+      const expected = '33.20%';
       expect(setColumnSizing(baseColumn, 4)).toEqual(expected);
     });
 
     it('should return an array of string percentage values when provided with an array of number column sizings', () => {
       const baseColumn = 8.3;
-      const expected = ['99.60000000000001%', '49.800000000000004%'];
+      const expected = ['99.60%', '49.80%'];
       expect(setColumnSizing(baseColumn, [12, 6])).toEqual(expected);
     });
   });
@@ -77,6 +78,12 @@ describe('FlexCol', () => {
     });
   });
 
+  describe('parseNumberToTwoDecimals', () => {
+    it('should return a string number with only 2 decimal places', () => {
+      expect(parseNumberToTwoDecimals(5 * 1.3326)).toEqual('6.66');
+    });
+  });
+
   describe('FlexCol', () => {
     it('should render', () => {
       const { asFragment } = render(<FlexCol columnSize={1}>Test</FlexCol>);

packages/flex/src/FlexCol.tsx

@@ -34,8 +34,10 @@ export function setColumnSizing(
   columnSize: number | number[]
 ): string | string[] {
   return Array.isArray(columnSize) && columnSize.length > 1
-    ? columnSize.map(size => `${size * baseColumnWidth}%`)
-    : `${(columnSize as number) * baseColumnWidth}%`;
+    ? columnSize.map(
+        size => `${parseNumberToTwoDecimals(size * baseColumnWidth)}%`
+      )
+    : `${parseNumberToTwoDecimals((columnSize as number) * baseColumnWidth)}%`;
 }
 
 export function setColumnOffset(
@@ -61,6 +63,10 @@ export function setGutterWidth(
     : `${(gutterWidth as number) / 2}em`;
 }
 
+export function parseNumberToTwoDecimals(value: number) {
+  return `${parseFloat(String(value)).toFixed(2)}`;
+}
+
 export function isNumber(val: number): boolean {
   return !isNaN(val) && isFinite(val);
 }