From 34004c2f3043005ac23594880f3aa144d94a428d Mon Sep 17 00:00:00 2001
From: Olivier Tassinari <olivier.tassinari@gmail.com>
Date: Sun, 3 Sep 2023 02:08:17 +0200
Subject: [PATCH] [docs] Polish Slider demos (#38759)

---
 .../components/transitions/SimpleCollapse.js  |  8 ++---
 .../components/transitions/SimpleCollapse.tsx | 11 +++---
 .../components/transitions/SimpleFade.js      |  8 ++---
 .../components/transitions/SimpleFade.tsx     | 11 +++---
 .../components/transitions/SimpleGrow.js      |  8 ++---
 .../components/transitions/SimpleGrow.tsx     | 11 +++---
 .../components/transitions/SimpleSlide.js     | 33 +++++++++--------
 .../components/transitions/SimpleSlide.tsx    | 36 ++++++++++---------
 .../transitions/SimpleSlide.tsx.preview       | 16 ++++-----
 .../components/transitions/SimpleZoom.js      |  8 ++---
 .../components/transitions/SimpleZoom.tsx     | 11 +++---
 .../transitions/SlideFromContainer.js         | 22 +++++-------
 .../transitions/SlideFromContainer.tsx        | 27 ++++++--------
 .../SlideFromContainer.tsx.preview            |  4 +--
 .../transitions/TransitionGroupExample.js     | 19 ++++------
 .../transitions/TransitionGroupExample.tsx    | 19 ++++------
 .../TransitionGroupExample.tsx.preview        | 18 ++++------
 .../components/transitions/transitions.md     |  2 +-
 18 files changed, 126 insertions(+), 146 deletions(-)

diff --git a/docs/data/material/components/transitions/SimpleCollapse.js b/docs/data/material/components/transitions/SimpleCollapse.js
index f6bf94af24a295..8ab232a772b01d 100644
--- a/docs/data/material/components/transitions/SimpleCollapse.js
+++ b/docs/data/material/components/transitions/SimpleCollapse.js
@@ -6,18 +6,18 @@ import Collapse from '@mui/material/Collapse';
 import FormControlLabel from '@mui/material/FormControlLabel';
 
 const icon = (
-  <Paper sx={{ m: 1 }} elevation={4}>
-    <Box component="svg" sx={{ width: 100, height: 100 }}>
+  <Paper sx={{ m: 1, width: 100, height: 100 }} elevation={4}>
+    <svg>
       <Box
         component="polygon"
+        points="0,100 50,00, 100,100"
         sx={{
           fill: (theme) => theme.palette.common.white,
           stroke: (theme) => theme.palette.divider,
           strokeWidth: 1,
         }}
-        points="0,100 50,00, 100,100"
       />
-    </Box>
+    </svg>
   </Paper>
 );
 
diff --git a/docs/data/material/components/transitions/SimpleCollapse.tsx b/docs/data/material/components/transitions/SimpleCollapse.tsx
index b6c246cacf9608..8ab232a772b01d 100644
--- a/docs/data/material/components/transitions/SimpleCollapse.tsx
+++ b/docs/data/material/components/transitions/SimpleCollapse.tsx
@@ -4,21 +4,20 @@ import Switch from '@mui/material/Switch';
 import Paper from '@mui/material/Paper';
 import Collapse from '@mui/material/Collapse';
 import FormControlLabel from '@mui/material/FormControlLabel';
-import { Theme } from '@mui/material/styles';
 
 const icon = (
-  <Paper sx={{ m: 1 }} elevation={4}>
-    <Box component="svg" sx={{ width: 100, height: 100 }}>
+  <Paper sx={{ m: 1, width: 100, height: 100 }} elevation={4}>
+    <svg>
       <Box
         component="polygon"
+        points="0,100 50,00, 100,100"
         sx={{
-          fill: (theme: Theme) => theme.palette.common.white,
+          fill: (theme) => theme.palette.common.white,
           stroke: (theme) => theme.palette.divider,
           strokeWidth: 1,
         }}
-        points="0,100 50,00, 100,100"
       />
-    </Box>
+    </svg>
   </Paper>
 );
 
diff --git a/docs/data/material/components/transitions/SimpleFade.js b/docs/data/material/components/transitions/SimpleFade.js
index 9a6b966befe453..1914cfa7e7e95f 100644
--- a/docs/data/material/components/transitions/SimpleFade.js
+++ b/docs/data/material/components/transitions/SimpleFade.js
@@ -6,18 +6,18 @@ import Fade from '@mui/material/Fade';
 import FormControlLabel from '@mui/material/FormControlLabel';
 
 const icon = (
-  <Paper sx={{ m: 1 }} elevation={4}>
-    <Box component="svg" sx={{ width: 100, height: 100 }}>
+  <Paper sx={{ m: 1, width: 100, height: 100 }} elevation={4}>
+    <svg>
       <Box
         component="polygon"
+        points="0,100 50,00, 100,100"
         sx={{
           fill: (theme) => theme.palette.common.white,
           stroke: (theme) => theme.palette.divider,
           strokeWidth: 1,
         }}
-        points="0,100 50,00, 100,100"
       />
-    </Box>
+    </svg>
   </Paper>
 );
 
diff --git a/docs/data/material/components/transitions/SimpleFade.tsx b/docs/data/material/components/transitions/SimpleFade.tsx
index 833b84259e5b1f..1914cfa7e7e95f 100644
--- a/docs/data/material/components/transitions/SimpleFade.tsx
+++ b/docs/data/material/components/transitions/SimpleFade.tsx
@@ -4,21 +4,20 @@ import Switch from '@mui/material/Switch';
 import Paper from '@mui/material/Paper';
 import Fade from '@mui/material/Fade';
 import FormControlLabel from '@mui/material/FormControlLabel';
-import { Theme } from '@mui/material/styles';
 
 const icon = (
-  <Paper sx={{ m: 1 }} elevation={4}>
-    <Box component="svg" sx={{ width: 100, height: 100 }}>
+  <Paper sx={{ m: 1, width: 100, height: 100 }} elevation={4}>
+    <svg>
       <Box
         component="polygon"
+        points="0,100 50,00, 100,100"
         sx={{
-          fill: (theme: Theme) => theme.palette.common.white,
+          fill: (theme) => theme.palette.common.white,
           stroke: (theme) => theme.palette.divider,
           strokeWidth: 1,
         }}
-        points="0,100 50,00, 100,100"
       />
-    </Box>
+    </svg>
   </Paper>
 );
 
diff --git a/docs/data/material/components/transitions/SimpleGrow.js b/docs/data/material/components/transitions/SimpleGrow.js
index 526a4ad347511a..0badfb9bace765 100644
--- a/docs/data/material/components/transitions/SimpleGrow.js
+++ b/docs/data/material/components/transitions/SimpleGrow.js
@@ -6,18 +6,18 @@ import Grow from '@mui/material/Grow';
 import FormControlLabel from '@mui/material/FormControlLabel';
 
 const icon = (
-  <Paper sx={{ m: 1 }} elevation={4}>
-    <Box component="svg" sx={{ width: 100, height: 100 }}>
+  <Paper sx={{ m: 1, width: 100, height: 100 }} elevation={4}>
+    <svg>
       <Box
         component="polygon"
+        points="0,100 50,00, 100,100"
         sx={{
           fill: (theme) => theme.palette.common.white,
           stroke: (theme) => theme.palette.divider,
           strokeWidth: 1,
         }}
-        points="0,100 50,00, 100,100"
       />
-    </Box>
+    </svg>
   </Paper>
 );
 
diff --git a/docs/data/material/components/transitions/SimpleGrow.tsx b/docs/data/material/components/transitions/SimpleGrow.tsx
index 4629965b5f68c7..0badfb9bace765 100644
--- a/docs/data/material/components/transitions/SimpleGrow.tsx
+++ b/docs/data/material/components/transitions/SimpleGrow.tsx
@@ -4,21 +4,20 @@ import Switch from '@mui/material/Switch';
 import Paper from '@mui/material/Paper';
 import Grow from '@mui/material/Grow';
 import FormControlLabel from '@mui/material/FormControlLabel';
-import { Theme } from '@mui/material/styles';
 
 const icon = (
-  <Paper sx={{ m: 1 }} elevation={4}>
-    <Box component="svg" sx={{ width: 100, height: 100 }}>
+  <Paper sx={{ m: 1, width: 100, height: 100 }} elevation={4}>
+    <svg>
       <Box
         component="polygon"
+        points="0,100 50,00, 100,100"
         sx={{
-          fill: (theme: Theme) => theme.palette.common.white,
+          fill: (theme) => theme.palette.common.white,
           stroke: (theme) => theme.palette.divider,
           strokeWidth: 1,
         }}
-        points="0,100 50,00, 100,100"
       />
-    </Box>
+    </svg>
   </Paper>
 );
 
diff --git a/docs/data/material/components/transitions/SimpleSlide.js b/docs/data/material/components/transitions/SimpleSlide.js
index 826ac7fc8107f5..46040c795c5a58 100644
--- a/docs/data/material/components/transitions/SimpleSlide.js
+++ b/docs/data/material/components/transitions/SimpleSlide.js
@@ -6,18 +6,18 @@ import Slide from '@mui/material/Slide';
 import FormControlLabel from '@mui/material/FormControlLabel';
 
 const icon = (
-  <Paper sx={{ m: 1 }} elevation={4}>
-    <Box component="svg" sx={{ width: 100, height: 100 }}>
+  <Paper sx={{ m: 1, width: 100, height: 100 }} elevation={4}>
+    <svg>
       <Box
         component="polygon"
+        points="0,100 50,00, 100,100"
         sx={{
           fill: (theme) => theme.palette.common.white,
           stroke: (theme) => theme.palette.divider,
           strokeWidth: 1,
         }}
-        points="0,100 50,00, 100,100"
       />
-    </Box>
+    </svg>
   </Paper>
 );
 
@@ -29,16 +29,21 @@ export default function SimpleSlide() {
   };
 
   return (
-    <Box sx={{ height: 180 }}>
-      <Box sx={{ width: `calc(100px + 16px)`, position: 'relative', zIndex: 1 }}>
-        <FormControlLabel
-          control={<Switch checked={checked} onChange={handleChange} />}
-          label="Show"
-        />
-        <Slide direction="up" in={checked} mountOnEnter unmountOnExit>
-          {icon}
-        </Slide>
-      </Box>
+    <Box
+      sx={{
+        height: 180,
+        width: 130,
+        position: 'relative',
+        zIndex: 1,
+      }}
+    >
+      <FormControlLabel
+        control={<Switch checked={checked} onChange={handleChange} />}
+        label="Show"
+      />
+      <Slide direction="up" in={checked} mountOnEnter unmountOnExit>
+        {icon}
+      </Slide>
     </Box>
   );
 }
diff --git a/docs/data/material/components/transitions/SimpleSlide.tsx b/docs/data/material/components/transitions/SimpleSlide.tsx
index 9fea19c6f4aaeb..46040c795c5a58 100644
--- a/docs/data/material/components/transitions/SimpleSlide.tsx
+++ b/docs/data/material/components/transitions/SimpleSlide.tsx
@@ -4,21 +4,20 @@ import Switch from '@mui/material/Switch';
 import Paper from '@mui/material/Paper';
 import Slide from '@mui/material/Slide';
 import FormControlLabel from '@mui/material/FormControlLabel';
-import { Theme } from '@mui/material/styles';
 
 const icon = (
-  <Paper sx={{ m: 1 }} elevation={4}>
-    <Box component="svg" sx={{ width: 100, height: 100 }}>
+  <Paper sx={{ m: 1, width: 100, height: 100 }} elevation={4}>
+    <svg>
       <Box
         component="polygon"
+        points="0,100 50,00, 100,100"
         sx={{
-          fill: (theme: Theme) => theme.palette.common.white,
+          fill: (theme) => theme.palette.common.white,
           stroke: (theme) => theme.palette.divider,
           strokeWidth: 1,
         }}
-        points="0,100 50,00, 100,100"
       />
-    </Box>
+    </svg>
   </Paper>
 );
 
@@ -30,16 +29,21 @@ export default function SimpleSlide() {
   };
 
   return (
-    <Box sx={{ height: 180 }}>
-      <Box sx={{ width: `calc(100px + 16px)`, position: 'relative', zIndex: 1 }}>
-        <FormControlLabel
-          control={<Switch checked={checked} onChange={handleChange} />}
-          label="Show"
-        />
-        <Slide direction="up" in={checked} mountOnEnter unmountOnExit>
-          {icon}
-        </Slide>
-      </Box>
+    <Box
+      sx={{
+        height: 180,
+        width: 130,
+        position: 'relative',
+        zIndex: 1,
+      }}
+    >
+      <FormControlLabel
+        control={<Switch checked={checked} onChange={handleChange} />}
+        label="Show"
+      />
+      <Slide direction="up" in={checked} mountOnEnter unmountOnExit>
+        {icon}
+      </Slide>
     </Box>
   );
 }
diff --git a/docs/data/material/components/transitions/SimpleSlide.tsx.preview b/docs/data/material/components/transitions/SimpleSlide.tsx.preview
index 84ddd387a94c08..ed74e27912e1dc 100644
--- a/docs/data/material/components/transitions/SimpleSlide.tsx.preview
+++ b/docs/data/material/components/transitions/SimpleSlide.tsx.preview
@@ -1,9 +1,7 @@
-<Box sx={{ width: `calc(100px + 16px)`, position: 'relative', zIndex: 1 }}>
-  <FormControlLabel
-    control={<Switch checked={checked} onChange={handleChange} />}
-    label="Show"
-  />
-  <Slide direction="up" in={checked} mountOnEnter unmountOnExit>
-    {icon}
-  </Slide>
-</Box>
\ No newline at end of file
+<FormControlLabel
+  control={<Switch checked={checked} onChange={handleChange} />}
+  label="Show"
+/>
+<Slide direction="up" in={checked} mountOnEnter unmountOnExit>
+  {icon}
+</Slide>
\ No newline at end of file
diff --git a/docs/data/material/components/transitions/SimpleZoom.js b/docs/data/material/components/transitions/SimpleZoom.js
index 7bc478defa4246..f27863e4131131 100644
--- a/docs/data/material/components/transitions/SimpleZoom.js
+++ b/docs/data/material/components/transitions/SimpleZoom.js
@@ -6,18 +6,18 @@ import Zoom from '@mui/material/Zoom';
 import FormControlLabel from '@mui/material/FormControlLabel';
 
 const icon = (
-  <Paper sx={{ m: 1 }} elevation={4}>
-    <Box component="svg" sx={{ width: 100, height: 100 }}>
+  <Paper sx={{ m: 1, width: 100, height: 100 }} elevation={4}>
+    <svg>
       <Box
         component="polygon"
+        points="0,100 50,00, 100,100"
         sx={{
           fill: (theme) => theme.palette.common.white,
           stroke: (theme) => theme.palette.divider,
           strokeWidth: 1,
         }}
-        points="0,100 50,00, 100,100"
       />
-    </Box>
+    </svg>
   </Paper>
 );
 
diff --git a/docs/data/material/components/transitions/SimpleZoom.tsx b/docs/data/material/components/transitions/SimpleZoom.tsx
index 0c2ce78c4a2656..f27863e4131131 100644
--- a/docs/data/material/components/transitions/SimpleZoom.tsx
+++ b/docs/data/material/components/transitions/SimpleZoom.tsx
@@ -4,21 +4,20 @@ import Switch from '@mui/material/Switch';
 import Paper from '@mui/material/Paper';
 import Zoom from '@mui/material/Zoom';
 import FormControlLabel from '@mui/material/FormControlLabel';
-import { Theme } from '@mui/material/styles';
 
 const icon = (
-  <Paper sx={{ m: 1 }} elevation={4}>
-    <Box component="svg" sx={{ width: 100, height: 100 }}>
+  <Paper sx={{ m: 1, width: 100, height: 100 }} elevation={4}>
+    <svg>
       <Box
         component="polygon"
+        points="0,100 50,00, 100,100"
         sx={{
-          fill: (theme: Theme) => theme.palette.common.white,
+          fill: (theme) => theme.palette.common.white,
           stroke: (theme) => theme.palette.divider,
           strokeWidth: 1,
         }}
-        points="0,100 50,00, 100,100"
       />
-    </Box>
+    </svg>
   </Paper>
 );
 
diff --git a/docs/data/material/components/transitions/SlideFromContainer.js b/docs/data/material/components/transitions/SlideFromContainer.js
index 818d7564f71a33..72d3b337f2ca69 100644
--- a/docs/data/material/components/transitions/SlideFromContainer.js
+++ b/docs/data/material/components/transitions/SlideFromContainer.js
@@ -7,17 +7,17 @@ import FormControlLabel from '@mui/material/FormControlLabel';
 
 const icon = (
   <Paper sx={{ m: 1, width: 100, height: 100 }} elevation={4}>
-    <Box component="svg" sx={{ width: 100, height: 100 }}>
+    <svg>
       <Box
         component="polygon"
+        points="0,100 50,00, 100,100"
         sx={{
           fill: (theme) => theme.palette.common.white,
           stroke: (theme) => theme.palette.divider,
           strokeWidth: 1,
         }}
-        points="0,100 50,00, 100,100"
       />
-    </Box>
+    </svg>
   </Paper>
 );
 
@@ -32,23 +32,19 @@ export default function SlideFromContainer() {
   return (
     <Box
       sx={{
-        height: 180,
         width: 240,
-        display: 'flex',
-        padding: 2,
-        borderRadius: 1,
-        bgcolor: (theme) =>
-          theme.palette.mode === 'light' ? 'grey.100' : 'grey.900',
-        overflow: 'hidden',
+        borderRadius: 2,
+        border: '1px solid',
+        borderColor: 'divider',
+        backgroundColor: 'background.default',
       }}
-      ref={containerRef}
     >
-      <Box sx={{ width: 200 }}>
+      <Box sx={{ p: 2, height: 200, overflow: 'hidden' }} ref={containerRef}>
         <FormControlLabel
           control={<Switch checked={checked} onChange={handleChange} />}
           label="Show from target"
         />
-        <Slide direction="up" in={checked} container={containerRef.current}>
+        <Slide in={checked} container={containerRef.current}>
           {icon}
         </Slide>
       </Box>
diff --git a/docs/data/material/components/transitions/SlideFromContainer.tsx b/docs/data/material/components/transitions/SlideFromContainer.tsx
index f25d96106bff90..cd44a0b7583586 100644
--- a/docs/data/material/components/transitions/SlideFromContainer.tsx
+++ b/docs/data/material/components/transitions/SlideFromContainer.tsx
@@ -4,27 +4,26 @@ import Switch from '@mui/material/Switch';
 import Paper from '@mui/material/Paper';
 import Slide from '@mui/material/Slide';
 import FormControlLabel from '@mui/material/FormControlLabel';
-import { Theme } from '@mui/material/styles';
 
 const icon = (
   <Paper sx={{ m: 1, width: 100, height: 100 }} elevation={4}>
-    <Box component="svg" sx={{ width: 100, height: 100 }}>
+    <svg>
       <Box
         component="polygon"
+        points="0,100 50,00, 100,100"
         sx={{
-          fill: (theme: Theme) => theme.palette.common.white,
+          fill: (theme) => theme.palette.common.white,
           stroke: (theme) => theme.palette.divider,
           strokeWidth: 1,
         }}
-        points="0,100 50,00, 100,100"
       />
-    </Box>
+    </svg>
   </Paper>
 );
 
 export default function SlideFromContainer() {
   const [checked, setChecked] = React.useState(false);
-  const containerRef = React.useRef(null);
+  const containerRef = React.useRef<HTMLElement>(null);
 
   const handleChange = () => {
     setChecked((prev) => !prev);
@@ -33,23 +32,19 @@ export default function SlideFromContainer() {
   return (
     <Box
       sx={{
-        height: 180,
         width: 240,
-        display: 'flex',
-        padding: 2,
-        borderRadius: 1,
-        bgcolor: (theme) =>
-          theme.palette.mode === 'light' ? 'grey.100' : 'grey.900',
-        overflow: 'hidden',
+        borderRadius: 2,
+        border: '1px solid',
+        borderColor: 'divider',
+        backgroundColor: 'background.default',
       }}
-      ref={containerRef}
     >
-      <Box sx={{ width: 200 }}>
+      <Box sx={{ p: 2, height: 200, overflow: 'hidden' }} ref={containerRef}>
         <FormControlLabel
           control={<Switch checked={checked} onChange={handleChange} />}
           label="Show from target"
         />
-        <Slide direction="up" in={checked} container={containerRef.current}>
+        <Slide in={checked} container={containerRef.current}>
           {icon}
         </Slide>
       </Box>
diff --git a/docs/data/material/components/transitions/SlideFromContainer.tsx.preview b/docs/data/material/components/transitions/SlideFromContainer.tsx.preview
index acd2ce103a481d..2daaae75f57d57 100644
--- a/docs/data/material/components/transitions/SlideFromContainer.tsx.preview
+++ b/docs/data/material/components/transitions/SlideFromContainer.tsx.preview
@@ -1,9 +1,9 @@
-<Box sx={{ width: 200 }}>
+<Box sx={{ p: 2, height: 200, overflow: 'hidden' }} ref={containerRef}>
   <FormControlLabel
     control={<Switch checked={checked} onChange={handleChange} />}
     label="Show from target"
   />
-  <Slide direction="up" in={checked} container={containerRef.current}>
+  <Slide in={checked} container={containerRef.current}>
     {icon}
   </Slide>
 </Box>
\ No newline at end of file
diff --git a/docs/data/material/components/transitions/TransitionGroupExample.js b/docs/data/material/components/transitions/TransitionGroupExample.js
index b2bb3f54885123..b3a09a88de263b 100644
--- a/docs/data/material/components/transitions/TransitionGroupExample.js
+++ b/docs/data/material/components/transitions/TransitionGroupExample.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Collapse from '@mui/material/Collapse';
 import IconButton from '@mui/material/IconButton';
@@ -63,17 +62,13 @@ export default function TransitionGroupExample() {
   return (
     <div>
       {addFruitButton}
-      <Box sx={{ mt: 1 }}>
-        <List>
-          <TransitionGroup>
-            {fruitsInBasket.map((item) => (
-              <Collapse key={item}>
-                {renderItem({ item, handleRemoveFruit })}
-              </Collapse>
-            ))}
-          </TransitionGroup>
-        </List>
-      </Box>
+      <List sx={{ mt: 1 }}>
+        <TransitionGroup>
+          {fruitsInBasket.map((item) => (
+            <Collapse key={item}>{renderItem({ item, handleRemoveFruit })}</Collapse>
+          ))}
+        </TransitionGroup>
+      </List>
     </div>
   );
 }
diff --git a/docs/data/material/components/transitions/TransitionGroupExample.tsx b/docs/data/material/components/transitions/TransitionGroupExample.tsx
index 1e43e2bfdba619..e7a44ad24810bf 100644
--- a/docs/data/material/components/transitions/TransitionGroupExample.tsx
+++ b/docs/data/material/components/transitions/TransitionGroupExample.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
 import Button from '@mui/material/Button';
 import Collapse from '@mui/material/Collapse';
 import IconButton from '@mui/material/IconButton';
@@ -68,17 +67,13 @@ export default function TransitionGroupExample() {
   return (
     <div>
       {addFruitButton}
-      <Box sx={{ mt: 1 }}>
-        <List>
-          <TransitionGroup>
-            {fruitsInBasket.map((item) => (
-              <Collapse key={item}>
-                {renderItem({ item, handleRemoveFruit })}
-              </Collapse>
-            ))}
-          </TransitionGroup>
-        </List>
-      </Box>
+      <List sx={{ mt: 1 }}>
+        <TransitionGroup>
+          {fruitsInBasket.map((item) => (
+            <Collapse key={item}>{renderItem({ item, handleRemoveFruit })}</Collapse>
+          ))}
+        </TransitionGroup>
+      </List>
     </div>
   );
 }
diff --git a/docs/data/material/components/transitions/TransitionGroupExample.tsx.preview b/docs/data/material/components/transitions/TransitionGroupExample.tsx.preview
index ecc31de3c0f7b8..f1829ad7cdb1dc 100644
--- a/docs/data/material/components/transitions/TransitionGroupExample.tsx.preview
+++ b/docs/data/material/components/transitions/TransitionGroupExample.tsx.preview
@@ -1,12 +1,8 @@
 {addFruitButton}
-<Box sx={{ mt: 1 }}>
-  <List>
-    <TransitionGroup>
-      {fruitsInBasket.map((item) => (
-        <Collapse key={item}>
-          {renderItem({ item, handleRemoveFruit })}
-        </Collapse>
-      ))}
-    </TransitionGroup>
-  </List>
-</Box>
\ No newline at end of file
+<List sx={{ mt: 1 }}>
+  <TransitionGroup>
+    {fruitsInBasket.map((item) => (
+      <Collapse key={item}>{renderItem({ item, handleRemoveFruit })}</Collapse>
+    ))}
+  </TransitionGroup>
+</List>
\ No newline at end of file
diff --git a/docs/data/material/components/transitions/transitions.md b/docs/data/material/components/transitions/transitions.md
index 55819784de83f4..ddd9fea9546de5 100644
--- a/docs/data/material/components/transitions/transitions.md
+++ b/docs/data/material/components/transitions/transitions.md
@@ -54,7 +54,7 @@ Similarly, the `unmountOnExit` prop removes the component from the DOM after it
 The Slide component also accepts `container` prop, which is a reference to a DOM node.
 If this prop is set, the Slide component will slide from the edge of that DOM node.
 
-{{"demo": "SlideFromContainer.js"}}
+{{"demo": "SlideFromContainer.js", "bg": true}}
 
 ## Zoom