[Box] Add breakpoint value support to maxWidth prop (#26984)

Author: ansh-saini

docs/src/pages/system/sizing/sizing.md

@@ -4,13 +4,21 @@
 
 ## Supported values
 
-The sizing style functions support different property input types:
+The sizing properties: `width`, `height`, `minHeight`, `maxHeight`, `minWidth`, and `maxWidth` are using the following custom transform function for the value:
+
+```js
+function transform(value) {
+  return value <= 1 ? `${value * 100}%` : value;
+}
+```
+
+If the value is between [0, 1], it's converted to percent.
+Otherwise, it is directly set on the CSS property.
 
 {{"demo": "pages/system/sizing/Values.js", "defaultCodeOpen": false}}
 
 ```jsx
-// Numbers in [0,1] are multiplied by 100 and converted to % values.
-<Box sx={{ width: 1/4 }}>
+<Box sx={{ width: 1/4 }}> // Equivalent to width: '25%'
 <Box sx={{ width: 300 }}> // Numbers are converted to pixel values.
 <Box sx={{ width: '75%' }}> // String values are used as raw CSS.
 <Box sx={{ width: 1 }}> // 100%
@@ -28,6 +36,15 @@ The sizing style functions support different property input types:
 <Box sx={{ width: 'auto' }}>…
 ```
 
+### Max-width
+
+The max-width property allows setting a constraint on your breakpoints.
+In this example, the value resolves to [`theme.breakpoints.values.md`](/customization/default-theme/?expand-path=$.breakpoints.values).
+
+```jsx
+<Box sx={{ maxWidth: 'md' }}>…
+```
+
 ## Height
 
 {{"demo": "pages/system/sizing/Height.js", "defaultCodeOpen": false}}
@@ -45,12 +62,12 @@ The sizing style functions support different property input types:
 import { sizing } from '@material-ui/system';
 ```
 
-| Import name | Prop        | CSS property | Theme key |
-| :---------- | :---------- | :----------- | :-------- |
-| `width`     | `width`     | `width`      | none      |
-| `maxWidth`  | `maxWidth`  | `max-width`  | none      |
-| `minWidth`  | `minWidth`  | `min-width`  | none      |
-| `height`    | `height`    | `height`     | none      |
-| `maxHeight` | `maxHeight` | `max-height` | none      |
-| `minHeight` | `minHeight` | `min-height` | none      |
-| `boxSizing` | `boxSizing` | `box-sizing` | none      |
+| Import name | Prop        | CSS property | Theme key                                                                                    |
+| :---------- | :---------- | :----------- | :------------------------------------------------------------------------------------------- |
+| `width`     | `width`     | `width`      | none                                                                                         |
+| `maxWidth`  | `maxWidth`  | `max-width`  | [`theme.breakpoints.values`](/customization/default-theme/?expand-path=$.breakpoints.values) |
+| `minWidth`  | `minWidth`  | `min-width`  | none                                                                                         |
+| `height`    | `height`    | `height`     | none                                                                                         |
+| `maxHeight` | `maxHeight` | `max-height` | none                                                                                         |
+| `minHeight` | `minHeight` | `min-height` | none                                                                                         |
+| `boxSizing` | `boxSizing` | `box-sizing` | none                                                                                         |

docs/src/pages/system/the-sx-prop/the-sx-prop.md

@@ -38,7 +38,7 @@ The `borderRadius` properties multiples the value it receives by the `theme.shap
 // equivalent to borderRadius: theme => 2 * theme.shape.borderRadius
 ```
 
-_Head to the [borders page](/system/borders/) for more examples._
+_Head to the [borders page](/system/borders/) for more details._
 
 ### Display
 
@@ -48,7 +48,7 @@ The `displayPrint` property allows you to specify CSS `display` value, that will
 <Box sx={{ displayPrint: 'none' }} /> // equivalent to '@media print': { display: 'none' }
 ```
 
-_Head to the [display page](/system/display/) for more examples._
+_Head to the [display page](/system/display/) for more details._
 
 ### Grid
 
@@ -59,7 +59,7 @@ The grid CSS properties `gap`, `rowGap` and `columnGap` multiply the values they
 // equivalent to gap: theme => theme.spacing(2)
 ```
 
-_Head to the [grid page](/system/grid/) for more examples._
+_Head to the [grid page](/system/grid/) for more details._
 
 ### Palette
 
@@ -77,7 +77,7 @@ The `backgroundColor` property is also available trough its alias `bgcolor`.
 // equivalent to backgroundColor: theme => theme.palette.primary.main
 ```
 
-_Head to the [palette page](/system/palette/) for more examples._
+_Head to the [palette page](/system/palette/) for more details._
 
 ### Positions
 
@@ -88,7 +88,7 @@ The `zIndex` property maps its value to the `theme.zIndex` value.
 // equivalent to backgroundColor: theme => theme.zIndex.tooltip
 ```
 
-_Head to the [positions page](/system/positions/) for more examples._
+_Head to the [positions page](/system/positions/) for more details._
 
 ### Shadows
 
@@ -99,7 +99,7 @@ The `boxShadow` property maps its value to the `theme.shadows` value.
 // equivalent to boxShadow: theme => theme.shadows[1]
 ```
 
-_Head to the [shadows page](/system/shadows/) for more examples._
+_Head to the [shadows page](/system/shadows/) for more details._
 
 ### Sizing
 
@@ -111,14 +111,15 @@ function transform(value) {
 }
 ```
 
-Basically, if the value is between [0, 1] it is converted to percent, otherwise it is directly set on the CSS property.
+If the value is between [0, 1], it's converted to percent.
+Otherwise, it is directly set on the CSS property.
 
 ```jsx
-<Box sx={{ width: 0.5 }} /> // equivalent to width: '50%'
+<Box sx={{ width: 1/2 }} /> // equivalent to width: '50%'
 <Box sx={{ width: 20 }} /> // equivalent to width: '20px'
 ```
 
-_Head to the [sizing page](/system/sizing/) for more examples._
+_Head to the [sizing page](/system/sizing/) for more details._
 
 ### Spacing
 
@@ -148,7 +149,7 @@ The following aliases are availabel for the spacing properties:
 | `px` | `padding-left`, `padding-right` |
 | `py` | `padding-top`, `padding-bottom` |
 
-_Head to the [spacing page](/system/spacing/) for more examples._
+_Head to the [spacing page](/system/spacing/) for more details._
 
 ### Typography
 
@@ -173,7 +174,7 @@ There is additional `typography` prop available, which sets all values defined i
 // equivalent to { ...theme.typography.body1 }
 ```
 
-_Head to the [typography page](/system/typography/) for more examples._
+_Head to the [typography page](/system/typography/) for more details._
 
 ## Responsive values
 

packages/material-ui-system/src/sizing.js

@@ -1,5 +1,6 @@
 import style from './style';
 import compose from './compose';
+import { handleBreakpoints } from './breakpoints';
 
 function transform(value) {
   return value <= 1 ? `${value * 100}%` : value;
@@ -10,10 +11,19 @@ export const width = style({
   transform,
 });
 
-export const maxWidth = style({
-  prop: 'maxWidth',
-  transform,
-});
+export const maxWidth = (props) => {
+  if (props.maxWidth) {
+    const styleFromPropValue = (propValue) => {
+      const breakpoint = props.theme.breakpoints.values[propValue];
+      return {
+        maxWidth: breakpoint || transform(propValue),
+      };
+    };
+    return handleBreakpoints(props, props.maxWidth, styleFromPropValue);
+  }
+  return null;
+};
+maxWidth.filterProps = ['maxWidth'];
 
 export const minWidth = style({
   prop: 'minWidth',

packages/material-ui-system/src/styleFunctionSx/styleFunctionSx.test.js

@@ -63,6 +63,7 @@ describe('styleFunctionSx', () => {
           fontFamily: 'default',
           fontWeight: 'light',
           fontSize: 'fontSize',
+          maxWidth: 'sm',
           displayPrint: 'block',
           border: [1, 2, 3, 4, 5],
         },
@@ -76,6 +77,7 @@ describe('styleFunctionSx', () => {
         fontFamily: '"Roboto", "Helvetica", "Arial", sans-serif',
         fontWeight: 300,
         fontSize: 14,
+        maxWidth: 600,
         '@media print': {
           display: 'block',
         },