mui · oliviertassinari · Aug 4, 2020 · Aug 3, 2020 · Aug 3, 2020 · Aug 3, 2020
diff --git a/docs/pages/api-docs/skeleton.md b/docs/pages/api-docs/skeleton.md
@@ -33,7 +33,7 @@ The `MuiSkeleton` name can be used for providing [default props](/customization/
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'span'</span> | The component used for the root node. Either a string to use a HTML element or a component. |
 | <span class="prop-name">height</span> | <span class="prop-type">number<br>&#124;&nbsp;string</span> |  | Height of the skeleton. Useful when you don't want to adapt the skeleton to a text element but for instance a card. |
-| <span class="prop-name">variant</span> | <span class="prop-type">'circle'<br>&#124;&nbsp;'rect'<br>&#124;&nbsp;'text'</span> | <span class="prop-default">'text'</span> | The type of content that will be rendered. |
+| <span class="prop-name">variant</span> | <span class="prop-type">'circular'<br>&#124;&nbsp;'rectangular'<br>&#124;&nbsp;'text'</span> | <span class="prop-default">'text'</span> | The type of content that will be rendered. |
 | <span class="prop-name">width</span> | <span class="prop-type">number<br>&#124;&nbsp;string</span> |  | Width of the skeleton. Useful when the skeleton is inside an inline element with no width of its own. |
 
 The `ref` is forwarded to the root element.
@@ -46,8 +46,8 @@ Any other props supplied will be provided to the root element (native element).
 |:-----|:-------------|:------------|
 | <span class="prop-name">root</span> | <span class="prop-name">.MuiSkeleton-root</span> | Styles applied to the root element.
 | <span class="prop-name">text</span> | <span class="prop-name">.MuiSkeleton-text</span> | Styles applied to the root element if `variant="text"`.
-| <span class="prop-name">rect</span> | <span class="prop-name">.MuiSkeleton-rect</span> | Styles applied to the root element if `variant="rect"`.
-| <span class="prop-name">circle</span> | <span class="prop-name">.MuiSkeleton-circle</span> | Styles applied to the root element if `variant="circle"`.
+| <span class="prop-name">rectangular</span> | <span class="prop-name">.MuiSkeleton-rectangular</span> | Styles applied to the root element if `variant="rectangular"`.
+| <span class="prop-name">circular</span> | <span class="prop-name">.MuiSkeleton-circular</span> | Styles applied to the root element if `variant="circular"`.
 | <span class="prop-name">pulse</span> | <span class="prop-name">.MuiSkeleton-pulse</span> | Styles applied to the root element if `animation="pulse"`.
 | <span class="prop-name">wave</span> | <span class="prop-name">.MuiSkeleton-wave</span> | Styles applied to the root element if `animation="wave"`.
 | <span class="prop-name">withChildren</span> | <span class="prop-name">.MuiSkeleton-withChildren</span> | Styles applied when the component is passed children.

diff --git a/docs/src/pages/components/skeleton/Facebook.js b/docs/src/pages/components/skeleton/Facebook.js
@@ -32,7 +32,7 @@ function Media(props) {
           loading ? (
             <Skeleton
               animation="wave"
-              variant="circle"
+              variant="circular"
               width={40}
               height={40}
             />
@@ -71,7 +71,11 @@ function Media(props) {
         }
       />
       {loading ? (
-        <Skeleton animation="wave" variant="rect" className={classes.media} />
+        <Skeleton
+          animation="wave"
+          variant="rectangular"
+          className={classes.media}
+        />
       ) : (
         <CardMedia
           className={classes.media}

diff --git a/docs/src/pages/components/skeleton/Facebook.tsx b/docs/src/pages/components/skeleton/Facebook.tsx
@@ -37,7 +37,7 @@ function Media(props: MediaProps) {
           loading ? (
             <Skeleton
               animation="wave"
-              variant="circle"
+              variant="circular"
               width={40}
               height={40}
             />
@@ -76,7 +76,11 @@ function Media(props: MediaProps) {
         }
       />
       {loading ? (
-        <Skeleton animation="wave" variant="rect" className={classes.media} />
+        <Skeleton
+          animation="wave"
+          variant="rectangular"
+          className={classes.media}
+        />
       ) : (
         <CardMedia
           className={classes.media}

diff --git a/docs/src/pages/components/skeleton/SkeletonChildren.js b/docs/src/pages/components/skeleton/SkeletonChildren.js
@@ -22,7 +22,7 @@ function SkeletonChildrenDemo(props) {
       <Box display="flex" alignItems="center">
         <Box margin={1}>
           {loading ? (
-            <Skeleton variant="circle">
+            <Skeleton variant="circular">
               <Avatar />
             </Skeleton>
           ) : (
@@ -40,7 +40,7 @@ function SkeletonChildrenDemo(props) {
         </Box>
       </Box>
       {loading ? (
-        <Skeleton variant="rect" width="100%">
+        <Skeleton variant="rectangular" width="100%">
           <div style={{ paddingTop: '57%' }} />
         </Skeleton>
       ) : (

diff --git a/docs/src/pages/components/skeleton/SkeletonChildren.tsx b/docs/src/pages/components/skeleton/SkeletonChildren.tsx
@@ -21,7 +21,7 @@ function SkeletonChildrenDemo(props: { loading?: boolean }) {
       <Box display="flex" alignItems="center">
         <Box margin={1}>
           {loading ? (
-            <Skeleton variant="circle">
+            <Skeleton variant="circular">
               <Avatar />
             </Skeleton>
           ) : (
@@ -39,7 +39,7 @@ function SkeletonChildrenDemo(props: { loading?: boolean }) {
         </Box>
       </Box>
       {loading ? (
-        <Skeleton variant="rect" width="100%">
+        <Skeleton variant="rectangular" width="100%">
           <div style={{ paddingTop: '57%' }} />
         </Skeleton>
       ) : (

diff --git a/docs/src/pages/components/skeleton/Variants.js b/docs/src/pages/components/skeleton/Variants.js
@@ -5,8 +5,8 @@ export default function Variants() {
   return (
     <div>
       <Skeleton variant="text" />
-      <Skeleton variant="circle" width={40} height={40} />
-      <Skeleton variant="rect" width={210} height={118} />
+      <Skeleton variant="circular" width={40} height={40} />
+      <Skeleton variant="rectangular" width={210} height={118} />
     </div>
   );
 }
diff --git a/docs/src/pages/components/skeleton/Variants.tsx b/docs/src/pages/components/skeleton/Variants.tsx
@@ -5,8 +5,8 @@ export default function Variants() {
   return (
     <div>
       <Skeleton variant="text" />
-      <Skeleton variant="circle" width={40} height={40} />
-      <Skeleton variant="rect" width={210} height={118} />
+      <Skeleton variant="circular" width={40} height={40} />
+      <Skeleton variant="rectangular" width={210} height={118} />
     </div>
   );
 }
diff --git a/docs/src/pages/components/skeleton/YouTube.js b/docs/src/pages/components/skeleton/YouTube.js
@@ -46,7 +46,7 @@ function Media(props) {
               src={item.src}
             />
           ) : (
-            <Skeleton variant="rect" width={210} height={118} />
+            <Skeleton variant="rectangular" width={210} height={118} />
           )}
 
           {item ? (

diff --git a/docs/src/pages/components/skeleton/YouTube.tsx b/docs/src/pages/components/skeleton/YouTube.tsx
@@ -49,7 +49,7 @@ function Media(props: MediaProps) {
               src={item.src}
             />
           ) : (
-            <Skeleton variant="rect" width={210} height={118} />
+            <Skeleton variant="rectangular" width={210} height={118} />
           )}
           {item ? (
             <Box pr={2}>

diff --git a/docs/src/pages/components/skeleton/skeleton.md b/docs/src/pages/components/skeleton/skeleton.md
@@ -24,7 +24,7 @@ For instance:
       src={item.src}
     />
   ) : (
-    <Skeleton variant="rect" width={210} height={118} />
+    <Skeleton variant="rectangular" width={210} height={118} />
   );
 }
 ```
@@ -67,7 +67,7 @@ infer its width and height from them.
 
 ```jsx
 loading ? (
-  <Skeleton variant="circle">
+  <Skeleton variant="circular">
     <Avatar />
   </Skeleton>
 ) : (

diff --git a/docs/src/pages/guides/migration-v4/migration-v4.md b/docs/src/pages/guides/migration-v4/migration-v4.md
@@ -246,6 +246,19 @@ This change affects almost all components where you're using the `component` pro
   +<Snackbar anchorOrigin={{ vertical: 'bottom', horizontal: 'center' }} />
   ```
 
+  ### Skeleton
+
+- Rename `circle` to `circular` and `rect` to `rectangular` for consistency. The possible values should be adjectives, not nouns:
+
+  ```diff
+  -<Skeleton variant="circle" />
+  -<Skeleton variant="rect" />
+  -<Skeleton classes={{ circle: 'custom-circle-classname', rect: 'custom-rect-classname',  }} />
+  +<Skeleton variant="circular" />
+  +<Skeleton variant="rectangular" />
+  -<Skeleton classes={{ circular: 'custom-circle-classname', rectangular: 'custom-rect-classname',  }} />
+  ```
+
 ### TablePagination
 
 - The customization of the table pagination's actions labels must be done with the `getItemAriaLabel` prop. This increases consistency with the `Pagination` component.

diff --git a/packages/material-ui-lab/src/Skeleton/Skeleton.d.ts b/packages/material-ui-lab/src/Skeleton/Skeleton.d.ts
@@ -20,7 +20,7 @@ export interface SkeletonTypeMap<P = {}, D extends React.ElementType = 'span'> {
     /**
      * The type of content that will be rendered.
      */
-    variant?: 'text' | 'rect' | 'circle';
+    variant?: 'text' | 'rectangular' | 'circular';
     /**
      * Width of the skeleton.
      * Useful when the skeleton is inside an inline element with no width of its own.
@@ -46,8 +46,8 @@ declare const Skeleton: OverridableComponent<SkeletonTypeMap>;
 export type SkeletonClassKey =
   | 'root'
   | 'text'
-  | 'rect'
-  | 'circle'
+  | 'rectangular'
+  | 'circular'
   | 'pulse'
   | 'wave'
   | 'withChildren'

diff --git a/packages/material-ui-lab/src/Skeleton/Skeleton.js b/packages/material-ui-lab/src/Skeleton/Skeleton.js
@@ -25,10 +25,10 @@ export const styles = (theme) => ({
       content: '"\\00a0"',
     },
   },
-  /* Styles applied to the root element if `variant="rect"`. */
-  rect: {},
-  /* Styles applied to the root element if `variant="circle"`. */
-  circle: {
+  /* Styles applied to the root element if `variant="rectangular"`. */
+  rectangular: {},
+  /* Styles applied to the root element if `variant="circular"`. */
+  circular: {
     borderRadius: '50%',
   },
   /* Styles applied to the root element if `animation="pulse"`. */
@@ -169,7 +169,7 @@ Skeleton.propTypes = {
   /**
    * The type of content that will be rendered.
    */
-  variant: PropTypes.oneOf(['circle', 'rect', 'text']),
+  variant: PropTypes.oneOf(['circular', 'rectangular', 'text']),
   /**
    * Width of the skeleton.
    * Useful when the skeleton is inside an inline element with no width of its own.

diff --git a/test/regressions/tests/Skeleton/SkeletonChildren.js b/test/regressions/tests/Skeleton/SkeletonChildren.js
@@ -10,7 +10,7 @@ export default function SkeletonChildren() {
       <CssBaseline />
       <div style={{ alignItems: 'center', display: 'flex', width: '200px' }}>
         <div style={{ margin: '8px' }}>
-          <Skeleton variant="circle">
+          <Skeleton variant="circular">
             <Avatar />
           </Skeleton>
         </div>