[Box] Add breakpoint value support to maxWidth prop

[ansh-saini]

Adds breakpoint value support on Box maxWidth prop as suggested in this comment

• I have followed (at least) the PR section of the contributing guide.

Closes #25771

Preview: https://deploy-preview-26984--material-ui.netlify.app/system/sizing/#max-width

<Box sx={{ maxWidth: 'md' }}>…

[mui-pr-bot]

Details of bundle changes (experimental)

Generated by 🚫 dangerJS against 622f494

[oliviertassinari]

@ansh-saini could we add a test case?

[ansh-saini]

Sure, but I'm a little confused, there are two test files for Box and I'm not sure which file should I write the test case in...
packages\material-ui\src\Box\Box.test.js
packages\material-ui-system\src\Box\Box.test.js

[oliviertassinari]

Don't test this at the Box's level. Test the transformation behavior instead. https://github.com/mui-org/material-ui/blob/next/packages/material-ui-system/src/styleFunctionSx/styleFunctionSx.test.js or https://github.com/mui-org/material-ui/blob/next/packages/material-ui-system/src/style.test.js not sure which one is better.

[mnajdova]

Let's also update the documentation for the sx prop - https://github.com/mui-org/material-ui/blob/next/docs/src/pages/system/the-sx-prop/the-sx-prop.md#sizing

[oliviertassinari]

@mnajdova The sx or the https://next.material-ui.com/system/sizing/#width page? I thought we said that sx was to give an overview and the flat props to go into the details :)

[mnajdova]

@mnajdova The sx or the https://next.material-ui.com/system/sizing/#width page? I thought we said that sx was to give an overview and the flat props to go into the details :)

My opinion was that every custom transformation should be on the https://github.com/mui-org/material-ui/blob/next/docs/src/pages/system/the-sx-prop (not including the pure CSS props that does not have any transformation). As the maxWidth now has custom transformation, it's useful for it to be described in both places.

[oliviertassinari]

My opinion was that every custom transformation should be on the https://github.com/mui-org/material-ui/blob/next/docs/src/pages/system/the-sx-prop (not including the pure CSS props that do not have any transformation). As the maxWidth now has custom transformation, it's useful for it to be described in both places.

@mnajdova This would mean that we need to duplicate the information between the sx page and the detailed sections. I don't think that it can work: 1. it would make it easier to get unsynchronized information, 2. the "sx props" page is better at documenting some of the custom behaviors than in the dedication pages. This seems counterproductive. the sx prop is only about the sx prop, while the other sections cover the flattened props (which are important too).