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

[List] Making list meet Material Guidelines #6316

Closed
wants to merge 20 commits into from
Closed

[List] Making list meet Material Guidelines #6316

Show file tree
Hide file tree
Changes from 18 commits
Commits
Show all changes
20 commits
Select commit Hold shift + click to select a range
4be924d
Single line list item adjustments to meet Mterial Guidelines
kybarg Mar 9, 2017
ed0e996
Fixed lint
kybarg Mar 9, 2017
40b90a0
More fancy demo jagged edges
kybarg Mar 9, 2017
e8277e2
Simplified demo styles
kybarg Mar 9, 2017
a852b81
Responsive demo
kybarg Mar 9, 2017
2eed341
Better single-line list demo
kybarg Mar 9, 2017
510f6f2
Fixed sibgle-line list dense text size
kybarg Mar 9, 2017
8a3da54
Moved "dense" param to context
kybarg Mar 9, 2017
21f4cd6
Use CSS inheritance instead instead of class name
kybarg Mar 9, 2017
7328c84
Using `some` to detec child type
kybarg Mar 9, 2017
26428d4
Fixed avatar detection
kybarg Mar 9, 2017
06846b5
Dense property fix
kybarg Mar 9, 2017
2af14ec
Demo fixes
kybarg Mar 9, 2017
aee5667
Merge branch 'callemall/next' into next-list-guidelines
kybarg Mar 9, 2017
6b137ae
Merge branch 'callemall/next' into next-list-guidelines
kybarg Mar 15, 2017
33d1f41
Merge branch 'callemall/next' into next-list-guidelines
kybarg Mar 15, 2017
c7c3f1d
Fixes
kybarg Mar 15, 2017
824709c
Svg background in example
kybarg Mar 15, 2017
87e4f6d
Revert "Svg background in example"
kybarg Mar 17, 2017
ba004b1
Two-lines list example
kybarg Mar 17, 2017
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
3 changes: 3 additions & 0 deletions docs/site/assets/images/bg-triangle-dark.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
3 changes: 3 additions & 0 deletions docs/site/assets/images/bg-triangle-light.svg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
222 changes: 222 additions & 0 deletions docs/site/src/demos/lists/SingleLineList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,222 @@
// @flow weak

import React, { Component } from 'react';
import { createStyleSheet } from 'jss-theme-reactor';
import customPropTypes from 'material-ui/utils/customPropTypes';
import {
List,
ListItem,
ListItemAvatar,
ListItemIcon,
ListItemSecondaryAction,
ListItemText,
} from 'material-ui/List';
import Avatar from 'material-ui/Avatar';
import FolderIcon from 'material-ui/svg-icons/folder';
import IconButton from 'material-ui/IconButton';
import { LabelCheckbox } from 'material-ui/Checkbox';
import Layout from 'material-ui/Layout';
import Text from 'material-ui/Text';
import TriangleImageLight from 'docs/site/assets/images/bg-triangle-light.svg';
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Oh noooo, the demo is no longer working in isolation. It's going to be a pain for user starting from the demos.
@mbrookes What do you suggest?

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@oliviertassinari Either the <svg> could be defined inline rather than being imported, or the file be treated as an img, so will fail gracefully if the example code is copied without the svg file.

@kybarg Could the CSS fill & stroke attributes perhaps be used so as to not need two separate svgs?

Copy link
Member

@oliviertassinari oliviertassinari Mar 15, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

You see me coming but simplicity might be just as good: removing that fancy effect.
I hope we will find a better solution.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nooooo!! 🤣 🤣 🤣

import TriangleImageDark from 'docs/site/assets/images/bg-triangle-dark.svg';

const styleSheet = createStyleSheet('SingleLineList', (theme) => ({
root: {
flexGrow: 1,
maxWidth: 752,
},
container: {
width: '100%',
},
demoContainer: {
margin: '0 auto',
maxWidth: 360,
},
demo: {
background: theme.palette.background.paper,
border: `solid ${theme.palette.text.divider}`,
borderWidth: '1px 1px 0',
marginBottom: 16,
maxHeight: 160,
overflow: 'hidden',
position: 'relative',
width: '100%',
zIndex: 1,
'&:before': {
backgroundImage: `url(${theme.palette.type === 'light' ?
TriangleImageLight : TriangleImageDark})`,
backgroundSize: '18px 10px',
backgroundPosition: '-1px 0',
bottom: 0,
content: '""',
Copy link
Member

@oliviertassinari oliviertassinari Mar 9, 2017 •
edited
Loading

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Good, doing the other way around crash on IE11 "''" cssinjs/jss#242

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@oliviertassinari So content: '""' or content: "''" is the right way? 😄

display: 'block',
height: 10,
position: 'absolute',
width: '100%',
zIndex: theme.zIndex.tooltip,
},
},
title: {
margin: `${theme.spacing.unit * 4}px 0 ${theme.spacing.unit * 2}px`,
},
}));

class SingleLineList extends Component {
static contextTypes = {
styleManager: customPropTypes.muiRequired,
};

state = {
dense: false,
};

render() {
const classes = this.context.styleManager.render(styleSheet);
const { dense } = this.state;

return (
<div className={classes.root}>
<LabelCheckbox
checked={dense}
onChange={(event, checked) => this.setState({ dense: checked })}
label="Enable dense preview"
value="dense"
/>
<Layout container className={classes.container}>
<Layout item xs={12} md={6}>
<div className={classes.demoContainer}>
<Text type="title" className={classes.title}>Text only</Text>
<div className={classes.demo}>
<List dense={dense}>
<ListItem button>
<ListItemText primary="Single-line item" />
</ListItem>
<ListItem button>
<ListItemText primary="Single-line item" />
</ListItem>
<ListItem button>
<ListItemText primary="Single-line item" />
</ListItem>
<ListItem button>
<ListItemText primary="Single-line item" />
</ListItem>
</List>
</div>
<Text type="body1" secondary>Single-line list</Text>
</div>
</Layout>
<Layout item xs={12} md={6}>
<div className={classes.demoContainer}>
<Text type="title" className={classes.title}>Icon with text</Text>
<div className={classes.demo}>
<List dense={dense}>
<ListItem button>
<ListItemIcon><FolderIcon /></ListItemIcon>
<ListItemText primary="Single-line item" />
</ListItem>
<ListItem button>
<ListItemIcon><FolderIcon /></ListItemIcon>
<ListItemText primary="Single-line item" />
</ListItem>
<ListItem button>
<ListItemIcon><FolderIcon /></ListItemIcon>
<ListItemText primary="Single-line item" />
</ListItem>
<ListItem button>
<ListItemIcon><FolderIcon /></ListItemIcon>
<ListItemText primary="Single-line item" />
</ListItem>
</List>
</div>
<Text type="body1" secondary>Single-line list with icon</Text>
</div>
</Layout>
</Layout>
<Layout container className={classes.container}>
<Layout item xs={12} md={6}>
<div className={classes.demoContainer}>
<Text type="title" className={classes.title}>Avatar with text</Text>
<div className={classes.demo} style={{ maxHeight: 184 }}>
<List dense={dense}>
<ListItem button>
<ListItemAvatar>
<Avatar><FolderIcon /></Avatar>
</ListItemAvatar>
<ListItemText primary="Single-line item" />
</ListItem>
<ListItem button>
<ListItemAvatar>
<Avatar><FolderIcon /></Avatar>
</ListItemAvatar>
<ListItemText primary="Single-line item" />
</ListItem>
<ListItem button>
<ListItemAvatar>
<Avatar><FolderIcon /></Avatar>
</ListItemAvatar>
<ListItemText primary="Single-line item" />
</ListItem>
<ListItem button>
<ListItemAvatar>
<Avatar><FolderIcon /></Avatar>
</ListItemAvatar>
<ListItemText primary="Single-line item" />
</ListItem>
</List>
</div>
<Text type="body1" secondary>Single-line item with avatar</Text>
</div>
</Layout>
<Layout item xs={12} md={6}>
<div className={classes.demoContainer}>
<Text type="title" className={classes.title}>Avatar with text and icon</Text>
<div className={classes.demo} style={{ maxHeight: 184 }}>
<List dense={dense}>
<ListItem button>
<ListItemAvatar>
<Avatar><FolderIcon /></Avatar>
</ListItemAvatar>
<ListItemText primary="Single-line item" />
<ListItemSecondaryAction>
<IconButton>comment</IconButton>
</ListItemSecondaryAction>
</ListItem>
<ListItem button>
<ListItemAvatar>
<Avatar><FolderIcon /></Avatar>
</ListItemAvatar>
<ListItemText primary="Single-line item" />
<ListItemSecondaryAction>
<IconButton>comment</IconButton>
</ListItemSecondaryAction>
</ListItem>
<ListItem button>
<ListItemAvatar>
<Avatar><FolderIcon /></Avatar>
</ListItemAvatar>
<ListItemText primary="Single-line item" />
<ListItemSecondaryAction>
<IconButton>comment</IconButton>
</ListItemSecondaryAction>
</ListItem>
<ListItem button>
<ListItemAvatar>
<Avatar><FolderIcon /></Avatar>
</ListItemAvatar>
<ListItemText primary="Single-line item" />
<ListItemSecondaryAction>
<IconButton>comment</IconButton>
</ListItemSecondaryAction>
</ListItem>
</List>
</div>
<Text type="body1" secondary>Single-line item with avatar and icon</Text>
</div>
</Layout>
</Layout>
</div>
);
}
}

export default SingleLineList;
4 changes: 4 additions & 0 deletions docs/site/src/demos/lists/lists.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,10 @@ Lists are made up of a continuous column of rows. Each row contains a tile. Prim

Lists are best suited for similar data types.

### Single-line list

{{demo='demos/lists/SingleLineList.js'}}

### Simple List

{{demo='demos/lists/SimpleList.js'}}
Expand Down
132 changes: 80 additions & 52 deletions src/List/List.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
// @flow weak

import React, { PropTypes } from 'react';
import React, { Component, PropTypes } from 'react';
import classNames from 'classnames';
import { createStyleSheet } from 'jss-theme-reactor';
import customPropTypes from '../utils/customPropTypes';
Expand All @@ -18,66 +18,94 @@ export const styleSheet = createStyleSheet('MuiList', () => {
paddingTop: 8,
paddingBottom: 8,
},
dense: {
paddingTop: 4,
paddingBottom: 4,
},
subheader: {
paddingTop: 0,
},
};
});

/**
* A simple list component.
* A material list root element.
*
* ```jsx
* <List>
* <ListItem>....</ListItem>
* </List>
* ```
*/
export default function List(props, context) {
const {
className: classNameProp,
component: ComponentProp,
padding,
children,
subheader,
rootRef,
...other
} = props;
const classes = context.styleManager.render(styleSheet);
const className = classNames(classes.root, {
[classes.padding]: padding,
[classes.subheader]: subheader,
}, classNameProp);
export default class List extends Component {
static propTypes = {
children: PropTypes.node,
/**
* The CSS class name of the root element.
*/
className: PropTypes.string,
/**
* The component used for the root node.
* Either a string to use a DOM element or a ReactElement.
*/
component: PropTypes.oneOfType([
PropTypes.string,
PropTypes.func,
]),
dense: PropTypes.bool,
padding: PropTypes.bool,
/**
* @ignore
*/
rootRef: PropTypes.func,
subheader: PropTypes.node,
};

return (
<ComponentProp ref={rootRef} className={className} {...other}>
{subheader}
{children}
</ComponentProp>
);
}
static defaultProps = {
component: 'div',
dense: false,
padding: true,
};

static contextTypes = {
styleManager: customPropTypes.muiRequired,
};

static childContextTypes = {
dense: PropTypes.bool,
};

List.propTypes = {
children: PropTypes.node,
/**
* The CSS class name of the root element.
*/
className: PropTypes.string,
/**
* The component used for the root node.
* Either a string to use a DOM element or a ReactElement.
*/
component: PropTypes.oneOfType([
PropTypes.string,
PropTypes.func,
]),
padding: PropTypes.bool,
/**
* @ignore
*/
rootRef: PropTypes.func,
subheader: PropTypes.node,
};
getChildContext() {
const { dense } = this.props;

List.defaultProps = {
component: 'div',
padding: true,
};
return {
dense,
};
}

List.contextTypes = {
styleManager: customPropTypes.muiRequired,
};
render() {
const {
className: classNameProp,
component: ComponentProp,
padding,
children,
dense,
subheader,
rootRef,
...other
} = this.props;
const classes = this.context.styleManager.render(styleSheet);
const className = classNames(classes.root, {
[classes.dense]: dense,
[classes.padding]: padding,
[classes.subheader]: subheader,
}, classNameProp);

return (
<ComponentProp ref={rootRef} className={className} {...other}>
{subheader}
{children}
</ComponentProp>
);
}
}
Loading