Breakpoints order on grid direction shouldn't affect the behaviour

[lunatupini]

Breakpoints order on <Grid> direction props are affecting behaviour. IMHO that's not the intended behaviour.

E.g

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

This is my current component:

<Grid
  direction={{ sm: 'row', xs: 'column' }}
  container
  justifyContent="space-between"
  columnSpacing={{ xs: 0, sm: 4 }}
  sx={{
  margin: {
    xs: theme.spacing(0, 'auto'),
    sm: theme.spacing(0, 0, 0, -4),
  },  
  }}
>

  <Grid item xs={4} sx={{ paddingTop: { xs: 7, sm: 0 } }}>
    foobar
  </Grid>
</Grid>

Although it's defined as row SM is showing as a column. If I change the order it works.
E.g: <Grid direction={{ xs: 'column', sm: 'row' }}>

Expected Behavior 🤔

SM size should be row

Your Environment 🌎

`npx @mui/envinfo`

  System:
    OS: Windows 10 10.0.19043
  Binaries:
    Node: 14.18.1 - C:\Program Files\nodejs\node.EXE
    Yarn: 3.0.2 - C:\Program Files\nodejs\yarn.CMD
    npm: 8.1.0 - C:\Program Files\nodejs\npm.CMD
  Browsers:
    Chrome: 94.0.4606.81
    Edge: Spartan (44.19041.1266.0), Chromium (94.0.992.50)
  npmPackages:
    @emotion/react: 11.4.1 => 11.4.1
    @emotion/styled: 11.3.0 => 11.3.0
    @mui/core:  5.0.0-alpha.51
    @mui/material: 5.0.4 => 5.0.4
    @mui/private-theming:  5.0.1
    @mui/styled-engine:  5.0.1
    @mui/styles: 5.0.1 => 5.0.1
    @mui/system:  5.0.4
    @mui/types:  7.0.0
    @mui/utils:  5.0.1
    @types/react: 17.0.30 => 17.0.30
    react: 17.0.2 => 17.0.2
    react-dom: 17.0.2 => 17.0.2
    typescript: 4.4.3 => 4.4.3

[mnajdova]

Thanks for the report. Looks like a bug indeed. In the style function for the sx prop we are already handling it, but looks like it is not being handled on the props of the components: Grid, Masonry etc. We should fix it.

The way it works in the styleFunctionSx is:

1. create an object with empty breakpoints in order (from xs to xl)
2. merge the other props value/styles
3. remove the unused breakpoints

This will ensure those are always in order. I am marking it as good to take, feel free to take it if you would like to. cc @hbjORbj may be interested to take a look to.

[Razaik25]

If no one else has picked it up, would love to work on this. Please let me know, thanks

[hbjORbj]

@Razaik25 Sure, you can go ahead and request a review from me. I will be happy to help.

[hbjORbj]

@Razaik25 Any status?

[Razaik25]

@Razaik25 Any status?

I have not looked into it yet, will do this weekend. But if you have starting points, that would really help.