[Skeleton][material-ui] Add new props to the Skeleton component (#38483)

mui · Sep 22, 2023 · cab11f2 · cab11f2
1 parent 9d5bcd6
commit cab11f2
Show file tree

Hide file tree

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

diff --git a/docs/data/material/components/skeleton/Shapes.js b/docs/data/material/components/skeleton/Shapes.js
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Skeleton from '@mui/material/Skeleton';
+import Stack from '@mui/material/Stack';
+
+export default function Shapes() {
+  return (
+    <Stack spacing={1}>
+      <Skeleton shape="circular" size="box" width={40} height={40} />
+      <Skeleton shape="rectangular" size="box" width={210} height={60} />
+      <Skeleton shape="rounded" size="box" width={210} height={60} />
+    </Stack>
+  );
+}
diff --git a/docs/data/material/components/skeleton/Shapes.tsx b/docs/data/material/components/skeleton/Shapes.tsx
@@ -0,0 +1,13 @@
+import * as React from 'react';
+import Skeleton from '@mui/material/Skeleton';
+import Stack from '@mui/material/Stack';
+
+export default function Shapes() {
+  return (
+    <Stack spacing={1}>
+      <Skeleton shape="circular" size="box" width={40} height={40} />
+      <Skeleton shape="rectangular" size="box" width={210} height={60} />
+      <Skeleton shape="rounded" size="box" width={210} height={60} />
+    </Stack>
+  );
+}
diff --git a/docs/data/material/components/skeleton/Shapes.tsx.preview b/docs/data/material/components/skeleton/Shapes.tsx.preview
@@ -0,0 +1,3 @@
+<Skeleton shape="circular" size="box" width={40} height={40} />
+<Skeleton shape="rectangular" size="box" width={210} height={60} />
+<Skeleton shape="rounded" size="box" width={210} height={60} />
diff --git a/docs/data/material/components/skeleton/Sizes.js b/docs/data/material/components/skeleton/Sizes.js
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import Skeleton from '@mui/material/Skeleton';
+import Stack from '@mui/material/Stack';
+
+export default function Sizes() {
+  return (
+    <Stack spacing={1} width={210}>
+      {/* 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} />
+    </Stack>
+  );
+}
diff --git a/docs/data/material/components/skeleton/Sizes.tsx b/docs/data/material/components/skeleton/Sizes.tsx
@@ -0,0 +1,14 @@
+import * as React from 'react';
+import Skeleton from '@mui/material/Skeleton';
+import Stack from '@mui/material/Stack';
+
+export default function Sizes() {
+  return (
+    <Stack spacing={1} width={210}>
+      {/* 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} />
+    </Stack>
+  );
+}
diff --git a/docs/data/material/components/skeleton/Sizes.tsx.preview b/docs/data/material/components/skeleton/Sizes.tsx.preview
@@ -0,0 +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/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 variant="circular">
+            <Skeleton size="box" shape="circular">
               <Avatar />
             </Skeleton>
           ) : (
@@ -37,7 +37,7 @@ function SkeletonChildrenDemo(props) {
         </Box>
       </Box>
       {loading ? (
-        <Skeleton variant="rectangular" width="100%">
+        <Skeleton size="box" shape="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 variant="circular">
+            <Skeleton size="box" shape="circular">
               <Avatar />
             </Skeleton>
           ) : (
@@ -36,7 +36,7 @@ function SkeletonChildrenDemo(props: { loading?: boolean }) {
         </Box>
       </Box>
       {loading ? (
-        <Skeleton variant="rectangular" width="100%">
+        <Skeleton size="box" shape="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,7 +15,8 @@ export default function SkeletonColor() {
     >
       <Skeleton
         sx={{ bgcolor: 'grey.900' }}
-        variant="rectangular"
+        shape="rectangular"
+        size="box"
         width={210}
         height={118}
       />

diff --git a/docs/data/material/components/skeleton/SkeletonColor.tsx b/docs/data/material/components/skeleton/SkeletonColor.tsx
@@ -15,7 +15,8 @@ export default function SkeletonColor() {
     >
       <Skeleton
         sx={{ bgcolor: 'grey.900' }}
-        variant="rectangular"
+        shape="rectangular"
+        size="box"
         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,6 +1,7 @@
 <Skeleton
   sx={{ bgcolor: 'grey.900' }}
-  variant="rectangular"
+  shape="rectangular"
+  size="box"
   width={210}
   height={118}
 />
diff --git a/docs/data/material/components/skeleton/Variants.js b/docs/data/material/components/skeleton/Variants.js
diff --git a/docs/data/material/components/skeleton/Variants.tsx b/docs/data/material/components/skeleton/Variants.tsx
diff --git a/docs/data/material/components/skeleton/Variants.tsx.preview b/docs/data/material/components/skeleton/Variants.tsx.preview
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 variant="rectangular" width={210} height={118} />
+            <Skeleton shape="rectangular" size="box" 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 variant="rectangular" width={210} height={118} />
+            <Skeleton shape="rectangular" size="box" 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,19 +22,27 @@ 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 variant="rect" width={210} height={118} />
+    <Skeleton shape="rect" width={210} height={118} />
   );
 }
 ```
 
-## Variantes
+## Formas
 
-The component supports 4 shape variants:
+O componente suporta 3 formas:
 
-- `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.
+- `circular`, `rectangular`, e `rounded`: Venha com um raio de borda diferente para permitir que você assuma o controle da forma.
 
-{{"demo": "Variants.js"}}
+{{"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"}}
 
 ## Animações
 

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

diff --git a/docs/data/material/components/skeleton/skeleton.md b/docs/data/material/components/skeleton/skeleton.md
@@ -30,19 +30,27 @@ For instance:
       src={item.src}
     />
   ) : (
-    <Skeleton variant="rectangular" width={210} height={118} />
+    <Skeleton shape="rectangular" size="box" width={210} height={118} />
   );
 }
 ```
 
-## Variants
+## Shapes
 
-The component supports 4 shape 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:
 
 - `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.
+- `box`: scale the component to the size of the bounding box.
 
-{{"demo": "Variants.js"}}
+{{"demo": "Sizes.js"}}
 
 ## Animations
 
@@ -76,7 +84,7 @@ infer its width and height from them.
 
 ```jsx
 loading ? (
-  <Skeleton variant="circular">
+  <Skeleton shape="circular" size="box">
     <Avatar />
   </Skeleton>
 ) : (