diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md index a1067acf2f33eb..97d8e33203e9aa 100644 --- a/docs/src/pages/guides/migration-v4/migration-v4.md +++ b/docs/src/pages/guides/migration-v4/migration-v4.md @@ -346,13 +346,25 @@ const classes = makeStyles(theme => ({ - The system props have been deprecated in v5, and replaced with the `sx` prop. -```diff -- -+ -``` + ```diff + - + + + ``` [This codemod](https://github.com/mui-org/material-ui/tree/HEAD/packages/material-ui-codemod#box-sx-prop) will automatically update your code to the new syntax. +- The `borderRadius` system prop value transformation has been changed. If it receives a number, it multiplies this value with the `theme.shape.borderRadius` value. Use a string to provide an explicit value, in `px`. + + ```diff + - + + + ``` + + ```diff + - + + + ``` + ### Button - The button `color` prop is now "primary" by default, and "default" has been removed. This makes the button closer to the Material Design specification and simplifies the API. diff --git a/docs/src/pages/system/basics/Why.js b/docs/src/pages/system/basics/Why.js index 8962f5e83d819b..643504f88c6f1a 100644 --- a/docs/src/pages/system/basics/Why.js +++ b/docs/src/pages/system/basics/Why.js @@ -8,7 +8,7 @@ export default function Why() { sx={{ bgcolor: 'background.paper', boxShadow: 1, - borderRadius: 'borderRadius', + borderRadius: 1, p: 2, minWidth: 300, }} diff --git a/docs/src/pages/system/basics/Why.tsx b/docs/src/pages/system/basics/Why.tsx index 8962f5e83d819b..643504f88c6f1a 100644 --- a/docs/src/pages/system/basics/Why.tsx +++ b/docs/src/pages/system/basics/Why.tsx @@ -8,7 +8,7 @@ export default function Why() { sx={{ bgcolor: 'background.paper', boxShadow: 1, - borderRadius: 'borderRadius', + borderRadius: 1, p: 2, minWidth: 300, }} diff --git a/docs/src/pages/system/basics/basics.md b/docs/src/pages/system/basics/basics.md index 0eb8118df22a93..8c61adc17b3780 100644 --- a/docs/src/pages/system/basics/basics.md +++ b/docs/src/pages/system/basics/basics.md @@ -100,7 +100,7 @@ return ( sx={{ bgcolor: 'background.paper', boxShadow: 1, - borderRadius: 'borderRadius', + borderRadius: 1, p: 2, minWidth: 300, }} diff --git a/docs/src/pages/system/borders/BorderRadius.js b/docs/src/pages/system/borders/BorderRadius.js index 862d5f703e4901..00525fdf9896c2 100644 --- a/docs/src/pages/system/borders/BorderRadius.js +++ b/docs/src/pages/system/borders/BorderRadius.js @@ -14,8 +14,8 @@ export default function BorderRadius() { return ( - - + + ); } diff --git a/docs/src/pages/system/borders/BorderRadius.tsx b/docs/src/pages/system/borders/BorderRadius.tsx index 862d5f703e4901..00525fdf9896c2 100644 --- a/docs/src/pages/system/borders/BorderRadius.tsx +++ b/docs/src/pages/system/borders/BorderRadius.tsx @@ -14,8 +14,8 @@ export default function BorderRadius() { return ( - - + + ); } diff --git a/docs/src/pages/system/borders/borders.md b/docs/src/pages/system/borders/borders.md index 0899b766c9992f..1ed2466073e435 100644 --- a/docs/src/pages/system/borders/borders.md +++ b/docs/src/pages/system/borders/borders.md @@ -48,7 +48,7 @@ Use border utilities to add or remove an element’s borders. Choose from all bo ```jsx … -… +… // theme.shape.borderRadius * 1 … ``` diff --git a/docs/src/pages/system/properties/properties.md b/docs/src/pages/system/properties/properties.md index a1da809bbe00de..dec873660923c2 100644 --- a/docs/src/pages/system/properties/properties.md +++ b/docs/src/pages/system/properties/properties.md @@ -34,59 +34,59 @@ As the default theme spacing is 8px, this will result in the following CSS class ## Properties reference table -| Group | System style function | System key(s) | CSS property/properties | Theme mapping | -| :-------------------------------- | :-------------------- | :-------------------- | :------------------------------------------------------------------------------------------- | :---------------------------------------------------------------------------------- | -| [borders](/system/borders/) | `border` | `border` | `border` | `${value}px solid` | -| [borders](/system/borders/) | `borderBottom` | `borderBottom` | `border-bottom` | `${value}px solid` | -| [borders](/system/borders/) | `borderColor` | `borderColor` | `border-color` | [`theme.palette[value]`](/customization/default-theme/?expand-path=$.palette) | -| [borders](/system/borders/) | `borderLeft` | `borderLeft` | `border-left` | `${value}px solid` | -| [borders](/system/borders/) | `borderRadius` | `borderRadius` | `border-radius` | [`theme.shape[value]`](/customization/default-theme/?expand-path=$.shape) | -| [borders](/system/borders/) | `borderRight` | `borderRight` | `border-right` | `${value}px solid` | -| [borders](/system/borders/) | `borderTop` | `borderTop` | `border-top` | `${value}px solid` | -| [shadows](/system/shadows/) | `boxShadow` | `boxShadow` | `box-shadow` | `theme.shadows[value]` | -| [display](/system/display/) | `displayPrint` | `displayPrint` | `display` | none | -| [display](/system/display/) | `displayRaw` | `display` | `display` | none | -| [flexbox](/system/flexbox/) | `alignContent` | `alignContent` | `align-content` | none | -| [flexbox](/system/flexbox/) | `alignItems` | `alignItems` | `align-items` | none | -| [flexbox](/system/flexbox/) | `alignSelf` | `alignSelf` | `align-self` | none | -| [flexbox](/system/flexbox/) | `flex` | `flex` | `flex` | none | -| [flexbox](/system/flexbox/) | `flexDirection` | `flexDirection` | `flex-direction` | none | -| [flexbox](/system/flexbox/) | `flexGrow` | `flexGrow` | `flex-grow` | none | -| [flexbox](/system/flexbox/) | `flexShrink` | `flexShrink` | `flex-shrink` | none | -| [flexbox](/system/flexbox/) | `flexWrap` | `flexWrap` | `flex-wrap` | none | -| [flexbox](/system/flexbox/) | `justifyContent` | `justifyContent` | `justify-content` | none | -| [flexbox](/system/flexbox/) | `order` | `order` | `order` | none | -| [palette](/system/palette/) | `bgcolor` | `bgcolor` | `backgroundColor` | [`theme.palette[value]`](/customization/default-theme/?expand-path=$.palette) | -| [palette](/system/palette/) | `color` | `color` | `color` | [`theme.palette[value]`](/customization/default-theme/?expand-path=$.palette) | -| [positions](/system/positions/) | `bottom` | `bottom` | `bottom` | none | -| [positions](/system/positions/) | `left` | `left` | `left` | none | -| [positions](/system/positions/) | `position` | `position` | `position` | none | -| [positions](/system/positions/) | `right` | `right` | `right` | none | -| [positions](/system/positions/) | `top` | `top` | `top` | none | -| [positions](/system/positions/) | `zIndex` | `zIndex` | `z-index` | [`theme.zIndex[value]`](/customization/default-theme/?expand-path=$.zIndex) | -| [sizing](/system/sizing/) | `height` | `height` | `height` | none | -| [sizing](/system/sizing/) | `maxHeight` | `maxHeight` | `max-height` | none | -| [sizing](/system/sizing/) | `maxWidth` | `maxWidth` | `max-width` | none | -| [sizing](/system/sizing/) | `minHeight` | `minHeight` | `min-height` | none | -| [sizing](/system/sizing/) | `minWidth` | `minWidth` | `min-width` | none | -| [sizing](/system/sizing/) | `width` | `width` | `width` | none | -| [sizing](/system/sizing/) | `boxSizing` | `boxSizing` | `box-sizing` | none | -| [spacing](/system/spacing/) | `spacing` | `m`, `margin` | `margin` | [`theme.spacing(value)`](/customization/default-theme/?expand-path=$.spacing) | -| [spacing](/system/spacing/) | `spacing` | `mb`, `marginBottom` | `margin-bottom` | [`theme.spacing(value)`](/customization/default-theme/?expand-path=$.spacing) | -| [spacing](/system/spacing/) | `spacing` | `ml`, `marginLeft` | `margin-left` | [`theme.spacing(value)`](/customization/default-theme/?expand-path=$.spacing) | -| [spacing](/system/spacing/) | `spacing` | `mr`, `marginRight` | `margin-right` | [`theme.spacing(value)`](/customization/default-theme/?expand-path=$.spacing) | -| [spacing](/system/spacing/) | `spacing` | `mt`, `marginTop` | `margin-top` | [`theme.spacing(value)`](/customization/default-theme/?expand-path=$.spacing) | -| [spacing](/system/spacing/) | `spacing` | `mx`, `marginX` | `margin-left`, `margin-right` | [`theme.spacing(value)`](/customization/default-theme/?expand-path=$.spacing) | -| [spacing](/system/spacing/) | `spacing` | `my`, `marginY` | `margin-top`, `margin-bottom` | [`theme.spacing(value)`](/customization/default-theme/?expand-path=$.spacing) | -| [spacing](/system/spacing/) | `spacing` | `p`, `padding` | `padding` | [`theme.spacing(value)`](/customization/default-theme/?expand-path=$.spacing) | -| [spacing](/system/spacing/) | `spacing` | `pb`, `paddingBottom` | `padding-bottom` | [`theme.spacing(value)`](/customization/default-theme/?expand-path=$.spacing) | -| [spacing](/system/spacing/) | `spacing` | `pl`, `paddingLeft` | `padding-left` | [`theme.spacing(value)`](/customization/default-theme/?expand-path=$.spacing) | -| [spacing](/system/spacing/) | `spacing` | `pr`, `paddingRight` | `padding-right` | [`theme.spacing(value)`](/customization/default-theme/?expand-path=$.spacing) | -| [spacing](/system/spacing/) | `spacing` | `pt`, `paddingTop` | `padding-top` | [`theme.spacing(value)`](/customization/default-theme/?expand-path=$.spacing) | -| [spacing](/system/spacing/) | `spacing` | `px`, `paddingX` | `padding-left`, `padding-right` | [`theme.spacing(value)`](/customization/default-theme/?expand-path=$.spacing) | -| [spacing](/system/spacing/) | `spacing` | `py`, `paddingY` | `padding-top`, `padding-bottom` | [`theme.spacing(value)`](/customization/default-theme/?expand-path=$.spacing) | -| [typography](/system/typography/) | `typography` | `typography` | `font-family`, `font-weight`, `font-size`, `line-height`, `letter-spacing`, `text-transform` | [`theme.typography[value]`](/customization/default-theme/?expand-path=$.typography) | -| [typography](/system/typography/) | `fontFamily` | `fontFamily` | `font-family` | [`theme.typography[value]`](/customization/default-theme/?expand-path=$.typography) | -| [typography](/system/typography/) | `fontSize` | `fontSize` | `font-size` | [`theme.typography[value]`](/customization/default-theme/?expand-path=$.typography) | -| [typography](/system/typography/) | `fontWeight` | `fontWeight` | `font-weight` | [`theme.typography[value]`](/customization/default-theme/?expand-path=$.typography) | -| [typography](/system/typography/) | `textAlign` | `textAlign` | `text-align` | none | +| Group | System style function | System key(s) | CSS property/properties | Theme mapping | +| :-------------------------------- | :-------------------- | :-------------------- | :------------------------------------------------------------------------------------------- | :------------------------------------------------------------------------------------ | +| [borders](/system/borders/) | `border` | `border` | `border` | `${value}px solid` | +| [borders](/system/borders/) | `borderBottom` | `borderBottom` | `border-bottom` | `${value}px solid` | +| [borders](/system/borders/) | `borderColor` | `borderColor` | `border-color` | [`theme.palette[value]`](/customization/default-theme/?expand-path=$.palette) | +| [borders](/system/borders/) | `borderLeft` | `borderLeft` | `border-left` | `${value}px solid` | +| [borders](/system/borders/) | `borderRadius` | `borderRadius` | `border-radius` | [`theme.shape.borderRadius*value`](/customization/default-theme/?expand-path=$.shape) | +| [borders](/system/borders/) | `borderRight` | `borderRight` | `border-right` | `${value}px solid` | +| [borders](/system/borders/) | `borderTop` | `borderTop` | `border-top` | `${value}px solid` | +| [shadows](/system/shadows/) | `boxShadow` | `boxShadow` | `box-shadow` | `theme.shadows[value]` | +| [display](/system/display/) | `displayPrint` | `displayPrint` | `display` | none | +| [display](/system/display/) | `displayRaw` | `display` | `display` | none | +| [flexbox](/system/flexbox/) | `alignContent` | `alignContent` | `align-content` | none | +| [flexbox](/system/flexbox/) | `alignItems` | `alignItems` | `align-items` | none | +| [flexbox](/system/flexbox/) | `alignSelf` | `alignSelf` | `align-self` | none | +| [flexbox](/system/flexbox/) | `flex` | `flex` | `flex` | none | +| [flexbox](/system/flexbox/) | `flexDirection` | `flexDirection` | `flex-direction` | none | +| [flexbox](/system/flexbox/) | `flexGrow` | `flexGrow` | `flex-grow` | none | +| [flexbox](/system/flexbox/) | `flexShrink` | `flexShrink` | `flex-shrink` | none | +| [flexbox](/system/flexbox/) | `flexWrap` | `flexWrap` | `flex-wrap` | none | +| [flexbox](/system/flexbox/) | `justifyContent` | `justifyContent` | `justify-content` | none | +| [flexbox](/system/flexbox/) | `order` | `order` | `order` | none | +| [palette](/system/palette/) | `bgcolor` | `bgcolor` | `backgroundColor` | [`theme.palette[value]`](/customization/default-theme/?expand-path=$.palette) | +| [palette](/system/palette/) | `color` | `color` | `color` | [`theme.palette[value]`](/customization/default-theme/?expand-path=$.palette) | +| [positions](/system/positions/) | `bottom` | `bottom` | `bottom` | none | +| [positions](/system/positions/) | `left` | `left` | `left` | none | +| [positions](/system/positions/) | `position` | `position` | `position` | none | +| [positions](/system/positions/) | `right` | `right` | `right` | none | +| [positions](/system/positions/) | `top` | `top` | `top` | none | +| [positions](/system/positions/) | `zIndex` | `zIndex` | `z-index` | [`theme.zIndex[value]`](/customization/default-theme/?expand-path=$.zIndex) | +| [sizing](/system/sizing/) | `height` | `height` | `height` | none | +| [sizing](/system/sizing/) | `maxHeight` | `maxHeight` | `max-height` | none | +| [sizing](/system/sizing/) | `maxWidth` | `maxWidth` | `max-width` | none | +| [sizing](/system/sizing/) | `minHeight` | `minHeight` | `min-height` | none | +| [sizing](/system/sizing/) | `minWidth` | `minWidth` | `min-width` | none | +| [sizing](/system/sizing/) | `width` | `width` | `width` | none | +| [sizing](/system/sizing/) | `boxSizing` | `boxSizing` | `box-sizing` | none | +| [spacing](/system/spacing/) | `spacing` | `m`, `margin` | `margin` | [`theme.spacing(value)`](/customization/default-theme/?expand-path=$.spacing) | +| [spacing](/system/spacing/) | `spacing` | `mb`, `marginBottom` | `margin-bottom` | [`theme.spacing(value)`](/customization/default-theme/?expand-path=$.spacing) | +| [spacing](/system/spacing/) | `spacing` | `ml`, `marginLeft` | `margin-left` | [`theme.spacing(value)`](/customization/default-theme/?expand-path=$.spacing) | +| [spacing](/system/spacing/) | `spacing` | `mr`, `marginRight` | `margin-right` | [`theme.spacing(value)`](/customization/default-theme/?expand-path=$.spacing) | +| [spacing](/system/spacing/) | `spacing` | `mt`, `marginTop` | `margin-top` | [`theme.spacing(value)`](/customization/default-theme/?expand-path=$.spacing) | +| [spacing](/system/spacing/) | `spacing` | `mx`, `marginX` | `margin-left`, `margin-right` | [`theme.spacing(value)`](/customization/default-theme/?expand-path=$.spacing) | +| [spacing](/system/spacing/) | `spacing` | `my`, `marginY` | `margin-top`, `margin-bottom` | [`theme.spacing(value)`](/customization/default-theme/?expand-path=$.spacing) | +| [spacing](/system/spacing/) | `spacing` | `p`, `padding` | `padding` | [`theme.spacing(value)`](/customization/default-theme/?expand-path=$.spacing) | +| [spacing](/system/spacing/) | `spacing` | `pb`, `paddingBottom` | `padding-bottom` | [`theme.spacing(value)`](/customization/default-theme/?expand-path=$.spacing) | +| [spacing](/system/spacing/) | `spacing` | `pl`, `paddingLeft` | `padding-left` | [`theme.spacing(value)`](/customization/default-theme/?expand-path=$.spacing) | +| [spacing](/system/spacing/) | `spacing` | `pr`, `paddingRight` | `padding-right` | [`theme.spacing(value)`](/customization/default-theme/?expand-path=$.spacing) | +| [spacing](/system/spacing/) | `spacing` | `pt`, `paddingTop` | `padding-top` | [`theme.spacing(value)`](/customization/default-theme/?expand-path=$.spacing) | +| [spacing](/system/spacing/) | `spacing` | `px`, `paddingX` | `padding-left`, `padding-right` | [`theme.spacing(value)`](/customization/default-theme/?expand-path=$.spacing) | +| [spacing](/system/spacing/) | `spacing` | `py`, `paddingY` | `padding-top`, `padding-bottom` | [`theme.spacing(value)`](/customization/default-theme/?expand-path=$.spacing) | +| [typography](/system/typography/) | `typography` | `typography` | `font-family`, `font-weight`, `font-size`, `line-height`, `letter-spacing`, `text-transform` | [`theme.typography[value]`](/customization/default-theme/?expand-path=$.typography) | +| [typography](/system/typography/) | `fontFamily` | `fontFamily` | `font-family` | [`theme.typography[value]`](/customization/default-theme/?expand-path=$.typography) | +| [typography](/system/typography/) | `fontSize` | `fontSize` | `font-size` | [`theme.typography[value]`](/customization/default-theme/?expand-path=$.typography) | +| [typography](/system/typography/) | `fontWeight` | `fontWeight` | `font-weight` | [`theme.typography[value]`](/customization/default-theme/?expand-path=$.typography) | +| [typography](/system/typography/) | `textAlign` | `textAlign` | `text-align` | none | diff --git a/packages/material-ui-system/src/borders.js b/packages/material-ui-system/src/borders.js index 65c3c6f27ba098..8163750db32e7b 100644 --- a/packages/material-ui-system/src/borders.js +++ b/packages/material-ui-system/src/borders.js @@ -1,5 +1,8 @@ +import responsivePropType from './responsivePropType'; import style from './style'; import compose from './compose'; +import { createUnaryUnit, getStyleFromPropValue } from './spacing'; +import { handleBreakpoints } from './breakpoints'; function getBorder(value) { if (typeof value !== 'number') { @@ -44,10 +47,30 @@ export const borderColor = style({ themeKey: 'palette', }); -export const borderRadius = style({ - prop: 'borderRadius', - themeKey: 'shape', -}); +function resolveCssProperty(props, prop, transformer) { + // Using a hash computation over an array iteration could be faster, but with only 28 items, + // it isn’t worth the bundle size. + if (prop !== 'borderRadius') { + return null; + } + + const cssProperties = ['borderRadius']; + const styleFromPropValue = getStyleFromPropValue(cssProperties, transformer); + + const propValue = props[prop]; + return handleBreakpoints(props, propValue, styleFromPropValue); +} + +export const borderRadius = (props) => { + const transformer = createUnaryUnit(props.theme, 'shape.borderRadius', 4, 'borderRadius'); + + return props.borderRadius ? resolveCssProperty(props, 'borderRadius', transformer) : {}; +}; + +borderRadius.propTypes = + process.env.NODE_ENV !== 'production' ? { borderRadius: responsivePropType } : {}; + +borderRadius.filterProps = ['borderRadius']; const borders = compose( border, diff --git a/packages/material-ui-system/src/spacing.js b/packages/material-ui-system/src/spacing.js index 5e7da673dc1d2f..cdc88c5f76396f 100644 --- a/packages/material-ui-system/src/spacing.js +++ b/packages/material-ui-system/src/spacing.js @@ -1,5 +1,6 @@ import responsivePropType from './responsivePropType'; import { handleBreakpoints } from './breakpoints'; +import { getPath } from './style'; import merge from './merge'; import memoize from './memoize'; @@ -79,8 +80,8 @@ const paddingKeys = [ const spacingKeys = [...marginKeys, ...paddingKeys]; -export function createUnarySpacing(theme) { - const themeSpacing = theme.spacing || 8; +export function createUnaryUnit(theme, themeKey, defaultValue, propName) { + const themeSpacing = getPath(theme, themeKey) || defaultValue; if (typeof themeSpacing === 'number') { return (abs) => { @@ -91,7 +92,7 @@ export function createUnarySpacing(theme) { if (process.env.NODE_ENV !== 'production') { if (typeof abs !== 'number') { console.error( - `Material-UI: Expected spacing argument to be a number or a string, got ${abs}.`, + `Material-UI: Expected ${propName} argument to be a number or a string, got ${abs}.`, ); } } @@ -109,8 +110,8 @@ export function createUnarySpacing(theme) { if (!Number.isInteger(abs)) { console.error( [ - 'Material-UI: The `theme.spacing` array type cannot be combined with non integer values.' + - 'You should either use an integer value that can be used as index, or define the `theme.spacing` as a number.', + `Material-UI: The \`theme.${themeKey}\` array type cannot be combined with non integer values.` + + `You should either use an integer value that can be used as index, or define the \`theme.${themeKey}\` as a number.`, ].join('\n'), ); } else if (abs > themeSpacing.length - 1) { @@ -135,7 +136,7 @@ export function createUnarySpacing(theme) { if (process.env.NODE_ENV !== 'production') { console.error( [ - `Material-UI: The \`theme.spacing\` value (${themeSpacing}) is invalid.`, + `Material-UI: The \`theme.${themeKey}\` value (${themeSpacing}) is invalid.`, 'It should be a number, an array or a function.', ].join('\n'), ); @@ -144,7 +145,11 @@ export function createUnarySpacing(theme) { return () => undefined; } -function getValue(transformer, propValue) { +export function createUnarySpacing(theme) { + return createUnaryUnit(theme, 'spacing', 8, 'spacing'); +} + +export function getValue(transformer, propValue) { if (typeof propValue === 'string') { return propValue; } @@ -163,7 +168,7 @@ function getValue(transformer, propValue) { return `-${transformed}`; } -function getStyleFromPropValue(cssProperties, transformer) { +export function getStyleFromPropValue(cssProperties, transformer) { return (propValue) => cssProperties.reduce((acc, cssProperty) => { acc[cssProperty] = getValue(transformer, propValue); diff --git a/packages/material-ui-system/src/style.js b/packages/material-ui-system/src/style.js index ae3eda60b93b48..30fa2221f261bb 100644 --- a/packages/material-ui-system/src/style.js +++ b/packages/material-ui-system/src/style.js @@ -2,7 +2,7 @@ import { unstable_capitalize as capitalize } from '@material-ui/utils'; import responsivePropType from './responsivePropType'; import { handleBreakpoints } from './breakpoints'; -function getPath(obj, path) { +export function getPath(obj, path) { if (!path || typeof path !== 'string') { return null; }