improve demos

mui · Dec 31, 2019 · 356296b · 356296b
1 parent c6e2422
commit 356296b
Show file tree

Hide file tree

Showing 15 changed files with 172 additions and 136 deletions.
diff --git 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
@@ -13,20 +13,19 @@ const useStyles = makeStyles((theme: 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/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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -0,0 +1,33 @@
+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';
+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: {
+      '& > *': {
+        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
@@ -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>
   );
 }