theme.breakpoint.down not working correctly

[lcswillems]

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

theme.breakpoints.down('md') represents interval [0, lg+1[.

Expected Behavior 🤔

It should represent interval [0, md+1[ as mentioned in the documentation.

Steps to Reproduce 🕹

I made an elementary CodeSandBox : https://codesandbox.io/s/material-demo-w8bhk . The bar should become blue at a medium size, but it does it at a large size.

[oliviertassinari]

@lcswillems Do you confirm it's a duplicate of #13448?

I'm not sure we use the same convention, from my perspective, + 1 accounts for the next element in the breakpoint list. lg + 1 = xl, md + 1 = lg. The exclusive interval ([) translates in practice by -0.05px.

[oliviertassinari]

Do you have any idea on how we could make the documentation easier to understand, waiting for a potential change of behavior in v5?

[lcswillems]

Yes, it is a duplicate.

I'm not sure we use the same convention, from my perspective, + 1 accounts for the next element in the breakpoint list. lg + 1 = xl, md + 1 = lg. The exclusive interval ([) translates in practice by -0.05px.

Okay, I see. For me it means, "+1" in pixels...

For me, it is really confusing. In my head, "sm", "xs" are values... And if I do theme.breakpoint.down(300), it represents [0, 301[, but if I do theme.breakpoint.down('sm'), it represents [0, lg+1[ where lg is the value in pixels.

Moreover, if I have this code:

${props => props.theme.breakpoint.down(300)} {
    display: none;
}

that hides an element when screen size is lower than 300 and if I want to transform this code in its opposite, i.e. into a code that shows the element when screen size is higher than 300, I just have to replace down by up.

But for breakpoints sm, md, etc... it doesn't work. I have to replace down by up and also md by sm (or the opposite I never remember).

Do you have any idea on how we could make the documentation easier to understand, waiting for a potential change of behavior in v5?

md+1 could be replaced by lg, but for the rest, I don't see how to make the current choice natural because, for me, it doesn't make sense.

[oliviertassinari]

@lcswillems Thanks for the feedback. I agree, I think that it's simpler to think of the breakpoints as values and not ranges. It's what #13448 plans to solve. Now, because the usage of down() should be significantly less frequent than the usage of up(), we can live with it for the coming months until v5 land.

[ghost]

Same issue, I'm using Material UI 4.9.11.

[oliviertassinari]

Duplicate of #13448