[Breakpoints] functions down() and between() adds +1 to index

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Question

Why does the breakpoints functions down(key) and between(start, end) iterate the key and end +1 ?

Beheviour

If I want to style something below, say md (960px) for example, it adds +1 to the index and gets lg (1280px) instead. Dosen’t down(key) means <=key?

between(start, end) always adds 1 to the end index. So if you want to style something between 960px and 1280px I need to call between('md', 'md'); which adds +1 to the end index of the last argument which gives @media (min-width: 960px) (max-width: 1280px ).

Link to reproduction

Link: https://codesandbox.io/s/20w4v142lj

1. Adjust window to see box color change based on width

Context

From createBreakpoints.js in @material-ui/core/styles/:

function  down(key) {
    var  endIndex  =  keys.indexOf(key) +  1; // HERE
    var  upperbound  =  values[keys[endIndex]];
    
    if (endIndex  ===  keys.length) {
	    // xl down applies to all sizes
	    return  up('xs');
    }
    
    var  value  =  typeof  upperbound  ===  'number'  &&  endIndex  >  0  ?  upperbound  :  key;
    return  "@media (max-width:".concat(value  -  step  /  100).concat(unit, ")");
}

The same applies to the between(start, end) function

Environment

Tech	Version
Material-UI	v3.3.2
React	v16.5.2
Browser	Chrome v70.0.3538.77

[oliviertassinari]

Thank you, everybody, for the feedback on this issue. The best proposal I can come up with is to change the mental model behind breakpoints. Instead of considering breakpoints as values and ranges. It will be simpler to consider them as values exclusively. In this context, theme.breakpoints.down(x) will match the screen width strictly below the breakpoint value of x. The between helper would follow the same rule. The only case that might be confusing is when .only(x) is used. It would be equivalent to .between(x, breakpoint after x). In practice, it’s very close to the approach Bootstrap uses and what the authors of #13448 and #17875 propose. Hopefully, it’s more intuitive.

This is a breaking change. We should wait for v5 to consider implementing it. The impact might be important but is limited by the fact that the usage of .up(x) should be significantly more frequent (our demos + mobile-first approach) and won’t be impacted by the proposal.

[adybaby]

I’ve overwritten up, down, and between in theme.breakpoints as follows:

breakpoints: {
  get down() {
    return (key) => `@media (max-width:${this.values[key] - 0.5}px)`;
  },
  get up() {
    return (key) => `@media (min-width:${this.values[key] + 0.5}px)`;
  },
  get between() {
    return (keyA, keyB) =>
      `@media (min-width:${this.values[keyA]}px) and (max-width:${this.values[keyB] - 0.5}px)`;
  },
},

It seems to be working fine so far (and far less confusing, to my mind), but can anyone see any problems with this down the road?