From 8a0ddb92112bc966c472637682656b5d2e905360 Mon Sep 17 00:00:00 2001
From: Yuya Tanaka <yuya.presto@gmail.com>
Date: Fri, 3 Jan 2020 20:03:58 +0900
Subject: [PATCH] [Badge] Improve demos (#18981)

---
 docs/src/pages/components/badges/BadgeMax.js  | 17 +++--
 docs/src/pages/components/badges/BadgeMax.tsx | 17 +++--
 .../components/badges/BadgeVisibility.js      | 62 ++++++++++---------
 .../components/badges/BadgeVisibility.tsx     | 62 ++++++++++---------
 .../components/badges/CustomizedBadges.js     |  2 +-
 .../components/badges/CustomizedBadges.tsx    |  2 +-
 docs/src/pages/components/badges/DotBadge.js  |  5 +-
 docs/src/pages/components/badges/DotBadge.tsx |  5 +-
 .../pages/components/badges/ShowZeroBadge.js  | 27 ++++++++
 .../pages/components/badges/ShowZeroBadge.tsx | 29 +++++++++
 .../pages/components/badges/SimpleBadge.js    | 11 ++--
 .../pages/components/badges/SimpleBadge.tsx   | 11 ++--
 docs/src/pages/components/badges/badges.md    | 10 +--
 13 files changed, 158 insertions(+), 102 deletions(-)
 create mode 100644 docs/src/pages/components/badges/ShowZeroBadge.js
 create mode 100644 docs/src/pages/components/badges/ShowZeroBadge.tsx

diff --git a/docs/src/pages/components/badges/BadgeMax.js b/docs/src/pages/components/badges/BadgeMax.js
index 7b756a155f6089..319b6c58e80788 100644
--- a/docs/src/pages/components/badges/BadgeMax.js
+++ b/docs/src/pages/components/badges/BadgeMax.js
@@ -11,20 +11,19 @@ const useStyles = makeStyles(theme => ({
   },
 }));
 
+const defaultProps = {
+  color: 'secondary',
+  children: <MailIcon />,
+};
+
 export default function BadgeMax() {
   const classes = useStyles();
 
   return (
     <div className={classes.root}>
-      <Badge badgeContent={99} color="primary">
-        <MailIcon />
-      </Badge>
-      <Badge badgeContent={100} color="primary">
-        <MailIcon />
-      </Badge>
-      <Badge badgeContent={1000} max={999} color="primary">
-        <MailIcon />
-      </Badge>
+      <Badge badgeContent={99} {...defaultProps} />
+      <Badge badgeContent={100} {...defaultProps} />
+      <Badge badgeContent={1000} max={999} {...defaultProps} />
     </div>
   );
 }
diff --git a/docs/src/pages/components/badges/BadgeMax.tsx b/docs/src/pages/components/badges/BadgeMax.tsx
index ae688b01589177..2f469e7e2bfb22 100644
--- a/docs/src/pages/components/badges/BadgeMax.tsx
+++ b/docs/src/pages/components/badges/BadgeMax.tsx
@@ -13,20 +13,19 @@ const useStyles = makeStyles((theme: Theme) =>
   }),
 );
 
+const defaultProps = {
+  color: 'secondary' as 'secondary',
+  children: <MailIcon />,
+};
+
 export default function BadgeMax() {
   const classes = useStyles();
 
   return (
     <div className={classes.root}>
-      <Badge badgeContent={99} color="primary">
-        <MailIcon />
-      </Badge>
-      <Badge badgeContent={100} color="primary">
-        <MailIcon />
-      </Badge>
-      <Badge badgeContent={1000} max={999} color="primary">
-        <MailIcon />
-      </Badge>
+      <Badge badgeContent={99} {...defaultProps} />
+      <Badge badgeContent={100} {...defaultProps} />
+      <Badge badgeContent={1000} max={999} {...defaultProps} />
     </div>
   );
 }
diff --git a/docs/src/pages/components/badges/BadgeVisibility.js b/docs/src/pages/components/badges/BadgeVisibility.js
index 9c186d663dc1bf..a1c15a76fe650a 100644
--- a/docs/src/pages/components/badges/BadgeVisibility.js
+++ b/docs/src/pages/components/badges/BadgeVisibility.js
@@ -1,33 +1,30 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Badge from '@material-ui/core/Badge';
+import ButtonGroup from '@material-ui/core/ButtonGroup';
+import Button from '@material-ui/core/Button';
+import AddIcon from '@material-ui/icons/Add';
+import RemoveIcon from '@material-ui/icons/Remove';
 import MailIcon from '@material-ui/icons/Mail';
 import Switch from '@material-ui/core/Switch';
-import FormGroup from '@material-ui/core/FormGroup';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Divider from '@material-ui/core/Divider';
 
 const useStyles = makeStyles(theme => ({
   root: {
     display: 'flex',
     flexDirection: 'column',
-    alignItems: 'center',
-    width: '100%',
-  },
-  margin: {
-    margin: theme.spacing(1),
-  },
-  divider: {
-    margin: theme.spacing(2, 0),
-    width: '100%',
-  },
-  row: {
-    marginTop: theme.spacing(2),
+    '& > *': {
+      marginBottom: theme.spacing(2),
+    },
+    '& .MuiBadge-root': {
+      marginRight: theme.spacing(4),
+    },
   },
 }));
 
 export default function BadgeVisibility() {
   const classes = useStyles();
+  const [count, setCount] = React.useState(1);
   const [invisible, setInvisible] = React.useState(false);
 
   const handleBadgeVisibility = () => {
@@ -36,28 +33,37 @@ export default function BadgeVisibility() {
 
   return (
     <div className={classes.root}>
-      <div className={classes.row}>
-        <Badge color="secondary" badgeContent={4} invisible={invisible} className={classes.margin}>
+      <div>
+        <Badge color="secondary" badgeContent={count}>
           <MailIcon />
         </Badge>
-        <Badge color="secondary" variant="dot" invisible={invisible} className={classes.margin}>
+        <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>
+        <Badge color="secondary" variant="dot" invisible={invisible}>
           <MailIcon />
         </Badge>
-      </div>
-      <FormGroup row>
         <FormControlLabel
           control={<Switch color="primary" checked={!invisible} onChange={handleBadgeVisibility} />}
           label="Show Badge"
         />
-      </FormGroup>
-      <Divider className={classes.divider} />
-      <div className={classes.row}>
-        <Badge color="secondary" badgeContent={0} className={classes.margin}>
-          <MailIcon />
-        </Badge>
-        <Badge color="secondary" badgeContent={0} showZero className={classes.margin}>
-          <MailIcon />
-        </Badge>
       </div>
     </div>
   );
diff --git a/docs/src/pages/components/badges/BadgeVisibility.tsx b/docs/src/pages/components/badges/BadgeVisibility.tsx
index 4414a4e7b68397..d052321f477a2b 100644
--- a/docs/src/pages/components/badges/BadgeVisibility.tsx
+++ b/docs/src/pages/components/badges/BadgeVisibility.tsx
@@ -1,35 +1,32 @@
 import React from 'react';
 import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
 import Badge from '@material-ui/core/Badge';
+import ButtonGroup from '@material-ui/core/ButtonGroup';
+import Button from '@material-ui/core/Button';
+import AddIcon from '@material-ui/icons/Add';
+import RemoveIcon from '@material-ui/icons/Remove';
 import MailIcon from '@material-ui/icons/Mail';
 import Switch from '@material-ui/core/Switch';
-import FormGroup from '@material-ui/core/FormGroup';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
-import Divider from '@material-ui/core/Divider';
 
 const useStyles = makeStyles((theme: Theme) =>
   createStyles({
     root: {
       display: 'flex',
       flexDirection: 'column',
-      alignItems: 'center',
-      width: '100%',
-    },
-    margin: {
-      margin: theme.spacing(1),
-    },
-    divider: {
-      margin: theme.spacing(2, 0),
-      width: '100%',
-    },
-    row: {
-      marginTop: theme.spacing(2),
+      '& > *': {
+        marginBottom: theme.spacing(2),
+      },
+      '& .MuiBadge-root': {
+        marginRight: theme.spacing(4),
+      },
     },
   }),
 );
 
 export default function BadgeVisibility() {
   const classes = useStyles();
+  const [count, setCount] = React.useState(1);
   const [invisible, setInvisible] = React.useState(false);
 
   const handleBadgeVisibility = () => {
@@ -38,28 +35,37 @@ export default function BadgeVisibility() {
 
   return (
     <div className={classes.root}>
-      <div className={classes.row}>
-        <Badge color="secondary" badgeContent={4} invisible={invisible} className={classes.margin}>
+      <div>
+        <Badge color="secondary" badgeContent={count}>
           <MailIcon />
         </Badge>
-        <Badge color="secondary" variant="dot" invisible={invisible} className={classes.margin}>
+        <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>
+        <Badge color="secondary" variant="dot" invisible={invisible}>
           <MailIcon />
         </Badge>
-      </div>
-      <FormGroup row>
         <FormControlLabel
           control={<Switch color="primary" checked={!invisible} onChange={handleBadgeVisibility} />}
           label="Show Badge"
         />
-      </FormGroup>
-      <Divider className={classes.divider} />
-      <div className={classes.row}>
-        <Badge color="secondary" badgeContent={0} className={classes.margin}>
-          <MailIcon />
-        </Badge>
-        <Badge color="secondary" badgeContent={0} showZero className={classes.margin}>
-          <MailIcon />
-        </Badge>
       </div>
     </div>
   );
diff --git a/docs/src/pages/components/badges/CustomizedBadges.js b/docs/src/pages/components/badges/CustomizedBadges.js
index 6071cca81b3589..637b72898875ec 100644
--- a/docs/src/pages/components/badges/CustomizedBadges.js
+++ b/docs/src/pages/components/badges/CustomizedBadges.js
@@ -16,7 +16,7 @@ const StyledBadge = withStyles(theme => ({
 export default function CustomizedBadges() {
   return (
     <IconButton aria-label="cart">
-      <StyledBadge badgeContent={4} color="primary">
+      <StyledBadge badgeContent={4} color="secondary">
         <ShoppingCartIcon />
       </StyledBadge>
     </IconButton>
diff --git a/docs/src/pages/components/badges/CustomizedBadges.tsx b/docs/src/pages/components/badges/CustomizedBadges.tsx
index 7da7ffe40155e5..da08afb9c5a68a 100644
--- a/docs/src/pages/components/badges/CustomizedBadges.tsx
+++ b/docs/src/pages/components/badges/CustomizedBadges.tsx
@@ -18,7 +18,7 @@ const StyledBadge = withStyles((theme: Theme) =>
 export default function CustomizedBadges() {
   return (
     <IconButton aria-label="cart">
-      <StyledBadge badgeContent={4} color="primary">
+      <StyledBadge badgeContent={4} color="secondary">
         <ShoppingCartIcon />
       </StyledBadge>
     </IconButton>
diff --git a/docs/src/pages/components/badges/DotBadge.js b/docs/src/pages/components/badges/DotBadge.js
index bcc6604b2ed4a5..fe2495e927db0e 100644
--- a/docs/src/pages/components/badges/DotBadge.js
+++ b/docs/src/pages/components/badges/DotBadge.js
@@ -17,13 +17,10 @@ export default function DotBadge() {
 
   return (
     <div className={classes.root}>
-      <Badge color="primary" variant="dot">
-        <MailIcon />
-      </Badge>
       <Badge color="secondary" variant="dot">
         <MailIcon />
       </Badge>
-      <Badge color="error" variant="dot">
+      <Badge color="secondary" variant="dot">
         <Typography>Typography</Typography>
       </Badge>
     </div>
diff --git a/docs/src/pages/components/badges/DotBadge.tsx b/docs/src/pages/components/badges/DotBadge.tsx
index dcc4d242435622..f4b57373e4c1b3 100644
--- a/docs/src/pages/components/badges/DotBadge.tsx
+++ b/docs/src/pages/components/badges/DotBadge.tsx
@@ -19,13 +19,10 @@ export default function DotBadge() {
 
   return (
     <div className={classes.root}>
-      <Badge color="primary" variant="dot">
-        <MailIcon />
-      </Badge>
       <Badge color="secondary" variant="dot">
         <MailIcon />
       </Badge>
-      <Badge color="error" variant="dot">
+      <Badge color="secondary" variant="dot">
         <Typography>Typography</Typography>
       </Badge>
     </div>
diff --git a/docs/src/pages/components/badges/ShowZeroBadge.js b/docs/src/pages/components/badges/ShowZeroBadge.js
new file mode 100644
index 00000000000000..e39160f5ff93fe
--- /dev/null
+++ b/docs/src/pages/components/badges/ShowZeroBadge.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Badge from '@material-ui/core/Badge';
+import MailIcon from '@material-ui/icons/Mail';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    '& > *': {
+      margin: theme.spacing(1),
+    },
+  },
+}));
+
+export default function ShowZeroBadge() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Badge color="secondary" badgeContent={0}>
+        <MailIcon />
+      </Badge>
+      <Badge color="secondary" badgeContent={0} showZero>
+        <MailIcon />
+      </Badge>
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/badges/ShowZeroBadge.tsx b/docs/src/pages/components/badges/ShowZeroBadge.tsx
new file mode 100644
index 00000000000000..02650117d4b38a
--- /dev/null
+++ b/docs/src/pages/components/badges/ShowZeroBadge.tsx
@@ -0,0 +1,29 @@
+import React from 'react';
+import { Theme, createStyles, makeStyles } from '@material-ui/core/styles';
+import Badge from '@material-ui/core/Badge';
+import MailIcon from '@material-ui/icons/Mail';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      '& > *': {
+        margin: theme.spacing(1),
+      },
+    },
+  }),
+);
+
+export default function ShowZeroBadge() {
+  const classes = useStyles();
+
+  return (
+    <div className={classes.root}>
+      <Badge color="secondary" badgeContent={0}>
+        <MailIcon />
+      </Badge>
+      <Badge color="secondary" badgeContent={0} showZero>
+        <MailIcon />
+      </Badge>
+    </div>
+  );
+}
diff --git a/docs/src/pages/components/badges/SimpleBadge.js b/docs/src/pages/components/badges/SimpleBadge.js
index d0dfad7cd61b9c..72c40fee285321 100644
--- a/docs/src/pages/components/badges/SimpleBadge.js
+++ b/docs/src/pages/components/badges/SimpleBadge.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import { makeStyles } from '@material-ui/core/styles';
 import Badge from '@material-ui/core/Badge';
-import IconButton from '@material-ui/core/IconButton';
 import MailIcon from '@material-ui/icons/Mail';
 
 const useStyles = makeStyles(theme => ({
@@ -20,14 +19,12 @@ export default function SimpleBadge() {
       <Badge badgeContent={4} color="primary">
         <MailIcon />
       </Badge>
-      <Badge badgeContent={10} color="secondary">
+      <Badge badgeContent={4} color="secondary">
+        <MailIcon />
+      </Badge>
+      <Badge badgeContent={4} color="error">
         <MailIcon />
       </Badge>
-      <IconButton aria-label="4 pending messages">
-        <Badge badgeContent={4} color="primary">
-          <MailIcon />
-        </Badge>
-      </IconButton>
     </div>
   );
 }
diff --git a/docs/src/pages/components/badges/SimpleBadge.tsx b/docs/src/pages/components/badges/SimpleBadge.tsx
index 3ed7f2aed2596f..445101d44f253e 100644
--- a/docs/src/pages/components/badges/SimpleBadge.tsx
+++ b/docs/src/pages/components/badges/SimpleBadge.tsx
@@ -1,7 +1,6 @@
 import React from 'react';
 import { makeStyles, Theme, createStyles } from '@material-ui/core/styles';
 import Badge from '@material-ui/core/Badge';
-import IconButton from '@material-ui/core/IconButton';
 import MailIcon from '@material-ui/icons/Mail';
 
 const useStyles = makeStyles((theme: Theme) =>
@@ -22,14 +21,12 @@ export default function SimpleBadge() {
       <Badge badgeContent={4} color="primary">
         <MailIcon />
       </Badge>
-      <Badge badgeContent={10} color="secondary">
+      <Badge badgeContent={4} color="secondary">
+        <MailIcon />
+      </Badge>
+      <Badge badgeContent={4} color="error">
         <MailIcon />
       </Badge>
-      <IconButton aria-label="4 pending messages">
-        <Badge badgeContent={4} color="primary">
-          <MailIcon />
-        </Badge>
-      </IconButton>
     </div>
   );
 }
diff --git a/docs/src/pages/components/badges/badges.md b/docs/src/pages/components/badges/badges.md
index d4e0ce3b021e35..5738aec5e2eb45 100644
--- a/docs/src/pages/components/badges/badges.md
+++ b/docs/src/pages/components/badges/badges.md
@@ -7,7 +7,7 @@ components: Badge
 
 <p class="description">Badge generates a small badge to the top-right of its child(ren).</p>
 
-## Simple Badges
+## Basic badges
 
 Examples of badges containing text, using primary and secondary colors. The badge is applied to its children.
 
@@ -23,17 +23,19 @@ Here is an example of customizing the component. You can learn more about this i
 
 The visibility of badges can be controlled using the `invisible` property.
 
+{{"demo": "pages/components/badges/BadgeVisibility.js"}}
+
 The badge auto hides with badgeContent is zero. You can override this with the `showZero` property.
 
-{{"demo": "pages/components/badges/BadgeVisibility.js"}}
+{{"demo": "pages/components/badges/ShowZeroBadge.js"}}
 
-## Maximum Value
+## Maximum value
 
 You can use the `max` property to cap the value of the badge content.
 
 {{"demo": "pages/components/badges/BadgeMax.js"}}
 
-## Dot Badge
+## Dot badge
 
 The `dot` property changes a badge into a small dot. This can be used as a notification that something has changed without giving a count.