feat(skeleton): rounded variant

mui · Jun 6, 2022 · 6ca11b9 · 6ca11b9
1 parent 32292cb
commit 6ca11b9
Show file tree

Hide file tree

Showing 7 changed files with 17 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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',