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

[benjinamin]

• 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]

Dosen't down(key) means <=key?

@b5imply Yes, it's exactly what it means. Now, you have to understand that a breakpoint key is not a value but an interval and that that all our helpers are inclusive (=).
It's what we have tried to explained in the documentation example. It's also what Bootstrap is doing.
Maybe we should better explain it in the documentation? Any idea how we can make it more clear?

[benjinamin]

@oliviertassinari I still don't understand why the down('md') (where "md" breakpoint has the value 960px) converts to @media (max-width: 1280px) instead of @media (max-width: 960px). More so for the between('sm', 'md') if the desired result is @media (min-width:600px) and (max-width:960px).

[oliviertassinari]

@b5imply Maybe you can better understand with this:

import React from 'react';
import { withTheme } from '@material-ui/core/styles';

function MyComponent(props) {
  return <div>{props.theme.breakpoints.only('md')}</div>;
}

export default withTheme()(MyComponent);

outputs: @media (min-width:960px) and (max-width:1279.95px)

https://codesandbox.io/s/rym042yvm4

[jamesots]

If the documentation listed the breakpoints like this it would be a lot clearer:

• xs, extra-small: 0px to 600px
• sm, small: 600px to 960px
• md, medium: 960px to 1280px
• lg, large: 1280px to 1920px
• xl, extra-large: 1920px or larger

Also, if the documentation for theme.breakpoints.down(key), for example, could say something like this:

media query: A media query string ready to be used with JSS, which matches screen widths less than and including the screen size given by the breakpoint key.

[oliviertassinari]

@jamesots Yes, I'm 💯 on board with these changes. Do you want to update our documentation page https://material-ui.com/layout/breakpoints/ ? :)

[matthewjwhitney]

Can I take a crack at editing the docs? I'd like to start contributing to this repo considering I use this library A LOT! haha, cheers!

[oliviertassinari]

@matthewjwhitney Of course! :)