Repository: mui/material-ui (TypeScript)
Date: 2019-12-27 20:07:30+00:00
Task type: Feature

Issue:
[theme] Support breakpoints.between(a, b) with number
Why theme.breakpoints.between doesn't take 2 number as optional input type like all the others breakpoints functions?
Is it possibile to add this possibility?
Thanks


Issue discussion:
Interesting, why using arbitrary number values instead of the default breakpoints named (sm, md, etc)? Note that you can customize these breakpoints. 
Actually, I see your point: the up and the down helpers support arbitrary values, but the between helper doesn't. For consistency, it would make sense to support it 👍. What about this diff? Do you want to work on it? :)

```diff
diff --git a/docs/src/pages/customization/breakpoints/breakpoints.md b/docs/src/pages/customization/breakpoints/breakpoints.md
index 4f1114504..298e21068 100644
--- a/docs/src/pages/customization/breakpoints/breakpoints.md
+++ b/docs/src/pages/customization/breakpoints/breakpoints.md
@@ -171,8 +171,8 @@ const styles = theme => ({

 #### Arguments

-1. `start` (*String*): A breakpoint key (`xs`, `sm`, etc.).
-2. `end` (*String*): A breakpoint key (`xs`, `sm`, etc.).
+1. `start` (*String*): A breakpoint key (`xs`, `sm`, etc.) or a screen width number in pixels.
+2. `end` (*String*): A breakpoint key (`xs`, `sm`, etc.) or a screen width number in pixels.

 #### Returns

diff --git a/packages/material-ui/src/styles/createBreakpoints.js b/packages/material-ui/src/styles/createBreakpoints.js
index e05d9588f..b1ff21003 100644
--- a/packages/material-ui/src/styles/createBreakpoints.js
+++ b/packages/material-ui/src/styles/createBreakpoints.js
@@ -38,15 +38,20 @@ export default function createBreakpoints(breakpoints) {
   }

   function between(start, end) {
-    const endIndex = keys.indexOf(end) + 1;
+    const endIndex = keys.indexOf(end);

-    if (endIndex === keys.length) {
+    if (endIndex === keys.length - 1) {
       return up(start);
     }

     return (
-      `@media (min-width:${values[start]}${unit}) and ` +
-      `(max-width:${values[keys[endIndex]] - step / 100}${unit})`
+      `@media (min-width:${
+        typeof values[start] === 'number' ? values[start] : start
+      }${unit}) and ` +
+      `(max-width:${(endIndex !== -1 && typeof values[keys[endIndex + 1]] === 'number'
+        ? values[keys[endIndex + 1]]
+        : end) -
+        step / 100}${unit})`
     );
   }
```
Yes is for consistency and 'cause sometimes is usefull. I could work on it, i don't know when but i would do it. When a i have a few time i make this diff.
Thanks

Great :) 

Solution patch:
diff --git a/docs/src/pages/customization/breakpoints/breakpoints.md b/docs/src/pages/customization/breakpoints/breakpoints.md
--- a/docs/src/pages/customization/breakpoints/breakpoints.md
+++ b/docs/src/pages/customization/breakpoints/breakpoints.md
@@ -171,8 +171,8 @@ const styles = theme => ({
 
 #### Arguments
 
-1. `start` (*String*): A breakpoint key (`xs`, `sm`, etc.).
-2. `end` (*String*): A breakpoint key (`xs`, `sm`, etc.).
+1. `start` (*String*): A breakpoint key (`xs`, `sm`, etc.) or a screen width number in pixels.
+2. `end` (*String*): A breakpoint key (`xs`, `sm`, etc.) or a screen width number in pixels.
 
 #### Returns
 
diff --git a/packages/material-ui/src/styles/createBreakpoints.js b/packages/material-ui/src/styles/createBreakpoints.js
--- a/packages/material-ui/src/styles/createBreakpoints.js
+++ b/packages/material-ui/src/styles/createBreakpoints.js
@@ -38,15 +38,20 @@ export default function createBreakpoints(breakpoints) {
   }
 
   function between(start, end) {
-    const endIndex = keys.indexOf(end) + 1;
+    const endIndex = keys.indexOf(end);
 
-    if (endIndex === keys.length) {
+    if (endIndex === keys.length - 1) {
       return up(start);
     }
 
     return (
-      `@media (min-width:${values[start]}${unit}) and ` +
-      `(max-width:${values[keys[endIndex]] - step / 100}${unit})`
+      `@media (min-width:${
+        typeof values[start] === 'number' ? values[start] : start
+      }${unit}) and ` +
+      `(max-width:${(endIndex !== -1 && typeof values[keys[endIndex + 1]] === 'number'
+        ? values[keys[endIndex + 1]]
+        : end) -
+        step / 100}${unit})`
     );
   }
 


Test patch:
diff --git a/packages/material-ui/src/styles/createBreakpoints.test.js b/packages/material-ui/src/styles/createBreakpoints.test.js
--- a/packages/material-ui/src/styles/createBreakpoints.test.js
+++ b/packages/material-ui/src/styles/createBreakpoints.test.js
@@ -23,7 +23,7 @@ describe('createBreakpoints', () => {
       assert.strictEqual(breakpoints.down('md'), '@media (max-width:1279.95px)');
     });
 
-    it('should use the specified key if it is not a recognized breakpoint', () => {
+    it('should accept a number', () => {
       assert.strictEqual(breakpoints.down(600), '@media (max-width:599.95px)');
     });
 
@@ -40,6 +40,13 @@ describe('createBreakpoints', () => {
       );
     });
 
+    it('should accept numbers', () => {
+      assert.strictEqual(
+        breakpoints.between(600, 800),
+        '@media (min-width:600px) and (max-width:799.95px)',
+      );
+    });
+
     it('on xl should call up', () => {
       assert.strictEqual(breakpoints.between('lg', 'xl'), '@media (min-width:1280px)');
     });