[Skeleton] Add rounded variant (#33687)

mui · Aug 2, 2022 · 4e5e2a7 · 4e5e2a7
1 parent c94f94a
commit 4e5e2a7
Show file tree

Hide file tree

Showing 9 changed files with 36 additions and 10 deletions.
diff --git a/docs/data/material/components/skeleton/Variants.js b/docs/data/material/components/skeleton/Variants.js
@@ -5,9 +5,12 @@ import Stack from '@mui/material/Stack';
 export default function Variants() {
   return (
     <Stack spacing={1}>
-      <Skeleton variant="text" />
+      {/* 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={118} />
+      <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
@@ -5,9 +5,13 @@ import Stack from '@mui/material/Stack';
 export default function Variants() {
   return (
     <Stack spacing={1}>
-      <Skeleton variant="text" />
+      {/* 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={118} />
+      <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
@@ -1,3 +1,7 @@
-<Skeleton variant="text" />
+{/* 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={118} />
+<Skeleton variant="rectangular" width={210} height={60} />
+<Skeleton variant="rounded" width={210} height={60} />
diff --git a/docs/data/material/components/skeleton/skeleton.md b/docs/data/material/components/skeleton/skeleton.md
@@ -37,7 +37,10 @@ For instance:
 
 ## Variants
 
-The component supports 3 shape variants.
+The component supports 4 shape variants:
+
+- `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": "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
@@ -97,6 +97,9 @@ const SkeletonRoot = styled('span', {
       ...(ownerState.variant === 'circular' && {
         borderRadius: '50%',
       }),
+      ...(ownerState.variant === 'rounded' && {
+        borderRadius: (theme.vars || theme).shape.borderRadius,
+      }),
       ...(ownerState.hasChildren && {
         '& > *': {
           visibility: 'hidden',
@@ -234,7 +237,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',