[core] Remove unnecessary Box

mui · Aug 13, 2023 · 9b57304 · 9b57304
1 parent 7770430
commit 9b57304
Show file tree

Hide file tree

Showing 116 changed files with 337 additions and 286 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -125,6 +125,7 @@ module.exports = {
 
     'material-ui/docgen-ignore-before-comment': 'error',
     'material-ui/rules-of-use-theme-variants': 'error',
+    'material-ui/no-empty-box': 'error',
 
     'react-hooks/exhaustive-deps': ['error', { additionalHooks: 'useEnhancedEffect' }],
     'react-hooks/rules-of-hooks': 'error',

diff --git a/benchmark/browser/scenarios/box-baseline/index.js b/benchmark/browser/scenarios/box-baseline/index.js
@@ -1,3 +1,4 @@
+/* eslint-disable material-ui/no-empty-box */
 import * as React from 'react';
 import emotionStyled from '@emotion/styled';
 

diff --git a/benchmark/server/scenarios/styles.js b/benchmark/server/scenarios/styles.js
@@ -1,3 +1,4 @@
+/* eslint-disable material-ui/no-empty-box */
 /* eslint-disable no-console */
 import Benchmark from 'benchmark';
 import * as React from 'react';

diff --git a/docs/data/base/components/select/UnstyledSelectForm.js b/docs/data/base/components/select/UnstyledSelectForm.js
@@ -15,7 +15,7 @@ export default function UnstyledSelectForm() {
           <StyledOption value={30}>Thirty</StyledOption>
         </CustomSelect>
       </Box>
-      <Box>
+      <div>
         <Label htmlFor="named-select">
           With the <code>name</code> prop
         </Label>
@@ -24,7 +24,7 @@ export default function UnstyledSelectForm() {
           <StyledOption value={20}>Twenty</StyledOption>
           <StyledOption value={30}>Thirty</StyledOption>
         </CustomSelect>
-      </Box>
+      </div>
     </div>
   );
 }

diff --git a/docs/data/base/components/select/UnstyledSelectForm.tsx b/docs/data/base/components/select/UnstyledSelectForm.tsx
@@ -15,7 +15,7 @@ export default function UnstyledSelectForm() {
           <StyledOption value={30}>Thirty</StyledOption>
         </CustomSelect>
       </Box>
-      <Box>
+      <div>
         <Label htmlFor="named-select">
           With the <code>name</code> prop
         </Label>
@@ -24,7 +24,7 @@ export default function UnstyledSelectForm() {
           <StyledOption value={20}>Twenty</StyledOption>
           <StyledOption value={30}>Thirty</StyledOption>
         </CustomSelect>
-      </Box>
+      </div>
     </div>
   );
 }

diff --git a/docs/data/joy/components/autocomplete/Playground.js b/docs/data/joy/components/autocomplete/Playground.js
@@ -24,7 +24,7 @@ export default function Playground() {
   });
 
   return (
-    <Box>
+    <div>
       <Box
         sx={{
           mt: 3,
@@ -277,7 +277,7 @@ export default function Playground() {
           </ListItem>
         </List>
       </Box>
-    </Box>
+    </div>
   );
 }
 

diff --git a/docs/data/joy/components/button/ButtonsSimple.js b/docs/data/joy/components/button/ButtonsSimple.js
@@ -1,12 +1,11 @@
 import * as React from 'react';
 import Button from '@mui/joy/Button';
-import Box from '@mui/joy/Box';
 
 export default function ButtonsSimple() {
   return (
-    <Box>
+    <div>
       <Button>Button</Button>
       <Button disabled>Disabled</Button>
-    </Box>
+    </div>
   );
 }
diff --git a/docs/data/joy/components/card/DribbbleShot.js b/docs/data/joy/components/card/DribbbleShot.js
@@ -46,7 +46,7 @@ export default function DribbbleShot() {
           }}
         >
           {/* The first box acts as a container that inherits style from the CardCover */}
-          <Box>
+          <div>
             <Box
               sx={{
                 p: 2,
@@ -79,7 +79,7 @@ export default function DribbbleShot() {
                 <Favorite />
               </IconButton>
             </Box>
-          </Box>
+          </div>
         </CardCover>
       </Box>
       <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>

diff --git a/docs/data/joy/components/card/DribbbleShot.tsx b/docs/data/joy/components/card/DribbbleShot.tsx
@@ -46,7 +46,7 @@ export default function DribbbleShot() {
           }}
         >
           {/* The first box acts as a container that inherits style from the CardCover */}
-          <Box>
+          <div>
             <Box
               sx={{
                 p: 2,
@@ -79,7 +79,7 @@ export default function DribbbleShot() {
                 <Favorite />
               </IconButton>
             </Box>
-          </Box>
+          </div>
         </CardCover>
       </Box>
       <Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>

diff --git a/docs/data/joy/components/checkbox/ExampleChoiceChipCheckbox.js b/docs/data/joy/components/checkbox/ExampleChoiceChipCheckbox.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import Box from '@mui/joy/Box';
 import Checkbox from '@mui/joy/Checkbox';
 import List from '@mui/joy/List';
 import ListItem from '@mui/joy/ListItem';
@@ -14,7 +13,7 @@ export default function ExampleChoiceChipCheckbox() {
       <Typography id="rank" level="body-sm" fontWeight="lg" sx={{ mb: 1.5 }}>
         Choose amenities
       </Typography>
-      <Box role="group" aria-labelledby="rank">
+      <div role="group" aria-labelledby="rank">
         <List
           orientation="horizontal"
           wrap
@@ -65,7 +64,7 @@ export default function ExampleChoiceChipCheckbox() {
             ),
           )}
         </List>
-      </Box>
+      </div>
     </Sheet>
   );
 }
diff --git a/docs/data/joy/components/checkbox/ExampleChoiceChipCheckbox.tsx b/docs/data/joy/components/checkbox/ExampleChoiceChipCheckbox.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import Box from '@mui/joy/Box';
 import Checkbox from '@mui/joy/Checkbox';
 import List from '@mui/joy/List';
 import ListItem from '@mui/joy/ListItem';
@@ -14,7 +13,7 @@ export default function ExampleChoiceChipCheckbox() {
       <Typography id="rank" level="body-sm" fontWeight="lg" sx={{ mb: 1.5 }}>
         Choose amenities
       </Typography>
-      <Box role="group" aria-labelledby="rank">
+      <div role="group" aria-labelledby="rank">
         <List
           orientation="horizontal"
           wrap
@@ -64,7 +63,7 @@ export default function ExampleChoiceChipCheckbox() {
             ),
           )}
         </List>
-      </Box>
+      </div>
     </Sheet>
   );
 }
diff --git a/docs/data/joy/components/checkbox/ExampleFilterMemberCheckbox.js b/docs/data/joy/components/checkbox/ExampleFilterMemberCheckbox.js
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import Avatar from '@mui/joy/Avatar';
-import Box from '@mui/joy/Box';
 import Checkbox, { checkboxClasses } from '@mui/joy/Checkbox';
 import List from '@mui/joy/List';
 import ListItem from '@mui/joy/ListItem';
@@ -37,7 +36,7 @@ export default function ExampleFilterMemberCheckbox() {
       >
         Team members
       </Typography>
-      <Box role="group" aria-labelledby="member">
+      <div role="group" aria-labelledby="member">
         <List
           sx={{
             [`& .${checkboxClasses.root}`]: {
@@ -99,7 +98,7 @@ export default function ExampleFilterMemberCheckbox() {
             />
           </ListItem>
         </List>
-      </Box>
+      </div>
     </Sheet>
   );
 }
diff --git a/docs/data/joy/components/checkbox/ExampleFilterMemberCheckbox.tsx b/docs/data/joy/components/checkbox/ExampleFilterMemberCheckbox.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import Avatar from '@mui/joy/Avatar';
-import Box from '@mui/joy/Box';
 import Checkbox, { checkboxClasses } from '@mui/joy/Checkbox';
 import List from '@mui/joy/List';
 import ListItem from '@mui/joy/ListItem';
@@ -39,7 +38,7 @@ export default function ExampleFilterMemberCheckbox() {
       >
         Team members
       </Typography>
-      <Box role="group" aria-labelledby="member">
+      <div role="group" aria-labelledby="member">
         <List
           sx={{
             [`& .${checkboxClasses.root}`]: {
@@ -101,7 +100,7 @@ export default function ExampleFilterMemberCheckbox() {
             />
           </ListItem>
         </List>
-      </Box>
+      </div>
     </Sheet>
   );
 }
diff --git a/docs/data/joy/components/checkbox/ExampleFilterStatusCheckbox.js b/docs/data/joy/components/checkbox/ExampleFilterStatusCheckbox.js
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import Box from '@mui/joy/Box';
 import Button from '@mui/joy/Button';
 import Checkbox from '@mui/joy/Checkbox';
 import List from '@mui/joy/List';
@@ -28,7 +27,7 @@ export default function ExampleFilterStatusCheckbox() {
       >
         Filter status
       </Typography>
-      <Box role="group" aria-labelledby="filter-status">
+      <div role="group" aria-labelledby="filter-status">
         <List>
           <ListItem variant="soft" color="danger">
             <Checkbox
@@ -71,7 +70,7 @@ export default function ExampleFilterStatusCheckbox() {
             />
           </ListItem>
         </List>
-      </Box>
+      </div>
       <Button
         variant="outlined"
         color="neutral"

diff --git a/docs/data/joy/components/checkbox/ExampleFilterStatusCheckbox.tsx b/docs/data/joy/components/checkbox/ExampleFilterStatusCheckbox.tsx
@@ -1,5 +1,4 @@
 import * as React from 'react';
-import Box from '@mui/joy/Box';
 import Button from '@mui/joy/Button';
 import Checkbox from '@mui/joy/Checkbox';
 import List from '@mui/joy/List';
@@ -28,7 +27,7 @@ export default function ExampleFilterStatusCheckbox() {
       >
         Filter status
       </Typography>
-      <Box role="group" aria-labelledby="filter-status">
+      <div role="group" aria-labelledby="filter-status">
         <List>
           <ListItem variant="soft" color="danger">
             <Checkbox
@@ -71,7 +70,7 @@ export default function ExampleFilterStatusCheckbox() {
             />
           </ListItem>
         </List>
-      </Box>
+      </div>
       <Button
         variant="outlined"
         color="neutral"

diff --git a/docs/data/joy/components/checkbox/GroupCheckboxes.js b/docs/data/joy/components/checkbox/GroupCheckboxes.js
@@ -1,17 +1,16 @@
 import * as React from 'react';
-import Box from '@mui/joy/Box';
 import Checkbox from '@mui/joy/Checkbox';
 import List from '@mui/joy/List';
 import ListItem from '@mui/joy/ListItem';
 import Typography from '@mui/joy/Typography';
 
 export default function GroupCheckboxes() {
   return (
-    <Box>
+    <div>
       <Typography id="sandwich-group" level="body-sm" fontWeight="lg" mb={1}>
         Sandwich Dressings
       </Typography>
-      <Box role="group" aria-labelledby="sandwich-group">
+      <div role="group" aria-labelledby="sandwich-group">
         <List size="sm">
           <ListItem>
             <Checkbox label="Lettuce" defaultChecked />
@@ -23,7 +22,7 @@ export default function GroupCheckboxes() {
             <Checkbox label="Mustard" />
           </ListItem>
         </List>
-      </Box>
-    </Box>
+      </div>
+    </div>
   );
 }
diff --git a/docs/data/joy/components/checkbox/GroupCheckboxes.tsx b/docs/data/joy/components/checkbox/GroupCheckboxes.tsx
@@ -1,17 +1,16 @@
 import * as React from 'react';
-import Box from '@mui/joy/Box';
 import Checkbox from '@mui/joy/Checkbox';
 import List from '@mui/joy/List';
 import ListItem from '@mui/joy/ListItem';
 import Typography from '@mui/joy/Typography';
 
 export default function GroupCheckboxes() {
   return (
-    <Box>
+    <div>
       <Typography id="sandwich-group" level="body-sm" fontWeight="lg" mb={1}>
         Sandwich Dressings
       </Typography>
-      <Box role="group" aria-labelledby="sandwich-group">
+      <div role="group" aria-labelledby="sandwich-group">
         <List size="sm">
           <ListItem>
             <Checkbox label="Lettuce" defaultChecked />
@@ -23,7 +22,7 @@ export default function GroupCheckboxes() {
             <Checkbox label="Mustard" />
           </ListItem>
         </List>
-      </Box>
-    </Box>
+      </div>
+    </div>
   );
 }
diff --git a/docs/data/joy/components/checkbox/GroupCheckboxes.tsx.preview b/docs/data/joy/components/checkbox/GroupCheckboxes.tsx.preview
@@ -1,7 +1,7 @@
 <Typography id="sandwich-group" level="body-sm" fontWeight="lg" mb={1}>
   Sandwich Dressings
 </Typography>
-<Box role="group" aria-labelledby="sandwich-group">
+<div role="group" aria-labelledby="sandwich-group">
   <List size="sm">
     <ListItem>
       <Checkbox label="Lettuce" defaultChecked />
@@ -13,4 +13,4 @@
       <Checkbox label="Mustard" />
     </ListItem>
   </List>
-</Box>
+</div>
diff --git a/docs/data/joy/components/checkbox/IconlessCheckbox.js b/docs/data/joy/components/checkbox/IconlessCheckbox.js
@@ -11,7 +11,7 @@ export default function IconlessCheckbox() {
       <Typography id="topping" level="body-sm" fontWeight="lg" mb={2}>
         Pizza toppings
       </Typography>
-      <Box role="group" aria-labelledby="topping">
+      <div role="group" aria-labelledby="topping">
         <List
           orientation="horizontal"
           wrap
@@ -39,7 +39,7 @@ export default function IconlessCheckbox() {
             </ListItem>
           ))}
         </List>
-      </Box>
+      </div>
     </Box>
   );
 }
diff --git a/docs/data/joy/components/checkbox/IconlessCheckbox.tsx b/docs/data/joy/components/checkbox/IconlessCheckbox.tsx
@@ -11,7 +11,7 @@ export default function IconlessCheckbox() {
       <Typography id="topping" level="body-sm" fontWeight="lg" mb={2}>
         Pizza toppings
       </Typography>
-      <Box role="group" aria-labelledby="topping">
+      <div role="group" aria-labelledby="topping">
         <List
           orientation="horizontal"
           wrap
@@ -39,7 +39,7 @@ export default function IconlessCheckbox() {
             </ListItem>
           ))}
         </List>
-      </Box>
+      </div>
     </Box>
   );
 }
diff --git a/docs/data/joy/components/chip/BasicChip.js b/docs/data/joy/components/chip/BasicChip.js
@@ -1,11 +1,10 @@
 import * as React from 'react';
-import Box from '@mui/joy/Box';
 import Chip from '@mui/joy/Chip';
 
 export default function BasicChip() {
   return (
-    <Box>
+    <div>
       <Chip>This is a chip</Chip>
-    </Box>
+    </div>
   );
 }