From 8d464157b943d806c24c9e04de86eda7374d288c Mon Sep 17 00:00:00 2001
From: Sebastian Silbermann <silbermann.sebastian@gmail.com>
Date: Tue, 5 Mar 2019 10:48:45 +0100
Subject: [PATCH] [docs] Add button demos in ts (#14739)

* [docs] Add button demos in ts

* [docs] Enable button ts demos
---
 docs/src/pages/demos/buttons/ButtonBases.js   |   1 +
 docs/src/pages/demos/buttons/ButtonBases.tsx  | 142 +++++++++++++++++
 docs/src/pages/demos/buttons/ButtonSizes.tsx  | 118 ++++++++++++++
 .../pages/demos/buttons/ContainedButtons.js   |   1 +
 .../pages/demos/buttons/ContainedButtons.tsx  |  55 +++++++
 .../pages/demos/buttons/CustomizedButtons.js  |   2 +-
 .../pages/demos/buttons/CustomizedButtons.tsx |  99 ++++++++++++
 .../buttons/FloatingActionButtonZoom.tsx      | 148 ++++++++++++++++++
 .../demos/buttons/FloatingActionButtons.tsx   |  45 ++++++
 docs/src/pages/demos/buttons/IconButtons.tsx  |  50 ++++++
 .../pages/demos/buttons/IconLabelButtons.tsx  |  61 ++++++++
 .../pages/demos/buttons/OutlinedButtons.js    |   1 +
 .../pages/demos/buttons/OutlinedButtons.tsx   |  58 +++++++
 docs/src/pages/demos/buttons/TextButtons.js   |   1 +
 docs/src/pages/demos/buttons/TextButtons.tsx  |  52 ++++++
 package.json                                  |   1 +
 .../src/IconButton/IconButton.d.ts            |  21 ++-
 pages/demos/buttons.js                        |   6 +-
 tsconfig.json                                 |   5 +-
 yarn.lock                                     |   7 +
 20 files changed, 861 insertions(+), 13 deletions(-)
 create mode 100644 docs/src/pages/demos/buttons/ButtonBases.tsx
 create mode 100644 docs/src/pages/demos/buttons/ButtonSizes.tsx
 create mode 100644 docs/src/pages/demos/buttons/ContainedButtons.tsx
 create mode 100644 docs/src/pages/demos/buttons/CustomizedButtons.tsx
 create mode 100644 docs/src/pages/demos/buttons/FloatingActionButtonZoom.tsx
 create mode 100644 docs/src/pages/demos/buttons/FloatingActionButtons.tsx
 create mode 100644 docs/src/pages/demos/buttons/IconButtons.tsx
 create mode 100644 docs/src/pages/demos/buttons/IconLabelButtons.tsx
 create mode 100644 docs/src/pages/demos/buttons/OutlinedButtons.tsx
 create mode 100644 docs/src/pages/demos/buttons/TextButtons.tsx

diff --git a/docs/src/pages/demos/buttons/ButtonBases.js b/docs/src/pages/demos/buttons/ButtonBases.js
index e832dd6f46c75f..04ace325a7b05f 100644
--- a/docs/src/pages/demos/buttons/ButtonBases.js
+++ b/docs/src/pages/demos/buttons/ButtonBases.js
@@ -116,6 +116,7 @@ function ButtonBases(props) {
               backgroundImage: `url(${image.url})`,
             }}
           />
+
           <span className={classes.imageBackdrop} />
           <span className={classes.imageButton}>
             <Typography
diff --git a/docs/src/pages/demos/buttons/ButtonBases.tsx b/docs/src/pages/demos/buttons/ButtonBases.tsx
new file mode 100644
index 00000000000000..6bc22d70978088
--- /dev/null
+++ b/docs/src/pages/demos/buttons/ButtonBases.tsx
@@ -0,0 +1,142 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Theme, withStyles, WithStyles, createStyles } from '@material-ui/core/styles';
+import ButtonBase from '@material-ui/core/ButtonBase';
+import Typography from '@material-ui/core/Typography';
+
+const styles = (theme: Theme) =>
+  createStyles({
+    root: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      minWidth: 300,
+      width: '100%',
+    },
+    image: {
+      position: 'relative',
+      height: 200,
+      [theme.breakpoints.down('xs')]: {
+        width: '100% !important', // Overrides inline-style
+        height: 100,
+      },
+      '&:hover, &$focusVisible': {
+        zIndex: 1,
+        '& $imageBackdrop': {
+          opacity: 0.15,
+        },
+        '& $imageMarked': {
+          opacity: 0,
+        },
+        '& $imageTitle': {
+          border: '4px solid currentColor',
+        },
+      },
+    },
+    focusVisible: {},
+    imageButton: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      color: theme.palette.common.white,
+    },
+    imageSrc: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
+      backgroundSize: 'cover',
+      backgroundPosition: 'center 40%',
+    },
+    imageBackdrop: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      top: 0,
+      bottom: 0,
+      backgroundColor: theme.palette.common.black,
+      opacity: 0.4,
+      transition: theme.transitions.create('opacity'),
+    },
+    imageTitle: {
+      position: 'relative',
+      padding: `${theme.spacing(2)}px ${theme.spacing(4)}px ${theme.spacing(1) + 6}px`,
+    },
+    imageMarked: {
+      height: 3,
+      width: 18,
+      backgroundColor: theme.palette.common.white,
+      position: 'absolute',
+      bottom: -2,
+      left: 'calc(50% - 9px)',
+      transition: theme.transitions.create('opacity'),
+    },
+  });
+
+const images = [
+  {
+    url: '/static/images/grid-list/breakfast.jpg',
+    title: 'Breakfast',
+    width: '40%',
+  },
+  {
+    url: '/static/images/grid-list/burgers.jpg',
+    title: 'Burgers',
+    width: '30%',
+  },
+  {
+    url: '/static/images/grid-list/camera.jpg',
+    title: 'Camera',
+    width: '30%',
+  },
+];
+
+function ButtonBases(props: WithStyles<typeof styles>) {
+  const { classes } = props;
+
+  return (
+    <div className={classes.root}>
+      {images.map(image => (
+        <ButtonBase
+          focusRipple
+          key={image.title}
+          className={classes.image}
+          focusVisibleClassName={classes.focusVisible}
+          style={{
+            width: image.width,
+          }}
+        >
+          <span
+            className={classes.imageSrc}
+            style={{
+              backgroundImage: `url(${image.url})`,
+            }}
+          />
+          <span className={classes.imageBackdrop} />
+          <span className={classes.imageButton}>
+            <Typography
+              component="span"
+              variant="subtitle1"
+              color="inherit"
+              className={classes.imageTitle}
+            >
+              {image.title}
+              <span className={classes.imageMarked} />
+            </Typography>
+          </span>
+        </ButtonBase>
+      ))}
+    </div>
+  );
+}
+
+ButtonBases.propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(ButtonBases);
diff --git a/docs/src/pages/demos/buttons/ButtonSizes.tsx b/docs/src/pages/demos/buttons/ButtonSizes.tsx
new file mode 100644
index 00000000000000..4de722e7008343
--- /dev/null
+++ b/docs/src/pages/demos/buttons/ButtonSizes.tsx
@@ -0,0 +1,118 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Fab from '@material-ui/core/Fab';
+import IconButton from '@material-ui/core/IconButton';
+import AddIcon from '@material-ui/icons/Add';
+import DeleteIcon from '@material-ui/icons/Delete';
+import NavigationIcon from '@material-ui/icons/Navigation';
+import ArrowDownwardIcon from '@material-ui/icons/ArrowDownward';
+
+const styles = (theme: Theme) =>
+  createStyles({
+    margin: {
+      margin: theme.spacing(1),
+    },
+    extendedIcon: {
+      marginRight: theme.spacing(1),
+    },
+  });
+
+function ButtonSizes(props: WithStyles<typeof styles>) {
+  const { classes } = props;
+  return (
+    <div>
+      <div>
+        <Button size="small" className={classes.margin}>
+          Small
+        </Button>
+        <Button size="medium" className={classes.margin}>
+          Medium
+        </Button>
+        <Button size="large" className={classes.margin}>
+          Large
+        </Button>
+      </div>
+      <div>
+        <Button variant="outlined" size="small" color="primary" className={classes.margin}>
+          Small
+        </Button>
+        <Button variant="outlined" size="medium" color="primary" className={classes.margin}>
+          Medium
+        </Button>
+        <Button variant="outlined" size="large" color="primary" className={classes.margin}>
+          Large
+        </Button>
+      </div>
+      <div>
+        <Button variant="contained" size="small" color="primary" className={classes.margin}>
+          Small
+        </Button>
+        <Button variant="contained" size="medium" color="primary" className={classes.margin}>
+          Medium
+        </Button>
+        <Button variant="contained" size="large" color="primary" className={classes.margin}>
+          Large
+        </Button>
+      </div>
+      <div>
+        <Fab size="small" color="secondary" aria-label="Add" className={classes.margin}>
+          <AddIcon />
+        </Fab>
+        <Fab size="medium" color="secondary" aria-label="Add" className={classes.margin}>
+          <AddIcon />
+        </Fab>
+        <Fab color="secondary" aria-label="Add" className={classes.margin}>
+          <AddIcon />
+        </Fab>
+      </div>
+      <div>
+        <Fab
+          variant="extended"
+          size="small"
+          color="primary"
+          aria-label="Add"
+          className={classes.margin}
+        >
+          <NavigationIcon className={classes.extendedIcon} />
+          Extended
+        </Fab>
+        <Fab
+          variant="extended"
+          size="medium"
+          color="primary"
+          aria-label="Add"
+          className={classes.margin}
+        >
+          <NavigationIcon className={classes.extendedIcon} />
+          Extended
+        </Fab>
+        <Fab variant="extended" color="primary" aria-label="Add" className={classes.margin}>
+          <NavigationIcon className={classes.extendedIcon} />
+          Extended
+        </Fab>
+      </div>
+      <div>
+        <IconButton aria-label="Delete" className={classes.margin} size="small">
+          <ArrowDownwardIcon fontSize="inherit" />
+        </IconButton>
+        <IconButton aria-label="Delete" className={classes.margin}>
+          <DeleteIcon fontSize="small" />
+        </IconButton>
+        <IconButton aria-label="Delete" className={classes.margin}>
+          <DeleteIcon />
+        </IconButton>
+        <IconButton aria-label="Delete" className={classes.margin}>
+          <DeleteIcon fontSize="large" />
+        </IconButton>
+      </div>
+    </div>
+  );
+}
+
+ButtonSizes.propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(ButtonSizes);
diff --git a/docs/src/pages/demos/buttons/ContainedButtons.js b/docs/src/pages/demos/buttons/ContainedButtons.js
index 7f659c026ec4bf..c7c52184e73f32 100644
--- a/docs/src/pages/demos/buttons/ContainedButtons.js
+++ b/docs/src/pages/demos/buttons/ContainedButtons.js
@@ -38,6 +38,7 @@ function ContainedButtons(props) {
         multiple
         type="file"
       />
+
       <label htmlFor="contained-button-file">
         <Button variant="contained" component="span" className={classes.button}>
           Upload
diff --git a/docs/src/pages/demos/buttons/ContainedButtons.tsx b/docs/src/pages/demos/buttons/ContainedButtons.tsx
new file mode 100644
index 00000000000000..5ca1f5528cb9dd
--- /dev/null
+++ b/docs/src/pages/demos/buttons/ContainedButtons.tsx
@@ -0,0 +1,55 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+
+const styles = (theme: Theme) =>
+  createStyles({
+    button: {
+      margin: theme.spacing(1),
+    },
+    input: {
+      display: 'none',
+    },
+  });
+
+function ContainedButtons(props: WithStyles<typeof styles>) {
+  const { classes } = props;
+  return (
+    <div>
+      <Button variant="contained" className={classes.button}>
+        Default
+      </Button>
+      <Button variant="contained" color="primary" className={classes.button}>
+        Primary
+      </Button>
+      <Button variant="contained" color="secondary" className={classes.button}>
+        Secondary
+      </Button>
+      <Button variant="contained" color="secondary" disabled className={classes.button}>
+        Disabled
+      </Button>
+      <Button variant="contained" href="#contained-buttons" className={classes.button}>
+        Link
+      </Button>
+      <input
+        accept="image/*"
+        className={classes.input}
+        id="contained-button-file"
+        multiple
+        type="file"
+      />
+      <label htmlFor="contained-button-file">
+        <Button variant="contained" component="span" className={classes.button}>
+          Upload
+        </Button>
+      </label>
+    </div>
+  );
+}
+
+ContainedButtons.propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(ContainedButtons);
diff --git a/docs/src/pages/demos/buttons/CustomizedButtons.js b/docs/src/pages/demos/buttons/CustomizedButtons.js
index a496dddd19d985..61801cfaf500e4 100644
--- a/docs/src/pages/demos/buttons/CustomizedButtons.js
+++ b/docs/src/pages/demos/buttons/CustomizedButtons.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { withStyles, MuiThemeProvider, createMuiTheme } from '@material-ui/core/styles';
+import { createMuiTheme, MuiThemeProvider, withStyles } from '@material-ui/core/styles';
 import Button from '@material-ui/core/Button';
 import purple from '@material-ui/core/colors/purple';
 import green from '@material-ui/core/colors/green';
diff --git a/docs/src/pages/demos/buttons/CustomizedButtons.tsx b/docs/src/pages/demos/buttons/CustomizedButtons.tsx
new file mode 100644
index 00000000000000..cc8be3a55e4d7a
--- /dev/null
+++ b/docs/src/pages/demos/buttons/CustomizedButtons.tsx
@@ -0,0 +1,99 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import {
+  createMuiTheme,
+  createStyles,
+  MuiThemeProvider,
+  Theme,
+  withStyles,
+  WithStyles,
+} from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import purple from '@material-ui/core/colors/purple';
+import green from '@material-ui/core/colors/green';
+
+const styles = (theme: Theme) =>
+  createStyles({
+    margin: {
+      margin: theme.spacing(1),
+    },
+    cssRoot: {
+      color: theme.palette.getContrastText(purple[500]),
+      backgroundColor: purple[500],
+      '&:hover': {
+        backgroundColor: purple[700],
+      },
+    },
+    bootstrapRoot: {
+      boxShadow: 'none',
+      textTransform: 'none',
+      fontSize: 16,
+      padding: '6px 12px',
+      border: '1px solid',
+      lineHeight: 1.5,
+      backgroundColor: '#007bff',
+      borderColor: '#007bff',
+      fontFamily: [
+        '-apple-system',
+        'BlinkMacSystemFont',
+        '"Segoe UI"',
+        'Roboto',
+        '"Helvetica Neue"',
+        'Arial',
+        'sans-serif',
+        '"Apple Color Emoji"',
+        '"Segoe UI Emoji"',
+        '"Segoe UI Symbol"',
+      ].join(','),
+      '&:hover': {
+        backgroundColor: '#0069d9',
+        borderColor: '#0062cc',
+      },
+      '&:active': {
+        boxShadow: 'none',
+        backgroundColor: '#0062cc',
+        borderColor: '#005cbf',
+      },
+      '&:focus': {
+        boxShadow: '0 0 0 0.2rem rgba(0,123,255,.5)',
+      },
+    },
+  });
+
+const theme = createMuiTheme({
+  palette: {
+    primary: green,
+  },
+});
+
+function CustomizedButtons(props: WithStyles<typeof styles>) {
+  const { classes } = props;
+
+  return (
+    <div>
+      <Button variant="contained" color="primary" className={clsx(classes.margin, classes.cssRoot)}>
+        Custom CSS
+      </Button>
+      <MuiThemeProvider theme={theme}>
+        <Button variant="contained" color="primary" className={classes.margin}>
+          MuiThemeProvider
+        </Button>
+      </MuiThemeProvider>
+      <Button
+        variant="contained"
+        color="primary"
+        disableRipple
+        className={clsx(classes.margin, classes.bootstrapRoot)}
+      >
+        Bootstrap
+      </Button>
+    </div>
+  );
+}
+
+CustomizedButtons.propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(CustomizedButtons);
diff --git a/docs/src/pages/demos/buttons/FloatingActionButtonZoom.tsx b/docs/src/pages/demos/buttons/FloatingActionButtonZoom.tsx
new file mode 100644
index 00000000000000..949ae6b4514e12
--- /dev/null
+++ b/docs/src/pages/demos/buttons/FloatingActionButtonZoom.tsx
@@ -0,0 +1,148 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import SwipeableViews from 'react-swipeable-views';
+import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
+import AppBar from '@material-ui/core/AppBar';
+import Tabs from '@material-ui/core/Tabs';
+import Tab from '@material-ui/core/Tab';
+import Typography, { TypographyProps } from '@material-ui/core/Typography';
+import Zoom from '@material-ui/core/Zoom';
+import Fab from '@material-ui/core/Fab';
+import AddIcon from '@material-ui/icons/Add';
+import EditIcon from '@material-ui/icons/Edit';
+import UpIcon from '@material-ui/icons/KeyboardArrowUp';
+import green from '@material-ui/core/colors/green';
+
+interface TabContainerProps {
+  children?: React.ReactNode;
+  dir: TypographyProps['dir'];
+}
+
+function TabContainer(props: TabContainerProps) {
+  const { children, dir } = props;
+
+  return (
+    <Typography component="div" dir={dir} style={{ padding: 8 * 3 }}>
+      {children}
+    </Typography>
+  );
+}
+
+TabContainer.propTypes = {
+  children: PropTypes.node.isRequired,
+  dir: PropTypes.string.isRequired,
+};
+
+const styles = (theme: Theme) =>
+  createStyles({
+    root: {
+      backgroundColor: theme.palette.background.paper,
+      width: 500,
+      position: 'relative',
+      minHeight: 200,
+    },
+    fab: {
+      position: 'absolute',
+      bottom: theme.spacing(2),
+      right: theme.spacing(2),
+    },
+    fabGreen: {
+      color: theme.palette.common.white,
+      backgroundColor: green[500],
+      '&:hover': {
+        backgroundColor: green[600],
+      },
+    },
+  });
+
+interface FloatingActionButtonZoomProps extends WithStyles<typeof styles, true> {}
+
+class FloatingActionButtonZoom extends React.Component<FloatingActionButtonZoomProps> {
+  state = {
+    value: 0,
+  };
+
+  handleChange = (event: unknown, value: number) => {
+    this.setState({ value });
+  };
+
+  handleChangeIndex = (index: number) => {
+    this.setState({ value: index });
+  };
+
+  render() {
+    const { classes, theme } = this.props;
+    const transitionDuration = {
+      enter: theme.transitions.duration.enteringScreen,
+      exit: theme.transitions.duration.leavingScreen,
+    };
+
+    const fabs = [
+      {
+        color: 'primary' as 'primary',
+        className: classes.fab,
+        icon: <AddIcon />,
+      },
+      {
+        color: 'secondary' as 'secondary',
+        className: classes.fab,
+        icon: <EditIcon />,
+      },
+      {
+        color: 'inherit' as 'inherit',
+        className: clsx(classes.fab, classes.fabGreen),
+        icon: <UpIcon />,
+      },
+    ];
+
+    return (
+      <div className={classes.root}>
+        <AppBar position="static" color="default">
+          <Tabs
+            value={this.state.value}
+            onChange={this.handleChange}
+            indicatorColor="primary"
+            textColor="primary"
+            variant="fullWidth"
+          >
+            <Tab label="Item One" />
+            <Tab label="Item Two" />
+            <Tab label="Item Three" />
+          </Tabs>
+        </AppBar>
+        <SwipeableViews
+          axis={theme.direction === 'rtl' ? 'x-reverse' : 'x'}
+          index={this.state.value}
+          onChangeIndex={this.handleChangeIndex}
+        >
+          <TabContainer dir={theme.direction}>Item One</TabContainer>
+          <TabContainer dir={theme.direction}>Item Two</TabContainer>
+          <TabContainer dir={theme.direction}>Item Three</TabContainer>
+        </SwipeableViews>
+        {fabs.map((fab, index) => (
+          <Zoom
+            key={fab.color}
+            in={this.state.value === index}
+            timeout={transitionDuration}
+            style={{
+              transitionDelay: `${this.state.value === index ? transitionDuration.exit : 0}ms`,
+            }}
+            unmountOnExit
+          >
+            <Fab className={fab.className} color={fab.color}>
+              {fab.icon}
+            </Fab>
+          </Zoom>
+        ))}
+      </div>
+    );
+  }
+}
+
+(FloatingActionButtonZoom as React.ComponentClass<FloatingActionButtonZoomProps>).propTypes = {
+  classes: PropTypes.object.isRequired,
+  theme: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles, { withTheme: true })(FloatingActionButtonZoom);
diff --git a/docs/src/pages/demos/buttons/FloatingActionButtons.tsx b/docs/src/pages/demos/buttons/FloatingActionButtons.tsx
new file mode 100644
index 00000000000000..79d390da9a546c
--- /dev/null
+++ b/docs/src/pages/demos/buttons/FloatingActionButtons.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
+import Fab from '@material-ui/core/Fab';
+import AddIcon from '@material-ui/icons/Add';
+import Icon from '@material-ui/core/Icon';
+import DeleteIcon from '@material-ui/icons/Delete';
+import NavigationIcon from '@material-ui/icons/Navigation';
+
+const styles = (theme: Theme) =>
+  createStyles({
+    fab: {
+      margin: theme.spacing(1),
+    },
+    extendedIcon: {
+      marginRight: theme.spacing(1),
+    },
+  });
+
+function FloatingActionButtons(props: WithStyles<typeof styles>) {
+  const { classes } = props;
+  return (
+    <div>
+      <Fab color="primary" aria-label="Add" className={classes.fab}>
+        <AddIcon />
+      </Fab>
+      <Fab color="secondary" aria-label="Edit" className={classes.fab}>
+        <Icon>edit_icon</Icon>
+      </Fab>
+      <Fab variant="extended" aria-label="Delete" className={classes.fab}>
+        <NavigationIcon className={classes.extendedIcon} />
+        Extended
+      </Fab>
+      <Fab disabled aria-label="Delete" className={classes.fab}>
+        <DeleteIcon />
+      </Fab>
+    </div>
+  );
+}
+
+FloatingActionButtons.propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(FloatingActionButtons);
diff --git a/docs/src/pages/demos/buttons/IconButtons.tsx b/docs/src/pages/demos/buttons/IconButtons.tsx
new file mode 100644
index 00000000000000..7bfa90273a9b8b
--- /dev/null
+++ b/docs/src/pages/demos/buttons/IconButtons.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
+import Icon from '@material-ui/core/Icon';
+import IconButton from '@material-ui/core/IconButton';
+import DeleteIcon from '@material-ui/icons/Delete';
+import AddShoppingCartIcon from '@material-ui/icons/AddShoppingCart';
+import PhotoCamera from '@material-ui/icons/PhotoCamera';
+
+const styles = (theme: Theme) =>
+  createStyles({
+    button: {
+      margin: theme.spacing(1),
+    },
+    input: {
+      display: 'none',
+    },
+  });
+
+function IconButtons(props: WithStyles<typeof styles>) {
+  const { classes } = props;
+  return (
+    <div>
+      <IconButton className={classes.button} aria-label="Delete">
+        <DeleteIcon />
+      </IconButton>
+      <IconButton className={classes.button} aria-label="Delete" disabled color="primary">
+        <DeleteIcon />
+      </IconButton>
+      <IconButton color="secondary" className={classes.button} aria-label="Add an alarm">
+        <Icon>alarm</Icon>
+      </IconButton>
+      <IconButton color="primary" className={classes.button} aria-label="Add to shopping cart">
+        <AddShoppingCartIcon />
+      </IconButton>
+      <input accept="image/*" className={classes.input} id="icon-button-file" type="file" />
+      <label htmlFor="icon-button-file">
+        <IconButton color="primary" className={classes.button} component="span">
+          <PhotoCamera />
+        </IconButton>
+      </label>
+    </div>
+  );
+}
+
+IconButtons.propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(IconButtons);
diff --git a/docs/src/pages/demos/buttons/IconLabelButtons.tsx b/docs/src/pages/demos/buttons/IconLabelButtons.tsx
new file mode 100644
index 00000000000000..f9667d31c87fa5
--- /dev/null
+++ b/docs/src/pages/demos/buttons/IconLabelButtons.tsx
@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import clsx from 'clsx';
+import Button from '@material-ui/core/Button';
+import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
+import DeleteIcon from '@material-ui/icons/Delete';
+import CloudUploadIcon from '@material-ui/icons/CloudUpload';
+import KeyboardVoiceIcon from '@material-ui/icons/KeyboardVoice';
+import Icon from '@material-ui/core/Icon';
+import SaveIcon from '@material-ui/icons/Save';
+
+const styles = (theme: Theme) =>
+  createStyles({
+    button: {
+      margin: theme.spacing(1),
+    },
+    leftIcon: {
+      marginRight: theme.spacing(1),
+    },
+    rightIcon: {
+      marginLeft: theme.spacing(1),
+    },
+    iconSmall: {
+      fontSize: 20,
+    },
+  });
+
+function IconLabelButtons(props: WithStyles<typeof styles>) {
+  const { classes } = props;
+  return (
+    <div>
+      <Button variant="contained" color="secondary" className={classes.button}>
+        Delete
+        <DeleteIcon className={classes.rightIcon} />
+      </Button>
+      <Button variant="contained" color="primary" className={classes.button}>
+        Send
+        {/* This Button uses a Font Icon, see the installation instructions in the docs. */}
+        <Icon className={classes.rightIcon}>send</Icon>
+      </Button>
+      <Button variant="contained" color="default" className={classes.button}>
+        Upload
+        <CloudUploadIcon className={classes.rightIcon} />
+      </Button>
+      <Button variant="contained" disabled color="secondary" className={classes.button}>
+        <KeyboardVoiceIcon className={classes.leftIcon} />
+        Talk
+      </Button>
+      <Button variant="contained" size="small" className={classes.button}>
+        <SaveIcon className={clsx(classes.leftIcon, classes.iconSmall)} />
+        Save
+      </Button>
+    </div>
+  );
+}
+
+IconLabelButtons.propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(IconLabelButtons);
diff --git a/docs/src/pages/demos/buttons/OutlinedButtons.js b/docs/src/pages/demos/buttons/OutlinedButtons.js
index 76507b59380468..7df12812235814 100644
--- a/docs/src/pages/demos/buttons/OutlinedButtons.js
+++ b/docs/src/pages/demos/buttons/OutlinedButtons.js
@@ -38,6 +38,7 @@ function OutlinedButtons(props) {
         multiple
         type="file"
       />
+
       <label htmlFor="outlined-button-file">
         <Button variant="outlined" component="span" className={classes.button}>
           Upload
diff --git a/docs/src/pages/demos/buttons/OutlinedButtons.tsx b/docs/src/pages/demos/buttons/OutlinedButtons.tsx
new file mode 100644
index 00000000000000..1365e3c8b96015
--- /dev/null
+++ b/docs/src/pages/demos/buttons/OutlinedButtons.tsx
@@ -0,0 +1,58 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+
+const styles = (theme: Theme) =>
+  createStyles({
+    button: {
+      margin: theme.spacing(1),
+    },
+    input: {
+      display: 'none',
+    },
+  });
+
+function OutlinedButtons(props: WithStyles<typeof styles>) {
+  const { classes } = props;
+  return (
+    <div>
+      <Button variant="outlined" className={classes.button}>
+        Default
+      </Button>
+      <Button variant="outlined" color="primary" className={classes.button}>
+        Primary
+      </Button>
+      <Button variant="outlined" color="secondary" className={classes.button}>
+        Secondary
+      </Button>
+      <Button variant="outlined" disabled className={classes.button}>
+        Disabled
+      </Button>
+      <Button variant="outlined" href="#outlined-buttons" className={classes.button}>
+        Link
+      </Button>
+      <input
+        accept="image/*"
+        className={classes.input}
+        id="outlined-button-file"
+        multiple
+        type="file"
+      />
+      <label htmlFor="outlined-button-file">
+        <Button variant="outlined" component="span" className={classes.button}>
+          Upload
+        </Button>
+      </label>
+      <Button variant="outlined" color="inherit" className={classes.button}>
+        Inherit
+      </Button>
+    </div>
+  );
+}
+
+OutlinedButtons.propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(OutlinedButtons);
diff --git a/docs/src/pages/demos/buttons/TextButtons.js b/docs/src/pages/demos/buttons/TextButtons.js
index e946bd06165d27..8558fefcb15a05 100644
--- a/docs/src/pages/demos/buttons/TextButtons.js
+++ b/docs/src/pages/demos/buttons/TextButtons.js
@@ -36,6 +36,7 @@ function TextButtons(props) {
         multiple
         type="file"
       />
+
       <label htmlFor="text-button-file">
         <Button component="span" className={classes.button}>
           Upload
diff --git a/docs/src/pages/demos/buttons/TextButtons.tsx b/docs/src/pages/demos/buttons/TextButtons.tsx
new file mode 100644
index 00000000000000..0acd2426056473
--- /dev/null
+++ b/docs/src/pages/demos/buttons/TextButtons.tsx
@@ -0,0 +1,52 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+
+const styles = (theme: Theme) => ({
+  button: {
+    margin: theme.spacing(1),
+  },
+  input: {
+    display: 'none',
+  },
+});
+
+function TextButtons(props: WithStyles<typeof styles>) {
+  const { classes } = props;
+  return (
+    <div>
+      <Button className={classes.button}>Default</Button>
+      <Button color="primary" className={classes.button}>
+        Primary
+      </Button>
+      <Button color="secondary" className={classes.button}>
+        Secondary
+      </Button>
+      <Button disabled className={classes.button}>
+        Disabled
+      </Button>
+      <Button href="#text-buttons" className={classes.button}>
+        Link
+      </Button>
+      <input
+        accept="image/*"
+        className={classes.input}
+        id="text-button-file"
+        multiple
+        type="file"
+      />
+      <label htmlFor="text-button-file">
+        <Button component="span" className={classes.button}>
+          Upload
+        </Button>
+      </label>
+    </div>
+  );
+}
+
+TextButtons.propTypes = {
+  classes: PropTypes.object.isRequired,
+} as any;
+
+export default withStyles(styles)(TextButtons);
diff --git a/package.json b/package.json
index b6e17f92e16b0c..c3eb27c69609d3 100644
--- a/package.json
+++ b/package.json
@@ -78,6 +78,7 @@
     "@types/react": "^16.7.10",
     "@types/react-dom": "^16.0.9",
     "@types/react-router-dom": "^4.3.1",
+    "@types/react-swipeable-views": "^0.12.2",
     "@types/react-text-mask": "^5.4.2",
     "@types/styled-components": "^4.1.11",
     "accept-language": "^3.0.18",
diff --git a/packages/material-ui/src/IconButton/IconButton.d.ts b/packages/material-ui/src/IconButton/IconButton.d.ts
index df86e8687f7745..6143bc7bab415d 100644
--- a/packages/material-ui/src/IconButton/IconButton.d.ts
+++ b/packages/material-ui/src/IconButton/IconButton.d.ts
@@ -1,13 +1,18 @@
 import * as React from 'react';
 import { StandardProps, PropTypes } from '..';
-import { ButtonBaseProps } from '../ButtonBase';
+import { ExtendButtonBase } from '../ButtonBase';
+import { OverridableComponent, SimplifiedPropsOf, OverrideProps } from '../OverridableComponent';
 
-export interface IconButtonProps extends StandardProps<ButtonBaseProps, IconButtonClassKey> {
-  color?: PropTypes.Color;
-  disabled?: boolean;
-  disableRipple?: boolean;
-  size?: 'small' | 'medium';
-}
+declare const IconButton: ExtendButtonBase<{
+  props: {
+    color?: PropTypes.Color;
+    disabled?: boolean;
+    disableRipple?: boolean;
+    size?: 'small' | 'medium';
+  };
+  defaultComponent: 'button';
+  classKey: IconButtonClassKey;
+}>;
 
 export type IconButtonClassKey =
   | 'root'
@@ -18,6 +23,6 @@ export type IconButtonClassKey =
   | 'sizeSmall'
   | 'label';
 
-declare const IconButton: React.ComponentType<IconButtonProps>;
+export type IconButtonProps = SimplifiedPropsOf<typeof IconButton>;
 
 export default IconButton;
diff --git a/pages/demos/buttons.js b/pages/demos/buttons.js
index 5a4790f3304e73..4378358c597bb9 100644
--- a/pages/demos/buttons.js
+++ b/pages/demos/buttons.js
@@ -4,7 +4,11 @@ import React from 'react';
 import MarkdownDocs from 'docs/src/modules/components/MarkdownDocs';
 
 const req = require.context('docs/src/pages/demos/buttons', false, /\.md|\.js$/);
-const reqSource = require.context('!raw-loader!../../docs/src/pages/demos/buttons', false, /\.js$/);
+const reqSource = require.context(
+  '!raw-loader!../../docs/src/pages/demos/buttons',
+  false,
+  /\.(js|tsx)$/,
+);
 const reqPrefix = 'pages/demos/buttons';
 
 function Page() {
diff --git a/tsconfig.json b/tsconfig.json
index 58e81fa910f3d1..f41a2242d468ed 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -11,6 +11,7 @@
     "experimentalDecorators": true,
     "baseUrl": "./packages",
     "allowSyntheticDefaultImports": true,
+    "noErrorTruncation": true,
     "paths": {
       "@material-ui/core": ["./material-ui/src"],
       "@material-ui/core/*": ["./material-ui/src/*"],
@@ -18,7 +19,5 @@
       "@material-ui/lab/*": ["./material-ui-lab/src/*"]
     }
   },
-  "exclude": [
-    "**/build/"
-  ]
+  "exclude": ["**/build/"]
 }
diff --git a/yarn.lock b/yarn.lock
index 56185e1140f6f0..fa3a20ee42ce23 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1920,6 +1920,13 @@
     "@types/history" "*"
     "@types/react" "*"
 
+"@types/react-swipeable-views@^0.12.2":
+  version "0.12.2"
+  resolved "https://registry.yarnpkg.com/@types/react-swipeable-views/-/react-swipeable-views-0.12.2.tgz#5b50bfbe2e42043f5de85a11087bcfbcb813610e"
+  integrity sha512-c+OFdmEMUtdGeADR7OmnIUTNoejJTBjO64vBPFkdIpKiABS+DXtUHCzM34U/+Wy7FGeLoPHpKGnm2tcMMst/LA==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-text-mask@^5.4.2", "@types/react-text-mask@^5.4.3":
   version "5.4.3"
   resolved "https://registry.yarnpkg.com/@types/react-text-mask/-/react-text-mask-5.4.3.tgz#51351359306a1feaa4ffed017ba6c7fd4d7a6290"