[theme] Remove hardcoded breakpoints

There are several places in the codebase where breakpoints are hardcoded. Since we have the ability to override breakpoints, we should not have hardcoded values in the code

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

1. PropTypes

PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
PropTypes.arrayOf(PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl'])),

1. Styles

[theme.breakpoints.only('xs')]: {
  ...
}

1. Functions in withWidth.js

import { breakpointKeys } from '../styles/createBreakpoints';
function isWidthUp(...){ 
  return breakpointKeys.indexOf(...)
}
function isWidthDown(...){ 
  return breakpointKeys.indexOf(...)
}

Expected Behavior 🤔

1. PropTypes

PropTypes.string
PropTypes.arrayOf(PropTypes.string),

1. Styles

a) Use a media query only if there is such a breakpoint in the theme

[theme.breakpoints.only(theme.breakpoints.keys['xs'] ?? 0)]: {
  ...
}

b) Add a new property alias to createBreakpoints function to match breakpoints

createBreakpoints({
  values: {
      tablet: 640,
      laptop: 1024,
      desktop: 1280,
    },
    alias: {
      xs: 'tablet',
      sm: 'tablet',
    },
  }
})

1. Functions in withWidth.js a) Show the necessity for breakpoints Remove import { breakpointKeys } from '../styles/createBreakpoints';

function isWidthUp(breakpoints, breakpoint, width, inclusive = true){ .. }

b) Add breakpoints to options implicitly

import { breakpointKeys } from '../styles/createBreakpoints'
function isWidthUp(breakpoint, width, opts = {}) {
  let {breakpoints = breakpointKeys, inclusive = true } = opts;
  ...
}

Your Environment 🌎

Tech	Version
Material-UI	v4.11.0

[Avi98]

Hi @oliviertassinari , anyone is working on it? Can I take this up?

[kmurgic]

This is still an issue in v5. Looks like there has not been any movement on this in a couple years. I implemented custom breakpoints as shown in the example and noticed some peculiar diffs in my snapshot tests for a Tabs component

- @media (max-width:599.95px) {
+ @media (max-width:NaNpx) {

Turned out that tabs was using theme.breakpoints.down('sm') under the hood.

My solution was to add back the breakpoints for xs, sm, md, lg, xl and duplicate the values from other breakpoints, and then hide them from TS. Would be nice if this could be fixed with aliasing. In the meantime, it seems prudent to at least add some sort of note in the documentation.

Perhaps we should start the first suggestion you provided in this comment https://github.com/mui/material-ui/issues/21778#issuecomment-657225142. IMO adding an aliases object to the breakpoints (like your second example) feels like a more stable solution, but updating the docs seems good enough.

I’m happy to make a PR to update the docs. I could also work on the second option of adding an aliases property to the breakpoints object, but I might be a little slower getting that PR ready since I don’t have a lot of free time right now.