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 all 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
224 changes: 224 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,224 @@
// @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';

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: `linear-gradient(
45deg,${theme.palette.background.contentFrame} 25%, transparent 25%
),
linear-gradient(
-45deg,${theme.palette.background.contentFrame} 25%, transparent 25%
)`,
backgroundSize: '20px 20px',
backgroundPosition: '10px -10px',
bottom: 0,
content: '""',
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;
Loading