badge demos renamed

mui · Sep 22, 2023 · b3f41d1 · b3f41d1
1 parent bb5285b
commit b3f41d1
Show file tree

Hide file tree

Showing 17 changed files with 80 additions and 80 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 { Badge, badgeClasses } from '@mui/base/Badge';
+import { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';
 import MailIcon from '@mui/icons-material/Mail';
 
 function notificationsLabel(count) {
@@ -16,9 +16,9 @@ function notificationsLabel(count) {
 export default function AccessibleBadges() {
   return (
     <div aria-label={notificationsLabel(100)}>
-      <StyledBadge badgeContent={100}>
+      <Badge badgeContent={100}>
         <MailIcon />
-      </StyledBadge>
+      </Badge>
     </div>
   );
 }
@@ -31,7 +31,7 @@ const grey = {
   900: '#24292f',
 };
 
-const StyledBadge = styled(Badge)(
+const Badge = styled(BaseBadge)(
   ({ theme }) => `
   box-sizing: border-box;
   margin: 0;

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 { Badge, badgeClasses } from '@mui/base/Badge';
+import { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';
 import MailIcon from '@mui/icons-material/Mail';
 
 function notificationsLabel(count: number) {
@@ -16,9 +16,9 @@ function notificationsLabel(count: number) {
 export default function AccessibleBadges() {
   return (
     <div aria-label={notificationsLabel(100)}>
-      <StyledBadge badgeContent={100}>
+      <Badge badgeContent={100}>
         <MailIcon />
-      </StyledBadge>
+      </Badge>
     </div>
   );
 }
@@ -31,7 +31,7 @@ const grey = {
   900: '#24292f',
 };
 
-const StyledBadge = styled(Badge)(
+const Badge = styled(BaseBadge)(
   ({ theme }) => `
   box-sizing: border-box;
   margin: 0;

diff --git a/docs/data/base/components/badge/AccessibleBadges.tsx.preview b/docs/data/base/components/badge/AccessibleBadges.tsx.preview
@@ -1,3 +1,3 @@
-<StyledBadge badgeContent={100}>
+<Badge badgeContent={100}>
   <MailIcon />
-</StyledBadge>
+</Badge>
diff --git a/docs/data/base/components/badge/BadgeMax.js b/docs/data/base/components/badge/BadgeMax.js
@@ -1,21 +1,21 @@
 import * as React from 'react';
 import Stack from '@mui/material/Stack';
 import { styled } from '@mui/system';
-import { Badge, badgeClasses } from '@mui/base/Badge';
+import { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';
 import MailIcon from '@mui/icons-material/Mail';
 
 export default function BadgeMax() {
   return (
     <Stack spacing={4} direction="row">
-      <StyledBadge badgeContent={99}>
+      <Badge badgeContent={99}>
         <MailIcon />
-      </StyledBadge>
-      <StyledBadge badgeContent={100}>
+      </Badge>
+      <Badge badgeContent={100}>
         <MailIcon />
-      </StyledBadge>
-      <StyledBadge badgeContent={1000} max={999}>
+      </Badge>
+      <Badge badgeContent={1000} max={999}>
         <MailIcon />
-      </StyledBadge>
+      </Badge>
     </Stack>
   );
 }
@@ -28,7 +28,7 @@ const grey = {
   900: '#24292f',
 };
 
-const StyledBadge = styled(Badge)(
+const Badge = styled(BaseBadge)(
   ({ theme }) => `
   box-sizing: border-box;
   margin: 0;

diff --git a/docs/data/base/components/badge/BadgeMax.tsx b/docs/data/base/components/badge/BadgeMax.tsx
@@ -1,21 +1,21 @@
 import * as React from 'react';
 import Stack from '@mui/material/Stack';
 import { styled } from '@mui/system';
-import { Badge, badgeClasses } from '@mui/base/Badge';
+import { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';
 import MailIcon from '@mui/icons-material/Mail';
 
 export default function BadgeMax() {
   return (
     <Stack spacing={4} direction="row">
-      <StyledBadge badgeContent={99}>
+      <Badge badgeContent={99}>
         <MailIcon />
-      </StyledBadge>
-      <StyledBadge badgeContent={100}>
+      </Badge>
+      <Badge badgeContent={100}>
         <MailIcon />
-      </StyledBadge>
-      <StyledBadge badgeContent={1000} max={999}>
+      </Badge>
+      <Badge badgeContent={1000} max={999}>
         <MailIcon />
-      </StyledBadge>
+      </Badge>
     </Stack>
   );
 }
@@ -28,7 +28,7 @@ const grey = {
   900: '#24292f',
 };
 
-const StyledBadge = styled(Badge)(
+const Badge = styled(BaseBadge)(
   ({ theme }) => `
   box-sizing: border-box;
   margin: 0;

diff --git a/docs/data/base/components/badge/BadgeMax.tsx.preview b/docs/data/base/components/badge/BadgeMax.tsx.preview
@@ -1,9 +1,9 @@
-<StyledBadge badgeContent={99}>
+<Badge badgeContent={99}>
   <MailIcon />
-</StyledBadge>
-<StyledBadge badgeContent={100}>
+</Badge>
+<Badge badgeContent={100}>
   <MailIcon />
-</StyledBadge>
-<StyledBadge badgeContent={1000} max={999}>
+</Badge>
+<Badge badgeContent={1000} max={999}>
   <MailIcon />
-</StyledBadge>
+</Badge>
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 { Badge, badgeClasses } from '@mui/base/Badge';
+import { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import Button from '@mui/material/Button';
 import AddIcon from '@mui/icons-material/Add';
@@ -33,9 +33,9 @@ export default function BadgeVisibility() {
       }}
     >
       <div>
-        <StyledBadge badgeContent={count}>
+        <Badge badgeContent={count}>
           <MailIcon />
-        </StyledBadge>
+        </Badge>
         <ButtonGroup>
           <Button
             aria-label="reduce"
@@ -56,9 +56,9 @@ export default function BadgeVisibility() {
         </ButtonGroup>
       </div>
       <div>
-        <StyledBadge badgeContent={count} invisible={invisible}>
+        <Badge badgeContent={count} invisible={invisible}>
           <MailIcon />
-        </StyledBadge>
+        </Badge>
         <FormControlLabel
           sx={{ color: 'text.primary' }}
           control={<Switch checked={!invisible} onChange={handleBadgeVisibility} />}
@@ -77,7 +77,7 @@ const grey = {
   900: '#24292f',
 };
 
-const StyledBadge = styled(Badge)(
+const Badge = styled(BaseBadge)(
   ({ theme }) => `
   box-sizing: border-box;
   margin: 0;

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 { Badge, badgeClasses } from '@mui/base/Badge';
+import { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';
 import ButtonGroup from '@mui/material/ButtonGroup';
 import Button from '@mui/material/Button';
 import AddIcon from '@mui/icons-material/Add';
@@ -33,9 +33,9 @@ export default function BadgeVisibility() {
       }}
     >
       <div>
-        <StyledBadge badgeContent={count}>
+        <Badge badgeContent={count}>
           <MailIcon />
-        </StyledBadge>
+        </Badge>
         <ButtonGroup>
           <Button
             aria-label="reduce"
@@ -56,9 +56,9 @@ export default function BadgeVisibility() {
         </ButtonGroup>
       </div>
       <div>
-        <StyledBadge badgeContent={count} invisible={invisible}>
+        <Badge badgeContent={count} invisible={invisible}>
           <MailIcon />
-        </StyledBadge>
+        </Badge>
         <FormControlLabel
           sx={{ color: 'text.primary' }}
           control={<Switch checked={!invisible} onChange={handleBadgeVisibility} />}
@@ -77,7 +77,7 @@ const grey = {
   900: '#24292f',
 };
 
-const StyledBadge = styled(Badge)(
+const Badge = styled(BaseBadge)(
   ({ theme }) => `
   box-sizing: border-box;
   margin: 0;

diff --git a/docs/data/base/components/badge/ShowZeroBadge.js b/docs/data/base/components/badge/ShowZeroBadge.js
@@ -1,18 +1,18 @@
 import * as React from 'react';
 import Stack from '@mui/material/Stack';
 import { styled } from '@mui/system';
-import { Badge, badgeClasses } from '@mui/base/Badge';
+import { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';
 import MailIcon from '@mui/icons-material/Mail';
 
 export default function ShowZeroBadge() {
   return (
     <Stack spacing={4} direction="row">
-      <StyledBadge badgeContent={0}>
+      <Badge badgeContent={0}>
         <MailIcon />
-      </StyledBadge>
-      <StyledBadge badgeContent={0} showZero>
+      </Badge>
+      <Badge badgeContent={0} showZero>
         <MailIcon />
-      </StyledBadge>
+      </Badge>
     </Stack>
   );
 }
@@ -26,7 +26,7 @@ const grey = {
   900: '#24292f',
 };
 
-const StyledBadge = styled(Badge)(
+const Badge = styled(BaseBadge)(
   ({ theme }) => `
   box-sizing: border-box;
   margin: 0;

diff --git a/docs/data/base/components/badge/ShowZeroBadge.tsx b/docs/data/base/components/badge/ShowZeroBadge.tsx
@@ -1,18 +1,18 @@
 import * as React from 'react';
 import Stack from '@mui/material/Stack';
 import { styled } from '@mui/system';
-import { Badge, badgeClasses } from '@mui/base/Badge';
+import { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';
 import MailIcon from '@mui/icons-material/Mail';
 
 export default function ShowZeroBadge() {
   return (
     <Stack spacing={4} direction="row">
-      <StyledBadge badgeContent={0}>
+      <Badge badgeContent={0}>
         <MailIcon />
-      </StyledBadge>
-      <StyledBadge badgeContent={0} showZero>
+      </Badge>
+      <Badge badgeContent={0} showZero>
         <MailIcon />
-      </StyledBadge>
+      </Badge>
     </Stack>
   );
 }
@@ -26,7 +26,7 @@ const grey = {
   900: '#24292f',
 };
 
-const StyledBadge = styled(Badge)(
+const Badge = styled(BaseBadge)(
   ({ theme }) => `
   box-sizing: border-box;
   margin: 0;

diff --git a/docs/data/base/components/badge/ShowZeroBadge.tsx.preview b/docs/data/base/components/badge/ShowZeroBadge.tsx.preview
@@ -1,6 +1,6 @@
-<StyledBadge badgeContent={0}>
+<Badge badgeContent={0}>
   <MailIcon />
-</StyledBadge>
-<StyledBadge badgeContent={0} showZero>
+</Badge>
+<Badge badgeContent={0} showZero>
   <MailIcon />
-</StyledBadge>
+</Badge>
diff --git a/docs/data/base/components/badge/UnstyledBadge/system/index.js b/docs/data/base/components/badge/UnstyledBadge/system/index.js
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled, Box } from '@mui/system';
-import { Badge, badgeClasses } from '@mui/base/Badge';
+import { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';
 
 function BadgeContent() {
   return (
@@ -21,9 +21,9 @@ function BadgeContent() {
 
 export default function UnstyledBadge() {
   return (
-    <StyledBadge badgeContent={5}>
+    <Badge badgeContent={5}>
       <BadgeContent />
-    </StyledBadge>
+    </Badge>
   );
 }
 
@@ -37,7 +37,7 @@ const grey = {
   900: '#24292f',
 };
 
-const StyledBadge = styled(Badge)(
+const Badge = styled(BaseBadge)(
   ({ theme }) => `
   box-sizing: border-box;
   margin: 0;

diff --git a/docs/data/base/components/badge/UnstyledBadge/system/index.tsx b/docs/data/base/components/badge/UnstyledBadge/system/index.tsx
@@ -1,6 +1,6 @@
 import * as React from 'react';
 import { styled, Box } from '@mui/system';
-import { Badge, badgeClasses } from '@mui/base/Badge';
+import { Badge as BaseBadge, badgeClasses } from '@mui/base/Badge';
 
 function BadgeContent() {
   return (
@@ -21,9 +21,9 @@ function BadgeContent() {
 
 export default function UnstyledBadge() {
   return (
-    <StyledBadge badgeContent={5}>
+    <Badge badgeContent={5}>
       <BadgeContent />
-    </StyledBadge>
+    </Badge>
   );
 }
 
@@ -37,7 +37,7 @@ const grey = {
   900: '#24292f',
 };
 
-const StyledBadge = styled(Badge)(
+const Badge = styled(BaseBadge)(
   ({ theme }) => `
   box-sizing: border-box;
   margin: 0;

diff --git a/docs/data/base/components/badge/UnstyledBadge/system/index.tsx.preview b/docs/data/base/components/badge/UnstyledBadge/system/index.tsx.preview
@@ -1,3 +1,3 @@
-<StyledBadge badgeContent={5}>
+<Badge badgeContent={5}>
   <BadgeContent />
-</StyledBadge>
+</Badge>