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

[Badge] Simplify unstyled API #31974

Merged
merged 6 commits into from
Mar 29, 2022
Merged

[Badge] Simplify unstyled API #31974

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
411f0e4
Clean BagdeUnstyled
michaldudak Mar 24, 2022
c2b67b7
Restore Material's Badge functionality
michaldudak Mar 24, 2022
9efe3d8
Update unstyled demos
michaldudak Mar 24, 2022
0f20a5d
Do not use `classes` prop in BadgeUnstyled
michaldudak Mar 29, 2022
dd54099
Merge remote-tracking branch 'upstream/master' into badge-api
michaldudak Mar 29, 2022
4955b39
Rename class prefix to BaseBadge
michaldudak Mar 29, 2022
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
4 changes: 2 additions & 2 deletions docs/data/base/components/badge/AccessibleBadges.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import { styled } from '@mui/system';
import BadgeUnstyled from '@mui/base/BadgeUnstyled';
import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled';
import MailIcon from '@mui/icons-material/Mail';

const StyledBadge = styled(BadgeUnstyled)`
Expand All @@ -15,7 +15,7 @@ const StyledBadge = styled(BadgeUnstyled)`
display: inline-block;
line-height: 1;

& .MuiBadge-badge {
& .${badgeUnstyledClasses.badge} {
z-index: auto;
min-width: 20px;
height: 20px;
Expand Down
4 changes: 2 additions & 2 deletions docs/data/base/components/badge/AccessibleBadges.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import { styled } from '@mui/system';
import BadgeUnstyled from '@mui/base/BadgeUnstyled';
import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled';
import MailIcon from '@mui/icons-material/Mail';

const StyledBadge = styled(BadgeUnstyled)`
Expand All @@ -15,7 +15,7 @@ const StyledBadge = styled(BadgeUnstyled)`
display: inline-block;
line-height: 1;

& .MuiBadge-badge {
& .${badgeUnstyledClasses.badge} {
z-index: auto;
min-width: 20px;
height: 20px;
Expand Down
4 changes: 2 additions & 2 deletions docs/data/base/components/badge/BadgeMax.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import Stack from '@mui/material/Stack';
import { styled } from '@mui/system';
import BadgeUnstyled from '@mui/base/BadgeUnstyled';
import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled';
import MailIcon from '@mui/icons-material/Mail';

const StyledBadge = styled(BadgeUnstyled)`
Expand All @@ -16,7 +16,7 @@ const StyledBadge = styled(BadgeUnstyled)`
display: inline-block;
line-height: 1;

& .MuiBadge-badge {
& .${badgeUnstyledClasses.badge} {
z-index: auto;
min-width: 20px;
height: 20px;
Expand Down
4 changes: 2 additions & 2 deletions docs/data/base/components/badge/BadgeMax.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import Stack from '@mui/material/Stack';
import { styled } from '@mui/system';
import BadgeUnstyled from '@mui/base/BadgeUnstyled';
import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled';
import MailIcon from '@mui/icons-material/Mail';

const StyledBadge = styled(BadgeUnstyled)`
Expand All @@ -16,7 +16,7 @@ const StyledBadge = styled(BadgeUnstyled)`
display: inline-block;
line-height: 1;

& .MuiBadge-badge {
& .${badgeUnstyledClasses.badge} {
z-index: auto;
min-width: 20px;
height: 20px;
Expand Down
8 changes: 4 additions & 4 deletions docs/data/base/components/badge/BadgeVisibility.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import { styled } from '@mui/system';
import BadgeUnstyled from '@mui/base/BadgeUnstyled';
import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled';
import ButtonGroup from '@mui/material/ButtonGroup';
import Button from '@mui/material/Button';
import AddIcon from '@mui/icons-material/Add';
Expand All @@ -22,7 +22,7 @@ const StyledBadge = styled(BadgeUnstyled)`
display: inline-block;
line-height: 1;

& .MuiBadge-badge {
& .${badgeUnstyledClasses.badge} {
z-index: auto;
min-width: 20px;
height: 20px;
Expand All @@ -45,7 +45,7 @@ const StyledBadge = styled(BadgeUnstyled)`
transition: opacity 0.2s ease-in-out;
}

& .MuiBadge-invisible {
& .${badgeUnstyledClasses.invisible} {
opacity: 0;
pointer-events: none;
}
Expand All @@ -68,7 +68,7 @@ export default function BadgeVisibility() {
'& > *': {
marginBottom: 2,
},
'& .MuiBadge-root': {
[`& .${badgeUnstyledClasses.root}`]: {
marginRight: 4,
},
}}
Expand Down
8 changes: 4 additions & 4 deletions docs/data/base/components/badge/BadgeVisibility.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import Box from '@mui/material/Box';
import { styled } from '@mui/system';
import BadgeUnstyled from '@mui/base/BadgeUnstyled';
import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled';
import ButtonGroup from '@mui/material/ButtonGroup';
import Button from '@mui/material/Button';
import AddIcon from '@mui/icons-material/Add';
Expand All @@ -22,7 +22,7 @@ const StyledBadge = styled(BadgeUnstyled)`
display: inline-block;
line-height: 1;

& .MuiBadge-badge {
& .${badgeUnstyledClasses.badge} {
z-index: auto;
min-width: 20px;
height: 20px;
Expand All @@ -45,7 +45,7 @@ const StyledBadge = styled(BadgeUnstyled)`
transition: opacity 0.2s ease-in-out;
}

& .MuiBadge-invisible {
& .${badgeUnstyledClasses.invisible} {
opacity: 0;
pointer-events: none;
}
Expand All @@ -68,7 +68,7 @@ export default function BadgeVisibility() {
'& > *': {
marginBottom: 2,
},
'& .MuiBadge-root': {
[`& .${badgeUnstyledClasses.root}`]: {
marginRight: 4,
},
}}
Expand Down
6 changes: 3 additions & 3 deletions docs/data/base/components/badge/ShowZeroBadge.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import Stack from '@mui/material/Stack';
import { styled } from '@mui/system';
import BadgeUnstyled from '@mui/base/BadgeUnstyled';
import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled';
import MailIcon from '@mui/icons-material/Mail';

const StyledBadge = styled(BadgeUnstyled)`
Expand All @@ -16,7 +16,7 @@ const StyledBadge = styled(BadgeUnstyled)`
display: inline-block;
line-height: 1;

& .MuiBadge-badge {
& .${badgeUnstyledClasses.badge} {
z-index: auto;
min-width: 20px;
height: 20px;
Expand All @@ -37,7 +37,7 @@ const StyledBadge = styled(BadgeUnstyled)`
transform-origin: 100% 0;
}

& .MuiBadge-invisible {
& .${badgeUnstyledClasses.invisible} {
display: none;
}
`;
Expand Down
6 changes: 3 additions & 3 deletions docs/data/base/components/badge/ShowZeroBadge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import * as React from 'react';
import Stack from '@mui/material/Stack';
import { styled } from '@mui/system';
import BadgeUnstyled from '@mui/base/BadgeUnstyled';
import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled';
import MailIcon from '@mui/icons-material/Mail';

const StyledBadge = styled(BadgeUnstyled)`
Expand All @@ -16,7 +16,7 @@ const StyledBadge = styled(BadgeUnstyled)`
display: inline-block;
line-height: 1;

& .MuiBadge-badge {
& .${badgeUnstyledClasses.badge} {
z-index: auto;
min-width: 20px;
height: 20px;
Expand All @@ -37,7 +37,7 @@ const StyledBadge = styled(BadgeUnstyled)`
transform-origin: 100% 0;
}

& .MuiBadge-invisible {
& .${badgeUnstyledClasses.invisible} {
display: none;
}
`;
Expand Down
29 changes: 5 additions & 24 deletions docs/data/base/components/badge/UnstyledBadge.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import { styled, Box } from '@mui/system';
import BadgeUnstyled from '@mui/base/BadgeUnstyled';
import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled';

const StyledBadge = styled(BadgeUnstyled)`
box-sizing: border-box;
Expand All @@ -15,7 +15,7 @@ const StyledBadge = styled(BadgeUnstyled)`
display: inline-block;
line-height: 1;

& .MuiBadge-badge {
& .${badgeUnstyledClasses.badge} {
z-index: auto;
min-width: 20px;
height: 20px;
Expand All @@ -29,20 +29,6 @@ const StyledBadge = styled(BadgeUnstyled)`
background: #07f;
border-radius: 10px;
box-shadow: 0 0 0 1px #fff;
}

& .MuiBadge-dot {
padding: 0;
z-index: auto;
min-width: 6px;
width: 6px;
height: 6px;
background: #07f;
border-radius: 100%;
box-shadow: 0 0 0 1px #fff;
}

& .MuiBadge-anchorOriginTopRight {
position: absolute;
top: 0;
right: 0;
Expand All @@ -69,13 +55,8 @@ function BadgeContent() {

export default function UnstyledBadge() {
return (
<Box sx={{ '& > :not(style) + :not(style)': { ml: 4 } }}>
<StyledBadge badgeContent={5}>
<BadgeContent />
</StyledBadge>
<StyledBadge badgeContent={5} variant="dot">
<BadgeContent />
</StyledBadge>
</Box>
<StyledBadge badgeContent={5}>
<BadgeContent />
</StyledBadge>
);
}
29 changes: 5 additions & 24 deletions docs/data/base/components/badge/UnstyledBadge.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import * as React from 'react';
import { styled, Box } from '@mui/system';
import BadgeUnstyled from '@mui/base/BadgeUnstyled';
import BadgeUnstyled, { badgeUnstyledClasses } from '@mui/base/BadgeUnstyled';

const StyledBadge = styled(BadgeUnstyled)`
box-sizing: border-box;
Expand All @@ -15,7 +15,7 @@ const StyledBadge = styled(BadgeUnstyled)`
display: inline-block;
line-height: 1;

& .MuiBadge-badge {
& .${badgeUnstyledClasses.badge} {
z-index: auto;
min-width: 20px;
height: 20px;
Expand All @@ -29,20 +29,6 @@ const StyledBadge = styled(BadgeUnstyled)`
background: #07f;
border-radius: 10px;
box-shadow: 0 0 0 1px #fff;
}

& .MuiBadge-dot {
padding: 0;
z-index: auto;
min-width: 6px;
width: 6px;
height: 6px;
background: #07f;
border-radius: 100%;
box-shadow: 0 0 0 1px #fff;
}

& .MuiBadge-anchorOriginTopRight {
position: absolute;
top: 0;
right: 0;
Expand All @@ -69,13 +55,8 @@ function BadgeContent() {

export default function UnstyledBadge() {
return (
<Box sx={{ '& > :not(style) + :not(style)': { ml: 4 } }}>
<StyledBadge badgeContent={5}>
<BadgeContent />
</StyledBadge>
<StyledBadge badgeContent={5} variant="dot">
<BadgeContent />
</StyledBadge>
</Box>
<StyledBadge badgeContent={5}>
<BadgeContent />
</StyledBadge>
);
}
3 changes: 0 additions & 3 deletions docs/data/base/components/badge/UnstyledBadge.tsx.preview
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,3 @@
<StyledBadge badgeContent={5}>
<BadgeContent />
</StyledBadge>
<StyledBadge badgeContent={5} variant="dot">
<BadgeContent />
</StyledBadge>
37 changes: 2 additions & 35 deletions docs/pages/base/api/badge-unstyled.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,7 @@
{
"props": {
"anchorOrigin": {
"type": {
"name": "shape",
"description": "{ horizontal: 'left'<br>&#124;&nbsp;'right', vertical: 'bottom'<br>&#124;&nbsp;'top' }"
},
"default": "{\n vertical: 'top',\n horizontal: 'right',\n}"
},
"badgeContent": { "type": { "name": "node" } },
"children": { "type": { "name": "node" } },
"classes": { "type": { "name": "object" } },
"component": { "type": { "name": "elementType" } },
"components": {
"type": { "name": "shape", "description": "{ Badge?: elementType, Root?: elementType }" },
Expand All @@ -21,35 +13,10 @@
},
"invisible": { "type": { "name": "bool" } },
"max": { "type": { "name": "number" }, "default": "99" },
"showZero": { "type": { "name": "bool" } },
"variant": { "type": { "name": "string" }, "default": "'standard'" }
"showZero": { "type": { "name": "bool" } }
},
"name": "BadgeUnstyled",
"styles": {
"classes": [
"root",
"badge",
"dot",
"standard",
"anchorOriginTopRight",
"anchorOriginBottomRight",
"anchorOriginTopLeft",
"anchorOriginBottomLeft",
"invisible"
],
"globalClasses": {
"root": "MuiBadge-root",
"badge": "MuiBadge-badge",
"dot": "MuiBadge-dot",
"standard": "MuiBadge-standard",
"anchorOriginTopRight": "MuiBadge-anchorOriginTopRight",
"anchorOriginBottomRight": "MuiBadge-anchorOriginBottomRight",
"anchorOriginTopLeft": "MuiBadge-anchorOriginTopLeft",
"anchorOriginBottomLeft": "MuiBadge-anchorOriginBottomLeft",
"invisible": "MuiBadge-invisible"
},
"name": null
},
"styles": { "classes": [], "globalClasses": {}, "name": null },
"spread": true,
"forwardsRefTo": "HTMLSpanElement",
"filename": "/packages/mui-base/src/BadgeUnstyled/BadgeUnstyled.js",
Expand Down
Loading