[system] Update the type for borderRadius (#46154)

Signed-off-by: Iniubong Obonguko <[email protected]>
Co-authored-by: siriwatknp <[email protected]>

Author: codiini

packages/mui-material/src/styles/createTheme.spec.ts

@@ -249,12 +249,19 @@ const theme = createTheme();
 {
   createTheme({
     shape: {
-      // @ts-expect-error invalid borderRadius string value in theme
       borderRadius: '5px',
     },
   });
 }
 
+{
+  createTheme({
+    shape: {
+      borderRadius: 8,
+    },
+  });
+}
+
 // CSS variables for shadow DOM
 {
   createTheme({

packages/mui-system/src/borders/borders.test.js

@@ -23,4 +23,34 @@ describe('borders', () => {
       borderRadius: 0,
     });
   });
+
+  describe('theme shape as string', () => {
+    it('should work ', () => {
+      const output = borders({
+        borderRadius: 2,
+        theme: {
+          shape: {
+            borderRadius: '4px',
+          },
+        },
+      });
+      expect(output).to.deep.equal({
+        borderRadius: 'calc(2 * 4px)',
+      });
+    });
+
+    it('should work with 0', () => {
+      const output = borders({
+        borderRadius: 0,
+        theme: {
+          shape: {
+            borderRadius: '4px',
+          },
+        },
+      });
+      expect(output).to.deep.equal({
+        borderRadius: 'calc(0 * 4px)',
+      });
+    });
+  });
 });

packages/mui-system/src/createTheme/shape.d.ts

@@ -1,5 +1,5 @@
 export interface Shape {
-  borderRadius: number;
+  borderRadius: number | string;
 }
 
 export type ShapeOptions = Partial<Shape>;