fix(between): Between supports unitless values

between (and therefore fluidRange) now supports unitless values for fromSize and toSize.

fix #444

src/mixins/between.js

@@ -26,8 +26,8 @@ import PolishedError from '../internalHelpers/_errors'
  * }
  */
 export default function between(
-  fromSize: string,
-  toSize: string,
+  fromSize: string | number,
+  toSize: string | number,
   minScreen?: string = '320px',
   maxScreen?: string = '1200px',
 ): string {
@@ -49,8 +49,6 @@ export default function between(
   if (
     typeof unitlessFromSize !== 'number'
     || typeof unitlessToSize !== 'number'
-    || !fromSizeUnit
-    || !toSizeUnit
     || fromSizeUnit !== toSizeUnit
   ) {
     throw new PolishedError(48)
@@ -59,7 +57,7 @@ export default function between(
   const slope = (unitlessFromSize - unitlessToSize)
     / (unitlessMinScreen - unitlessMaxScreen)
   const base = unitlessToSize - slope * unitlessMaxScreen
-  return `calc(${base.toFixed(2)}${fromSizeUnit} + ${(100 * slope).toFixed(
-    2,
-  )}vw)`
+  return `calc(${base.toFixed(2)}${fromSizeUnit || ''} + ${(
+    100 * slope
+  ).toFixed(2)}vw)`
 }

src/mixins/test/__snapshots__/between.test.js.snap

@@ -3,3 +3,7 @@
 exports[`between should return a valid calc formula when not passed min/max screen sizes 1`] = `"calc(-9.09px + 9.09vw)"`;
 
 exports[`between should return a valid calc formula when passed min/max screen sizes 1`] = `"calc(-33.33px + 13.33vw)"`;
+
+exports[`between should return a valid calc formula when passed unitless to/from values as numbers 1`] = `"calc(-9.09 + 9.09vw)"`;
+
+exports[`between should return a valid calc formula when passed unitless to/from values as strings 1`] = `"calc(-9.09 + 9.09vw)"`;

src/mixins/test/between.test.js

@@ -9,6 +9,14 @@ describe('between', () => {
   it('should return a valid calc formula when not passed min/max screen sizes', () => {
     expect(between('20px', '100px')).toMatchSnapshot()
   })
+
+  it('should return a valid calc formula when passed unitless to/from values as numbers', () => {
+    expect(between(20, 100)).toMatchSnapshot()
+  })
+
+  it('should return a valid calc formula when passed unitless to/from values as strings', () => {
+    expect(between('20', '100')).toMatchSnapshot()
+  })
   // Errors
   it('should throw an error when not passed min/max screen size as a string', () => {
     expect(() => {
@@ -28,15 +36,6 @@ describe('between', () => {
     )
   })
 
-  it('should throw an error when not passed from/to size as a string', () => {
-    expect(() => {
-      // $FlowFixMe
-      between(20, 100, '400px', '1000px')
-    }).toThrow(
-      'fromSize and toSize must be provided as stringified numbers with the same units.',
-    )
-  })
-
   it('should throw an error when passed to/from size with different units', () => {
     expect(() => {
       // $FlowFixMe

src/types/fluidRangeConfiguration.js

@@ -10,6 +10,6 @@
  */
 export type FluidRangeConfiguration = {|
   prop: string,
-  fromSize: string,
-  toSize: string,
+  fromSize: string | number,
+  toSize: string | number,
 |}