[Chip] Add size prop for small option (#15751)

Co-Authored-By: Olivier Tassinari <[email protected]>
mui · May 30, 2019 · b3cace6 · b3cace6
1 parent 0ffe293
commit b3cace6
Show file tree

Hide file tree

Showing 10 changed files with 707 additions and 23 deletions.
diff --git a/docs/src/pages/components/chips/ChipsPlayground.js b/docs/src/pages/components/chips/ChipsPlayground.js
@@ -22,7 +22,8 @@ const styles = theme => ({
     padding: theme.spacing(2),
   },
   chipWrapper: {
-    marginBottom: theme.spacing(5),
+    height: theme.spacing(8),
+    marginBottom: theme.spacing(4),
   },
 });
 
@@ -33,6 +34,7 @@ class ChipsPlayground extends React.Component {
     avatar: 'none',
     icon: 'none',
     variant: 'default',
+    size: 'medium',
   };
 
   handleChange = key => (event, value) => {
@@ -47,9 +49,10 @@ class ChipsPlayground extends React.Component {
 
   render() {
     const { classes } = this.props;
-    const { color, onDelete, avatar, icon, variant } = this.state;
+    const { color, onDelete, avatar, icon, variant, size } = this.state;
 
     const colorToCode = color !== 'default' ? `color="${color}" ` : '';
+    const sizeToCode = size === 'small' ? `size="small" ` : '';
     const variantToCode = variant !== 'default' ? `variant="${variant}" ` : '';
 
     let onDeleteToCode;
@@ -108,7 +111,7 @@ class ChipsPlayground extends React.Component {
 
     const code = `
 \`\`\`jsx
-<Chip ${colorToCode}${onDeleteToCode}${avatarToCode}${iconToCode}${variantToCode}/>
+<Chip ${variantToCode}${colorToCode}${sizeToCode}${onDeleteToCode}${avatarToCode}${iconToCode}/>
 \`\`\`
 `;
 
@@ -118,20 +121,36 @@ class ChipsPlayground extends React.Component {
           <Grid container justify="center" alignItems="center" spacing={5}>
             <Grid item className={classes.chipWrapper}>
               <Chip
-                label="Awesome Chip Component"
+                label="Chip Component"
                 color={color}
                 deleteIcon={onDelete === 'custom' ? <DoneIcon /> : undefined}
                 onDelete={onDelete !== 'none' ? this.handleDeleteExample : undefined}
                 avatar={avatarToPlayground}
                 icon={iconToPlayground}
                 variant={variant}
+                size={size}
               />
             </Grid>
           </Grid>
         </Grid>
         <Grid item xs={12}>
           <Paper className={classes.control}>
             <Grid container spacing={3}>
+              <Grid item xs={12}>
+                <FormControl component="fieldset">
+                  <FormLabel>variant</FormLabel>
+                  <RadioGroup
+                    row
+                    name="variant"
+                    aria-label="variant"
+                    value={variant}
+                    onChange={this.handleChange('variant')}
+                  >
+                    <FormControlLabel value="default" control={<Radio />} label="default" />
+                    <FormControlLabel value="outlined" control={<Radio />} label="outlined" />
+                  </RadioGroup>
+                </FormControl>
+              </Grid>
               <Grid item xs={12}>
                 <FormControl component="fieldset">
                   <FormLabel>color</FormLabel>
@@ -150,17 +169,16 @@ class ChipsPlayground extends React.Component {
               </Grid>
               <Grid item xs={12}>
                 <FormControl component="fieldset">
-                  <FormLabel>onDelete</FormLabel>
+                  <FormLabel>size</FormLabel>
                   <RadioGroup
                     row
-                    name="onDelete"
-                    aria-label="onDelete"
-                    value={onDelete}
-                    onChange={this.handleChange('onDelete')}
+                    name="sizet"
+                    aria-label="size"
+                    value={size}
+                    onChange={this.handleChange('size')}
                   >
-                    <FormControlLabel value="none" control={<Radio />} label="none" />
-                    <FormControlLabel value="default" control={<Radio />} label="default" />
-                    <FormControlLabel value="custom" control={<Radio />} label="custom" />
+                    <FormControlLabel value="medium" control={<Radio />} label="medium" />
+                    <FormControlLabel value="small" control={<Radio />} label="small" />
                   </RadioGroup>
                 </FormControl>
               </Grid>
@@ -198,16 +216,17 @@ class ChipsPlayground extends React.Component {
               </Grid>
               <Grid item xs={12}>
                 <FormControl component="fieldset">
-                  <FormLabel>variant</FormLabel>
+                  <FormLabel>onDelete</FormLabel>
                   <RadioGroup
                     row
-                    name="variant"
-                    aria-label="variant"
-                    value={variant}
-                    onChange={this.handleChange('variant')}
+                    name="onDelete"
+                    aria-label="onDelete"
+                    value={onDelete}
+                    onChange={this.handleChange('onDelete')}
                   >
+                    <FormControlLabel value="none" control={<Radio />} label="none" />
                     <FormControlLabel value="default" control={<Radio />} label="default" />
-                    <FormControlLabel value="outlined" control={<Radio />} label="outlined" />
+                    <FormControlLabel value="custom" control={<Radio />} label="custom" />
                   </RadioGroup>
                 </FormControl>
               </Grid>

diff --git a/docs/src/pages/components/chips/SmallChips.js b/docs/src/pages/components/chips/SmallChips.js
@@ -0,0 +1,134 @@
+import React from 'react';
+import { makeStyles } from '@material-ui/core/styles';
+import Avatar from '@material-ui/core/Avatar';
+import Chip from '@material-ui/core/Chip';
+import FaceIcon from '@material-ui/icons/Face';
+import DoneIcon from '@material-ui/icons/Done';
+
+const useStyles = makeStyles(theme => ({
+  root: {
+    display: 'flex',
+    justifyContent: 'center',
+    flexWrap: 'wrap',
+  },
+  chip: {
+    margin: theme.spacing(1),
+  },
+}));
+
+function SmallChips() {
+  const classes = useStyles();
+
+  function handleDelete() {
+    alert('You clicked the delete icon.');
+  }
+
+  function handleClick() {
+    alert('You clicked the Chip.');
+  }
+
+  return (
+    <div className={classes.root}>
+      <Chip size="small" label="Basic Chip" className={classes.chip} />
+      <Chip
+        size="small"
+        avatar={<Avatar>MB</Avatar>}
+        label="Clickable Chip"
+        onClick={handleClick}
+        className={classes.chip}
+      />
+      <Chip
+        size="small"
+        avatar={<Avatar alt="Natacha" src="/static/images/avatar/1.jpg" />}
+        label="Deletable Chip"
+        onDelete={handleDelete}
+        className={classes.chip}
+      />
+      <Chip
+        size="small"
+        avatar={
+          <Avatar>
+            <FaceIcon />
+          </Avatar>
+        }
+        label="Clickable Deletable Chip"
+        onClick={handleClick}
+        onDelete={handleDelete}
+        className={classes.chip}
+      />
+      <Chip
+        size="small"
+        icon={<FaceIcon />}
+        label="Clickable Deletable Chip"
+        onClick={handleClick}
+        onDelete={handleDelete}
+        className={classes.chip}
+      />
+      <Chip
+        size="small"
+        label="Custom delete icon Chip"
+        onClick={handleClick}
+        onDelete={handleDelete}
+        className={classes.chip}
+        deleteIcon={<DoneIcon />}
+      />
+      <Chip
+        size="small"
+        label="Clickable Link Chip"
+        className={classes.chip}
+        component="a"
+        href="#chip"
+        clickable
+      />
+      <Chip
+        size="small"
+        avatar={<Avatar>MB</Avatar>}
+        label="Primary Clickable Chip"
+        clickable
+        className={classes.chip}
+        color="primary"
+        onDelete={handleDelete}
+        deleteIcon={<DoneIcon />}
+      />
+      <Chip
+        size="small"
+        icon={<FaceIcon />}
+        label="Primary Clickable Chip"
+        clickable
+        className={classes.chip}
+        color="primary"
+        onDelete={handleDelete}
+        deleteIcon={<DoneIcon />}
+      />
+      <Chip
+        size="small"
+        label="Deletable Primary Chip"
+        onDelete={handleDelete}
+        className={classes.chip}
+        color="primary"
+      />
+      <Chip
+        size="small"
+        avatar={
+          <Avatar>
+            <FaceIcon />
+          </Avatar>
+        }
+        label="Deletable Secondary Chip"
+        onDelete={handleDelete}
+        className={classes.chip}
+        color="secondary"
+      />
+      <Chip
+        size="small"
+        icon={<FaceIcon />}
+        label="Deletable Secondary Chip"
+        onDelete={handleDelete}
+        className={classes.chip}
+        color="secondary"
+      />
+    </div>
+  );
+}
+
+export default SmallChips;
diff --git a/docs/src/pages/components/chips/SmallChips.tsx b/docs/src/pages/components/chips/SmallChips.tsx
@@ -0,0 +1,136 @@
+import React from 'react';
+import { createStyles, Theme, makeStyles } from '@material-ui/core/styles';
+import Avatar from '@material-ui/core/Avatar';
+import Chip from '@material-ui/core/Chip';
+import FaceIcon from '@material-ui/icons/Face';
+import DoneIcon from '@material-ui/icons/Done';
+
+const useStyles = makeStyles((theme: Theme) =>
+  createStyles({
+    root: {
+      display: 'flex',
+      justifyContent: 'center',
+      flexWrap: 'wrap',
+    },
+    chip: {
+      margin: theme.spacing(1),
+    },
+  }),
+);
+
+function SmallChips() {
+  const classes = useStyles();
+
+  function handleDelete() {
+    alert('You clicked the delete icon.');
+  }
+
+  function handleClick() {
+    alert('You clicked the Chip.');
+  }
+
+  return (
+    <div className={classes.root}>
+      <Chip size="small" label="Basic Chip" className={classes.chip} />
+      <Chip
+        size="small"
+        avatar={<Avatar>MB</Avatar>}
+        label="Clickable Chip"
+        onClick={handleClick}
+        className={classes.chip}
+      />
+      <Chip
+        size="small"
+        avatar={<Avatar alt="Natacha" src="/static/images/avatar/1.jpg" />}
+        label="Deletable Chip"
+        onDelete={handleDelete}
+        className={classes.chip}
+      />
+      <Chip
+        size="small"
+        avatar={
+          <Avatar>
+            <FaceIcon />
+          </Avatar>
+        }
+        label="Clickable Deletable Chip"
+        onClick={handleClick}
+        onDelete={handleDelete}
+        className={classes.chip}
+      />
+      <Chip
+        size="small"
+        icon={<FaceIcon />}
+        label="Clickable Deletable Chip"
+        onClick={handleClick}
+        onDelete={handleDelete}
+        className={classes.chip}
+      />
+      <Chip
+        size="small"
+        label="Custom delete icon Chip"
+        onClick={handleClick}
+        onDelete={handleDelete}
+        className={classes.chip}
+        deleteIcon={<DoneIcon />}
+      />
+      <Chip
+        size="small"
+        label="Clickable Link Chip"
+        className={classes.chip}
+        component="a"
+        href="#chip"
+        clickable
+      />
+      <Chip
+        size="small"
+        avatar={<Avatar>MB</Avatar>}
+        label="Primary Clickable Chip"
+        clickable
+        className={classes.chip}
+        color="primary"
+        onDelete={handleDelete}
+        deleteIcon={<DoneIcon />}
+      />
+      <Chip
+        size="small"
+        icon={<FaceIcon />}
+        label="Primary Clickable Chip"
+        clickable
+        className={classes.chip}
+        color="primary"
+        onDelete={handleDelete}
+        deleteIcon={<DoneIcon />}
+      />
+      <Chip
+        size="small"
+        label="Deletable Primary Chip"
+        onDelete={handleDelete}
+        className={classes.chip}
+        color="primary"
+      />
+      <Chip
+        size="small"
+        avatar={
+          <Avatar>
+            <FaceIcon />
+          </Avatar>
+        }
+        label="Deletable Secondary Chip"
+        onDelete={handleDelete}
+        className={classes.chip}
+        color="secondary"
+      />
+      <Chip
+        size="small"
+        icon={<FaceIcon />}
+        label="Deletable Secondary Chip"
+        onDelete={handleDelete}
+        className={classes.chip}
+        color="secondary"
+      />
+    </div>
+  );
+}
+
+export default SmallChips;