[IconButton] Implement a new edge prop (#14758)

* feat(IconButton): add align prop (shortcut for applying negative margin) * fix(IconButton.d.ts): update TypeScript defs * test(IconButton): add test for align prop * test(IconButton): split up test cases * fix: rename `align` prop to `edge` and use it in all the appropriate places I can find in the demos * docs(AppFrame): use IconButton edge prop * fix(IconButton.d.ts): fix TypeScript defs * docs(IconButton): fix formatting * fix(IconButton): change edge enum values to start | end * fix(IconButton): fix failing tests and regen docs * simplify the demos
mui · Mar 9, 2019 · e9be950 · e9be950
1 parent 75b0458
commit e9be950
Show file tree

Hide file tree

Showing 31 changed files with 337 additions and 277 deletions.
diff --git a/docs/src/modules/components/AppFrame.js b/docs/src/modules/components/AppFrame.js
@@ -93,7 +93,7 @@ const styles = theme => ({
     flex: '1 1 auto',
   },
   title: {
-    marginLeft: 24,
+    marginLeft: theme.spacing(2),
     flex: '0 1 auto',
   },
   appBar: {
@@ -215,6 +215,7 @@ class AppFrame extends React.Component {
                 </Typography>
                 <Toolbar>
                   <IconButton
+                    edge="start"
                     color="inherit"
                     aria-label="Open drawer"
                     onClick={this.handleDrawerOpen}
@@ -304,6 +305,7 @@ class AppFrame extends React.Component {
                   </Tooltip>
                   <Tooltip title={t('github')} enterDelay={300}>
                     <IconButton
+                      edge="end"
                       component="a"
                       color="inherit"
                       href="https://github.com/mui-org/material-ui"

diff --git a/docs/src/pages/demos/app-bar/BottomAppBar.js b/docs/src/pages/demos/app-bar/BottomAppBar.js
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
@@ -18,39 +18,6 @@ import AddIcon from '@material-ui/icons/Add';
 import SearchIcon from '@material-ui/icons/Search';
 import MoreIcon from '@material-ui/icons/MoreVert';
 
-const styles = theme => ({
-  text: {
-    paddingTop: theme.spacing(2),
-    paddingLeft: theme.spacing(2),
-    paddingRight: theme.spacing(2),
-  },
-  paper: {
-    paddingBottom: 50,
-  },
-  list: {
-    marginBottom: theme.spacing(2),
-  },
-  subHeader: {
-    backgroundColor: theme.palette.background.paper,
-  },
-  appBar: {
-    top: 'auto',
-    bottom: 0,
-  },
-  toolbar: {
-    alignItems: 'center',
-    justifyContent: 'space-between',
-  },
-  fabButton: {
-    position: 'absolute',
-    zIndex: 1,
-    top: -30,
-    left: 0,
-    right: 0,
-    margin: '0 auto',
-  },
-});
-
 const messages = [
   {
     id: 1,
@@ -100,6 +67,36 @@ const messages = [
   },
 ];
 
+const styles = theme => ({
+  text: {
+    padding: theme.spacing(2, 2, 0),
+  },
+  paper: {
+    paddingBottom: 50,
+  },
+  list: {
+    marginBottom: theme.spacing(2),
+  },
+  subheader: {
+    backgroundColor: theme.palette.background.paper,
+  },
+  appBar: {
+    top: 'auto',
+    bottom: 0,
+  },
+  grow: {
+    flexGrow: 1,
+  },
+  fabButton: {
+    position: 'absolute',
+    zIndex: 1,
+    top: -30,
+    left: 0,
+    right: 0,
+    margin: '0 auto',
+  },
+});
+
 function BottomAppBar(props) {
   const { classes } = props;
   return (
@@ -111,33 +108,32 @@ function BottomAppBar(props) {
         </Typography>
         <List className={classes.list}>
           {messages.map(({ id, primary, secondary, person }) => (
-            <Fragment key={id}>
-              {id === 1 && <ListSubheader className={classes.subHeader}>Today</ListSubheader>}
-              {id === 3 && <ListSubheader className={classes.subHeader}>Yesterday</ListSubheader>}
+            <React.Fragment key={id}>
+              {id === 1 && <ListSubheader className={classes.subheader}>Today</ListSubheader>}
+              {id === 3 && <ListSubheader className={classes.subheader}>Yesterday</ListSubheader>}
               <ListItem button>
                 <Avatar alt="Profile Picture" src={person} />
                 <ListItemText primary={primary} secondary={secondary} />
               </ListItem>
-            </Fragment>
+            </React.Fragment>
           ))}
         </List>
       </Paper>
       <AppBar position="fixed" color="primary" className={classes.appBar}>
-        <Toolbar className={classes.toolbar}>
-          <IconButton color="inherit" aria-label="Open drawer">
+        <Toolbar>
+          <IconButton edge="start" color="inherit" aria-label="Open drawer">
             <MenuIcon />
           </IconButton>
           <Fab color="secondary" aria-label="Add" className={classes.fabButton}>
             <AddIcon />
           </Fab>
-          <div>
-            <IconButton color="inherit">
-              <SearchIcon />
-            </IconButton>
-            <IconButton color="inherit">
-              <MoreIcon />
-            </IconButton>
-          </div>
+          <div className={classes.grow} />
+          <IconButton color="inherit">
+            <SearchIcon />
+          </IconButton>
+          <IconButton edge="end" color="inherit">
+            <MoreIcon />
+          </IconButton>
         </Toolbar>
       </AppBar>
     </React.Fragment>

diff --git a/docs/src/pages/demos/app-bar/BottomAppBar.tsx b/docs/src/pages/demos/app-bar/BottomAppBar.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import { createStyles, Theme, withStyles, WithStyles } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
@@ -18,40 +18,6 @@ import AddIcon from '@material-ui/icons/Add';
 import SearchIcon from '@material-ui/icons/Search';
 import MoreIcon from '@material-ui/icons/MoreVert';
 
-const styles = (theme: Theme) =>
-  createStyles({
-    text: {
-      paddingTop: theme.spacing(2),
-      paddingLeft: theme.spacing(2),
-      paddingRight: theme.spacing(2),
-    },
-    paper: {
-      paddingBottom: 50,
-    },
-    list: {
-      marginBottom: theme.spacing(2),
-    },
-    subHeader: {
-      backgroundColor: theme.palette.background.paper,
-    },
-    appBar: {
-      top: 'auto',
-      bottom: 0,
-    },
-    toolbar: {
-      alignItems: 'center',
-      justifyContent: 'space-between',
-    },
-    fabButton: {
-      position: 'absolute',
-      zIndex: 1,
-      top: -30,
-      left: 0,
-      right: 0,
-      margin: '0 auto',
-    },
-  });
-
 const messages = [
   {
     id: 1,
@@ -101,6 +67,37 @@ const messages = [
   },
 ];
 
+const styles = (theme: Theme) =>
+  createStyles({
+    text: {
+      padding: theme.spacing(2, 2, 0),
+    },
+    paper: {
+      paddingBottom: 50,
+    },
+    list: {
+      marginBottom: theme.spacing(2),
+    },
+    subheader: {
+      backgroundColor: theme.palette.background.paper,
+    },
+    appBar: {
+      top: 'auto',
+      bottom: 0,
+    },
+    grow: {
+      flexGrow: 1,
+    },
+    fabButton: {
+      position: 'absolute',
+      zIndex: 1,
+      top: -30,
+      left: 0,
+      right: 0,
+      margin: '0 auto',
+    },
+  });
+
 export interface Props extends WithStyles<typeof styles> {}
 
 function BottomAppBar(props: Props) {
@@ -114,33 +111,32 @@ function BottomAppBar(props: Props) {
         </Typography>
         <List className={classes.list}>
           {messages.map(({ id, primary, secondary, person }) => (
-            <Fragment key={id}>
-              {id === 1 && <ListSubheader className={classes.subHeader}>Today</ListSubheader>}
-              {id === 3 && <ListSubheader className={classes.subHeader}>Yesterday</ListSubheader>}
+            <React.Fragment key={id}>
+              {id === 1 && <ListSubheader className={classes.subheader}>Today</ListSubheader>}
+              {id === 3 && <ListSubheader className={classes.subheader}>Yesterday</ListSubheader>}
               <ListItem button>
                 <Avatar alt="Profile Picture" src={person} />
                 <ListItemText primary={primary} secondary={secondary} />
               </ListItem>
-            </Fragment>
+            </React.Fragment>
           ))}
         </List>
       </Paper>
       <AppBar position="fixed" color="primary" className={classes.appBar}>
-        <Toolbar className={classes.toolbar}>
-          <IconButton color="inherit" aria-label="Open drawer">
+        <Toolbar>
+          <IconButton edge="start" color="inherit" aria-label="Open drawer">
             <MenuIcon />
           </IconButton>
           <Fab color="secondary" aria-label="Add" className={classes.fabButton}>
             <AddIcon />
           </Fab>
-          <div>
-            <IconButton color="inherit">
-              <SearchIcon />
-            </IconButton>
-            <IconButton color="inherit">
-              <MoreIcon />
-            </IconButton>
-          </div>
+          <div className={classes.grow} />
+          <IconButton color="inherit">
+            <SearchIcon />
+          </IconButton>
+          <IconButton edge="end" color="inherit">
+            <MoreIcon />
+          </IconButton>
         </Toolbar>
       </AppBar>
     </React.Fragment>

diff --git a/docs/src/pages/demos/app-bar/ButtonAppBar.js b/docs/src/pages/demos/app-bar/ButtonAppBar.js
@@ -8,29 +8,28 @@ import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
 
-const styles = {
+const styles = theme => ({
   root: {
     flexGrow: 1,
   },
-  grow: {
-    flexGrow: 1,
-  },
   menuButton: {
-    marginLeft: -12,
-    marginRight: 20,
+    marginRight: theme.spacing(2),
   },
-};
+  title: {
+    flexGrow: 1,
+  },
+});
 
 function ButtonAppBar(props) {
   const { classes } = props;
   return (
     <div className={classes.root}>
       <AppBar position="static">
         <Toolbar>
-          <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
+          <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="Menu">
             <MenuIcon />
           </IconButton>
-          <Typography variant="h6" color="inherit" className={classes.grow}>
+          <Typography variant="h6" color="inherit" className={classes.title}>
             News
           </Typography>
           <Button color="inherit">Login</Button>

diff --git a/docs/src/pages/demos/app-bar/ButtonAppBar.tsx b/docs/src/pages/demos/app-bar/ButtonAppBar.tsx
@@ -1,25 +1,25 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { createStyles, withStyles, WithStyles } from '@material-ui/core/styles';
+import { createStyles, withStyles, WithStyles, Theme } from '@material-ui/core/styles';
 import AppBar from '@material-ui/core/AppBar';
 import Toolbar from '@material-ui/core/Toolbar';
 import Typography from '@material-ui/core/Typography';
 import Button from '@material-ui/core/Button';
 import IconButton from '@material-ui/core/IconButton';
 import MenuIcon from '@material-ui/icons/Menu';
 
-const styles = createStyles({
-  root: {
-    flexGrow: 1,
-  },
-  grow: {
-    flexGrow: 1,
-  },
-  menuButton: {
-    marginLeft: -12,
-    marginRight: 20,
-  },
-});
+const styles = (theme: Theme) =>
+  createStyles({
+    root: {
+      flexGrow: 1,
+    },
+    menuButton: {
+      marginRight: theme.spacing(2),
+    },
+    title: {
+      flexGrow: 1,
+    },
+  });
 
 export interface Props extends WithStyles<typeof styles> {}
 
@@ -29,10 +29,10 @@ function ButtonAppBar(props: Props) {
     <div className={classes.root}>
       <AppBar position="static">
         <Toolbar>
-          <IconButton className={classes.menuButton} color="inherit" aria-label="Menu">
+          <IconButton edge="start" className={classes.menuButton} color="inherit" aria-label="Menu">
             <MenuIcon />
           </IconButton>
-          <Typography variant="h6" color="inherit" className={classes.grow}>
+          <Typography variant="h6" color="inherit" className={classes.title}>
             News
           </Typography>
           <Button color="inherit">Login</Button>