[material-ui][Skeleton] Revert "Add new props to the Skeleton compone…

…nt" (#39156)
mui · Sep 25, 2023 · ce992b8 · ce992b8
1 parent bd446ad
commit ce992b8
Show file tree

Hide file tree

Showing 27 changed files with 130 additions and 335 deletions.
diff --git a/docs/data/material/components/skeleton/Facebook.js b/docs/data/material/components/skeleton/Facebook.js
@@ -18,13 +18,7 @@ function Media(props) {
       <CardHeader
         avatar={
           loading ? (
-            <Skeleton
-              animation="wave"
-              size="box"
-              shape="circular"
-              width={40}
-              height={40}
-            />
+            <Skeleton animation="wave" variant="circular" width={40} height={40} />
           ) : (
             <Avatar
               alt="Ted talk"
@@ -60,12 +54,7 @@ function Media(props) {
         }
       />
       {loading ? (
-        <Skeleton
-          sx={{ height: 190 }}
-          animation="wave"
-          size="box"
-          shape="rectangular"
-        />
+        <Skeleton sx={{ height: 190 }} animation="wave" variant="rectangular" />
       ) : (
         <CardMedia
           component="img"

diff --git a/docs/data/material/components/skeleton/Facebook.tsx b/docs/data/material/components/skeleton/Facebook.tsx
@@ -21,13 +21,7 @@ function Media(props: MediaProps) {
       <CardHeader
         avatar={
           loading ? (
-            <Skeleton
-              animation="wave"
-              size="box"
-              shape="circular"
-              width={40}
-              height={40}
-            />
+            <Skeleton animation="wave" variant="circular" width={40} height={40} />
           ) : (
             <Avatar
               alt="Ted talk"
@@ -63,12 +57,7 @@ function Media(props: MediaProps) {
         }
       />
       {loading ? (
-        <Skeleton
-          sx={{ height: 190 }}
-          animation="wave"
-          size="box"
-          shape="rectangular"
-        />
+        <Skeleton sx={{ height: 190 }} animation="wave" variant="rectangular" />
       ) : (
         <CardMedia
           component="img"

diff --git a/docs/data/material/components/skeleton/Shapes.js b/docs/data/material/components/skeleton/Shapes.js
diff --git a/docs/data/material/components/skeleton/Shapes.tsx b/docs/data/material/components/skeleton/Shapes.tsx
diff --git a/docs/data/material/components/skeleton/Shapes.tsx.preview b/docs/data/material/components/skeleton/Shapes.tsx.preview
diff --git a/docs/data/material/components/skeleton/Sizes.js b/docs/data/material/components/skeleton/Sizes.js
diff --git a/docs/data/material/components/skeleton/Sizes.tsx b/docs/data/material/components/skeleton/Sizes.tsx
diff --git a/docs/data/material/components/skeleton/Sizes.tsx.preview b/docs/data/material/components/skeleton/Sizes.tsx.preview
diff --git a/docs/data/material/components/skeleton/SkeletonChildren.js b/docs/data/material/components/skeleton/SkeletonChildren.js
@@ -19,7 +19,7 @@ function SkeletonChildrenDemo(props) {
       <Box sx={{ display: 'flex', alignItems: 'center' }}>
         <Box sx={{ margin: 1 }}>
           {loading ? (
-            <Skeleton size="box" shape="circular">
+            <Skeleton variant="circular">
               <Avatar />
             </Skeleton>
           ) : (
@@ -37,7 +37,7 @@ function SkeletonChildrenDemo(props) {
         </Box>
       </Box>
       {loading ? (
-        <Skeleton size="box" shape="rectangular" width="100%">
+        <Skeleton variant="rectangular" width="100%">
           <div style={{ paddingTop: '57%' }} />
         </Skeleton>
       ) : (

diff --git a/docs/data/material/components/skeleton/SkeletonChildren.tsx b/docs/data/material/components/skeleton/SkeletonChildren.tsx
@@ -18,7 +18,7 @@ function SkeletonChildrenDemo(props: { loading?: boolean }) {
       <Box sx={{ display: 'flex', alignItems: 'center' }}>
         <Box sx={{ margin: 1 }}>
           {loading ? (
-            <Skeleton size="box" shape="circular">
+            <Skeleton variant="circular">
               <Avatar />
             </Skeleton>
           ) : (
@@ -36,7 +36,7 @@ function SkeletonChildrenDemo(props: { loading?: boolean }) {
         </Box>
       </Box>
       {loading ? (
-        <Skeleton size="box" shape="rectangular" width="100%">
+        <Skeleton variant="rectangular" width="100%">
           <div style={{ paddingTop: '57%' }} />
         </Skeleton>
       ) : (

diff --git a/docs/data/material/components/skeleton/SkeletonColor.js b/docs/data/material/components/skeleton/SkeletonColor.js
@@ -15,8 +15,7 @@ export default function SkeletonColor() {
     >
       <Skeleton
         sx={{ bgcolor: 'grey.900' }}
-        shape="rectangular"
-        size="box"
+        variant="rectangular"
         width={210}
         height={118}
       />

diff --git a/docs/data/material/components/skeleton/SkeletonColor.tsx b/docs/data/material/components/skeleton/SkeletonColor.tsx
@@ -15,8 +15,7 @@ export default function SkeletonColor() {
     >
       <Skeleton
         sx={{ bgcolor: 'grey.900' }}
-        shape="rectangular"
-        size="box"
+        variant="rectangular"
         width={210}
         height={118}
       />

diff --git a/docs/data/material/components/skeleton/SkeletonColor.tsx.preview b/docs/data/material/components/skeleton/SkeletonColor.tsx.preview
@@ -1,7 +1,6 @@
 <Skeleton
   sx={{ bgcolor: 'grey.900' }}
-  shape="rectangular"
-  size="box"
+  variant="rectangular"
   width={210}
   height={118}
 />
diff --git a/docs/data/material/components/skeleton/Variants.js b/docs/data/material/components/skeleton/Variants.js
@@ -0,0 +1,16 @@
+import * as React from 'react';
+import Skeleton from '@mui/material/Skeleton';
+import Stack from '@mui/material/Stack';
+
+export default function Variants() {
+  return (
+    <Stack spacing={1}>
+      {/* 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={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
@@ -0,0 +1,17 @@
+import * as React from 'react';
+import Skeleton from '@mui/material/Skeleton';
+import Stack from '@mui/material/Stack';
+
+export default function Variants() {
+  return (
+    <Stack spacing={1}>
+      {/* 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={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
@@ -0,0 +1,7 @@
+{/* 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={60} />
+<Skeleton variant="rounded" width={210} height={60} />
diff --git a/docs/data/material/components/skeleton/YouTube.js b/docs/data/material/components/skeleton/YouTube.js
@@ -43,7 +43,7 @@ function Media(props) {
               src={item.src}
             />
           ) : (
-            <Skeleton shape="rectangular" size="box" width={210} height={118} />
+            <Skeleton variant="rectangular" width={210} height={118} />
           )}
 
           {item ? (

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

diff --git a/docs/data/material/components/skeleton/skeleton-pt.md b/docs/data/material/components/skeleton/skeleton-pt.md
@@ -22,27 +22,19 @@ O componente é projetado para ser usado **diretamente em seus componentes**. Po
   item ? (
     <img style={{ width: 210, height: 118 }} alt={item.title} src={item.src} />
   ) : (
-    <Skeleton shape="rect" width={210} height={118} />
+    <Skeleton variant="rect" width={210} height={118} />
   );
 }
 ```
 
-## Formas
+## Variantes
 
-O componente suporta 3 formas:
+The component supports 4 shape variants:
 
-- `circular`, `rectangular`, e `rounded`: Venha com um raio de borda diferente para permitir que você assuma o controle da forma.
+- `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": "Shapes.js"}}
-
-## Tamanhos
-
-Você pode usar os seguintes valores para especificar o tamanho do componente:
-
-- `text` (default): representa uma única linha de texto (você pode ajustar a altura por tamanho da fonte).
-- `box`: Escala o componente para o tamanho da caixa delimitadora.
-
-{{"demo": "Sizes.js"}}
+{{"demo": "Variants.js"}}
 
 ## Animações
 

diff --git a/docs/data/material/components/skeleton/skeleton-zh.md b/docs/data/material/components/skeleton/skeleton-zh.md
@@ -29,27 +29,19 @@ githubLabel: 'component: skeleton'
       src={item.src}
     />
   ) : (
-    <Skeleton shape="rectangular" width={210} height={118} />
+    <Skeleton variant="rectangular" width={210} height={118} />
   );
 }
 ```
 
-## 形状
+## 变体
 
-组件支持 3 种形状:
+The component supports 4 shape variants:
 
-- `circular`, `rectangular`, 和 `rounded`: 带有不同的边界半径，让您控制形状
+- `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": "Shapes.js"}}
-
-## 尺寸
-
-您可以使用以下值来指定组件的大小:
-
-- `text` （默认值）：表示一行文本（您可以通过字体大小调整高度）。
-- `box`: 将组件扩展到边界框的大小。
-
-{{"demo": "Sizes.js"}}
+{{"demo": "Variants.js"}}
 
 ## 动画
 
@@ -81,7 +73,7 @@ githubLabel: 'component: skeleton'
 
 ```jsx
 loading ? (
-  <Skeleton shape="circular">
+  <Skeleton variant="circular">
     <Avatar />
   </Skeleton>
 ) : (

diff --git a/docs/data/material/components/skeleton/skeleton.md b/docs/data/material/components/skeleton/skeleton.md
@@ -30,27 +30,19 @@ For instance:
       src={item.src}
     />
   ) : (
-    <Skeleton shape="rectangular" size="box" width={210} height={118} />
+    <Skeleton variant="rectangular" width={210} height={118} />
   );
 }
 ```
 
-## Shapes
+## Variants
 
-The component supports 3 shapes:
-
-- `circular`, `rectangular`, and `rounded`: come with different border radius to let you take control of the shape.
-
-{{"demo": "Shapes.js"}}
-
-## Sizes
-
-You can use the following values to specify the size of the component:
+The component supports 4 shape variants:
 
 - `text` (default): represents a single line of text (you can adjust the height via font size).
-- `box`: scale the component to the size of the bounding box.
+- `circular`, `rectangular`, and `rounded`: come with different border radius to let you take control of the size.
 
-{{"demo": "Sizes.js"}}
+{{"demo": "Variants.js"}}
 
 ## Animations
 
@@ -84,7 +76,7 @@ infer its width and height from them.
 
 ```jsx
 loading ? (
-  <Skeleton shape="circular" size="box">
+  <Skeleton variant="circular">
     <Avatar />
   </Skeleton>
 ) : (