[core] Remove unecessary Box

mui · Jul 29, 2023 · 84f90c3 · 84f90c3
1 parent c7e01db
commit 84f90c3
Show file tree

Hide file tree

Showing 16 changed files with 32 additions and 45 deletions.
diff --git a/docs/data/charts/stacking/StackOffsetDemo.js b/docs/data/charts/stacking/StackOffsetDemo.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
@@ -39,7 +38,7 @@ export default function StackOffsetDemo() {
   const [hasNegativeValue, setHasNegativeValue] = React.useState(true);
 
   return (
-    <Box>
+    <div>
       <Stack direction="row">
         <TextField
           sx={{ minWidth: 150, mr: 5 }}
@@ -68,6 +67,6 @@ export default function StackOffsetDemo() {
         height={300}
         series={getSeries({ hasNegativeValue, stackOffset })}
       />
-    </Box>
+    </div>
   );
 }
diff --git a/docs/data/charts/stacking/StackOffsetDemo.tsx b/docs/data/charts/stacking/StackOffsetDemo.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
@@ -45,7 +44,7 @@ export default function StackOffsetDemo() {
   const [hasNegativeValue, setHasNegativeValue] = React.useState(true);
 
   return (
-    <Box>
+    <div>
       <Stack direction="row">
         <TextField
           sx={{ minWidth: 150, mr: 5 }}
@@ -74,6 +73,6 @@ export default function StackOffsetDemo() {
         height={300}
         series={getSeries({ hasNegativeValue, stackOffset })}
       />
-    </Box>
+    </div>
   );
 }
diff --git a/docs/data/charts/stacking/StackOrderDemo.js b/docs/data/charts/stacking/StackOrderDemo.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
@@ -93,7 +92,7 @@ export default function StackOrderDemo() {
 
   const modifiedSeries = [{ ...series[0], stackOrder }, ...series.slice(1)];
   return (
-    <Box>
+    <div>
       <Stack direction="row">
         <TextField
           sx={{ minWidth: 150, mr: 5 }}
@@ -130,6 +129,6 @@ export default function StackOrderDemo() {
           '--ChartsLegend-itemWidth': '110px',
         }}
       />
-    </Box>
+    </div>
   );
 }
diff --git a/docs/data/charts/stacking/StackOrderDemo.tsx b/docs/data/charts/stacking/StackOrderDemo.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 import TextField from '@mui/material/TextField';
 import MenuItem from '@mui/material/MenuItem';
@@ -88,7 +87,7 @@ export default function StackOrderDemo() {
 
   const modifiedSeries = [{ ...series[0], stackOrder }, ...series.slice(1)];
   return (
-    <Box>
+    <div>
       <Stack direction="row">
         <TextField
           sx={{ minWidth: 150, mr: 5 }}
@@ -125,6 +124,6 @@ export default function StackOrderDemo() {
           '--ChartsLegend-itemWidth': '110px',
         }}
       />
-    </Box>
+    </div>
   );
 }
diff --git a/docs/data/charts/styling/MuiColorTemplate.js b/docs/data/charts/styling/MuiColorTemplate.js
@@ -6,7 +6,6 @@ import MenuItem from '@mui/material/MenuItem';
 import Typography from '@mui/material/Typography';
 import Paper from '@mui/material/Paper';
 import Button from '@mui/material/Button';
-import Box from '@mui/material/Box';
 import Brightness4Icon from '@mui/icons-material/Brightness4';
 import Brightness7Icon from '@mui/icons-material/Brightness7';
 import { Chance } from 'chance';
@@ -93,7 +92,7 @@ export default function MuiColorTemplate() {
             {...legendPlacement}
           />
           <Stack direction="row" alignItems="center" justifyContent="space-evenly">
-            <Box>
+            <div>
               <Button
                 sx={{ ml: 1 }}
                 onClick={() =>
@@ -106,7 +105,7 @@ export default function MuiColorTemplate() {
               >
                 {colorMode} mode
               </Button>
-            </Box>
+            </div>
             <TextField
               select
               value={colorScheme}

diff --git a/docs/data/charts/styling/MuiColorTemplate.tsx b/docs/data/charts/styling/MuiColorTemplate.tsx
@@ -6,7 +6,6 @@ import MenuItem from '@mui/material/MenuItem';
 import Typography from '@mui/material/Typography';
 import Paper from '@mui/material/Paper';
 import Button from '@mui/material/Button';
-import Box from '@mui/material/Box';
 import Brightness4Icon from '@mui/icons-material/Brightness4';
 import Brightness7Icon from '@mui/icons-material/Brightness7';
 import { Chance } from 'chance';
@@ -100,7 +99,7 @@ export default function MuiColorTemplate() {
             {...legendPlacement}
           />
           <Stack direction="row" alignItems="center" justifyContent="space-evenly">
-            <Box>
+            <div>
               <Button
                 sx={{ ml: 1 }}
                 onClick={() =>
@@ -113,7 +112,7 @@ export default function MuiColorTemplate() {
               >
                 {colorMode} mode
               </Button>
-            </Box>
+            </div>
             <TextField
               select
               value={colorScheme}

diff --git a/docs/data/charts/tooltip/ElementHighlights.js b/docs/data/charts/tooltip/ElementHighlights.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Switch from '@mui/material/Switch';
@@ -104,7 +103,7 @@ export default function ElementHighlights() {
 
   return (
     <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1}>
-      <Box>
+      <div>
         <ToggleButtonGroup
           value={chartType}
           exclusive
@@ -170,7 +169,7 @@ export default function ElementHighlights() {
             }))}
           />
         )}
-      </Box>
+      </div>
       <Stack
         direction={{ xs: 'row', sm: 'column' }}
         justifyContent="center"

diff --git a/docs/data/charts/tooltip/ElementHighlights.tsx b/docs/data/charts/tooltip/ElementHighlights.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 import FormControlLabel from '@mui/material/FormControlLabel';
 import Switch from '@mui/material/Switch';
@@ -104,7 +103,7 @@ export default function ElementHighlights() {
 
   return (
     <Stack direction={{ xs: 'column', sm: 'row' }} spacing={1}>
-      <Box>
+      <div>
         <ToggleButtonGroup
           value={chartType}
           exclusive
@@ -167,7 +166,7 @@ export default function ElementHighlights() {
             }))}
           />
         )}
-      </Box>
+      </div>
       <Stack
         direction={{ xs: 'row', sm: 'column' }}
         justifyContent="center"

diff --git a/docs/data/charts/tooltip/Interaction.js b/docs/data/charts/tooltip/Interaction.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 import { BarChart } from '@mui/x-charts/BarChart';
 
@@ -21,11 +20,11 @@ const barChartsParams = {
 };
 export default function Interaction() {
   return (
-    <Box>
+    <div>
       <Stack direction="column">
         <BarChart {...barChartsParams} tooltip={{ trigger: 'axis' }} />
         <BarChart {...barChartsParams} tooltip={{ trigger: 'item' }} />
       </Stack>
-    </Box>
+    </div>
   );
 }
diff --git a/docs/data/charts/tooltip/Interaction.tsx b/docs/data/charts/tooltip/Interaction.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import Box from '@mui/material/Box';
 import Stack from '@mui/material/Stack';
 import { BarChart } from '@mui/x-charts/BarChart';
 
@@ -21,11 +20,11 @@ const barChartsParams = {
 };
 export default function Interaction() {
   return (
-    <Box>
+    <div>
       <Stack direction="column">
         <BarChart {...barChartsParams} tooltip={{ trigger: 'axis' }} />
         <BarChart {...barChartsParams} tooltip={{ trigger: 'item' }} />
       </Stack>
-    </Box>
+    </div>
   );
 }
diff --git a/docs/data/data-grid/accessibility/accessibility.md b/docs/data/data-grid/accessibility/accessibility.md
@@ -62,11 +62,11 @@ Use the `tabIndex` prop passed to the `renderCell` params to determine if the re
 
 ```jsx
 renderCell: (params) => (
-  <Box>
+  <div>
     <Link tabIndex={params.tabIndex} href="/#">
       more info
     </Link>
-  </Box>
+  </div>
 );
 ```
 

diff --git a/docs/data/data-grid/master-detail/DetailPanelAutoHeight.js b/docs/data/data-grid/master-detail/DetailPanelAutoHeight.js
@@ -113,11 +113,11 @@ function DetailPanelContent({ row: rowProp }) {
               </Typography>
             </Grid>
           </Grid>
-          <Box>
+          <div>
             <Button variant="outlined" size="small" onClick={addProduct}>
               Add Product
             </Button>
-          </Box>
+          </div>
           <DataGridPro
             density="compact"
             autoHeight

diff --git a/docs/data/data-grid/master-detail/DetailPanelAutoHeight.tsx b/docs/data/data-grid/master-detail/DetailPanelAutoHeight.tsx
@@ -116,11 +116,11 @@ function DetailPanelContent({ row: rowProp }: { row: Customer }) {
               >{`${rowProp.city}, ${rowProp.country.label}`}</Typography>
             </Grid>
           </Grid>
-          <Box>
+          <div>
             <Button variant="outlined" size="small" onClick={addProduct}>
               Add Product
             </Button>
-          </Box>
+          </div>
           <DataGridPro
             density="compact"
             autoHeight

diff --git a/docs/data/data-grid/row-height/ExpandableCells.js b/docs/data/data-grid/row-height/ExpandableCells.js
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { DataGrid, GridToolbar } from '@mui/x-data-grid';
-import Box from '@mui/material/Box';
 import Link from '@mui/material/Link';
 import {
   randomInt,
@@ -28,7 +27,7 @@ function ExpandableCell({ value }) {
   const [expanded, setExpanded] = React.useState(false);
 
   return (
-    <Box>
+    <div>
       {expanded ? value : value.slice(0, 200)}&nbsp;
       {value.length > 200 && (
         // eslint-disable-next-line jsx-a11y/anchor-is-valid
@@ -41,7 +40,7 @@ function ExpandableCell({ value }) {
           {expanded ? 'view less' : 'view more'}
         </Link>
       )}
-    </Box>
+    </div>
   );
 }
 

diff --git a/docs/data/data-grid/row-height/ExpandableCells.tsx b/docs/data/data-grid/row-height/ExpandableCells.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { DataGrid, GridRenderCellParams, GridToolbar } from '@mui/x-data-grid';
-import Box from '@mui/material/Box';
 import Link from '@mui/material/Link';
 import {
   randomInt,
@@ -28,7 +27,7 @@ function ExpandableCell({ value }: GridRenderCellParams) {
   const [expanded, setExpanded] = React.useState(false);
 
   return (
-    <Box>
+    <div>
       {expanded ? value : value.slice(0, 200)}&nbsp;
       {value.length > 200 && (
         // eslint-disable-next-line jsx-a11y/anchor-is-valid
@@ -41,7 +40,7 @@ function ExpandableCell({ value }: GridRenderCellParams) {
           {expanded ? 'view less' : 'view more'}
         </Link>
       )}
-    </Box>
+    </div>
   );
 }
 

diff --git a/docs/src/modules/components/ToggleOptions.tsx b/docs/src/modules/components/ToggleOptions.tsx
@@ -3,7 +3,6 @@ import ToggleButtonGroup from '@mui/material/ToggleButtonGroup';
 import ToggleButton from '@mui/material/ToggleButton';
 import MenuItem from '@mui/material/MenuItem';
 import Select from '@mui/material/Select';
-import Box from '@mui/material/Box';
 import Typography from '@mui/material/Typography';
 
 export default function ToggleOptions(props: {
@@ -16,7 +15,7 @@ export default function ToggleOptions(props: {
   const { options, label, value, setValue, autoColapse } = props;
 
   return (
-    <Box>
+    <div>
       <Typography
         role="presentation"
         sx={{
@@ -95,6 +94,6 @@ export default function ToggleOptions(props: {
           );
         })}
       </Select>
-    </Box>
+    </div>
   );
 }
-Original file line number
+Diff line change
@@ Expand Up @@
     ```jsx
     renderCell: (params) => (
-      <Box>
+      <div>
         <Link tabIndex={params.tabIndex} href="/#">
           more info
         </Link>
-      </Box>
+      </div>
     );
     ```
@@ Expand Down @@