[docs] Polish Slider demos (mui#38759)

xcode-it · Sep 11, 2023 · 34004c2 · 34004c2
1 parent 24d21e7
commit 34004c2
Show file tree

Hide file tree

Showing 18 changed files with 126 additions and 146 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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>
+<FormControlLabel
+  control={<Switch checked={checked} onChange={handleChange} />}
+  label="Show"
+/>
+<Slide direction="up" in={checked} mountOnEnter unmountOnExit>
+  {icon}
+</Slide>
diff --git 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
@@ -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
@@ -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>