Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[core] Remove unnecessary Box #38461

Merged
merged 1 commit into from
Aug 20, 2023
Merged

[core] Remove unnecessary Box #38461

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions .eslintrc.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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',
Expand Down
4 changes: 2 additions & 2 deletions docs/data/base/components/select/UnstyledSelectForm.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -24,7 +24,7 @@ export default function UnstyledSelectForm() {
<StyledOption value={20}>Twenty</StyledOption>
<StyledOption value={30}>Thirty</StyledOption>
</CustomSelect>
</Box>
</div>
</div>
);
}
Expand Down
4 changes: 2 additions & 2 deletions docs/data/base/components/select/UnstyledSelectForm.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand All @@ -24,7 +24,7 @@ export default function UnstyledSelectForm() {
<StyledOption value={20}>Twenty</StyledOption>
<StyledOption value={30}>Thirty</StyledOption>
</CustomSelect>
</Box>
</div>
</div>
);
}
Expand Down
4 changes: 2 additions & 2 deletions docs/data/joy/components/autocomplete/Playground.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ export default function Playground() {
});

return (
<Box>
<div>
<Box
sx={{
mt: 3,
Expand Down Expand Up @@ -277,7 +277,7 @@ export default function Playground() {
</ListItem>
</List>
</Box>
</Box>
</div>
);
}

Expand Down
5 changes: 2 additions & 3 deletions docs/data/joy/components/button/ButtonsSimple.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
4 changes: 2 additions & 2 deletions docs/data/joy/components/card/DribbbleShot.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -79,7 +79,7 @@ export default function DribbbleShot() {
<Favorite />
</IconButton>
</Box>
</Box>
</div>
</CardCover>
</Box>
<Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
Expand Down
4 changes: 2 additions & 2 deletions docs/data/joy/components/card/DribbbleShot.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand Down Expand Up @@ -79,7 +79,7 @@ export default function DribbbleShot() {
<Favorite />
</IconButton>
</Box>
</Box>
</div>
</CardCover>
</Box>
<Box sx={{ display: 'flex', gap: 1, alignItems: 'center' }}>
Expand Down
5 changes: 2 additions & 3 deletions docs/data/joy/components/checkbox/ExampleChoiceChipCheckbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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
Expand Down Expand Up @@ -65,7 +64,7 @@ export default function ExampleChoiceChipCheckbox() {
),
)}
</List>
</Box>
</div>
</Sheet>
);
}
5 changes: 2 additions & 3 deletions docs/data/joy/components/checkbox/ExampleChoiceChipCheckbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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
Expand Down Expand Up @@ -64,7 +63,7 @@ export default function ExampleChoiceChipCheckbox() {
),
)}
</List>
</Box>
</div>
</Sheet>
);
}
5 changes: 2 additions & 3 deletions docs/data/joy/components/checkbox/ExampleFilterMemberCheckbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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}`]: {
Expand Down Expand Up @@ -99,7 +98,7 @@ export default function ExampleFilterMemberCheckbox() {
/>
</ListItem>
</List>
</Box>
</div>
</Sheet>
);
}
5 changes: 2 additions & 3 deletions docs/data/joy/components/checkbox/ExampleFilterMemberCheckbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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}`]: {
Expand Down Expand Up @@ -101,7 +100,7 @@ export default function ExampleFilterMemberCheckbox() {
/>
</ListItem>
</List>
</Box>
</div>
</Sheet>
);
}
5 changes: 2 additions & 3 deletions docs/data/joy/components/checkbox/ExampleFilterStatusCheckbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -71,7 +70,7 @@ export default function ExampleFilterStatusCheckbox() {
/>
</ListItem>
</List>
</Box>
</div>
<Button
variant="outlined"
color="neutral"
Expand Down
5 changes: 2 additions & 3 deletions docs/data/joy/components/checkbox/ExampleFilterStatusCheckbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand Down Expand Up @@ -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
Expand Down Expand Up @@ -71,7 +70,7 @@ export default function ExampleFilterStatusCheckbox() {
/>
</ListItem>
</List>
</Box>
</div>
<Button
variant="outlined"
color="neutral"
Expand Down
9 changes: 4 additions & 5 deletions docs/data/joy/components/checkbox/GroupCheckboxes.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 />
Expand All @@ -23,7 +22,7 @@ export default function GroupCheckboxes() {
<Checkbox label="Mustard" />
</ListItem>
</List>
</Box>
</Box>
</div>
</div>
);
}
9 changes: 4 additions & 5 deletions docs/data/joy/components/checkbox/GroupCheckboxes.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 />
Expand All @@ -23,7 +22,7 @@ export default function GroupCheckboxes() {
<Checkbox label="Mustard" />
</ListItem>
</List>
</Box>
</Box>
</div>
</div>
);
}
4 changes: 2 additions & 2 deletions docs/data/joy/components/checkbox/GroupCheckboxes.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 />
Expand All @@ -13,4 +13,4 @@
<Checkbox label="Mustard" />
</ListItem>
</List>
</Box>
</div>
4 changes: 2 additions & 2 deletions docs/data/joy/components/checkbox/IconlessCheckbox.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -39,7 +39,7 @@ export default function IconlessCheckbox() {
</ListItem>
))}
</List>
</Box>
</div>
</Box>
);
}
4 changes: 2 additions & 2 deletions docs/data/joy/components/checkbox/IconlessCheckbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down Expand Up @@ -39,7 +39,7 @@ export default function IconlessCheckbox() {
</ListItem>
))}
</List>
</Box>
</div>
</Box>
);
}
5 changes: 2 additions & 3 deletions docs/data/joy/components/chip/BasicChip.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
5 changes: 2 additions & 3 deletions docs/data/joy/components/chip/BasicChip.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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>
);
}
Loading