From a6ffbc8a409889a2b8a7fce461e0092605b3f71f Mon Sep 17 00:00:00 2001
From: gitstart <bot@gitstart.com>
Date: Tue, 15 Aug 2023 10:36:22 +0000
Subject: [PATCH 1/9] refactor: deprecate variant prop in favor of shape and
 size props

Co-authored-by: seunexplicit <48022904+seunexplicit@users.noreply.github.com>
---
 docs/pages/material-ui/api/skeleton.json      | 12 +++++++-
 .../api-docs/skeleton/skeleton.json           | 17 ++++++++---
 .../mui-material/src/Skeleton/Skeleton.d.ts   | 17 +++++++++++
 .../mui-material/src/Skeleton/Skeleton.js     | 29 +++++++++++++++----
 .../src/Skeleton/skeletonClasses.ts           | 11 ++++---
 5 files changed, 72 insertions(+), 14 deletions(-)

diff --git a/docs/pages/material-ui/api/skeleton.json b/docs/pages/material-ui/api/skeleton.json
index 0204b0370994ae..ff6da79c3fdf12 100644
--- a/docs/pages/material-ui/api/skeleton.json
+++ b/docs/pages/material-ui/api/skeleton.json
@@ -11,6 +11,13 @@
     "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",
@@ -23,7 +30,9 @@
         "name": "union",
         "description": "'circular'<br>&#124;&nbsp;'rectangular'<br>&#124;&nbsp;'rounded'<br>&#124;&nbsp;'text'<br>&#124;&nbsp;string"
       },
-      "default": "'text'"
+      "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."
     },
     "width": { "type": { "name": "union", "description": "number<br>&#124;&nbsp;string" } }
   },
@@ -36,6 +45,7 @@
     "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 7eeb123f3b37f6..6dabc17052676b 100644
--- a/docs/translations/api-docs/skeleton/skeleton.json
+++ b/docs/translations/api-docs/skeleton/skeleton.json
@@ -12,6 +12,10 @@
     "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 the scaling behavior of the skeleton, whether to adapt to the size of the text or the size of the containing element."
+    },
     "sx": {
       "description": "The system prop that allows defining system overrides as well as additional CSS styles."
     },
@@ -25,22 +29,27 @@
     "text": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"text\"</code>"
+      "conditions": "<code>size=\"text\"</code>"
+    },
+    "box": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>size=\"text\"</code>"
     },
     "rectangular": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"rectangular\"</code>"
+      "conditions": "<code>shape=\"rectangular\"</code>"
     },
     "rounded": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"rounded\"</code>"
+      "conditions": "<code>shape=\"rounded\"</code>"
     },
     "circular": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>variant=\"circular\"</code>"
+      "conditions": "<code>shape=\"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 d9d23fa1b4ef71..c4200b55bb8570 100644
--- a/packages/mui-material/src/Skeleton/Skeleton.d.ts
+++ b/packages/mui-material/src/Skeleton/Skeleton.d.ts
@@ -7,6 +7,10 @@ import { SkeletonClasses } from './skeletonClasses';
 
 export interface SkeletonPropsVariantOverrides {}
 
+export interface SkeletonPropsSizeOverrides {}
+
+export interface SkeletonPropsShapeOverrides {}
+
 export interface SkeletonTypeMap<
   AdditionalProps = {},
   DefaultComponent extends React.ElementType = 'span',
@@ -31,6 +35,18 @@ export interface SkeletonTypeMap<
      * 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 the scaling behavior of the skeleton, whether to adapt to the size of the text or
+     * the size of the containing element.
+     */
+    size?: OverridableStringUnion<'text' | 'box', SkeletonPropsSizeOverrides>;
     /**
      * The system prop that allows defining system overrides as well as additional CSS styles.
      */
@@ -38,6 +54,7 @@ export interface SkeletonTypeMap<
     /**
      * 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 a71aa43641aca7..95c81d1c68e298 100644
--- a/packages/mui-material/src/Skeleton/Skeleton.js
+++ b/packages/mui-material/src/Skeleton/Skeleton.js
@@ -10,11 +10,13 @@ import useThemeProps from '../styles/useThemeProps';
 import { getSkeletonUtilityClass } from './skeletonClasses';
 
 const useUtilityClasses = (ownerState) => {
-  const { classes, variant, animation, hasChildren, width, height } = ownerState;
+  const { classes, variant, shape, size, animation, hasChildren, width, height } = ownerState;
 
   const slots = {
     root: [
       'root',
+      size,
+      shape,
       variant,
       animation,
       hasChildren && 'withChildren',
@@ -60,9 +62,10 @@ const SkeletonRoot = styled('span', {
   slot: 'Root',
   overridesResolver: (props, styles) => {
     const { ownerState } = props;
-
     return [
       styles.root,
+      styles[ownerState.shape],
+      styles[ownerState.size],
       styles[ownerState.variant],
       ownerState.animation !== false && styles[ownerState.animation],
       ownerState.hasChildren && styles.withChildren,
@@ -74,6 +77,8 @@ const SkeletonRoot = styled('span', {
   ({ theme, ownerState }) => {
     const radiusUnit = getUnit(theme.shape.borderRadius) || 'px';
     const radiusValue = toUnitless(theme.shape.borderRadius);
+    const shape = ownerState.shape || ownerState.variant;
+    const size = ownerState.size || ownerState.variant;
 
     return {
       display: 'block',
@@ -82,7 +87,7 @@ const SkeletonRoot = styled('span', {
         ? theme.vars.palette.Skeleton.bg
         : alpha(theme.palette.text.primary, theme.palette.mode === 'light' ? 0.11 : 0.13),
       height: '1.2em',
-      ...(ownerState.variant === 'text' && {
+      ...(size === 'text' && {
         marginTop: 0,
         marginBottom: 0,
         height: 'auto',
@@ -95,10 +100,10 @@ const SkeletonRoot = styled('span', {
           content: '"\\00a0"',
         },
       }),
-      ...(ownerState.variant === 'circular' && {
+      ...(shape === 'circular' && {
         borderRadius: '50%',
       }),
-      ...(ownerState.variant === 'rounded' && {
+      ...(shape === 'rounded' && {
         borderRadius: (theme.vars || theme).shape.borderRadius,
       }),
       ...(ownerState.hasChildren && {
@@ -156,6 +161,8 @@ const Skeleton = React.forwardRef(function Skeleton(inProps, ref) {
     className,
     component = 'span',
     height,
+    shape,
+    size,
     style,
     variant = 'text',
     width,
@@ -166,6 +173,8 @@ const Skeleton = React.forwardRef(function Skeleton(inProps, ref) {
     ...props,
     animation,
     component,
+    size,
+    shape,
     variant,
     hasChildren: Boolean(other.children),
   };
@@ -221,6 +230,15 @@ 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 the scaling behavior of the skeleton, whether to adapt to the size of the text or
+   * the size of the containing element.
+   */
+  size: PropTypes.oneOf(['text', 'box']),
   /**
    * @ignore
    */
@@ -236,6 +254,7 @@ 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/skeletonClasses.ts b/packages/mui-material/src/Skeleton/skeletonClasses.ts
index b57813f9d176b3..081f913a4ff768 100644
--- a/packages/mui-material/src/Skeleton/skeletonClasses.ts
+++ b/packages/mui-material/src/Skeleton/skeletonClasses.ts
@@ -4,13 +4,15 @@ import generateUtilityClass from '../generateUtilityClass';
 export interface SkeletonClasses {
   /** Styles applied to the root element. */
   root: string;
-  /** Styles applied to the root element if `variant="text"`. */
+  /** Styles applied to the root element if `size="text"`. */
   text: string;
-  /** Styles applied to the root element if `variant="rectangular"`. */
+  /** Styles applied to the root element if `size="text"`. */
+  box: string;
+  /** Styles applied to the root element if `shape="rectangular"`. */
   rectangular: string;
-  /** Styles applied to the root element if `variant="rounded"`. */
+  /** Styles applied to the root element if `shape="rounded"`. */
   rounded: string;
-  /** Styles applied to the root element if `variant="circular"`. */
+  /** Styles applied to the root element if `shape="circular"`. */
   circular: string;
   /** Styles applied to the root element if `animation="pulse"`. */
   pulse: string;
@@ -33,6 +35,7 @@ export function getSkeletonUtilityClass(slot: string): string {
 const skeletonClasses: SkeletonClasses = generateUtilityClasses('MuiSkeleton', [
   'root',
   'text',
+  'box',
   'rectangular',
   'rounded',
   'circular',

From e783ada0f706640245d62270df53fc951b3b4440 Mon Sep 17 00:00:00 2001
From: gitstart <bot@gitstart.com>
Date: Wed, 23 Aug 2023 14:28:32 +0000
Subject: [PATCH 2/9] test: update tests

Co-authored-by: seunexplicit <48022904+seunexplicit@users.noreply.github.com>
---
 .../api-docs/skeleton/skeleton.json           | 12 +--
 .../mui-material/src/Skeleton/Skeleton.d.ts   |  3 +-
 .../mui-material/src/Skeleton/Skeleton.js     | 25 +++---
 .../src/Skeleton/Skeleton.test.js             | 86 +++++++++++++++++++
 .../src/Skeleton/skeletonClasses.ts           | 10 +--
 5 files changed, 110 insertions(+), 26 deletions(-)

diff --git a/docs/translations/api-docs/skeleton/skeleton.json b/docs/translations/api-docs/skeleton/skeleton.json
index 6dabc17052676b..f143b853e7f211 100644
--- a/docs/translations/api-docs/skeleton/skeleton.json
+++ b/docs/translations/api-docs/skeleton/skeleton.json
@@ -14,7 +14,7 @@
     },
     "shape": { "description": "The shape of the skeleton." },
     "size": {
-      "description": "Determines the scaling behavior of the skeleton, whether to adapt to the size of the text or the size of the containing element."
+      "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 +29,27 @@
     "text": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>size=\"text\"</code>"
+      "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=\"text\"</code>"
+      "conditions": "<code>size=\"box\"</code>"
     },
     "rectangular": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>shape=\"rectangular\"</code>"
+      "conditions": "<code>shape=\"rectangular\"</code> or <code>variant=\"rectangular\"</code>"
     },
     "rounded": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>shape=\"rounded\"</code>"
+      "conditions": "<code>shape=\"rounded\"</code> or <code>variant=\"rounded\"</code>"
     },
     "circular": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
-      "conditions": "<code>shape=\"circular\"</code>"
+      "conditions": "<code>shape=\"circular\"</code> or <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 c4200b55bb8570..38159da89765a0 100644
--- a/packages/mui-material/src/Skeleton/Skeleton.d.ts
+++ b/packages/mui-material/src/Skeleton/Skeleton.d.ts
@@ -43,8 +43,7 @@ export interface SkeletonTypeMap<
       SkeletonPropsShapeOverrides
     >;
     /**
-     * Determines the scaling behavior of the skeleton, whether to adapt to the size of the text or
-     * the size of the containing element.
+     * Determines whether the skeleton should scale to the element's text or bounding box.
      */
     size?: OverridableStringUnion<'text' | 'box', SkeletonPropsSizeOverrides>;
     /**
diff --git a/packages/mui-material/src/Skeleton/Skeleton.js b/packages/mui-material/src/Skeleton/Skeleton.js
index 55f766adecdf0e..3ed7cb6ee642ad 100644
--- a/packages/mui-material/src/Skeleton/Skeleton.js
+++ b/packages/mui-material/src/Skeleton/Skeleton.js
@@ -10,14 +10,13 @@ import useThemeProps from '../styles/useThemeProps';
 import { getSkeletonUtilityClass } from './skeletonClasses';
 
 const useUtilityClasses = (ownerState) => {
-  const { classes, variant, shape, size, animation, hasChildren, width, height } = ownerState;
+  const { classes, shape, size, animation, hasChildren, width, height } = ownerState;
 
   const slots = {
     root: [
       'root',
       size,
       shape,
-      variant,
       animation,
       hasChildren && 'withChildren',
       hasChildren && !width && 'fitContent',
@@ -66,7 +65,6 @@ const SkeletonRoot = styled('span', {
       styles.root,
       styles[ownerState.shape],
       styles[ownerState.size],
-      styles[ownerState.variant],
       ownerState.animation !== false && styles[ownerState.animation],
       ownerState.hasChildren && styles.withChildren,
       ownerState.hasChildren && !ownerState.width && styles.fitContent,
@@ -77,8 +75,6 @@ const SkeletonRoot = styled('span', {
   ({ theme, ownerState }) => {
     const radiusUnit = getUnit(theme.shape.borderRadius) || 'px';
     const radiusValue = toUnitless(theme.shape.borderRadius);
-    const shape = ownerState.shape || ownerState.variant;
-    const size = ownerState.size || ownerState.variant;
 
     return {
       display: 'block',
@@ -87,7 +83,7 @@ const SkeletonRoot = styled('span', {
         ? theme.vars.palette.Skeleton.bg
         : alpha(theme.palette.text.primary, theme.palette.mode === 'light' ? 0.11 : 0.13),
       height: '1.2em',
-      ...(size === 'text' && {
+      ...(ownerState.size === 'text' && {
         marginTop: 0,
         marginBottom: 0,
         height: 'auto',
@@ -100,10 +96,10 @@ const SkeletonRoot = styled('span', {
           content: '"\\00a0"',
         },
       }),
-      ...(shape === 'circular' && {
+      ...(ownerState.shape === 'circular' && {
         borderRadius: '50%',
       }),
-      ...(shape === 'rounded' && {
+      ...(ownerState.shape === 'rounded' && {
         borderRadius: (theme.vars || theme).shape.borderRadius,
       }),
       ...(ownerState.hasChildren && {
@@ -161,6 +157,7 @@ const Skeleton = React.forwardRef(function Skeleton(inProps, ref) {
     className,
     component = 'span',
     height,
+    // TODO v6: add defaults
     shape,
     size,
     style,
@@ -169,13 +166,16 @@ const Skeleton = React.forwardRef(function Skeleton(inProps, ref) {
     ...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,
-    shape,
-    variant,
+    size: sizeValue,
+    shape: shapeValue,
     hasChildren: Boolean(other.children),
   };
 
@@ -235,8 +235,7 @@ Skeleton.propTypes /* remove-proptypes */ = {
    */
   shape: PropTypes.oneOf(['circular', 'rectangular', 'rounded']),
   /**
-   * Determines the scaling behavior of the skeleton, whether to adapt to the size of the text or
-   * the size of the containing element.
+   * Determines whether the skeleton should scale to the element's text or bounding box.
    */
   size: PropTypes.oneOf(['text', 'box']),
   /**
diff --git a/packages/mui-material/src/Skeleton/Skeleton.test.js b/packages/mui-material/src/Skeleton/Skeleton.test.js
index 8ec3201c3c7ef1..57ad7c26f62df5 100644
--- a/packages/mui-material/src/Skeleton/Skeleton.test.js
+++ b/packages/mui-material/src/Skeleton/Skeleton.test.js
@@ -67,4 +67,90 @@ 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 081f913a4ff768..b9ad6bacc8ce4f 100644
--- a/packages/mui-material/src/Skeleton/skeletonClasses.ts
+++ b/packages/mui-material/src/Skeleton/skeletonClasses.ts
@@ -4,15 +4,15 @@ import generateUtilityClass from '../generateUtilityClass';
 export interface SkeletonClasses {
   /** Styles applied to the root element. */
   root: string;
-  /** Styles applied to the root element if `size="text"`. */
+  /** Styles applied to the root element if `size="text"` or `variant="text"`. */
   text: string;
-  /** Styles applied to the root element if `size="text"`. */
+  /** Styles applied to the root element if `size="box"`. */
   box: string;
-  /** Styles applied to the root element if `shape="rectangular"`. */
+  /** Styles applied to the root element if `shape="rectangular"` or `variant="rectangular"`. */
   rectangular: string;
-  /** Styles applied to the root element if `shape="rounded"`. */
+  /** Styles applied to the root element if `shape="rounded"` or `variant="rounded"`. */
   rounded: string;
-  /** Styles applied to the root element if `shape="circular"`. */
+  /** Styles applied to the root element if `shape="circular"` or `variant="circular"`. */
   circular: string;
   /** Styles applied to the root element if `animation="pulse"`. */
   pulse: string;

From 1a6b10086b57a0d674b3cff0e38f47c899ba82b8 Mon Sep 17 00:00:00 2001
From: gitstart <bot@gitstart.com>
Date: Wed, 6 Sep 2023 09:55:52 +0000
Subject: [PATCH 3/9] fix: refactor code

Co-authored-by: seunexplicit <48022904+seunexplicit@users.noreply.github.com>
---
 .../material/components/skeleton/Facebook.js  |  7 +-
 .../material/components/skeleton/Facebook.tsx |  7 +-
 .../components/skeleton/Shapes.tsx.preview    |  2 +-
 .../material/components/skeleton/Sizes.js     |  2 +-
 .../material/components/skeleton/Sizes.tsx    |  2 +-
 .../components/skeleton/Sizes.tsx.preview     |  2 +
 .../skeleton/SkeletonColor.tsx.preview        |  2 +-
 .../mui-material/src/Skeleton/Skeleton.js     | 84 +++++++++----------
 8 files changed, 56 insertions(+), 52 deletions(-)

diff --git a/docs/data/material/components/skeleton/Facebook.js b/docs/data/material/components/skeleton/Facebook.js
index da648263d9bd32..aa5cdd934282ab 100644
--- a/docs/data/material/components/skeleton/Facebook.js
+++ b/docs/data/material/components/skeleton/Facebook.js
@@ -60,7 +60,12 @@ function Media(props) {
         }
       />
       {loading ? (
-        <Skeleton sx={{ height: 190 }} animation="wave" size="box" shape="rectangular" />
+        <Skeleton
+          sx={{ height: 190 }}
+          animation="wave"
+          size="box"
+          shape="rectangular"
+        />
       ) : (
         <CardMedia
           component="img"
diff --git a/docs/data/material/components/skeleton/Facebook.tsx b/docs/data/material/components/skeleton/Facebook.tsx
index 131fe65863979e..7f3cddd3011192 100644
--- a/docs/data/material/components/skeleton/Facebook.tsx
+++ b/docs/data/material/components/skeleton/Facebook.tsx
@@ -63,7 +63,12 @@ function Media(props: MediaProps) {
         }
       />
       {loading ? (
-        <Skeleton sx={{ height: 190 }} animation="wave" size="box" shape="rectangular" />
+        <Skeleton
+          sx={{ height: 190 }}
+          animation="wave"
+          size="box"
+          shape="rectangular"
+        />
       ) : (
         <CardMedia
           component="img"
diff --git a/docs/data/material/components/skeleton/Shapes.tsx.preview b/docs/data/material/components/skeleton/Shapes.tsx.preview
index 59a207d146c0be..01c59104ee17e0 100644
--- a/docs/data/material/components/skeleton/Shapes.tsx.preview
+++ b/docs/data/material/components/skeleton/Shapes.tsx.preview
@@ -1,3 +1,3 @@
-<Skeleton shape="circular" width={40} height={40} />
+<Skeleton shape="circular" size="box" width={40} height={40} />
 <Skeleton shape="rectangular" width={210} height={60} />
 <Skeleton shape="rounded" 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
index c916b9d27b4696..38fcfdc8d7439c 100644
--- a/docs/data/material/components/skeleton/Sizes.js
+++ b/docs/data/material/components/skeleton/Sizes.js
@@ -7,7 +7,7 @@ export default function Sizes() {
     <Stack spacing={1} width={210}>
       {/* For size="text", adjust the height via font-size */}
       <Skeleton size="text" sx={{ fontSize: '1rem' }} />
-      {/* For other size="box" adjust height base on bounding box */}
+      {/* 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
index c916b9d27b4696..38fcfdc8d7439c 100644
--- a/docs/data/material/components/skeleton/Sizes.tsx
+++ b/docs/data/material/components/skeleton/Sizes.tsx
@@ -7,7 +7,7 @@ export default function Sizes() {
     <Stack spacing={1} width={210}>
       {/* For size="text", adjust the height via font-size */}
       <Skeleton size="text" sx={{ fontSize: '1rem' }} />
-      {/* For other size="box" adjust height base on bounding box */}
+      {/* 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
index 46175169b69531..bd2e9812c47488 100644
--- a/docs/data/material/components/skeleton/Sizes.tsx.preview
+++ b/docs/data/material/components/skeleton/Sizes.tsx.preview
@@ -1,2 +1,4 @@
+{/* 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/SkeletonColor.tsx.preview b/docs/data/material/components/skeleton/SkeletonColor.tsx.preview
index 47ff5795e47d3c..e0113f1c4f0997 100644
--- a/docs/data/material/components/skeleton/SkeletonColor.tsx.preview
+++ b/docs/data/material/components/skeleton/SkeletonColor.tsx.preview
@@ -1,6 +1,6 @@
 <Skeleton
   sx={{ bgcolor: 'grey.900' }}
-  variant="rectangular"
+  shape="rectangular"
   width={210}
   height={118}
 />
\ No newline at end of file
diff --git a/packages/mui-material/src/Skeleton/Skeleton.js b/packages/mui-material/src/Skeleton/Skeleton.js
index 3ed7cb6ee642ad..a9a30cf03561a9 100644
--- a/packages/mui-material/src/Skeleton/Skeleton.js
+++ b/packages/mui-material/src/Skeleton/Skeleton.js
@@ -4,7 +4,7 @@ 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, unstable_getUnit as getUnit, unstable_toUnitless as toUnitless } from '../styles';
+import { alpha } from '../styles';
 import styled from '../styles/styled';
 import useThemeProps from '../styles/useThemeProps';
 import { getSkeletonUtilityClass } from './skeletonClasses';
@@ -63,8 +63,8 @@ const SkeletonRoot = styled('span', {
     const { ownerState } = props;
     return [
       styles.root,
-      styles[ownerState.shape],
-      styles[ownerState.size],
+      ownerState.shape && styles[ownerState.shape],
+      ownerState.size && styles[ownerState.size],
       ownerState.animation !== false && styles[ownerState.animation],
       ownerState.hasChildren && styles.withChildren,
       ownerState.hasChildren && !ownerState.width && styles.fitContent,
@@ -72,51 +72,43 @@ const SkeletonRoot = styled('span', {
     ];
   },
 })(
-  ({ 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.size === '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.shape === 'circular' && {
-        borderRadius: '50%',
+  ({ 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',
+    ...(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 === 'rounded' && {
+      borderRadius: (theme.vars || theme).shape.borderRadius,
+    }),
+    ...(ownerState.hasChildren && {
+      '& > *': {
+        visibility: 'hidden',
+      },
+    }),
+    ...(ownerState.hasChildren &&
+      !ownerState.width && {
+        maxWidth: 'fit-content',
       }),
-      ...(ownerState.shape === 'rounded' && {
-        borderRadius: (theme.vars || theme).shape.borderRadius,
-      }),
-      ...(ownerState.hasChildren && {
-        '& > *': {
-          visibility: 'hidden',
-        },
+    ...(ownerState.hasChildren &&
+      !ownerState.height && {
+        height: 'auto',
       }),
-      ...(ownerState.hasChildren &&
-        !ownerState.width && {
-          maxWidth: 'fit-content',
-        }),
-      ...(ownerState.hasChildren &&
-        !ownerState.height && {
-          height: 'auto',
-        }),
-    };
-  },
+  }),
   ({ ownerState }) =>
     ownerState.animation === 'pulse' &&
     css`

From 13075d0bd72f67a849533a56b73d7e99c61b71e6 Mon Sep 17 00:00:00 2001
From: gitstart <bot@gitstart.com>
Date: Wed, 6 Sep 2023 16:08:01 +0000
Subject: [PATCH 4/9] update proptypes

Co-authored-by: seunexplicit <48022904+seunexplicit@users.noreply.github.com>
---
 packages/mui-material/src/Skeleton/Skeleton.d.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/mui-material/src/Skeleton/Skeleton.d.ts b/packages/mui-material/src/Skeleton/Skeleton.d.ts
index 7e9881ef0a9f93..090feef3106453 100644
--- a/packages/mui-material/src/Skeleton/Skeleton.d.ts
+++ b/packages/mui-material/src/Skeleton/Skeleton.d.ts
@@ -49,6 +49,7 @@ 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',

From b0aff6cad0c19c925722ace12dc226c6e8e310e4 Mon Sep 17 00:00:00 2001
From: gitstart <bot@gitstart.com>
Date: Fri, 22 Sep 2023 05:49:55 +0000
Subject: [PATCH 5/9] update shape styling

Co-authored-by: seunexplicit <48022904+seunexplicit@users.noreply.github.com>
---
 packages/mui-material/src/Skeleton/Skeleton.js | 5 +++--
 1 file changed, 3 insertions(+), 2 deletions(-)

diff --git a/packages/mui-material/src/Skeleton/Skeleton.js b/packages/mui-material/src/Skeleton/Skeleton.js
index a9a30cf03561a9..677997d2a8bae7 100644
--- a/packages/mui-material/src/Skeleton/Skeleton.js
+++ b/packages/mui-material/src/Skeleton/Skeleton.js
@@ -79,6 +79,7 @@ const SkeletonRoot = styled('span', {
       ? 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,
@@ -92,8 +93,8 @@ const SkeletonRoot = styled('span', {
     ...(ownerState.shape === 'circular' && {
       borderRadius: '50%',
     }),
-    ...(ownerState.shape === 'rounded' && {
-      borderRadius: (theme.vars || theme).shape.borderRadius,
+    ...(ownerState.shape === 'rectangular' && {
+      borderRadius: 0
     }),
     ...(ownerState.hasChildren && {
       '& > *': {

From e60445425d1db0c47e077592af9b7227cf52b439 Mon Sep 17 00:00:00 2001
From: gitstart <bot@gitstart.com>
Date: Fri, 22 Sep 2023 06:21:17 +0000
Subject: [PATCH 6/9] fix failing prettier check

Co-authored-by: seunexplicit <48022904+seunexplicit@users.noreply.github.com>
---
 packages/mui-material/src/Skeleton/Skeleton.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/mui-material/src/Skeleton/Skeleton.js b/packages/mui-material/src/Skeleton/Skeleton.js
index 677997d2a8bae7..8c81103f752862 100644
--- a/packages/mui-material/src/Skeleton/Skeleton.js
+++ b/packages/mui-material/src/Skeleton/Skeleton.js
@@ -94,7 +94,7 @@ const SkeletonRoot = styled('span', {
       borderRadius: '50%',
     }),
     ...(ownerState.shape === 'rectangular' && {
-      borderRadius: 0
+      borderRadius: 0,
     }),
     ...(ownerState.hasChildren && {
       '& > *': {

From dc635f77bc018ba7c62645a2e0b55080811a0e4f Mon Sep 17 00:00:00 2001
From: Diego Andai <diego@mui.com>
Date: Fri, 22 Sep 2023 11:52:51 -0300
Subject: [PATCH 7/9] Add missing box size to examples

Signed-off-by: Diego Andai <diego@mui.com>
---
 docs/data/material/components/skeleton/Shapes.js          | 4 ++--
 docs/data/material/components/skeleton/Shapes.tsx         | 4 ++--
 docs/data/material/components/skeleton/Shapes.tsx.preview | 4 ++--
 3 files changed, 6 insertions(+), 6 deletions(-)

diff --git a/docs/data/material/components/skeleton/Shapes.js b/docs/data/material/components/skeleton/Shapes.js
index 6d38c78a473080..814ed30a70e8d3 100644
--- a/docs/data/material/components/skeleton/Shapes.js
+++ b/docs/data/material/components/skeleton/Shapes.js
@@ -6,8 +6,8 @@ export default function Shapes() {
   return (
     <Stack spacing={1}>
       <Skeleton shape="circular" size="box" width={40} height={40} />
-      <Skeleton shape="rectangular" width={210} height={60} />
-      <Skeleton shape="rounded" width={210} height={60} />
+      <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
index 6d38c78a473080..ea5f2c4ad5ca0e 100644
--- a/docs/data/material/components/skeleton/Shapes.tsx
+++ b/docs/data/material/components/skeleton/Shapes.tsx
@@ -6,8 +6,8 @@ export default function Shapes() {
   return (
     <Stack spacing={1}>
       <Skeleton shape="circular" size="box" width={40} height={40} />
-      <Skeleton shape="rectangular" width={210} height={60} />
-      <Skeleton shape="rounded" width={210} height={60} />
+      <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
index 01c59104ee17e0..6fa0fbe5152508 100644
--- a/docs/data/material/components/skeleton/Shapes.tsx.preview
+++ b/docs/data/material/components/skeleton/Shapes.tsx.preview
@@ -1,3 +1,3 @@
 <Skeleton shape="circular" size="box" width={40} height={40} />
-<Skeleton shape="rectangular" width={210} height={60} />
-<Skeleton shape="rounded" width={210} height={60} />
\ No newline at end of file
+<Skeleton shape="rectangular" size="box" width={210} height={60} />
+<Skeleton shape="rounded" size="box" width={210} height={60} />
\ No newline at end of file

From 7ac015d344e5684c4b36dd54edb2836ad81c0c07 Mon Sep 17 00:00:00 2001
From: Diego Andai <diego@mui.com>
Date: Fri, 22 Sep 2023 14:05:42 -0300
Subject: [PATCH 8/9] Add missing space to shapes example

Signed-off-by: Diego Andai <diego@mui.com>
---
 docs/data/material/components/skeleton/Shapes.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/docs/data/material/components/skeleton/Shapes.tsx b/docs/data/material/components/skeleton/Shapes.tsx
index ea5f2c4ad5ca0e..814ed30a70e8d3 100644
--- a/docs/data/material/components/skeleton/Shapes.tsx
+++ b/docs/data/material/components/skeleton/Shapes.tsx
@@ -7,7 +7,7 @@ export default function Shapes() {
     <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} />
+      <Skeleton shape="rounded" size="box" width={210} height={60} />
     </Stack>
   );
 }

From 602ef1026bacc8ac046638298b8f6ad7ceff45f2 Mon Sep 17 00:00:00 2001
From: Diego Andai <diego@mui.com>
Date: Fri, 22 Sep 2023 14:22:22 -0300
Subject: [PATCH 9/9] Add missing size box to examples

Signed-off-by: Diego Andai <diego@mui.com>
---
 docs/data/material/components/skeleton/SkeletonColor.js       | 1 +
 docs/data/material/components/skeleton/SkeletonColor.tsx      | 1 +
 .../material/components/skeleton/SkeletonColor.tsx.preview    | 1 +
 docs/data/material/components/skeleton/YouTube.js             | 2 +-
 docs/data/material/components/skeleton/YouTube.tsx            | 2 +-
 docs/data/material/components/skeleton/skeleton.md            | 4 ++--
 6 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/docs/data/material/components/skeleton/SkeletonColor.js b/docs/data/material/components/skeleton/SkeletonColor.js
index 8f11ca33e1dcda..9342f876680276 100644
--- a/docs/data/material/components/skeleton/SkeletonColor.js
+++ b/docs/data/material/components/skeleton/SkeletonColor.js
@@ -16,6 +16,7 @@ export default function SkeletonColor() {
       <Skeleton
         sx={{ bgcolor: 'grey.900' }}
         shape="rectangular"
+        size="box"
         width={210}
         height={118}
       />
diff --git a/docs/data/material/components/skeleton/SkeletonColor.tsx b/docs/data/material/components/skeleton/SkeletonColor.tsx
index 8f11ca33e1dcda..9342f876680276 100644
--- a/docs/data/material/components/skeleton/SkeletonColor.tsx
+++ b/docs/data/material/components/skeleton/SkeletonColor.tsx
@@ -16,6 +16,7 @@ export default function SkeletonColor() {
       <Skeleton
         sx={{ bgcolor: 'grey.900' }}
         shape="rectangular"
+        size="box"
         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 e0113f1c4f0997..1c90e20e617b1c 100644
--- a/docs/data/material/components/skeleton/SkeletonColor.tsx.preview
+++ b/docs/data/material/components/skeleton/SkeletonColor.tsx.preview
@@ -1,6 +1,7 @@
 <Skeleton
   sx={{ bgcolor: 'grey.900' }}
   shape="rectangular"
+  size="box"
   width={210}
   height={118}
 />
\ 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 0604aa66c16f98..aa9a82aba7fc53 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" width={210} height={118} />
+            <Skeleton shape="rectangular" size="box" width={210} height={118} />
           )}
 
           {item ? (
diff --git a/docs/data/material/components/skeleton/YouTube.tsx b/docs/data/material/components/skeleton/YouTube.tsx
index de9ae6c7525853..fb3800dac24385 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" width={210} height={118} />
+            <Skeleton shape="rectangular" size="box" width={210} height={118} />
           )}
           {item ? (
             <Box sx={{ pr: 2 }}>
diff --git a/docs/data/material/components/skeleton/skeleton.md b/docs/data/material/components/skeleton/skeleton.md
index 85eae20ac15aa0..81bd839c55039b 100644
--- a/docs/data/material/components/skeleton/skeleton.md
+++ b/docs/data/material/components/skeleton/skeleton.md
@@ -30,7 +30,7 @@ For instance:
       src={item.src}
     />
   ) : (
-    <Skeleton shape="rectangular" width={210} height={118} />
+    <Skeleton shape="rectangular" size="box" width={210} height={118} />
   );
 }
 ```
@@ -84,7 +84,7 @@ infer its width and height from them.
 
 ```jsx
 loading ? (
-  <Skeleton shape="circular">
+  <Skeleton shape="circular" size="box">
     <Avatar />
   </Skeleton>
 ) : (