[Skeleton][material-ui] Add new props to the Skeleton component

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",

docs/translations/api-docs/skeleton/skeleton.json

@@ -12,6 +12,10 @@
     "height": {
       "description": "Height of the skeleton. Useful when you don'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}}.",

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,13 +35,26 @@ 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.
      */
     sx?: SxProps<Theme>;
     /**
      * 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',

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']),

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',