Add Badge TypeScript demo

docs/src/pages/demos/badges/BadgeVisibility.tsx

@@ -0,0 +1,67 @@
+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: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+      width: '100%',
+    },
+    margin: {
+      margin: theme.spacing(1),
+    },
+    divider: {
+      width: '100%',
+    },
+    row: {
+      marginTop: theme.spacing(2),
+    },
+  }),
+);
+
+function BadgeVisibility() {
+  const classes = useStyles();
+  const [invisible, setInvisible] = React.useState(false);
+
+  function handleBadgeVisibility() {
+    setInvisible(!invisible);
+  }
+
+  return (
+    <div className={classes.root}>
+      <div className={classes.row}>
+        <Badge color="secondary" badgeContent={4} invisible={invisible} className={classes.margin}>
+          <MailIcon />
+        </Badge>
+        <Badge color="secondary" variant="dot" invisible={invisible} className={classes.margin}>
+          <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>
+  );
+}
+
+export default BadgeVisibility;

docs/src/pages/demos/badges/CustomizedBadge.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import IconButton from '@material-ui/core/IconButton';
+import Badge from '@material-ui/core/Badge';
+import { withStyles, Theme, createStyles, WithStyles } from '@material-ui/core/styles';
+import ShoppingCartIcon from '@material-ui/icons/ShoppingCart';
+
+const styles = (theme: Theme) =>
+  createStyles({
+    badge: {
+      top: '50%',
+      right: -3,
+      // The border color match the background color.
+      border: `2px solid ${
+        theme.palette.type === 'light' ? theme.palette.grey[200] : theme.palette.grey[900]
+      }`,
+    },
+  });
+
+function CustomizedBadge(props: WithStyles<typeof styles>) {
+  const { classes } = props;
+
+  return (
+    <IconButton aria-label="Cart">
+      <Badge badgeContent={4} color="primary" classes={{ badge: classes.badge }}>
+        <ShoppingCartIcon />
+      </Badge>
+    </IconButton>
+  );
+}
+
+CustomizedBadge.propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(CustomizedBadge);

docs/src/pages/demos/badges/DotBadge.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles, Theme, createStyles, WithStyles } from '@material-ui/core/styles';
+import Badge from '@material-ui/core/Badge';
+import MailIcon from '@material-ui/icons/Mail';
+import Typography from '@material-ui/core/Typography';
+
+const styles = (theme: Theme) =>
+  createStyles({
+    margin: {
+      margin: theme.spacing(2),
+    },
+  });
+
+function DotBadge(props: WithStyles<typeof styles>) {
+  const { classes } = props;
+
+  return (
+    <div>
+      <div>
+        <Badge className={classes.margin} color="primary" variant="dot">
+          <MailIcon />
+        </Badge>
+        <Badge className={classes.margin} color="secondary" variant="dot">
+          <MailIcon />
+        </Badge>
+      </div>
+      <Badge color="primary" className={classes.margin} variant="dot">
+        <Typography>Typography</Typography>
+      </Badge>
+    </div>
+  );
+}
+
+DotBadge.propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(DotBadge);

docs/src/pages/demos/badges/SimpleBadge.tsx

@@ -0,0 +1,67 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles, Theme, createStyles, WithStyles } 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';
+import AppBar from '@material-ui/core/AppBar';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import Typography from '@material-ui/core/Typography';
+import Button from '@material-ui/core/Button';
+
+const styles = (theme: Theme) =>
+  createStyles({
+    margin: {
+      margin: theme.spacing(2),
+    },
+    padding: {
+      padding: theme.spacing(0, 2),
+    },
+  });
+
+function SimpleBadge(props: WithStyles<typeof styles>) {
+  const { classes } = props;
+  return (
+    <div>
+      <div>
+        <Badge className={classes.margin} badgeContent={4} color="primary">
+          <MailIcon />
+        </Badge>
+        <Badge className={classes.margin} badgeContent={10} color="secondary">
+          <MailIcon />
+        </Badge>
+        <IconButton aria-label="4 pending messages" className={classes.margin}>
+          <Badge badgeContent={4} color="primary">
+            <MailIcon />
+          </Badge>
+        </IconButton>
+      </div>
+      <AppBar position="static" className={classes.margin}>
+        <Tabs value={0}>
+          <Tab
+            label={
+              <Badge className={classes.padding} color="secondary" badgeContent={4}>
+                Item One
+              </Badge>
+            }
+          />
+          <Tab label="Item Two" />
+          <Tab label="Item Three" />
+        </Tabs>
+      </AppBar>
+      <Badge color="primary" badgeContent={4} className={classes.margin}>
+        <Typography className={classes.padding}>Typography</Typography>
+      </Badge>
+      <Badge color="primary" badgeContent={4} className={classes.margin}>
+        <Button variant="contained">Button</Button>
+      </Badge>
+    </div>
+  );
+}
+
+SimpleBadge.propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(SimpleBadge);

packages/material-ui/src/styles/index.d.ts

@@ -7,6 +7,7 @@ export {
 } from './createPalette';
 export { default as createStyles } from './createStyles';
 export { TypographyStyle } from './createTypography';
+export { default as makeStyles } from './makeStyles';
 export { ComponentsPropsList } from './props';
 export * from './transitions';
 export {

packages/material-ui/src/styles/makeStyles.d.ts

@@ -0,0 +1,3 @@
+import { makeStyles } from '@material-ui/styles';
+
+export default makeStyles;