fix: refactor code

Co-authored-by: seunexplicit <[email protected]>
mui · Sep 6, 2023 · 1a6b100 · 1a6b100
1 parent 9e05405
commit 1a6b100
Show file tree

Hide file tree

Showing 8 changed files with 56 additions and 52 deletions.
diff --git 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
@@ -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
@@ -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} />
diff --git 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
@@ -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
@@ -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} />
diff --git 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}
 />
diff --git 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,60 +63,52 @@ 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,
       ownerState.hasChildren && !ownerState.height && styles.heightAuto,
     ];
   },
 })(
-  ({ 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`