Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[IconButton] Implement a new edge prop #14758

Merged
merged 11 commits into from
Mar 9, 2019
Merged

[IconButton] Implement a new edge prop #14758

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
11 commits
Select commit Hold shift + click to select a range
e171b2b
feat(IconButton): add align prop (shortcut for applying negative margin)
jedwards1211 Mar 6, 2019
0cd5739
fix(IconButton.d.ts): update TypeScript defs
jedwards1211 Mar 6, 2019
b46c4ca
test(IconButton): add test for align prop
jedwards1211 Mar 6, 2019
ad24691
test(IconButton): split up test cases
jedwards1211 Mar 6, 2019
7f06a91
fix: rename `align` prop to `edge`
jedwards1211 Mar 7, 2019
4051255
docs(AppFrame): use IconButton edge prop
jedwards1211 Mar 7, 2019
e21f0d7
fix(IconButton.d.ts): fix TypeScript defs
jedwards1211 Mar 7, 2019
0f09967
docs(IconButton): fix formatting
jedwards1211 Mar 7, 2019
7a1dbb9
fix(IconButton): change edge enum values to start | end
jedwards1211 Mar 7, 2019
a315e0a
fix(IconButton): fix failing tests and regen docs
jedwards1211 Mar 7, 2019
c81bf03
simplify the demos
oliviertassinari Mar 7, 2019
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 3 additions & 1 deletion docs/src/modules/components/AppFrame.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,7 +93,7 @@ const styles = theme => ({
flex: '1 1 auto',
},
title: {
marginLeft: 24,
marginLeft: theme.spacing(2),
flex: '0 1 auto',
},
appBar: {
Expand Down Expand Up @@ -215,6 +215,7 @@ class AppFrame extends React.Component {
</Typography>
<Toolbar>
<IconButton
edge="start"
color="inherit"
aria-label="Open drawer"
onClick={this.handleDrawerOpen}
Expand Down Expand Up @@ -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"
Expand Down
92 changes: 44 additions & 48 deletions docs/src/pages/demos/app-bar/BottomAppBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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,
Expand Down Expand Up @@ -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 (
Expand All @@ -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>
Expand Down
94 changes: 45 additions & 49 deletions docs/src/pages/demos/app-bar/BottomAppBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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';
Expand All @@ -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,
Expand Down Expand Up @@ -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) {
Expand All @@ -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>
Expand Down
17 changes: 8 additions & 9 deletions docs/src/pages/demos/app-bar/ButtonAppBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
30 changes: 15 additions & 15 deletions docs/src/pages/demos/app-bar/ButtonAppBar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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> {}

Expand All @@ -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>
Expand Down
Loading