Skip to content

Commit

Permalink
let's merge
Browse files Browse the repository at this point in the history
  • Loading branch information
@oliviertassinari
oliviertassinari committed Nov 15, 2018
1 parent eea3d22 commit 1cd659c
Show file tree
Hide file tree
Showing 9 changed files with 140 additions and 224 deletions.
1 change: 0 additions & 1 deletion .size-limit.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,6 @@ const [main] = fs.readdirSync(dirname).reduce((result, filename) => {
return result;
}, []);


module.exports = [
{
name: 'The initial cost paid for using one component',
Expand Down
50 changes: 24 additions & 26 deletions docs/src/pages/demos/dividers/InsetDividers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,32 +21,30 @@ const styles = theme => ({
function InsetDividers(props) {
const { classes } = props;
return (
<div className={classes.root}>
<List>
<ListItem>
<Avatar>
<ImageIcon />
</Avatar>
<ListItemText primary="Photos" secondary="Jan 9, 2014" />
</ListItem>
<li>
<Divider variant={'inset'} />
</li>
<ListItem>
<Avatar>
<WorkIcon />
</Avatar>
<ListItemText primary="Work" secondary="Jan 7, 2014" />
</ListItem>
<Divider variant={'inset'} component="li" />
<ListItem>
<Avatar>
<BeachAccessIcon />
</Avatar>
<ListItemText primary="Vacation" secondary="July 20, 2014" />
</ListItem>
</List>
</div>
<List className={classes.root}>
<ListItem>
<Avatar>
<ImageIcon />
</Avatar>
<ListItemText primary="Photos" secondary="Jan 9, 2014" />
</ListItem>
<li>
<Divider variant="inset" />
</li>
<ListItem>
<Avatar>
<WorkIcon />
</Avatar>
<ListItemText primary="Work" secondary="Jan 7, 2014" />
</ListItem>
<Divider variant="inset" component="li" />
<ListItem>
<Avatar>
<BeachAccessIcon />
</Avatar>
<ListItemText primary="Vacation" secondary="July 20, 2014" />
</ListItem>
</List>
);
}

Expand Down
34 changes: 16 additions & 18 deletions docs/src/pages/demos/dividers/ListDividers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,24 +17,22 @@ const styles = theme => ({
function ListDividers(props) {
const { classes } = props;
return (
<div className={classes.root}>
<List component="nav">
<ListItem button>
<ListItemText primary="Inbox" />
</ListItem>
<Divider />
<ListItem button divider>
<ListItemText primary="Drafts" />
</ListItem>
<ListItem button>
<ListItemText primary="Trash" />
</ListItem>
<Divider light />
<ListItem button>
<ListItemText primary="Spam" />
</ListItem>
</List>
</div>
<List component="nav" className={classes.root}>
<ListItem button>
<ListItemText primary="Inbox" />
</ListItem>
<Divider />
<ListItem button divider>
<ListItemText primary="Drafts" />
</ListItem>
<ListItem button>
<ListItemText primary="Trash" />
</ListItem>
<Divider light />
<ListItem button>
<ListItemText primary="Spam" />
</ListItem>
</List>
);
}

Expand Down
46 changes: 22 additions & 24 deletions docs/src/pages/demos/dividers/MiddleDividers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,30 +21,28 @@ const styles = theme => ({
function MiddleDividers(props) {
const { classes } = props;
return (
<div className={classes.root}>
<List>
<ListItem>
<Avatar>
<ImageIcon />
</Avatar>
<ListItemText primary="Photos" secondary="Jan 9, 2014" />
</ListItem>
<Divider component="li" variant={'middle'} />
<ListItem>
<Avatar>
<WorkIcon />
</Avatar>
<ListItemText primary="Work" secondary="Jan 7, 2014" />
</ListItem>
<Divider variant={'middle'} component="li" />
<ListItem>
<Avatar>
<BeachAccessIcon />
</Avatar>
<ListItemText primary="Vacation" secondary="July 20, 2014" />
</ListItem>
</List>
</div>
<List className={classes.root}>
<ListItem>
<Avatar>
<ImageIcon />
</Avatar>
<ListItemText primary="Photos" secondary="Jan 9, 2014" />
</ListItem>
<Divider component="li" variant="middle" />
<ListItem>
<Avatar>
<WorkIcon />
</Avatar>
<ListItemText primary="Work" secondary="Jan 7, 2014" />
</ListItem>
<Divider variant="middle" component="li" />
<ListItem>
<Avatar>
<BeachAccessIcon />
</Avatar>
<ListItemText primary="Vacation" secondary="July 20, 2014" />
</ListItem>
</List>
);
}

Expand Down
59 changes: 33 additions & 26 deletions docs/src/pages/demos/dividers/SubheaderDividers.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,46 +5,53 @@ import List from '@material-ui/core/List';
import ListItem from '@material-ui/core/ListItem';
import ListItemText from '@material-ui/core/ListItemText';
import Avatar from '@material-ui/core/Avatar';
import ImageIcon from '@material-ui/icons/Image';
import WorkIcon from '@material-ui/icons/Work';
import BeachAccessIcon from '@material-ui/icons/BeachAccess';
import Divider from '@material-ui/core/Divider';
import Typography from '@material-ui/core/Typography';

const styles = theme => ({
root: {
width: '100%',
maxWidth: 360,
backgroundColor: theme.palette.background.paper,
},
dividerFullWidth: {
margin: `5px 0 0 ${theme.spacing.unit * 2}px`,
},
dividerInset: {
margin: `5px 0 0 ${theme.spacing.unit * 9}px`,
},
});

function SubheaderDividers(props) {
const { classes } = props;
return (
<div className={classes.root}>
<List>
<ListItem>
<Avatar>
<ImageIcon />
</Avatar>
<ListItemText primary="Photos" secondary="Jan 9, 2014" />
</ListItem>
<Divider subheader="Test" component="li" />
<ListItem>
<Avatar>
<WorkIcon />
</Avatar>
<ListItemText primary="Work" secondary="Jan 7, 2014" />
</ListItem>
<Divider variant={'inset'} subheader="Test" component="li" />
<ListItem>
<Avatar>
<BeachAccessIcon />
</Avatar>
<ListItemText primary="Vacation" secondary="July 20, 2014" />
</ListItem>
</List>
</div>
<List className={classes.root}>
<ListItem>
<ListItemText primary="Photos" secondary="Jan 9, 2014" />
</ListItem>
<Divider component="li" />
<li>
<Typography className={classes.dividerFullWidth} color="textSecondary" variant="caption">
Divider
</Typography>
</li>
<ListItem>
<ListItemText primary="Work" secondary="Jan 7, 2014" />
</ListItem>
<Divider component="li" variant="inset" />
<li>
<Typography className={classes.dividerInset} color="textSecondary" variant="caption">
Leisure
</Typography>
</li>
<ListItem>
<Avatar>
<BeachAccessIcon />
</Avatar>
<ListItemText primary="Vacation" secondary="July 20, 2014" />
</ListItem>
</List>
);
}

Expand Down
5 changes: 2 additions & 3 deletions packages/material-ui/src/Divider/Divider.d.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,10 @@ export interface DividerProps
component?: React.ReactType<DividerProps>;
inset?: boolean;
light?: boolean;
subheader?: string;
variant?: 'fullBleed' | 'inset' | 'middle';
variant?: 'fullWidth' | 'inset' | 'middle';
}

export type DividerClassKey = 'root' | 'absolute' | 'inset' | 'light' | 'middle' | 'subheader';
export type DividerClassKey = 'root' | 'absolute' | 'inset' | 'light' | 'middle';

declare const Divider: React.ComponentType<DividerProps>;

Expand Down
80 changes: 23 additions & 57 deletions packages/material-ui/src/Divider/Divider.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
import classNames from 'classnames';
import withStyles from '../styles/withStyles';
import { fade } from '../styles/colorManipulator';
import Typography from '../Typography/Typography';
import chainPropTypes from '../utils/chainPropTypes';

export const styles = theme => ({
Expand All @@ -22,73 +21,54 @@ export const styles = theme => ({
left: 0,
width: '100%',
},
/* Styles applied to the root element if `variant={'inset'}`. */
/* Styles applied to the root element if `variant="inset"`. */
inset: {
marginLeft: 72,
'& + $subheader': {
marginLeft: 72,
marginTop: theme.spacing.unit / 2,
},
},
/* Styles applied to the root element if `light={true}`. */
light: {
backgroundColor: fade(theme.palette.divider, 0.08),
},
/* Styles applied to the root element if `variant={'middle'}`. */
/* Styles applied to the root element if `variant="middle"`. */
middle: {
marginLeft: theme.spacing.unit * 2,
marginRight: theme.spacing.unit * 2,
},
/* Styles applied to the Typography element */
subheader: {
marginLeft: theme.spacing.unit * 2,
marginTop: theme.spacing.unit / 2 + 1,
},
});

function Divider(props) {
const {
absolute,
classes,
className: classNameProp,
className,
component: Component,
inset,
light,
subheader,
variant,
...other
} = props;

const className = classNames(
classes.root,
{
[classes.absolute]: absolute,
[classes.inset]: inset || variant === 'inset',
[classes.light]: light,
[classes.middle]: variant === 'middle',
},
classNameProp,
);

let subheaderComponent;

if (subheader && variant !== 'middle') {
subheaderComponent = (
<Typography color="textSecondary" className={classes.subheader}>
{subheader}
</Typography>
);
}

return (
<React.Fragment>
<Component className={className} {...other} />
{subheaderComponent}
</React.Fragment>
<Component
className={classNames(
classes.root,
{
[classes.inset]: inset || variant === 'inset',
[classes.middle]: variant === 'middle',
[classes.absolute]: absolute,
[classes.light]: light,
},
className,
)}
{...other}
/>
);
}

Divider.propTypes = {
/**
* Absolutely position the element.
*/
absolute: PropTypes.bool,
/**
* Override or extend the styles applied to the component.
Expand All @@ -113,9 +93,9 @@ Divider.propTypes = {
/* istanbul ignore if */
if (props.inset) {
return new Error(
'Material-UI: You are using the deprecated `inset` property ' +
'Material-UI: you are using the deprecated `inset` property ' +
'that will be removed in the next major release. The property `variant="inset"` ' +
'is equivalent and should be used instead',
'is equivalent and should be used instead.',
);
}

Expand All @@ -125,31 +105,17 @@ Divider.propTypes = {
* If `true`, the divider will have a lighter color.
*/
light: PropTypes.bool,
/**
* Divider subheader text. This will not work with `variant={'middle'}`
*/
subheader: chainPropTypes(PropTypes.string, props => {
/* istanbul ignore if */
if (props.subheader && props.variant === 'middle') {
return new Error(
'Material-UI: you have provided the `subheader` property ' +
'with the variant `middle`. This will have no effect.',
);
}

return null;
}),
/**
* The variant to use.
*/
variant: PropTypes.oneOf(['fullBleed', 'inset', 'middle']),
variant: PropTypes.oneOf(['fullWidth', 'inset', 'middle']),
};

Divider.defaultProps = {
absolute: false,
component: 'hr',
light: false,
variant: 'fullBleed',
variant: 'fullWidth',
};

export default withStyles(styles, { name: 'MuiDivider' })(Divider);
Loading

0 comments on commit 1cd659c

Please sign in to comment.