diff --git a/docs/src/pages/system/sizing/sizing.md b/docs/src/pages/system/sizing/sizing.md index ffa65921845d5a..3e1e866e3bc9d9 100644 --- a/docs/src/pages/system/sizing/sizing.md +++ b/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. - + // Equivalent to width: '25%' // Numbers are converted to pixel values. // String values are used as raw CSS. // 100% @@ -28,6 +36,15 @@ The sizing style functions support different property input types: … ``` +### 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 +… +``` + ## 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 | diff --git a/docs/src/pages/system/the-sx-prop/the-sx-prop.md b/docs/src/pages/system/the-sx-prop/the-sx-prop.md index f72b97104d9610..0573bac6e9f056 100644 --- a/docs/src/pages/system/the-sx-prop/the-sx-prop.md +++ b/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 // 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 - // equivalent to width: '50%' + // equivalent to width: '50%' // 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 diff --git a/packages/material-ui-system/src/sizing.js b/packages/material-ui-system/src/sizing.js index f957b440be3125..76312de54f22ea 100644 --- a/packages/material-ui-system/src/sizing.js +++ b/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', diff --git a/packages/material-ui-system/src/styleFunctionSx/styleFunctionSx.test.js b/packages/material-ui-system/src/styleFunctionSx/styleFunctionSx.test.js index 7f7734e151d74f..7829e91fd3bd9a 100644 --- a/packages/material-ui-system/src/styleFunctionSx/styleFunctionSx.test.js +++ b/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', },