[docs] Move BadgeUnstyled docs to Base space (#31872)

mui · Mar 21, 2022 · 13d3aa0 · 13d3aa0
1 parent 4aff57b
commit 13d3aa0
Show file tree

Hide file tree

Showing 23 changed files with 657 additions and 112 deletions.
diff --git a/docs/data/base/components/badge/AccessibleBadges.js b/docs/data/base/components/badge/AccessibleBadges.js
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { styled } from '@mui/system';
+import BadgeUnstyled from '@mui/base/BadgeUnstyled';
+import MailIcon from '@mui/icons-material/Mail';
+
+const StyledBadge = styled(BadgeUnstyled)`
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 14px;
+  list-style: none;
+  font-family: IBM Plex Sans, sans-serif;
+  position: relative;
+  display: inline-block;
+  line-height: 1;
+
+  & .MuiBadge-badge {
+    z-index: auto;
+    min-width: 20px;
+    height: 20px;
+    padding: 0 6px;
+    color: #fff;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 20px;
+    white-space: nowrap;
+    text-align: center;
+    background: #07f;
+    border-radius: 10px;
+    box-shadow: 0 0 0 1px #fff;
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(50%, -50%);
+    transform-origin: 100% 0;
+  }
+`;
+
+function notificationsLabel(count) {
+  if (count === 0) {
+    return 'no notifications';
+  }
+  if (count > 99) {
+    return 'more than 99 notifications';
+  }
+  return `${count} notifications`;
+}
+
+export default function AccessibleBadges() {
+  return (
+    <div aria-label={notificationsLabel(100)}>
+      <StyledBadge badgeContent={100}>
+        <MailIcon />
+      </StyledBadge>
+    </div>
+  );
+}
diff --git a/docs/data/base/components/badge/AccessibleBadges.tsx b/docs/data/base/components/badge/AccessibleBadges.tsx
@@ -0,0 +1,58 @@
+import * as React from 'react';
+import { styled } from '@mui/system';
+import BadgeUnstyled from '@mui/base/BadgeUnstyled';
+import MailIcon from '@mui/icons-material/Mail';
+
+const StyledBadge = styled(BadgeUnstyled)`
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 14px;
+  list-style: none;
+  font-family: IBM Plex Sans, sans-serif;
+  position: relative;
+  display: inline-block;
+  line-height: 1;
+
+  & .MuiBadge-badge {
+    z-index: auto;
+    min-width: 20px;
+    height: 20px;
+    padding: 0 6px;
+    color: #fff;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 20px;
+    white-space: nowrap;
+    text-align: center;
+    background: #07f;
+    border-radius: 10px;
+    box-shadow: 0 0 0 1px #fff;
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(50%, -50%);
+    transform-origin: 100% 0;
+  }
+`;
+
+function notificationsLabel(count: number) {
+  if (count === 0) {
+    return 'no notifications';
+  }
+  if (count > 99) {
+    return 'more than 99 notifications';
+  }
+  return `${count} notifications`;
+}
+
+export default function AccessibleBadges() {
+  return (
+    <div aria-label={notificationsLabel(100)}>
+      <StyledBadge badgeContent={100}>
+        <MailIcon />
+      </StyledBadge>
+    </div>
+  );
+}
diff --git a/docs/data/base/components/badge/AccessibleBadges.tsx.preview b/docs/data/base/components/badge/AccessibleBadges.tsx.preview
@@ -0,0 +1,3 @@
+<StyledBadge badgeContent={100}>
+  <MailIcon />
+</StyledBadge>
diff --git a/docs/data/base/components/badge/BadgeMax.js b/docs/data/base/components/badge/BadgeMax.js
@@ -0,0 +1,55 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import { styled } from '@mui/system';
+import BadgeUnstyled from '@mui/base/BadgeUnstyled';
+import MailIcon from '@mui/icons-material/Mail';
+
+const StyledBadge = styled(BadgeUnstyled)`
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 14px;
+  list-style: none;
+  font-family: IBM Plex Sans, sans-serif;
+  position: relative;
+  display: inline-block;
+  line-height: 1;
+
+  & .MuiBadge-badge {
+    z-index: auto;
+    min-width: 20px;
+    height: 20px;
+    padding: 0 6px;
+    color: #fff;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 20px;
+    white-space: nowrap;
+    text-align: center;
+    background: #07f;
+    border-radius: 10px;
+    box-shadow: 0 0 0 1px #fff;
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(50%, -50%);
+    transform-origin: 100% 0;
+  }
+`;
+
+export default function BadgeMax() {
+  return (
+    <Stack spacing={4} direction="row">
+      <StyledBadge badgeContent={99}>
+        <MailIcon />
+      </StyledBadge>
+      <StyledBadge badgeContent={100}>
+        <MailIcon />
+      </StyledBadge>
+      <StyledBadge badgeContent={1000} max={999}>
+        <MailIcon />
+      </StyledBadge>
+    </Stack>
+  );
+}
diff --git a/docs/data/base/components/badge/BadgeMax.tsx b/docs/data/base/components/badge/BadgeMax.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react';
+import Stack from '@mui/material/Stack';
+import { styled } from '@mui/system';
+import BadgeUnstyled from '@mui/base/BadgeUnstyled';
+import MailIcon from '@mui/icons-material/Mail';
+
+const StyledBadge = styled(BadgeUnstyled)`
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 14px;
+  list-style: none;
+  font-family: IBM Plex Sans, sans-serif;
+  position: relative;
+  display: inline-block;
+  line-height: 1;
+
+  & .MuiBadge-badge {
+    z-index: auto;
+    min-width: 20px;
+    height: 20px;
+    padding: 0 6px;
+    color: #fff;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 20px;
+    white-space: nowrap;
+    text-align: center;
+    background: #07f;
+    border-radius: 10px;
+    box-shadow: 0 0 0 1px #fff;
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(50%, -50%);
+    transform-origin: 100% 0;
+  }
+`;
+
+export default function BadgeMax() {
+  return (
+    <Stack spacing={4} direction="row">
+      <StyledBadge badgeContent={99}>
+        <MailIcon />
+      </StyledBadge>
+      <StyledBadge badgeContent={100}>
+        <MailIcon />
+      </StyledBadge>
+      <StyledBadge badgeContent={1000} max={999}>
+        <MailIcon />
+      </StyledBadge>
+    </Stack>
+  );
+}
diff --git a/docs/data/base/components/badge/BadgeMax.tsx.preview b/docs/data/base/components/badge/BadgeMax.tsx.preview
@@ -0,0 +1,9 @@
+<StyledBadge badgeContent={99}>
+  <MailIcon />
+</StyledBadge>
+<StyledBadge badgeContent={100}>
+  <MailIcon />
+</StyledBadge>
+<StyledBadge badgeContent={1000} max={999}>
+  <MailIcon />
+</StyledBadge>
diff --git a/docs/data/base/components/badge/BadgeVisibility.js b/docs/data/base/components/badge/BadgeVisibility.js
@@ -0,0 +1,111 @@
+import * as React from 'react';
+import Box from '@mui/material/Box';
+import { styled } from '@mui/system';
+import BadgeUnstyled from '@mui/base/BadgeUnstyled';
+import ButtonGroup from '@mui/material/ButtonGroup';
+import Button from '@mui/material/Button';
+import AddIcon from '@mui/icons-material/Add';
+import RemoveIcon from '@mui/icons-material/Remove';
+import MailIcon from '@mui/icons-material/Mail';
+import Switch from '@mui/material/Switch';
+import FormControlLabel from '@mui/material/FormControlLabel';
+
+const StyledBadge = styled(BadgeUnstyled)`
+  box-sizing: border-box;
+  margin: 0;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.85);
+  font-size: 14px;
+  list-style: none;
+  font-family: IBM Plex Sans, sans-serif;
+  position: relative;
+  display: inline-block;
+  line-height: 1;
+
+  & .MuiBadge-badge {
+    z-index: auto;
+    min-width: 20px;
+    height: 20px;
+    padding: 0 6px;
+    color: #fff;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 20px;
+    white-space: nowrap;
+    text-align: center;
+    background: #07f;
+    border-radius: 10px;
+    box-shadow: 0 0 0 1px #fff;
+    position: absolute;
+    top: 0;
+    right: 0;
+    transform: translate(50%, -50%);
+    transform-origin: 100% 0;
+    opacity: 1;
+    transition: opacity 0.2s ease-in-out;
+  }
+
+  & .MuiBadge-invisible {
+    opacity: 0;
+    pointer-events: none;
+  }
+`;
+
+export default function BadgeVisibility() {
+  const [count, setCount] = React.useState(1);
+  const [invisible, setInvisible] = React.useState(false);
+
+  const handleBadgeVisibility = () => {
+    setInvisible(!invisible);
+  };
+
+  return (
+    <Box
+      sx={{
+        color: 'action.active',
+        display: 'flex',
+        flexDirection: 'column',
+        '& > *': {
+          marginBottom: 2,
+        },
+        '& .MuiBadge-root': {
+          marginRight: 4,
+        },
+      }}
+    >
+      <div>
+        <StyledBadge badgeContent={count}>
+          <MailIcon />
+        </StyledBadge>
+        <ButtonGroup>
+          <Button
+            aria-label="reduce"
+            onClick={() => {
+              setCount(Math.max(count - 1, 0));
+            }}
+          >
+            <RemoveIcon fontSize="small" />
+          </Button>
+          <Button
+            aria-label="increase"
+            onClick={() => {
+              setCount(count + 1);
+            }}
+          >
+            <AddIcon fontSize="small" />
+          </Button>
+        </ButtonGroup>
+      </div>
+      <div>
+        <StyledBadge badgeContent={count} invisible={invisible}>
+          <MailIcon />
+        </StyledBadge>
+        <FormControlLabel
+          sx={{ color: 'text.primary' }}
+          control={<Switch checked={!invisible} onChange={handleBadgeVisibility} />}
+          label="Show Badge"
+        />
+      </div>
+    </Box>
+  );
+}