From 21dd0c16f760fde2619db471ce770cc8c9dbd841 Mon Sep 17 00:00:00 2001 From: Ansh Saini Date: Sun, 27 Jun 2021 16:57:31 +0530 Subject: [PATCH 1/5] add breakpoint value support to maxWidth --- packages/material-ui-system/src/sizing.js | 18 ++++++++++++++---- 1 file changed, 14 insertions(+), 4 deletions(-) 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', From bbae25bed9f03afc3f320ec20c7d3f1814f3fd9f Mon Sep 17 00:00:00 2001 From: Ansh Saini Date: Sun, 27 Jun 2021 21:21:07 +0530 Subject: [PATCH 2/5] add test case --- .../src/styleFunctionSx/styleFunctionSx.test.js | 2 ++ 1 file changed, 2 insertions(+) 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', }, From c904bd8f7bd9972ff038eec701482a72117a98ef Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 10 Jul 2021 23:37:47 +0200 Subject: [PATCH 3/5] the dedicated pages are the source of truth --- .../pages/system/the-sx-prop/the-sx-prop.md | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) 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..72fe79b2805b76 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 @@ -118,7 +118,7 @@ Basically, if the value is between [0, 1] it is converted to percent, otherwise // 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 +148,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 +173,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 From 6e10ad0543fe423b15569d6b2d1690e05302306d Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 10 Jul 2021 23:49:57 +0200 Subject: [PATCH 4/5] improve docs --- docs/src/pages/system/sizing/sizing.md | 41 +++++++++++++------ .../pages/system/the-sx-prop/the-sx-prop.md | 5 ++- 2 files changed, 32 insertions(+), 14 deletions(-) diff --git a/docs/src/pages/system/sizing/sizing.md b/docs/src/pages/system/sizing/sizing.md index ffa65921845d5a..1fca04ce3b6ce1 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 72fe79b2805b76..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 @@ -111,10 +111,11 @@ 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' ``` From 622f4945296b776ecf603ed753b166befcfc717b Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Wed, 14 Jul 2021 17:06:08 +0200 Subject: [PATCH 5/5] Update docs/src/pages/system/sizing/sizing.md --- docs/src/pages/system/sizing/sizing.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/src/pages/system/sizing/sizing.md b/docs/src/pages/system/sizing/sizing.md index 1fca04ce3b6ce1..3e1e866e3bc9d9 100644 --- a/docs/src/pages/system/sizing/sizing.md +++ b/docs/src/pages/system/sizing/sizing.md @@ -4,7 +4,7 @@ ## Supported values -The sizing properties: `width`, `height`, `minHeight`, `maxHeight`, `minWidth` and `maxWidth` are using the following custom transform function for the value: +The sizing properties: `width`, `height`, `minHeight`, `maxHeight`, `minWidth`, and `maxWidth` are using the following custom transform function for the value: ```js function transform(value) {