[docs] Add button demos in ts (#14739)

* [docs] Add button demos in ts * [docs] Enable button ts demos
mui · Mar 5, 2019 · 8d46415 · 8d46415
1 parent 8304d9d
commit 8d46415
Show file tree

Hide file tree

Showing 20 changed files with 861 additions and 13 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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
@@ -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';