[system] Make borderRadius multiply a theme's design token (#23700)

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
--<Box border="1px dashed grey" p={[2, 3, 4]} m={2}>
-+<Box sx={{ border: "1px dashed grey", p: [2, 3, 4], m: 2 }}>
-```
+  ```diff
+  -<Box border="1px dashed grey" p={[2, 3, 4]} m={2}>
+  +<Box sx={{ border: "1px dashed grey", p: [2, 3, 4], m: 2 }}>
+  ```
 
 [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
+  -<Box sx={{ borderRadius: 'borderRadius' }}>
+  +<Box sx={{ borderRadius: 1 }}>
+  ```
+
+  ```diff
+  -<Box sx={{ borderRadius: 16 }}>
+  +<Box sx={{ borderRadius: '16px' }}>
+  ```
+
 ### 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.

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,
       }}

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,
       }}

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,
   }}

docs/src/pages/system/borders/BorderRadius.js

@@ -14,8 +14,8 @@ export default function BorderRadius() {
   return (
     <Box sx={{ display: 'flex', justifyContent: 'center' }}>
       <Box sx={{ ...commonStyles, borderRadius: '50%' }} />
-      <Box sx={{ ...commonStyles, borderRadius: 'borderRadius' }} />
-      <Box sx={{ ...commonStyles, borderRadius: 16 }} />
+      <Box sx={{ ...commonStyles, borderRadius: 1 }} />
+      <Box sx={{ ...commonStyles, borderRadius: '16px' }} />
     </Box>
   );
 }

docs/src/pages/system/borders/BorderRadius.tsx

@@ -14,8 +14,8 @@ export default function BorderRadius() {
   return (
     <Box sx={{ display: 'flex', justifyContent: 'center' }}>
       <Box sx={{ ...commonStyles, borderRadius: '50%' }} />
-      <Box sx={{ ...commonStyles, borderRadius: 'borderRadius' }} />
-      <Box sx={{ ...commonStyles, borderRadius: 16 }} />
+      <Box sx={{ ...commonStyles, borderRadius: 1 }} />
+      <Box sx={{ ...commonStyles, borderRadius: '16px' }} />
     </Box>
   );
 }

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
 <Box sx={{ borderRadius: '50%' }}>…
-<Box sx={{ borderRadius: 'borderRadius' }}>…
+<Box sx={{ borderRadius: 1 }}>… // theme.shape.borderRadius * 1
 <Box sx={{ borderRadius: 16 }}>…
 ```
 

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,

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);

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;
   }