[Badge] Simplify unstyled API (#31974)

mui · Mar 29, 2022 · bceda9f · bceda9f
1 parent bfe904a
commit bceda9f
Show file tree

Hide file tree

Showing 23 changed files with 175 additions and 307 deletions.
diff --git a/docs/data/base/components/badge/AccessibleBadges.js b/docs/data/base/components/badge/AccessibleBadges.js
@@ -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)`
@@ -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;

diff --git a/docs/data/base/components/badge/AccessibleBadges.tsx b/docs/data/base/components/badge/AccessibleBadges.tsx
@@ -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)`
@@ -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;

diff --git a/docs/data/base/components/badge/BadgeMax.js b/docs/data/base/components/badge/BadgeMax.js
@@ -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)`
@@ -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;

diff --git a/docs/data/base/components/badge/BadgeMax.tsx b/docs/data/base/components/badge/BadgeMax.tsx
@@ -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)`
@@ -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;

diff --git a/docs/data/base/components/badge/BadgeVisibility.js b/docs/data/base/components/badge/BadgeVisibility.js
@@ -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';
@@ -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;
@@ -45,7 +45,7 @@ const StyledBadge = styled(BadgeUnstyled)`
     transition: opacity 0.2s ease-in-out;
   }
 
-  & .MuiBadge-invisible {
+  & .${badgeUnstyledClasses.invisible} {
     opacity: 0;
     pointer-events: none;
   }
@@ -68,7 +68,7 @@ export default function BadgeVisibility() {
         '& > *': {
           marginBottom: 2,
         },
-        '& .MuiBadge-root': {
+        [`& .${badgeUnstyledClasses.root}`]: {
           marginRight: 4,
         },
       }}

diff --git a/docs/data/base/components/badge/BadgeVisibility.tsx b/docs/data/base/components/badge/BadgeVisibility.tsx
@@ -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';
@@ -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;
@@ -45,7 +45,7 @@ const StyledBadge = styled(BadgeUnstyled)`
     transition: opacity 0.2s ease-in-out;
   }
 
-  & .MuiBadge-invisible {
+  & .${badgeUnstyledClasses.invisible} {
     opacity: 0;
     pointer-events: none;
   }
@@ -68,7 +68,7 @@ export default function BadgeVisibility() {
         '& > *': {
           marginBottom: 2,
         },
-        '& .MuiBadge-root': {
+        [`& .${badgeUnstyledClasses.root}`]: {
           marginRight: 4,
         },
       }}

diff --git a/docs/data/base/components/badge/ShowZeroBadge.js b/docs/data/base/components/badge/ShowZeroBadge.js
@@ -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)`
@@ -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;
@@ -37,7 +37,7 @@ const StyledBadge = styled(BadgeUnstyled)`
     transform-origin: 100% 0;
   }
 
-  & .MuiBadge-invisible {
+  & .${badgeUnstyledClasses.invisible} {
     display: none;
   }
 `;

diff --git a/docs/data/base/components/badge/ShowZeroBadge.tsx b/docs/data/base/components/badge/ShowZeroBadge.tsx
@@ -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)`
@@ -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;
@@ -37,7 +37,7 @@ const StyledBadge = styled(BadgeUnstyled)`
     transform-origin: 100% 0;
   }
 
-  & .MuiBadge-invisible {
+  & .${badgeUnstyledClasses.invisible} {
     display: none;
   }
 `;

diff --git a/docs/data/base/components/badge/UnstyledBadge.js b/docs/data/base/components/badge/UnstyledBadge.js
@@ -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;
@@ -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;
@@ -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;
@@ -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>
   );
 }
diff --git a/docs/data/base/components/badge/UnstyledBadge.tsx b/docs/data/base/components/badge/UnstyledBadge.tsx
@@ -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;
@@ -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;
@@ -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;
@@ -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>
   );
 }
diff --git a/docs/data/base/components/badge/UnstyledBadge.tsx.preview b/docs/data/base/components/badge/UnstyledBadge.tsx.preview
@@ -1,6 +1,3 @@
 <StyledBadge badgeContent={5}>
   <BadgeContent />
-</StyledBadge>
-<StyledBadge badgeContent={5} variant="dot">
-  <BadgeContent />
 </StyledBadge>
diff --git a/docs/pages/base/api/badge-unstyled.json b/docs/pages/base/api/badge-unstyled.json
@@ -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 }" },
@@ -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",