[docs][material] Replace Box with Stack in applicable demos (#39174)

mui · Sep 27, 2023 · 0483728 · 0483728
1 parent 592855f
commit 0483728
Show file tree

Hide file tree

Showing 16 changed files with 48 additions and 144 deletions.
diff --git a/docs/data/material/components/icons/CreateSvgIcon.js b/docs/data/material/components/icons/CreateSvgIcon.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import { createSvgIcon } from '@mui/material/utils';
 
 const HomeIcon = createSvgIcon(
@@ -23,17 +23,11 @@ const PlusIcon = createSvgIcon(
 
 export default function CreateSvgIcon() {
   return (
-    <Box
-      sx={{
-        '& > :not(style)': {
-          m: 2,
-        },
-      }}
-    >
+    <Stack direction="row" spacing={3}>
       <HomeIcon />
       <HomeIcon color="primary" />
       <PlusIcon />
       <PlusIcon color="secondary" />
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/material/components/icons/CreateSvgIcon.tsx b/docs/data/material/components/icons/CreateSvgIcon.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import { createSvgIcon } from '@mui/material/utils';
 
 const HomeIcon = createSvgIcon(
@@ -23,17 +23,11 @@ const PlusIcon = createSvgIcon(
 
 export default function CreateSvgIcon() {
   return (
-    <Box
-      sx={{
-        '& > :not(style)': {
-          m: 2,
-        },
-      }}
-    >
+    <Stack direction="row" spacing={3}>
       <HomeIcon />
       <HomeIcon color="primary" />
       <PlusIcon />
       <PlusIcon color="secondary" />
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/material/components/icons/FontAwesomeIcon.js b/docs/data/material/components/icons/FontAwesomeIcon.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { loadCSS } from 'fg-loadcss';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import { green } from '@mui/material/colors';
 import Icon from '@mui/material/Icon';
 
@@ -18,13 +18,7 @@ export default function FontAwesomeIcon() {
   }, []);
 
   return (
-    <Box
-      sx={{
-        '& > :not(style)': {
-          m: 2,
-        },
-      }}
-    >
+    <Stack direction="row" spacing={4} alignItems="flex-end">
       <Icon baseClassName="fas" className="fa-plus-circle" />
       <Icon baseClassName="fas" className="fa-plus-circle" color="primary" />
       <Icon
@@ -34,6 +28,6 @@ export default function FontAwesomeIcon() {
       />
       <Icon baseClassName="fas" className="fa-plus-circle" fontSize="small" />
       <Icon baseClassName="fas" className="fa-plus-circle" sx={{ fontSize: 30 }} />
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/material/components/icons/FontAwesomeIcon.tsx b/docs/data/material/components/icons/FontAwesomeIcon.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { loadCSS } from 'fg-loadcss';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import { green } from '@mui/material/colors';
 import Icon from '@mui/material/Icon';
 
@@ -18,13 +18,7 @@ export default function FontAwesomeIcon() {
   }, []);
 
   return (
-    <Box
-      sx={{
-        '& > :not(style)': {
-          m: 2,
-        },
-      }}
-    >
+    <Stack direction="row" spacing={4} alignItems="flex-end">
       <Icon baseClassName="fas" className="fa-plus-circle" />
       <Icon baseClassName="fas" className="fa-plus-circle" color="primary" />
       <Icon
@@ -34,6 +28,6 @@ export default function FontAwesomeIcon() {
       />
       <Icon baseClassName="fas" className="fa-plus-circle" fontSize="small" />
       <Icon baseClassName="fas" className="fa-plus-circle" sx={{ fontSize: 30 }} />
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/material/components/icons/FontAwesomeIconSize.js b/docs/data/material/components/icons/FontAwesomeIconSize.js
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { loadCSS } from 'fg-loadcss';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import Icon from '@mui/material/Icon';
 import MdPhone from '@mui/icons-material/Phone';
 import Chip from '@mui/material/Chip';
@@ -35,17 +35,11 @@ export default function FontAwesomeIconSize() {
   }, []);
 
   return (
-    <Box
-      sx={{
-        '& > :not(style)': {
-          m: 1,
-        },
-      }}
-    >
+    <Stack direction="row" spacing={2}>
       <ThemeProvider theme={theme}>
         <Chip icon={<MdPhone />} label="Call me" />
         <Chip icon={<Icon className="fas fa-phone-alt" />} label="Call me" />
       </ThemeProvider>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/material/components/icons/FontAwesomeIconSize.tsx b/docs/data/material/components/icons/FontAwesomeIconSize.tsx
@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { loadCSS } from 'fg-loadcss';
 import { ThemeProvider, createTheme } from '@mui/material/styles';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import Icon from '@mui/material/Icon';
 import MdPhone from '@mui/icons-material/Phone';
 import Chip from '@mui/material/Chip';
@@ -35,17 +35,11 @@ export default function FontAwesomeIconSize() {
   }, []);
 
   return (
-    <Box
-      sx={{
-        '& > :not(style)': {
-          m: 1,
-        },
-      }}
-    >
+    <Stack direction="row" spacing={2}>
       <ThemeProvider theme={theme}>
         <Chip icon={<MdPhone />} label="Call me" />
         <Chip icon={<Icon className="fas fa-phone-alt" />} label="Call me" />
       </ThemeProvider>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/material/components/icons/FontAwesomeSvgIconDemo.js b/docs/data/material/components/icons/FontAwesomeSvgIconDemo.js
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { faEllipsisV } from '@fortawesome/free-solid-svg-icons/faEllipsisV';
 import { faInfo } from '@fortawesome/free-solid-svg-icons/faInfo';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import IconButton from '@mui/material/IconButton';
 import SvgIcon from '@mui/material/SvgIcon';
@@ -41,13 +41,7 @@ FontAwesomeSvgIcon.propTypes = {
 
 export default function FontAwesomeSvgIconDemo() {
   return (
-    <Box
-      sx={{
-        '& > :not(style)': {
-          m: 1,
-        },
-      }}
-    >
+    <Stack direction="row" spacing={2}>
       <IconButton aria-label="Example">
         <FontAwesomeIcon icon={faEllipsisV} />
       </IconButton>
@@ -60,6 +54,6 @@ export default function FontAwesomeSvgIconDemo() {
       <Button variant="contained" startIcon={<FontAwesomeSvgIcon icon={faInfo} />}>
         Example
       </Button>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/material/components/icons/FontAwesomeSvgIconDemo.tsx b/docs/data/material/components/icons/FontAwesomeSvgIconDemo.tsx
@@ -2,7 +2,7 @@ import * as React from 'react';
 import { faEllipsisV } from '@fortawesome/free-solid-svg-icons/faEllipsisV';
 import { faInfo } from '@fortawesome/free-solid-svg-icons/faInfo';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import Button from '@mui/material/Button';
 import IconButton from '@mui/material/IconButton';
 import SvgIcon from '@mui/material/SvgIcon';
@@ -42,13 +42,7 @@ const FontAwesomeSvgIcon = React.forwardRef<SVGSVGElement, FontAwesomeSvgIconPro
 
 export default function FontAwesomeSvgIconDemo() {
   return (
-    <Box
-      sx={{
-        '& > :not(style)': {
-          m: 1,
-        },
-      }}
-    >
+    <Stack direction="row" spacing={2}>
       <IconButton aria-label="Example">
         <FontAwesomeIcon icon={faEllipsisV} />
       </IconButton>
@@ -61,6 +55,6 @@ export default function FontAwesomeSvgIconDemo() {
       <Button variant="contained" startIcon={<FontAwesomeSvgIcon icon={faInfo} />}>
         Example
       </Button>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/material/components/icons/Icons.js b/docs/data/material/components/icons/Icons.js
@@ -1,22 +1,16 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import { green } from '@mui/material/colors';
 import Icon from '@mui/material/Icon';
 
 export default function Icons() {
   return (
-    <Box
-      sx={{
-        '& > :not(style)': {
-          m: 2,
-        },
-      }}
-    >
+    <Stack direction="row" spacing={3}>
       <Icon>add_circle</Icon>
       <Icon color="primary">add_circle</Icon>
       <Icon sx={{ color: green[500] }}>add_circle</Icon>
       <Icon fontSize="small">add_circle</Icon>
       <Icon sx={{ fontSize: 30 }}>add_circle</Icon>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/material/components/icons/Icons.tsx b/docs/data/material/components/icons/Icons.tsx
@@ -1,22 +1,16 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import { green } from '@mui/material/colors';
 import Icon from '@mui/material/Icon';
 
 export default function Icons() {
   return (
-    <Box
-      sx={{
-        '& > :not(style)': {
-          m: 2,
-        },
-      }}
-    >
+    <Stack direction="row" spacing={3}>
       <Icon>add_circle</Icon>
       <Icon color="primary">add_circle</Icon>
       <Icon sx={{ color: green[500] }}>add_circle</Icon>
       <Icon fontSize="small">add_circle</Icon>
       <Icon sx={{ fontSize: 30 }}>add_circle</Icon>
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/material/components/icons/SvgIconsColor.js b/docs/data/material/components/icons/SvgIconsColor.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import { pink } from '@mui/material/colors';
 import SvgIcon from '@mui/material/SvgIcon';
 
@@ -13,20 +13,14 @@ function HomeIcon(props) {
 
 export default function SvgIconsColor() {
   return (
-    <Box
-      sx={{
-        '& > :not(style)': {
-          m: 2,
-        },
-      }}
-    >
+    <Stack direction="row" spacing={3}>
       <HomeIcon />
       <HomeIcon color="primary" />
       <HomeIcon color="secondary" />
       <HomeIcon color="success" />
       <HomeIcon color="action" />
       <HomeIcon color="disabled" />
       <HomeIcon sx={{ color: pink[500] }} />
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/material/components/icons/SvgIconsColor.tsx b/docs/data/material/components/icons/SvgIconsColor.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import { pink } from '@mui/material/colors';
 import SvgIcon, { SvgIconProps } from '@mui/material/SvgIcon';
 
@@ -13,20 +13,14 @@ function HomeIcon(props: SvgIconProps) {
 
 export default function SvgIconsColor() {
   return (
-    <Box
-      sx={{
-        '& > :not(style)': {
-          m: 2,
-        },
-      }}
-    >
+    <Stack direction="row" spacing={3}>
       <HomeIcon />
       <HomeIcon color="primary" />
       <HomeIcon color="secondary" />
       <HomeIcon color="success" />
       <HomeIcon color="action" />
       <HomeIcon color="disabled" />
       <HomeIcon sx={{ color: pink[500] }} />
-    </Box>
+    </Stack>
   );
 }
diff --git a/docs/data/material/components/icons/SvgIconsSize.js b/docs/data/material/components/icons/SvgIconsSize.js
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
+import Stack from '@mui/material/Stack';
 import SvgIcon from '@mui/material/SvgIcon';
 
 function HomeIcon(props) {
@@ -12,17 +12,11 @@ function HomeIcon(props) {
 
 export default function SvgIconsSize() {
   return (
-    <Box
-      sx={{
-        '& > :not(style)': {
-          m: 2,
-        },
-      }}
-    >
+    <Stack direction="row" spacing={3} alignItems="flex-end">
       <HomeIcon fontSize="small" />
       <HomeIcon />
       <HomeIcon fontSize="large" />
       <HomeIcon sx={{ fontSize: 40 }} />
-    </Box>
+    </Stack>
   );
 }