[theme] Improve breakpoints definitions

docs/src/modules/components/Demo.js

@@ -658,7 +658,7 @@ const useStyles = makeStyles(
     /* Make no difference between the demo and the markdown. */
     demoBgInline: {
       // Maintain alignment with the markdown text
-      [theme.breakpoints.down('xs')]: {
+      [theme.breakpoints.down('sm')]: {
         padding: theme.spacing(3),
       },
     },

docs/src/pages/components/buttons/ButtonBase.js

@@ -31,7 +31,7 @@ const useStyles = makeStyles((theme) => ({
   image: {
     position: 'relative',
     height: 200,
-    [theme.breakpoints.down('xs')]: {
+    [theme.breakpoints.down('sm')]: {
       width: '100% !important', // Overrides inline-style
       height: 100,
     },

docs/src/pages/components/buttons/ButtonBase.tsx

@@ -32,7 +32,7 @@ const useStyles = makeStyles((theme: Theme) =>
     image: {
       position: 'relative',
       height: 200,
-      [theme.breakpoints.down('xs')]: {
+      [theme.breakpoints.down('sm')]: {
         width: '100% !important', // Overrides inline-style
         height: 100,
       },

docs/src/pages/components/dialogs/ResponsiveDialog.js

@@ -11,7 +11,7 @@ import { useTheme } from '@material-ui/core/styles';
 export default function ResponsiveDialog() {
   const [open, setOpen] = React.useState(false);
   const theme = useTheme();
-  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
+  const fullScreen = useMediaQuery(theme.breakpoints.down('md'));
 
   const handleClickOpen = () => {
     setOpen(true);

docs/src/pages/components/dialogs/ResponsiveDialog.tsx

@@ -11,7 +11,7 @@ import { useTheme } from '@material-ui/core/styles';
 export default function ResponsiveDialog() {
   const [open, setOpen] = React.useState(false);
   const theme = useTheme();
-  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
+  const fullScreen = useMediaQuery(theme.breakpoints.down('md'));
 
   const handleClickOpen = () => {
     setOpen(true);

docs/src/pages/components/dialogs/dialogs.md

@@ -90,7 +90,7 @@ import useMediaQuery from '@material-ui/core/useMediaQuery';
 
 function MyComponent() {
   const theme = useTheme();
-  const fullScreen = useMediaQuery(theme.breakpoints.down('sm'));
+  const fullScreen = useMediaQuery(theme.breakpoints.down('md'));
 
   return <Dialog fullScreen={fullScreen} />;
 }

docs/src/pages/components/snackbars/FabIntegrationSnackbar.js

@@ -26,7 +26,7 @@ const useStyles = makeStyles((theme) => ({
     right: theme.spacing(2),
   },
   snackbar: {
-    [theme.breakpoints.down('xs')]: {
+    [theme.breakpoints.down('sm')]: {
       bottom: 90,
     },
   },

docs/src/pages/components/snackbars/FabIntegrationSnackbar.tsx

@@ -27,7 +27,7 @@ const useStyles = makeStyles((theme: Theme) =>
       right: theme.spacing(2),
     },
     snackbar: {
-      [theme.breakpoints.down('xs')]: {
+      [theme.breakpoints.down('sm')]: {
         bottom: 90,
       },
     },

docs/src/pages/customization/breakpoints/MediaQuery.js

@@ -6,7 +6,7 @@ import { green } from '@material-ui/core/colors';
 const useStyles = makeStyles((theme) => ({
   root: {
     padding: theme.spacing(1),
-    [theme.breakpoints.down('sm')]: {
+    [theme.breakpoints.down('md')]: {
       backgroundColor: theme.palette.secondary.main,
     },
     [theme.breakpoints.up('md')]: {

docs/src/pages/customization/breakpoints/MediaQuery.tsx

@@ -7,7 +7,7 @@ const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
       padding: theme.spacing(1),
-      [theme.breakpoints.down('sm')]: {
+      [theme.breakpoints.down('md')]: {
         backgroundColor: theme.palette.secondary.main,
       },
       [theme.breakpoints.up('md')]: {

docs/src/pages/customization/breakpoints/breakpoints.md

@@ -20,15 +20,6 @@ Each breakpoint (a key) matches with a _fixed_ screen width (a value):
 - **lg,** large: 1280px
 - **xl,** extra-large: 1920px
 
-These breakpoint values are used to determine breakpoint ranges. A range starts from the breakpoint value inclusive, to the next breakpoint value exclusive:
-
-```js
-value         |0px     600px    960px    1280px   1920px
-key           |xs      sm       md       lg       xl
-screen width  |--------|--------|--------|--------|-------->
-range         |   xs   |   sm   |   md   |   lg   |   xl
-```
-
 These values can be [customized](#custom-breakpoints).
 
 ## CSS Media Queries
@@ -47,7 +38,7 @@ In the following demo, we change the background color (red, blue & green) based
 const styles = (theme) => ({
   root: {
     padding: theme.spacing(1),
-    [theme.breakpoints.down('sm')]: {
+    [theme.breakpoints.down('md')]: {
       backgroundColor: theme.palette.secondary.main,
     },
     [theme.breakpoints.up('md')]: {
@@ -187,9 +178,8 @@ const styles = (theme) => ({
 const styles = (theme) => ({
   root: {
     backgroundColor: 'blue',
-    // Match [0, md + 1)
-    //       [0, lg)
-    //       [0, 1280px)
+    // Match [0, md)
+    //       [0, 960px)
     [theme.breakpoints.down('md')]: {
       backgroundColor: 'red',
     },
@@ -240,9 +230,8 @@ const styles = (theme) => ({
 const styles = (theme) => ({
   root: {
     backgroundColor: 'blue',
-    // Match [sm, md + 1)
-    //       [sm, lg)
-    //       [600px, 1280px)
+    // Match [sm, md)
+    //       [600px, 960px)
     [theme.breakpoints.between('sm', 'md')]: {
       backgroundColor: 'red',
     },

docs/src/pages/guides/migration-v4/migration-v4.md

@@ -168,6 +168,25 @@ const theme = createMuitheme({
 });
 ```
 
+- Breakpoints are now treated as values instead of ranges. The behavior of `down(key)` was changed to define media query less than the value defined with the corresponding breakpoint (exclusive).
+  The `between(start, end)` was also updated to define media query for the values between the actual values of start (inclusive) and end (exclusive).
+  Find examples of the changes required defined below:
+
+```diff
+-theme.breakpoints.down('sm') // '@media (max-width:959.95px)' - [0, sm + 1) => [0, md)
++theme.breakpoints.down('md') // '@media (max-width:959.95px)' - [0, md)
+```
+
+```diff
+-theme.breakpoints.between('sm', 'md') // '@media (min-width:600px) and (max-width:1279.95px)' - [sm, md + 1) => [0, lg)
++theme.breakpoints.between('sm', 'lg') // '@media (min-width:600px) and (max-width:1279.95px)' - [0, lg)
+```
+
+```diff
+-theme.breakpoints.between('sm', 'xl') // '@media (min-width:600px)'
++theme.breakpoints.up('sm') // '@media (min-width:600px)'
+```
+
 ### Avatar
 
 - Rename `circle` to `circular` for consistency. The possible values should be adjectives, not nouns:

docs/src/pages/premium-themes/onepirate/modules/views/ProductCategories.js

@@ -21,7 +21,7 @@ const styles = (theme) => ({
     padding: 0,
     borderRadius: 0,
     height: '40vh',
-    [theme.breakpoints.down('sm')]: {
+    [theme.breakpoints.down('md')]: {
       width: '100% !important',
       height: 100,
     },

docs/src/pages/premium-themes/onepirate/modules/views/ProductCategories.tsx

@@ -26,7 +26,7 @@ const styles = (theme: Theme) =>
       padding: 0,
       borderRadius: 0,
       height: '40vh',
-      [theme.breakpoints.down('sm')]: {
+      [theme.breakpoints.down('md')]: {
         width: '100% !important',
         height: 100,
       },

packages/material-ui/src/Tabs/Tabs.js

@@ -72,7 +72,7 @@ export const styles = (theme) => ({
   scrollButtons: {},
   /* Styles applied to the `ScrollButtonComponent` component if `scrollButtons="auto"` or scrollButtons="desktop"`. */
   scrollButtonsDesktop: {
-    [theme.breakpoints.down('xs')]: {
+    [theme.breakpoints.down('sm')]: {
       display: 'none',
     },
   },

packages/material-ui/src/styles/createBreakpoints.js

@@ -27,7 +27,7 @@ export default function createBreakpoints(breakpoints) {
   }
 
   function down(key) {
-    const endIndex = keys.indexOf(key) + 1;
+    const endIndex = keys.indexOf(key);
     const upperbound = values[keys[endIndex]];
 
     if (endIndex === keys.length) {
@@ -42,25 +42,25 @@ export default function createBreakpoints(breakpoints) {
   function between(start, end) {
     const endIndex = keys.indexOf(end);
 
-    if (endIndex === keys.length - 1) {
-      return up(start);
-    }
-
     return (
       `@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]]
+        (endIndex !== -1 && typeof values[keys[endIndex]] === 'number'
+          ? values[keys[endIndex]]
           : end) -
         step / 100
       }${unit})`
     );
   }
 
   function only(key) {
-    return between(key, key);
+    if (keys.indexOf(key) + 1 < keys.length) {
+      return between(key, keys[keys.indexOf(key) + 1]);
+    }
+
+    return up(key);
   }
 
   function width(key) {

packages/material-ui/src/styles/createBreakpoints.test.js

@@ -27,34 +27,34 @@ describe('createBreakpoints', () => {
 
   describe('down', () => {
     it('should work', () => {
-      expect(breakpoints.down('sm')).to.equal('@media (max-width:959.95px)');
+      expect(breakpoints.down('sm')).to.equal('@media (max-width:599.95px)');
     });
 
     it('should work for md', () => {
-      expect(breakpoints.down('md')).to.equal('@media (max-width:1279.95px)');
+      expect(breakpoints.down('md')).to.equal('@media (max-width:959.95px)');
     });
 
     it('should accept a number', () => {
       expect(breakpoints.down(600)).to.equal('@media (max-width:599.95px)');
     });
 
-    it('should apply to all sizes for xl', () => {
-      expect(breakpoints.down('xl')).to.equal('@media (min-width:0px)');
+    it('should work for xl', () => {
+      expect(breakpoints.down('xl')).to.equal('@media (max-width:1919.95px)');
     });
 
     it('should work for custom breakpoints', () => {
-      expect(customBreakpoints.down('laptop')).to.equal('@media (max-width:1279.95px)');
+      expect(customBreakpoints.down('laptop')).to.equal('@media (max-width:1023.95px)');
     });
 
     it('should work for the largest of custom breakpoints', () => {
-      expect(customBreakpoints.down('desktop')).to.equal('@media (min-width:0px)');
+      expect(customBreakpoints.down('desktop')).to.equal('@media (max-width:1279.95px)');
     });
   });
 
   describe('between', () => {
     it('should work', () => {
       expect(breakpoints.between('sm', 'md')).to.equal(
-        '@media (min-width:600px) and (max-width:1279.95px)',
+        '@media (min-width:600px) and (max-width:959.95px)',
       );
     });
 
@@ -64,13 +64,15 @@ describe('createBreakpoints', () => {
       );
     });
 
-    it('on xl should call up', () => {
-      expect(breakpoints.between('lg', 'xl')).to.equal('@media (min-width:1280px)');
+    it('should work on largest breakpoints', () => {
+      expect(breakpoints.between('lg', 'xl')).to.equal(
+        '@media (min-width:1280px) and (max-width:1919.95px)',
+      );
     });
 
     it('should work for custom breakpoints', () => {
       expect(customBreakpoints.between('tablet', 'laptop')).to.equal(
-        '@media (min-width:640px) and (max-width:1279.95px)',
+        '@media (min-width:640px) and (max-width:1023.95px)',
       );
     });
   });