[theme] Support breakpoints.between(a, b) with number (#19003)

mui · Dec 31, 2019 · d332339 · d332339
1 parent 5533914
commit d332339
Show file tree

Hide file tree

Showing 3 changed files with 19 additions and 7 deletions.
diff --git 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
@@ -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})`
     );
   }
 

diff --git 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)');
     });