From 6ca11b9325502dd5b848f4a7b7ede11ff533ddb5 Mon Sep 17 00:00:00 2001
From: Sullivan SENECHAL <soullivaneuh@gmail.com>
Date: Mon, 6 Jun 2022 14:33:00 +0200
Subject: [PATCH] feat(skeleton): rounded variant

---
 docs/data/material/components/skeleton/Variants.js    | 1 +
 docs/data/material/components/skeleton/skeleton.md    | 2 +-
 docs/pages/material-ui/api/skeleton.json              | 3 ++-
 docs/translations/api-docs/skeleton/skeleton.json     | 5 +++++
 packages/mui-material/src/Skeleton/Skeleton.d.ts      | 2 +-
 packages/mui-material/src/Skeleton/Skeleton.js        | 5 ++++-
 packages/mui-material/src/Skeleton/skeletonClasses.ts | 3 +++
 7 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/docs/data/material/components/skeleton/Variants.js b/docs/data/material/components/skeleton/Variants.js
index c5017808b55e29..e49ff35e07a4a6 100644
--- a/docs/data/material/components/skeleton/Variants.js
+++ b/docs/data/material/components/skeleton/Variants.js
@@ -8,6 +8,7 @@ export default function Variants() {
       <Skeleton variant="text" />
       <Skeleton variant="circular" width={40} height={40} />
       <Skeleton variant="rectangular" width={210} height={118} />
+      <Skeleton variant="rounded" width={210} height={118} />
     </Stack>
   );
 }
diff --git a/docs/data/material/components/skeleton/skeleton.md b/docs/data/material/components/skeleton/skeleton.md
index 9b75a1cf652cee..c15ba3a9aa1fbc 100644
--- a/docs/data/material/components/skeleton/skeleton.md
+++ b/docs/data/material/components/skeleton/skeleton.md
@@ -37,7 +37,7 @@ For instance:
 
 ## Variants
 
-The component supports 3 shape variants.
+The component supports 4 shape variants.
 
 {{"demo": "Variants.js"}}
 
diff --git a/docs/pages/material-ui/api/skeleton.json b/docs/pages/material-ui/api/skeleton.json
index 04fed310c255ca..6e475766062b9c 100644
--- a/docs/pages/material-ui/api/skeleton.json
+++ b/docs/pages/material-ui/api/skeleton.json
@@ -20,7 +20,7 @@
     "variant": {
       "type": {
         "name": "union",
-        "description": "'circular'<br>&#124;&nbsp;'rectangular'<br>&#124;&nbsp;'text'<br>&#124;&nbsp;string"
+        "description": "'circular'<br>&#124;&nbsp;'rectangular'<br>&#124;&nbsp;'rounded'<br>&#124;&nbsp;'text'<br>&#124;&nbsp;string"
       },
       "default": "'text'"
     },
@@ -32,6 +32,7 @@
       "root",
       "text",
       "rectangular",
+      "rounded",
       "circular",
       "pulse",
       "wave",
diff --git a/docs/translations/api-docs/skeleton/skeleton.json b/docs/translations/api-docs/skeleton/skeleton.json
index 346a6a67c7f4ba..7609beb8d83894 100644
--- a/docs/translations/api-docs/skeleton/skeleton.json
+++ b/docs/translations/api-docs/skeleton/skeleton.json
@@ -22,6 +22,11 @@
       "nodeName": "the root element",
       "conditions": "<code>variant=\"rectangular\"</code>"
     },
+    "rounded": {
+      "description": "Styles applied to {{nodeName}} if {{conditions}}.",
+      "nodeName": "the root element",
+      "conditions": "<code>variant=\"rounded\"</code>"
+    },
     "circular": {
       "description": "Styles applied to {{nodeName}} if {{conditions}}.",
       "nodeName": "the root element",
diff --git a/packages/mui-material/src/Skeleton/Skeleton.d.ts b/packages/mui-material/src/Skeleton/Skeleton.d.ts
index 664aa9c2782626..5ec0f0432386d1 100644
--- a/packages/mui-material/src/Skeleton/Skeleton.d.ts
+++ b/packages/mui-material/src/Skeleton/Skeleton.d.ts
@@ -37,7 +37,7 @@ export interface SkeletonTypeMap<P = {}, D extends React.ElementType = 'span'> {
      * @default 'text'
      */
     variant?: OverridableStringUnion<
-      'text' | 'rectangular' | 'circular',
+      'text' | 'rectangular' | 'rounded' | 'circular',
       SkeletonPropsVariantOverrides
     >;
     /**
diff --git a/packages/mui-material/src/Skeleton/Skeleton.js b/packages/mui-material/src/Skeleton/Skeleton.js
index 5bd6a7311e2345..48f98a43a13918 100644
--- a/packages/mui-material/src/Skeleton/Skeleton.js
+++ b/packages/mui-material/src/Skeleton/Skeleton.js
@@ -98,6 +98,9 @@ const SkeletonRoot = styled('span', {
       ...(ownerState.variant === 'circular' && {
         borderRadius: '50%',
       }),
+      ...(ownerState.variant === 'rounded' && {
+        borderRadius: theme.shape.borderRadius,
+      }),
       ...(ownerState.hasChildren && {
         '& > *': {
           visibility: 'hidden',
@@ -230,7 +233,7 @@ Skeleton.propTypes /* remove-proptypes */ = {
    * @default 'text'
    */
   variant: PropTypes /* @typescript-to-proptypes-ignore */.oneOfType([
-    PropTypes.oneOf(['circular', 'rectangular', 'text']),
+    PropTypes.oneOf(['circular', 'rectangular', 'rounded', 'text']),
     PropTypes.string,
   ]),
   /**
diff --git a/packages/mui-material/src/Skeleton/skeletonClasses.ts b/packages/mui-material/src/Skeleton/skeletonClasses.ts
index d15c3c41811367..88447bcc1f810c 100644
--- a/packages/mui-material/src/Skeleton/skeletonClasses.ts
+++ b/packages/mui-material/src/Skeleton/skeletonClasses.ts
@@ -7,6 +7,8 @@ export interface SkeletonClasses {
   text: string;
   /** Styles applied to the root element if `variant="rectangular"`. */
   rectangular: string;
+  /** Styles applied to the root element if `variant="rounded"`. */
+  rounded: string;
   /** Styles applied to the root element if `variant="circular"`. */
   circular: string;
   /** Styles applied to the root element if `animation="pulse"`. */
@@ -31,6 +33,7 @@ const skeletonClasses: SkeletonClasses = generateUtilityClasses('MuiSkeleton', [
   'root',
   'text',
   'rectangular',
+  'rounded',
   'circular',
   'pulse',
   'wave',