From ce992b8294b9039f0ab7822b98ef66a7433f1c28 Mon Sep 17 00:00:00 2001
From: Diego Andai <diego@mui.com>
Date: Mon, 25 Sep 2023 14:16:13 -0300
Subject: [PATCH] [material-ui][Skeleton] Revert "Add new props to the Skeleton
 component" (#39156)

---
 .../material/components/skeleton/Facebook.js  |  15 +--
 .../material/components/skeleton/Facebook.tsx |  15 +--
 .../material/components/skeleton/Shapes.js    |  13 ---
 .../material/components/skeleton/Shapes.tsx   |  13 ---
 .../components/skeleton/Shapes.tsx.preview    |   3 -
 .../material/components/skeleton/Sizes.js     |  14 ---
 .../material/components/skeleton/Sizes.tsx    |  14 ---
 .../components/skeleton/Sizes.tsx.preview     |   4 -
 .../components/skeleton/SkeletonChildren.js   |   4 +-
 .../components/skeleton/SkeletonChildren.tsx  |   4 +-
 .../components/skeleton/SkeletonColor.js      |   3 +-
 .../components/skeleton/SkeletonColor.tsx     |   3 +-
 .../skeleton/SkeletonColor.tsx.preview        |   3 +-
 .../material/components/skeleton/Variants.js  |  16 +++
 .../material/components/skeleton/Variants.tsx |  17 +++
 .../components/skeleton/Variants.tsx.preview  |   7 ++
 .../material/components/skeleton/YouTube.js   |   2 +-
 .../material/components/skeleton/YouTube.tsx  |   2 +-
 .../components/skeleton/skeleton-pt.md        |  20 +---
 .../components/skeleton/skeleton-zh.md        |  22 ++--
 .../material/components/skeleton/skeleton.md  |  20 +---
 docs/pages/material-ui/api/skeleton.json      |  12 +-
 .../api-docs/skeleton/skeleton.json           |  17 +--
 .../mui-material/src/Skeleton/Skeleton.d.ts   |  16 ---
 .../mui-material/src/Skeleton/Skeleton.js     | 109 ++++++++----------
 .../src/Skeleton/Skeleton.test.js             |  86 --------------
 .../src/Skeleton/skeletonClasses.ts           |  11 +-
 27 files changed, 130 insertions(+), 335 deletions(-)
 delete mode 100644 docs/data/material/components/skeleton/Shapes.js
 delete mode 100644 docs/data/material/components/skeleton/Shapes.tsx
 delete mode 100644 docs/data/material/components/skeleton/Shapes.tsx.preview
 delete mode 100644 docs/data/material/components/skeleton/Sizes.js
 delete mode 100644 docs/data/material/components/skeleton/Sizes.tsx
 delete mode 100644 docs/data/material/components/skeleton/Sizes.tsx.preview
 create mode 100644 docs/data/material/components/skeleton/Variants.js
 create mode 100644 docs/data/material/components/skeleton/Variants.tsx
 create mode 100644 docs/data/material/components/skeleton/Variants.tsx.preview

diff --git a/docs/data/material/components/skeleton/Facebook.js b/docs/data/material/components/skeleton/Facebook.js
index aa5cdd934282ab..eca186ecb4465d 100644
--- a/docs/data/material/components/skeleton/Facebook.js
+++ b/docs/data/material/components/skeleton/Facebook.js
@@ -18,13 +18,7 @@ function Media(props) {
       <CardHeader
         avatar={
           loading ? (
-            <Skeleton
-              animation="wave"
-              size="box"
-              shape="circular"
-              width={40}
-              height={40}
-            />
+            <Skeleton animation="wave" variant="circular" width={40} height={40} />
           ) : (
             <Avatar
               alt="Ted talk"
@@ -60,12 +54,7 @@ function Media(props) {
         }
       />
       {loading ? (
-        <Skeleton
-          sx={{ height: 190 }}
-          animation="wave"
-          size="box"
-          shape="rectangular"
-        />
+        <Skeleton sx={{ height: 190 }} animation="wave" variant="rectangular" />
       ) : (
         <CardMedia
           component="img"
diff --git a/docs/data/material/components/skeleton/Facebook.tsx b/docs/data/material/components/skeleton/Facebook.tsx
index 7f3cddd3011192..c575410f1f8058 100644
--- a/docs/data/material/components/skeleton/Facebook.tsx
+++ b/docs/data/material/components/skeleton/Facebook.tsx
@@ -21,13 +21,7 @@ function Media(props: MediaProps) {
       <CardHeader
         avatar={
           loading ? (
-            <Skeleton
-              animation="wave"
-              size="box"
-              shape="circular"
-              width={40}
-              height={40}
-            />
+            <Skeleton animation="wave" variant="circular" width={40} height={40} />
           ) : (
             <Avatar
               alt="Ted talk"
@@ -63,12 +57,7 @@ function Media(props: MediaProps) {
         }
       />
       {loading ? (
-        <Skeleton
-          sx={{ height: 190 }}
-          animation="wave"
-          size="box"
-          shape="rectangular"
-        />
+        <Skeleton sx={{ height: 190 }} animation="wave" variant="rectangular" />
       ) : (
         <CardMedia
           component="img"
diff --git a/docs/data/material/components/skeleton/Shapes.js b/docs/data/material/components/skeleton/Shapes.js
deleted file mode 100644
index 814ed30a70e8d3..00000000000000
--- a/docs/data/material/components/skeleton/Shapes.js
+++ /dev/null
@@ -1,13 +0,0 @@
-import * as React from 'react';
-import Skeleton from '@mui/material/Skeleton';
-import Stack from '@mui/material/Stack';
-
-export default function Shapes() {
-  return (
-    <Stack spacing={1}>
-      <Skeleton shape="circular" size="box" width={40} height={40} />
-      <Skeleton shape="rectangular" size="box" width={210} height={60} />
-      <Skeleton shape="rounded" size="box" width={210} height={60} />
-    </Stack>
-  );
-}
diff --git a/docs/data/material/components/skeleton/Shapes.tsx b/docs/data/material/components/skeleton/Shapes.tsx
deleted file mode 100644
index 814ed30a70e8d3..00000000000000
--- a/docs/data/material/components/skeleton/Shapes.tsx
+++ /dev/null
@@ -1,13 +0,0 @@
-import * as React from 'react';
-import Skeleton from '@mui/material/Skeleton';
-import Stack from '@mui/material/Stack';
-
-export default function Shapes() {
-  return (
-    <Stack spacing={1}>
-      <Skeleton shape="circular" size="box" width={40} height={40} />
-      <Skeleton shape="rectangular" size="box" width={210} height={60} />
-      <Skeleton shape="rounded" size="box" width={210} height={60} />
-    </Stack>
-  );
-}
diff --git a/docs/data/material/components/skeleton/Shapes.tsx.preview b/docs/data/material/components/skeleton/Shapes.tsx.preview
deleted file mode 100644
index 6fa0fbe5152508..00000000000000
--- a/docs/data/material/components/skeleton/Shapes.tsx.preview
+++ /dev/null
@@ -1,3 +0,0 @@
-<Skeleton shape="circular" size="box" width={40} height={40} />
-<Skeleton shape="rectangular" size="box" width={210} height={60} />
-<Skeleton shape="rounded" size="box" width={210} height={60} />
\ No newline at end of file
diff --git a/docs/data/material/components/skeleton/Sizes.js b/docs/data/material/components/skeleton/Sizes.js
deleted file mode 100644
index 38fcfdc8d7439c..00000000000000
--- a/docs/data/material/components/skeleton/Sizes.js
+++ /dev/null
@@ -1,14 +0,0 @@
-import * as React from 'react';
-import Skeleton from '@mui/material/Skeleton';
-import Stack from '@mui/material/Stack';
-
-export default function Sizes() {
-  return (
-    <Stack spacing={1} width={210}>
-      {/* For size="text", adjust the height via font-size */}
-      <Skeleton size="text" sx={{ fontSize: '1rem' }} />
-      {/* For size="box", adjust height based on bounding box */}
-      <Skeleton size="box" height={40} />
-    </Stack>
-  );
-}
diff --git a/docs/data/material/components/skeleton/Sizes.tsx b/docs/data/material/components/skeleton/Sizes.tsx
deleted file mode 100644
index 38fcfdc8d7439c..00000000000000
--- a/docs/data/material/components/skeleton/Sizes.tsx
+++ /dev/null
@@ -1,14 +0,0 @@
-import * as React from 'react';
-import Skeleton from '@mui/material/Skeleton';
-import Stack from '@mui/material/Stack';
-
-export default function Sizes() {
-  return (
-    <Stack spacing={1} width={210}>
-      {/* For size="text", adjust the height via font-size */}
-      <Skeleton size="text" sx={{ fontSize: '1rem' }} />
-      {/* For size="box", adjust height based on bounding box */}
-      <Skeleton size="box" height={40} />
-    </Stack>
-  );
-}
diff --git a/docs/data/material/components/skeleton/Sizes.tsx.preview b/docs/data/material/components/skeleton/Sizes.tsx.preview
deleted file mode 100644
index bd2e9812c47488..00000000000000
--- a/docs/data/material/components/skeleton/Sizes.tsx.preview
+++ /dev/null
@@ -1,4 +0,0 @@
-{/* For size="text", adjust the height via font-size */}
-<Skeleton size="text" sx={{ fontSize: '1rem' }} />
-{/* For size="box", adjust height based on bounding box */}
-<Skeleton size="box" height={40} />
\ No newline at end of file
diff --git a/docs/data/material/components/skeleton/SkeletonChildren.js b/docs/data/material/components/skeleton/SkeletonChildren.js
index 4238e3ebd076ce..dea54ea2feb889 100644
--- a/docs/data/material/components/skeleton/SkeletonChildren.js
+++ b/docs/data/material/components/skeleton/SkeletonChildren.js
@@ -19,7 +19,7 @@ function SkeletonChildrenDemo(props) {
       <Box sx={{ display: 'flex', alignItems: 'center' }}>
         <Box sx={{ margin: 1 }}>
           {loading ? (
-            <Skeleton size="box" shape="circular">
+            <Skeleton variant="circular">
               <Avatar />
             </Skeleton>
           ) : (
@@ -37,7 +37,7 @@ function SkeletonChildrenDemo(props) {
         </Box>
       </Box>
       {loading ? (
-        <Skeleton size="box" shape="rectangular" width="100%">
+        <Skeleton variant="rectangular" width="100%">
           <div style={{ paddingTop: '57%' }} />
         </Skeleton>
       ) : (
diff --git a/docs/data/material/components/skeleton/SkeletonChildren.tsx b/docs/data/material/components/skeleton/SkeletonChildren.tsx
index cc560617a7862b..bf27ebb7fad364 100644
--- a/docs/data/material/components/skeleton/SkeletonChildren.tsx
+++ b/docs/data/material/components/skeleton/SkeletonChildren.tsx
@@ -18,7 +18,7 @@ function SkeletonChildrenDemo(props: { loading?: boolean }) {
       <Box sx={{ display: 'flex', alignItems: 'center' }}>
         <Box sx={{ margin: 1 }}>
           {loading ? (
-            <Skeleton size="box" shape="circular">
+            <Skeleton variant="circular">
               <Avatar />
             </Skeleton>
           ) : (
@@ -36,7 +36,7 @@ function SkeletonChildrenDemo(props: { loading?: boolean }) {
         </Box>
       </Box>
       {loading ? (
-        <Skeleton size="box" shape="rectangular" width="100%">
+        <Skeleton variant="rectangular" width="100%">
           <div style={{ paddingTop: '57%' }} />
         </Skeleton>
       ) : (
diff --git a/docs/data/material/components/skeleton/SkeletonColor.js b/docs/data/material/components/skeleton/SkeletonColor.js
index 9342f876680276..ddad47d6302af8 100644
--- a/docs/data/material/components/skeleton/SkeletonColor.js
+++ b/docs/data/material/components/skeleton/SkeletonColor.js
@@ -15,8 +15,7 @@ export default function SkeletonColor() {
     >
       <Skeleton
         sx={{ bgcolor: 'grey.900' }}
-        shape="rectangular"
-        size="box"
+        variant="rectangular"
         width={210}
         height={118}
       />
diff --git a/docs/data/material/components/skeleton/SkeletonColor.tsx b/docs/data/material/components/skeleton/SkeletonColor.tsx
index 9342f876680276..ddad47d6302af8 100644
--- a/docs/data/material/components/skeleton/SkeletonColor.tsx
+++ b/docs/data/material/components/skeleton/SkeletonColor.tsx
@@ -15,8 +15,7 @@ export default function SkeletonColor() {
     >
       <Skeleton
         sx={{ bgcolor: 'grey.900' }}
-        shape="rectangular"
-        size="box"
+        variant="rectangular"
         width={210}
         height={118}
       />
diff --git a/docs/data/material/components/skeleton/SkeletonColor.tsx.preview b/docs/data/material/components/skeleton/SkeletonColor.tsx.preview
index 1c90e20e617b1c..47ff5795e47d3c 100644
--- a/docs/data/material/components/skeleton/SkeletonColor.tsx.preview
+++ b/docs/data/material/components/skeleton/SkeletonColor.tsx.preview
@@ -1,7 +1,6 @@
 <Skeleton
   sx={{ bgcolor: 'grey.900' }}
-  shape="rectangular"
-  size="box"
+  variant="rectangular"
   width={210}
   height={118}
 />
\ No newline at end of file
diff --git a/docs/data/material/components/skeleton/Variants.js b/docs/data/material/components/skeleton/Variants.js
new file mode 100644
index 00000000000000..c6a075daad4feb
--- /dev/null
+++ b/docs/data/material/components/skeleton/Variants.js
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import Skeleton from '@mui/material/Skeleton';
+import Stack from '@mui/material/Stack';
+
+export default function Variants() {
+  return (
+    <Stack spacing={1}>
+      {/* For variant="text", adjust the height via font-size */}
+      <Skeleton variant="text" sx={{ fontSize: '1rem' }} />
+      {/* For other variants, adjust the size with `width` and `height` */}
+      <Skeleton variant="circular" width={40} height={40} />
+      <Skeleton variant="rectangular" width={210} height={60} />
+      <Skeleton variant="rounded" width={210} height={60} />
+    </Stack>
+  );
+}
diff --git a/docs/data/material/components/skeleton/Variants.tsx b/docs/data/material/components/skeleton/Variants.tsx
new file mode 100644
index 00000000000000..cb1bb0905d617d
--- /dev/null
+++ b/docs/data/material/components/skeleton/Variants.tsx
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import Skeleton from '@mui/material/Skeleton';
+import Stack from '@mui/material/Stack';
+
+export default function Variants() {
+  return (
+    <Stack spacing={1}>
+      {/* For variant="text", adjust the height via font-size */}
+      <Skeleton variant="text" sx={{ fontSize: '1rem' }} />
+
+      {/* For other variants, adjust the size with `width` and `height` */}
+      <Skeleton variant="circular" width={40} height={40} />
+      <Skeleton variant="rectangular" width={210} height={60} />
+      <Skeleton variant="rounded" width={210} height={60} />
+    </Stack>
+  );
+}
diff --git a/docs/data/material/components/skeleton/Variants.tsx.preview b/docs/data/material/components/skeleton/Variants.tsx.preview
new file mode 100644
index 00000000000000..8b1bb76eaa17b2
--- /dev/null
+++ b/docs/data/material/components/skeleton/Variants.tsx.preview
@@ -0,0 +1,7 @@
+{/* For variant="text", adjust the height via font-size */}
+<Skeleton variant="text" sx={{ fontSize: '1rem' }} />
+
+{/* For other variants, adjust the size with `width` and `height` */}
+<Skeleton variant="circular" width={40} height={40} />
+<Skeleton variant="rectangular" width={210} height={60} />
+<Skeleton variant="rounded" width={210} height={60} />
\ No newline at end of file
diff --git a/docs/data/material/components/skeleton/YouTube.js b/docs/data/material/components/skeleton/YouTube.js
index aa9a82aba7fc53..ad14816a766901 100644
--- a/docs/data/material/components/skeleton/YouTube.js
+++ b/docs/data/material/components/skeleton/YouTube.js
@@ -43,7 +43,7 @@ function Media(props) {
               src={item.src}
             />
           ) : (
-            <Skeleton shape="rectangular" size="box" width={210} height={118} />
+            <Skeleton variant="rectangular" width={210} height={118} />
           )}
 
           {item ? (
diff --git a/docs/data/material/components/skeleton/YouTube.tsx b/docs/data/material/components/skeleton/YouTube.tsx
index fb3800dac24385..b0ac646c1853fd 100644
--- a/docs/data/material/components/skeleton/YouTube.tsx
+++ b/docs/data/material/components/skeleton/YouTube.tsx
@@ -46,7 +46,7 @@ function Media(props: MediaProps) {
               src={item.src}
             />
           ) : (
-            <Skeleton shape="rectangular" size="box" width={210} height={118} />
+            <Skeleton variant="rectangular" width={210} height={118} />
           )}
           {item ? (
             <Box sx={{ pr: 2 }}>
diff --git a/docs/data/material/components/skeleton/skeleton-pt.md b/docs/data/material/components/skeleton/skeleton-pt.md
index dbd07db167c28d..535dcec9ac44a4 100644
--- a/docs/data/material/components/skeleton/skeleton-pt.md
+++ b/docs/data/material/components/skeleton/skeleton-pt.md
@@ -22,27 +22,19 @@ O componente é projetado para ser usado **diretamente em seus componentes**. Po
   item ? (
     <img style={{ width: 210, height: 118 }} alt={item.title} src={item.src} />
   ) : (
-    <Skeleton shape="rect" width={210} height={118} />
+    <Skeleton variant="rect" width={210} height={118} />
   );
 }
 ```
 
-## Formas
+## Variantes
 
-O componente suporta 3 formas:
+The component supports 4 shape variants:
 
-- `circular`, `rectangular`, e `rounded`: Venha com um raio de borda diferente para permitir que você assuma o controle da forma.
+- `text` (default): represents a single line of text (you can adjust the height via font size).
+- `circular`, `rectangular`, and `rounded`: come with different border radius to let you take control of the size.
 
-{{"demo": "Shapes.js"}}
-
-## Tamanhos
-
-Você pode usar os seguintes valores para especificar o tamanho do componente:
-
-- `text` (default): representa uma única linha de texto (você pode ajustar a altura por tamanho da fonte).
-- `box`: Escala o componente para o tamanho da caixa delimitadora.
-
-{{"demo": "Sizes.js"}}
+{{"demo": "Variants.js"}}
 
 ## Animações
 
diff --git a/docs/data/material/components/skeleton/skeleton-zh.md b/docs/data/material/components/skeleton/skeleton-zh.md
index 30e94804e49756..4654b4dc0cfdc6 100644
--- a/docs/data/material/components/skeleton/skeleton-zh.md
+++ b/docs/data/material/components/skeleton/skeleton-zh.md
@@ -29,27 +29,19 @@ githubLabel: 'component: skeleton'
       src={item.src}
     />
   ) : (
-    <Skeleton shape="rectangular" width={210} height={118} />
+    <Skeleton variant="rectangular" width={210} height={118} />
   );
 }
 ```
 
-## 形状
+## 变体
 
-组件支持 3 种形状:
+The component supports 4 shape variants:
 
-- `circular`, `rectangular`, 和 `rounded`: 带有不同的边界半径，让您控制形状
+- `text` (default): represents a single line of text (you can adjust the height via font size).
+- `circular`, `rectangular`, and `rounded`: come with different border radius to let you take control of the size.
 
-{{"demo": "Shapes.js"}}
-
-## 尺寸
-
-您可以使用以下值来指定组件的大小:
-
-- `text` （默认值）：表示一行文本（您可以通过字体大小调整高度）。
-- `box`: 将组件扩展到边界框的大小。
-
-{{"demo": "Sizes.js"}}
+{{"demo": "Variants.js"}}
 
 ## 动画
 
@@ -81,7 +73,7 @@ githubLabel: 'component: skeleton'
 
 ```jsx
 loading ? (
-  <Skeleton shape="circular">
+  <Skeleton variant="circular">
     <Avatar />
   </Skeleton>
 ) : (
diff --git a/docs/data/material/components/skeleton/skeleton.md b/docs/data/material/components/skeleton/skeleton.md
index 81bd839c55039b..da7cacad060fb6 100644
--- a/docs/data/material/components/skeleton/skeleton.md
+++ b/docs/data/material/components/skeleton/skeleton.md
@@ -30,27 +30,19 @@ For instance:
       src={item.src}
     />
   ) : (
-    <Skeleton shape="rectangular" size="box" width={210} height={118} />
+    <Skeleton variant="rectangular" width={210} height={118} />
   );
 }
 ```
 
-## Shapes
+## Variants
 
-The component supports 3 shapes:
-
-- `circular`, `rectangular`, and `rounded`: come with different border radius to let you take control of the shape.
-
-{{"demo": "Shapes.js"}}
-
-## Sizes
-
-You can use the following values to specify the size of the component:
+The component supports 4 shape variants:
 
 - `text` (default): represents a single line of text (you can adjust the height via font size).
-- `box`: scale the component to the size of the bounding box.
+- `circular`, `rectangular`, and `rounded`: come with different border radius to let you take control of the size.
 
-{{"demo": "Sizes.js"}}
+{{"demo": "Variants.js"}}
 
 ## Animations
 
@@ -84,7 +76,7 @@ infer its width and height from them.
 
 ```jsx
 loading ? (
-  <Skeleton shape="circular" size="box">
+  <Skeleton variant="circular">
     <Avatar />
   </Skeleton>
 ) : (
diff --git a/docs/pages/material-ui/api/skeleton.json b/docs/pages/material-ui/api/skeleton.json
index ff6da79c3fdf12..0204b0370994ae 100644
--- a/docs/pages/material-ui/api/skeleton.json
+++ b/docs/pages/material-ui/api/skeleton.json
@@ -11,13 +11,6 @@
     "classes": { "type": { "name": "object" }, "additionalInfo": { "cssApi": true } },
     "component": { "type": { "name": "elementType" } },
     "height": { "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" } },
-    "shape": {
-      "type": {
-        "name": "enum",
-        "description": "'circular'<br>&#124;&nbsp;'rectangular'<br>&#124;&nbsp;'rounded'"
-      }
-    },
-    "size": { "type": { "name": "enum", "description": "'text'<br>&#124;&nbsp;'box'" } },
     "sx": {
       "type": {
         "name": "union",
@@ -30,9 +23,7 @@
         "name": "union",
         "description": "'circular'<br>&#124;&nbsp;'rectangular'<br>&#124;&nbsp;'rounded'<br>&#124;&nbsp;'text'<br>&#124;&nbsp;string"
       },
-      "default": "'text'",
-      "deprecated": true,
-      "deprecationInfo": "Use <code>shape</code> prop to set the shape of the skeleton and <code>size</code> prop to set the scale adaptation."
+      "default": "'text'"
     },
     "width": { "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" } }
   },
@@ -45,7 +36,6 @@
     "classes": [
       "root",
       "text",
-      "box",
       "rectangular",
       "rounded",
       "circular",
diff --git a/docs/translations/api-docs/skeleton/skeleton.json b/docs/translations/api-docs/skeleton/skeleton.json
index f143b853e7f211..7eeb123f3b37f6 100644
--- a/docs/translations/api-docs/skeleton/skeleton.json
+++ b/docs/translations/api-docs/skeleton/skeleton.json
@@ -12,10 +12,6 @@
     "height": {
       "description": "Height of the skeleton. Useful when you don&#39;t want to adapt the skeleton to a text element but for instance a card."
     },
-    "shape": { "description": "The shape of the skeleton." },
-    "size": {
-      "description": "Determines whether the skeleton should scale to the element&#39;s text or bounding box."
-    },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     },
@@ -29,27 +25,22 @@
     "text": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>size=\"text\"</code> or <code>variant=\"text\"</code>"
-    },
-    "box": {
-      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
-      "nodeName": "the root element",
-      "conditions": "<code>size=\"box\"</code>"
+      "conditions": "<code>variant=\"text\"</code>"
     },
     "rectangular": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>shape=\"rectangular\"</code> or <code>variant=\"rectangular\"</code>"
+      "conditions": "<code>variant=\"rectangular\"</code>"
     },
     "rounded": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>shape=\"rounded\"</code> or <code>variant=\"rounded\"</code>"
+      "conditions": "<code>variant=\"rounded\"</code>"
     },
     "circular": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>shape=\"circular\"</code> or <code>variant=\"circular\"</code>"
+      "conditions": "<code>variant=\"circular\"</code>"
     },
     "pulse": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
diff --git a/packages/mui-material/src/Skeleton/Skeleton.d.ts b/packages/mui-material/src/Skeleton/Skeleton.d.ts
index 090feef3106453..1d4e9eda13c324 100644
--- a/packages/mui-material/src/Skeleton/Skeleton.d.ts
+++ b/packages/mui-material/src/Skeleton/Skeleton.d.ts
@@ -7,10 +7,6 @@ import { SkeletonClasses } from './skeletonClasses';
 
 export interface SkeletonPropsVariantOverrides {}
 
-export interface SkeletonPropsSizeOverrides {}
-
-export interface SkeletonPropsShapeOverrides {}
-
 export interface SkeletonOwnProps {
   /**
    * The animation.
@@ -31,17 +27,6 @@ export interface SkeletonOwnProps {
    * Useful when you don't want to adapt the skeleton to a text element but for instance a card.
    */
   height?: number | string;
-  /**
-   * The shape of the skeleton.
-   */
-  shape?: OverridableStringUnion<
-    'rectangular' | 'rounded' | 'circular',
-    SkeletonPropsShapeOverrides
-  >;
-  /**
-   * Determines whether the skeleton should scale to the element's text or bounding box.
-   */
-  size?: OverridableStringUnion<'text' | 'box', SkeletonPropsSizeOverrides>;
   /**
    * The system prop that allows defining system overrides as well as additional CSS styles.
    */
@@ -49,7 +34,6 @@ export interface SkeletonOwnProps {
   /**
    * The type of content that will be rendered.
    * @default 'text'
-   * @deprecated Use `shape` prop to set the shape of the skeleton and `size` prop to set the scale adaptation.
    */
   variant?: OverridableStringUnion<
     'text' | 'rectangular' | 'rounded' | 'circular',
diff --git a/packages/mui-material/src/Skeleton/Skeleton.js b/packages/mui-material/src/Skeleton/Skeleton.js
index 8c81103f752862..3fc8bf1a052627 100644
--- a/packages/mui-material/src/Skeleton/Skeleton.js
+++ b/packages/mui-material/src/Skeleton/Skeleton.js
@@ -4,19 +4,18 @@ import clsx from 'clsx';
 import PropTypes from 'prop-types';
 import { keyframes, css } from '@mui/system';
 import { unstable_composeClasses as composeClasses } from '@mui/base/composeClasses';
-import { alpha } from '../styles';
+import { alpha, unstable_getUnit as getUnit, unstable_toUnitless as toUnitless } from '../styles';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import { getSkeletonUtilityClass } from './skeletonClasses';
 
 const useUtilityClasses = (ownerState) => {
-  const { classes, shape, size, animation, hasChildren, width, height } = ownerState;
+  const { classes, variant, animation, hasChildren, width, height } = ownerState;
 
   const slots = {
     root: [
       'root',
-      size,
-      shape,
+      variant,
       animation,
       hasChildren && 'withChildren',
       hasChildren && !width && 'fitContent',
@@ -61,10 +60,10 @@ const SkeletonRoot = styled('span', {
   slot: 'Root',
   overridesResolver: (props, styles) => {
     const { ownerState } = props;
+
     return [
       styles.root,
-      ownerState.shape && styles[ownerState.shape],
-      ownerState.size && styles[ownerState.size],
+      styles[ownerState.variant],
       ownerState.animation !== false && styles[ownerState.animation],
       ownerState.hasChildren && styles.withChildren,
       ownerState.hasChildren && !ownerState.width && styles.fitContent,
@@ -72,44 +71,51 @@ const SkeletonRoot = styled('span', {
     ];
   },
 })(
-  ({ theme, ownerState }) => ({
-    display: 'block',
-    // Create a "on paper" color with sufficient contrast retaining the color
-    backgroundColor: theme.vars
-      ? theme.vars.palette.Skeleton.bg
-      : alpha(theme.palette.text.primary, theme.palette.mode === 'light' ? 0.11 : 0.13),
-    height: '1.2em',
-    borderRadius: (theme.vars || theme).shape.borderRadius,
-    ...(ownerState.size === 'text' && {
-      marginTop: 0,
-      marginBottom: 0,
-      height: 'auto',
-      transformOrigin: '0 55%',
-      transform: 'scale(1, 0.60)',
-      '&:empty:before': {
-        content: '"\\00a0"',
-      },
-    }),
-    ...(ownerState.shape === 'circular' && {
-      borderRadius: '50%',
-    }),
-    ...(ownerState.shape === 'rectangular' && {
-      borderRadius: 0,
-    }),
-    ...(ownerState.hasChildren && {
-      '& > *': {
-        visibility: 'hidden',
-      },
-    }),
-    ...(ownerState.hasChildren &&
-      !ownerState.width && {
-        maxWidth: 'fit-content',
-      }),
-    ...(ownerState.hasChildren &&
-      !ownerState.height && {
+  ({ theme, ownerState }) => {
+    const radiusUnit = getUnit(theme.shape.borderRadius) || 'px';
+    const radiusValue = toUnitless(theme.shape.borderRadius);
+
+    return {
+      display: 'block',
+      // Create a "on paper" color with sufficient contrast retaining the color
+      backgroundColor: theme.vars
+        ? theme.vars.palette.Skeleton.bg
+        : alpha(theme.palette.text.primary, theme.palette.mode === 'light' ? 0.11 : 0.13),
+      height: '1.2em',
+      ...(ownerState.variant === 'text' && {
+        marginTop: 0,
+        marginBottom: 0,
         height: 'auto',
+        transformOrigin: '0 55%',
+        transform: 'scale(1, 0.60)',
+        borderRadius: `${radiusValue}${radiusUnit}/${
+          Math.round((radiusValue / 0.6) * 10) / 10
+        }${radiusUnit}`,
+        '&:empty:before': {
+          content: '"\\00a0"',
+        },
+      }),
+      ...(ownerState.variant === 'circular' && {
+        borderRadius: '50%',
       }),
-  }),
+      ...(ownerState.variant === 'rounded' && {
+        borderRadius: (theme.vars || theme).shape.borderRadius,
+      }),
+      ...(ownerState.hasChildren && {
+        '& > *': {
+          visibility: 'hidden',
+        },
+      }),
+      ...(ownerState.hasChildren &&
+        !ownerState.width && {
+          maxWidth: 'fit-content',
+        }),
+      ...(ownerState.hasChildren &&
+        !ownerState.height && {
+          height: 'auto',
+        }),
+    };
+  },
   ({ ownerState }) =>
     ownerState.animation === 'pulse' &&
     css`
@@ -150,25 +156,17 @@ const Skeleton = React.forwardRef(function Skeleton(inProps, ref) {
     className,
     component = 'span',
     height,
-    // TODO v6: add defaults
-    shape,
-    size,
     style,
     variant = 'text',
     width,
     ...other
   } = props;
 
-  const sizeValue = size ?? (variant === 'text' ? variant : undefined);
-  const shapeValue =
-    shape ?? (['circular', 'rectangular', 'rounded'].includes(variant) ? variant : undefined);
-
   const ownerState = {
     ...props,
     animation,
     component,
-    size: sizeValue,
-    shape: shapeValue,
+    variant,
     hasChildren: Boolean(other.children),
   };
 
@@ -223,14 +221,6 @@ Skeleton.propTypes /* remove-proptypes */ = {
    * Useful when you don't want to adapt the skeleton to a text element but for instance a card.
    */
   height: PropTypes.oneOfType([PropTypes.number, PropTypes.string]),
-  /**
-   * The shape of the skeleton.
-   */
-  shape: PropTypes.oneOf(['circular', 'rectangular', 'rounded']),
-  /**
-   * Determines whether the skeleton should scale to the element's text or bounding box.
-   */
-  size: PropTypes.oneOf(['text', 'box']),
   /**
    * @ignore
    */
@@ -246,7 +236,6 @@ Skeleton.propTypes /* remove-proptypes */ = {
   /**
    * The type of content that will be rendered.
    * @default 'text'
-   * @deprecated Use `shape` prop to set the shape of the skeleton and `size` prop to set the scale adaptation.
    */
   variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
     PropTypes.oneOf(['circular', 'rectangular', 'rounded', 'text']),
diff --git a/packages/mui-material/src/Skeleton/Skeleton.test.js b/packages/mui-material/src/Skeleton/Skeleton.test.js
index f217b8c8bb7abd..41bd8d67eec034 100644
--- a/packages/mui-material/src/Skeleton/Skeleton.test.js
+++ b/packages/mui-material/src/Skeleton/Skeleton.test.js
@@ -67,90 +67,4 @@ describe('<Skeleton />', () => {
 
     expect(containerWithHeight.firstChild).not.to.have.class(classes.heightAuto);
   });
-
-  describe('Variant Prop', () => {
-    it('should get `text` class when no variant is specified', () => {
-      const { container } = render(
-        <Skeleton>
-          <span />
-        </Skeleton>,
-      );
-
-      expect(container.firstChild).to.have.class(classes.text);
-    });
-
-    it('should get `circular` when variant is set to `circular`', () => {
-      const { container } = render(
-        <Skeleton variant="circular">
-          <span />
-        </Skeleton>,
-      );
-
-      expect(container.firstChild).to.have.class(classes.circular);
-    });
-
-    it('should get `rounded` when variant is set to `rounded`', () => {
-      const { container } = render(
-        <Skeleton variant="rounded">
-          <span />
-        </Skeleton>,
-      );
-
-      expect(container.firstChild).to.have.class(classes.rounded);
-    });
-
-    it('should get `rectangular` when variant is set to `rectangular`', () => {
-      const { container } = render(
-        <Skeleton variant="rectangular">
-          <span />
-        </Skeleton>,
-      );
-
-      expect(container.firstChild).to.have.class(classes.rectangular);
-    });
-  });
-
-  describe('Size & Shape Prop', () => {
-    it('should get `box` class when size is set to `box`', () => {
-      const { container } = render(
-        <Skeleton size="box">
-          <span />
-        </Skeleton>,
-      );
-
-      expect(container.firstChild).to.have.class(classes.box);
-    });
-
-    it('should set `size` prop over `variant` prop', () => {
-      const { container } = render(
-        <Skeleton size="box" variant="text">
-          <span />
-        </Skeleton>,
-      );
-
-      expect(container.firstChild).to.have.class(classes.box);
-      expect(container.firstChild).not.to.have.class(classes.text);
-    });
-
-    it('should get `circular` when shape is set to `circular`', () => {
-      const { container } = render(
-        <Skeleton shape="circular">
-          <span />
-        </Skeleton>,
-      );
-
-      expect(container.firstChild).to.have.class(classes.circular);
-    });
-
-    it('should set `shape` prop over `variant` prop', () => {
-      const { container } = render(
-        <Skeleton variant="rounded" shape="rectangular">
-          <span />
-        </Skeleton>,
-      );
-
-      expect(container.firstChild).to.have.class(classes.rectangular);
-      expect(container.firstChild).not.to.have.class(classes.rounded);
-    });
-  });
 });
diff --git a/packages/mui-material/src/Skeleton/skeletonClasses.ts b/packages/mui-material/src/Skeleton/skeletonClasses.ts
index b9ad6bacc8ce4f..b57813f9d176b3 100644
--- a/packages/mui-material/src/Skeleton/skeletonClasses.ts
+++ b/packages/mui-material/src/Skeleton/skeletonClasses.ts
@@ -4,15 +4,13 @@ import generateUtilityClass from '../generateUtilityClass';
 export interface SkeletonClasses {
   /** Styles applied to the root element. */
   root: string;
-  /** Styles applied to the root element if `size="text"` or `variant="text"`. */
+  /** Styles applied to the root element if `variant="text"`. */
   text: string;
-  /** Styles applied to the root element if `size="box"`. */
-  box: string;
-  /** Styles applied to the root element if `shape="rectangular"` or `variant="rectangular"`. */
+  /** Styles applied to the root element if `variant="rectangular"`. */
   rectangular: string;
-  /** Styles applied to the root element if `shape="rounded"` or `variant="rounded"`. */
+  /** Styles applied to the root element if `variant="rounded"`. */
   rounded: string;
-  /** Styles applied to the root element if `shape="circular"` or `variant="circular"`. */
+  /** Styles applied to the root element if `variant="circular"`. */
   circular: string;
   /** Styles applied to the root element if `animation="pulse"`. */
   pulse: string;
@@ -35,7 +33,6 @@ export function getSkeletonUtilityClass(slot: string): string {
 const skeletonClasses: SkeletonClasses = generateUtilityClasses('MuiSkeleton', [
   'root',
   'text',
-  'box',
   'rectangular',
   'rounded',
   'circular',