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

[docs] Use material-ui-icons package #6390

Merged
merged 5 commits into from
Mar 20, 2017
Merged

[docs] Use material-ui-icons package #6390

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
8e8c928
[docs] Use material-ui-icons package, remove unneeded svg-icons
mbrookes Mar 18, 2017
e7f91fa
[docs] Replace font-icon with SvgIcons in IconButton
mbrookes Mar 19, 2017
9e2efa8
[docs] Replace Icon with material-ui-icons
mbrookes Mar 19, 2017
b74e462
[docs] Update style/icons docs
mbrookes Mar 19, 2017
5c3c479
[Avatar] Fix failing test
mbrookes Mar 19, 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
1 change: 1 addition & 0 deletions docs/site/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@
},
"dependencies": {
"marked": "^0.3.6",
"material-ui-icons": "^1.0.0-alpha.2",
Copy link
Member

Choose a reason for hiding this comment

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

Why not changing the webpack conf to use the icons on the repository?

Copy link
Member

Choose a reason for hiding this comment

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

I fear the maintenance cost of keeping up to date.

Copy link
Member Author

@mbrookes mbrookes Mar 19, 2017 •
edited
Loading

Choose a reason for hiding this comment

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

@oliviertassinari - the icons aren't in the repository. I guess we could add them, but unless there's major change, there is no maintenance cost.

Copy link
Member

Choose a reason for hiding this comment

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

@mbrookes Alright, choose what you think is best 👍 .

Copy link
Member Author

Choose a reason for hiding this comment

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

This is simplest for now. We can always revisit it if it causes an unforseen problem.

"prismjs": "^1.6.0",
"react-redux": "^5.0.3",
"react-router": "^3.0.2",
Expand Down
4 changes: 2 additions & 2 deletions docs/site/src/components/AppFrame.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,8 +9,8 @@ import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import IconButton from 'material-ui/IconButton';
import withWidth, { isWidthUp } from 'material-ui/utils/withWidth';
import MenuIcon from 'material-ui/svg-icons/menu';
import LightbulbOutlineIcon from 'material-ui/svg-icons/lightbulb-outline';
import MenuIcon from 'material-ui-icons/Menu';
import LightbulbOutlineIcon from 'material-ui-icons/LightbulbOutline';
import customPropTypes from 'material-ui/utils/customPropTypes';
import AppDrawer from './AppDrawer';

Expand Down
2 changes: 1 addition & 1 deletion docs/site/src/components/Demo.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ import shallowEqual from 'recompose/shallowEqual';
import customPropTypes from 'material-ui/utils/customPropTypes';
import IconButton from 'material-ui/IconButton';
import Collapse from 'material-ui/transitions/Collapse';
import CodeIcon from 'material-ui/svg-icons/code';
import CodeIcon from 'material-ui-icons/Code';
import MarkdownElement from 'docs/site/src/components/MarkdownElement';

const requireDemos = require.context('docs/site/src', true, /\.js$/);
Expand Down
2 changes: 1 addition & 1 deletion docs/site/src/demos/app-bar/ButtonAppBar.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@ import Toolbar from 'material-ui/Toolbar';
import Text from 'material-ui/Text';
import Button from 'material-ui/Button';
import IconButton from 'material-ui/IconButton';
import MenuIcon from 'material-ui/svg-icons/menu';
import MenuIcon from 'material-ui-icons/Menu';

const styleSheet = createStyleSheet('ButtonAppBar', () => ({
root: {
Expand Down
6 changes: 3 additions & 3 deletions docs/site/src/demos/avatars/IconAvatars.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,9 +5,9 @@ import { createStyleSheet } from 'jss-theme-reactor';
import Avatar from 'material-ui/Avatar';
import customPropTypes from 'material-ui/utils/customPropTypes';
import { pink, green } from 'material-ui/styles/colors';
import FolderIcon from 'material-ui/svg-icons/folder';
import PageviewIcon from 'material-ui/svg-icons/pageview';
import AssignmentIcon from 'material-ui/svg-icons/assignment';
import FolderIcon from 'material-ui-icons/Folder';
import PageviewIcon from 'material-ui-icons/Pageview';
import AssignmentIcon from 'material-ui-icons/Assignment';

const styleSheet = createStyleSheet('IconAvatars', () => ({
avatar: {
Expand Down
7 changes: 4 additions & 3 deletions docs/site/src/demos/badges/SimpleBadge.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,8 @@ import React from 'react';
import { createStyleSheet } from 'jss-theme-reactor';
import customPropTypes from 'material-ui/utils/customPropTypes';
import Badge from 'material-ui/Badge';
import Icon from 'material-ui/Icon';
import MailIcon from 'material-ui-icons/Mail';
import FolderIcon from 'material-ui-icons/Folder';

const styleSheet = createStyleSheet('SimpleBadge', (theme) => ({
badge: {
Expand All @@ -21,14 +22,14 @@ export default function SimpleBadge(props, context) {
badgeContent={4}
primary
>
<Icon>mail</Icon>
<MailIcon />
</Badge>
<Badge
className={classes.badge}
badgeContent={10}
accent
>
<Icon>folder</Icon>
<FolderIcon />
</Badge>
</div>
);
Expand Down
8 changes: 4 additions & 4 deletions docs/site/src/demos/bottom-navigation/LabelBottomNavigation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,10 @@ import React, { Component } from 'react';
import { createStyleSheet } from 'jss-theme-reactor';
import customPropTypes from 'material-ui/utils/customPropTypes';
import { BottomNavigation, BottomNavigationButton } from 'material-ui/BottomNavigation';
import RestoreIcon from 'material-ui/svg-icons/restore';
import FavoriteIcon from 'material-ui/svg-icons/favorite';
import LocationOnIcon from 'material-ui/svg-icons/location-on';
import FolderIcon from 'material-ui/svg-icons/folder';
import RestoreIcon from 'material-ui-icons/Restore';
import FavoriteIcon from 'material-ui-icons/Favorite';
import LocationOnIcon from 'material-ui-icons/LocationOn';
import FolderIcon from 'material-ui-icons/Folder';

const styleSheet = createStyleSheet('LabelBottomNavigation', () => ({
root: {
Expand Down
6 changes: 3 additions & 3 deletions docs/site/src/demos/bottom-navigation/SimpleBottomNavigation.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,9 +4,9 @@ import React, { Component } from 'react';
import { createStyleSheet } from 'jss-theme-reactor';
import customPropTypes from 'material-ui/utils/customPropTypes';
import { BottomNavigation, BottomNavigationButton } from 'material-ui/BottomNavigation';
import RestoreIcon from 'material-ui/svg-icons/restore';
import FavoriteIcon from 'material-ui/svg-icons/favorite';
import LocationOnIcon from 'material-ui/svg-icons/location-on';
import RestoreIcon from 'material-ui-icons/Restore';
import FavoriteIcon from 'material-ui-icons/Favorite';
import LocationOnIcon from 'material-ui-icons/LocationOn';

const styleSheet = createStyleSheet('SimpleBottomNavigation', () => ({
root: {
Expand Down
4 changes: 2 additions & 2 deletions docs/site/src/demos/buttons/FloatingActionButtons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,8 +4,8 @@ import React from 'react';
import { createStyleSheet } from 'jss-theme-reactor';
import customPropTypes from 'material-ui/utils/customPropTypes';
import Button from 'material-ui/Button';
import AddIcon from 'material-ui/svg-icons/add';
import ModeEditIcon from 'material-ui/svg-icons/mode-edit';
import AddIcon from 'material-ui-icons/Add';
import ModeEditIcon from 'material-ui-icons/ModeEdit';

const styleSheet = createStyleSheet('FloatingActionButtons', (theme) => ({
button: {
Expand Down
12 changes: 7 additions & 5 deletions docs/site/src/demos/buttons/IconButtons.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,9 @@ import React from 'react';
import { createStyleSheet } from 'jss-theme-reactor';
import customPropTypes from 'material-ui/utils/customPropTypes';
import IconButton from 'material-ui/IconButton';
import Icon from 'material-ui/Icon';
import DeleteIcon from 'material-ui-icons/Delete';
import AlarmIcon from 'material-ui-icons/Alarm';
import AddShoppingCartIcon from 'material-ui-icons/AddShoppingCart';

const styleSheet = createStyleSheet('IconButtons', (theme) => ({
button: {
Expand All @@ -17,16 +19,16 @@ export default function IconButtons(props, context) {
return (
<div>
<IconButton className={classes.button}>
delete
<DeleteIcon />
</IconButton>
<IconButton className={classes.button} disabled>
delete
<DeleteIcon />
</IconButton>
<IconButton accent className={classes.button}>
<Icon>alarm</Icon>
<AlarmIcon />
</IconButton>
<IconButton contrast className={classes.button}>
add_shopping_cart
<AddShoppingCartIcon />
</IconButton>
</div>
);
Expand Down
18 changes: 14 additions & 4 deletions docs/site/src/demos/cards/NowPlayingCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,9 @@ import {
} from 'material-ui/Card';
import IconButton from 'material-ui/IconButton';
import Text from 'material-ui/Text';
import SkipPreviousIcon from 'material-ui-icons/SkipPrevious';
import PlayArrowIcon from 'material-ui-icons/PlayArrow';
import SkipNextIcon from 'material-ui-icons/SkipNext';
import albumCover from 'docs/site/assets/images/live-from-space.jpg';

const styleSheet = createStyleSheet('NowPlayingCard', () => ({
Expand All @@ -33,7 +36,8 @@ const styleSheet = createStyleSheet('NowPlayingCard', () => ({
paddingBottom: 8,
},
playIcon: {
fontSize: 38,
height: 38,
width: 38,
},
}));

Expand All @@ -51,9 +55,15 @@ export default function NowPlayingCard(props, context) {
</Text>
</CardContent>
<div className={classes.controls}>
<IconButton>skip_previous</IconButton>
<IconButton iconClassName={classes.playIcon}>play_arrow</IconButton>
<IconButton>skip_next</IconButton>
<IconButton>
<SkipPreviousIcon />
</IconButton>
<IconButton>
<PlayArrowIcon className={classes.playIcon} />
</IconButton>
<IconButton>
<SkipNextIcon />
</IconButton>
</div>
</div>
<div className={classes.cover}>
Expand Down
13 changes: 10 additions & 3 deletions docs/site/src/demos/cards/RecipeReviewCard.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,9 @@ import Avatar from 'material-ui/Avatar';
import IconButton from 'material-ui/IconButton';
import Text from 'material-ui/Text';
import { red } from 'material-ui/styles/colors';
import FavoriteIcon from 'material-ui-icons/Favorite';
import ShareIcon from 'material-ui-icons/Share';
import ExpandMoreIcon from 'material-ui-icons/ExpandMore';
import paellaImage from 'docs/site/assets/images/paella@2x.jpg';

const styleSheet = createStyleSheet('RecipeReviewCard', (theme) => ({
Expand Down Expand Up @@ -64,16 +67,20 @@ export default class RecipeReviewCard extends Component {
</Text>
</CardContent>
<CardActions actionSpacing={false}>
<IconButton>favorite</IconButton>
<IconButton>share</IconButton>
<IconButton>
<FavoriteIcon />
</IconButton>
<IconButton>
<ShareIcon />
</IconButton>
<div className={classes.flexGrow} />
<IconButton
className={classnames(classes.expand, {
[classes.expandOpen]: this.state.expanded,
})}
onClick={this.handleExpandClick}
>
expand_more
<ExpandMoreIcon />
</IconButton>
</CardActions>
<Collapse in={this.state.expanded} transitionDuration="auto" unmountOnExit>
Expand Down
4 changes: 2 additions & 2 deletions docs/site/src/demos/chips/Chips.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,7 @@ import { createStyleSheet } from 'jss-theme-reactor';
import customPropTypes from 'material-ui/utils/customPropTypes';
import Avatar from 'material-ui/Avatar';
import Chip from 'material-ui/Chip';
import Face from 'material-ui/svg-icons/face';
import FaceIcon from 'material-ui-icons/Face';
import { grey } from 'material-ui/styles/colors';
import avatarImage from 'docs/site/assets/images/uxceo-128.jpg';

Expand Down Expand Up @@ -52,7 +52,7 @@ export default function Chips(props, context) {
className={classes.chip}
/>
<Chip
avatar={<Avatar><Face className={classes.svgIcon} /></Avatar>}
avatar={<Avatar><FaceIcon className={classes.svgIcon} /></Avatar>}
label="Clickable Deletable Chip"
onClick={handleClick}
onRequestDelete={handleRequestDelete}
Expand Down
2 changes: 1 addition & 1 deletion docs/site/src/demos/dialogs/FullScreenDialog.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@ import AppBar from 'material-ui/AppBar';
import Toolbar from 'material-ui/Toolbar';
import IconButton from 'material-ui/IconButton';
import Text from 'material-ui/Text';
import CloseIcon from 'material-ui/svg-icons/close';
import CloseIcon from 'material-ui-icons/Close';
import Slide from 'material-ui/transitions/Slide';

const styleSheet = createStyleSheet('FullScreenDialog', () => ({
Expand Down
4 changes: 2 additions & 2 deletions docs/site/src/demos/dividers/InsetDividers.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ import {
} from 'material-ui/List';
import Avatar from 'material-ui/Avatar';
import Divider from 'material-ui/Divider';
import FolderIcon from 'material-ui/svg-icons/folder';
import ImageIcon from 'material-ui/svg-icons/image';
import FolderIcon from 'material-ui-icons/Folder';
import ImageIcon from 'material-ui-icons/Image';

const styleSheet = createStyleSheet('InsetDividers', (theme) => ({
root: {
Expand Down
14 changes: 7 additions & 7 deletions docs/site/src/demos/drawers/UndockedDrawer.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,13 +12,13 @@ import {
ListItemIcon,
} from 'material-ui/List';
import Divider from 'material-ui/Divider';
import InboxIcon from 'material-ui/svg-icons/inbox';
import DraftsIcon from 'material-ui/svg-icons/drafts';
import StarIcon from 'material-ui/svg-icons/star';
import SendIcon from 'material-ui/svg-icons/send';
import MailIcon from 'material-ui/svg-icons/mail';
import DeleteIcon from 'material-ui/svg-icons/delete';
import ReportIcon from 'material-ui/svg-icons/report';
import InboxIcon from 'material-ui-icons/Inbox';
import DraftsIcon from 'material-ui-icons/Drafts';
import StarIcon from 'material-ui-icons/Star';
import SendIcon from 'material-ui-icons/Send';
import MailIcon from 'material-ui-icons/Mail';
import DeleteIcon from 'material-ui-icons/Delete';
import ReportIcon from 'material-ui-icons/Report';


const styleSheet = createStyleSheet('UndockedDrawer', () => ({
Expand Down
5 changes: 4 additions & 1 deletion docs/site/src/demos/lists/CheckboxList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ import {
} from 'material-ui/List';
import Checkbox from 'material-ui/Checkbox';
import IconButton from 'material-ui/IconButton';
import CommentIcon from 'material-ui-icons/Comment';

const styleSheet = createStyleSheet('CheckboxList', (theme) => ({
root: {
Expand Down Expand Up @@ -65,7 +66,9 @@ export default class CheckboxList extends Component {
/>
<ListItemText primary={`Line item ${index + 1}`} />
<ListItemSecondaryAction>
<IconButton>comment</IconButton>
<IconButton>
<CommentIcon />
</IconButton>
</ListItemSecondaryAction>
</ListItem>
))}
Expand Down
2 changes: 1 addition & 1 deletion docs/site/src/demos/lists/FolderList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
ListItemText,
} from 'material-ui/List';
import Avatar from 'material-ui/Avatar';
import FolderIcon from 'material-ui/svg-icons/folder';
import FolderIcon from 'material-ui-icons/Folder';

const styleSheet = createStyleSheet('FolderList', (theme) => ({
root: {
Expand Down
2 changes: 1 addition & 1 deletion docs/site/src/demos/lists/InsetList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ import {
ListItemText,
ListItemIcon,
} from 'material-ui/List';
import StarIcon from 'material-ui/svg-icons/star';
import StarIcon from 'material-ui-icons/Star';

const styleSheet = createStyleSheet('InsetList', (theme) => ({
root: {
Expand Down
27 changes: 20 additions & 7 deletions docs/site/src/demos/lists/InteractiveList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,13 @@ import {
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 { FormGroup } from 'material-ui/Form';
import { LabelCheckbox } from 'material-ui/Checkbox';
import Layout from 'material-ui/Layout';
import Text from 'material-ui/Text';
import FolderIcon from 'material-ui-icons/Folder';
import DeleteIcon from 'material-ui-icons/Delete';

const styleSheet = createStyleSheet('InteractiveList', (theme) => ({
root: {
Expand Down Expand Up @@ -96,7 +97,9 @@ class InteractiveList extends Component {
<List dense={dense}>
{generate((
<ListItem button>
<ListItemIcon><FolderIcon /></ListItemIcon>
<ListItemIcon>
<FolderIcon />
</ListItemIcon>
<ListItemText
primary="Single-line item"
secondary={secondary ? 'Secondary text' : null}
Expand All @@ -116,10 +119,14 @@ class InteractiveList extends Component {
<ListItem button>
{dense ? (
<ListItemAvatar>
<Avatar><FolderIcon /></Avatar>
<Avatar>
<FolderIcon />
</Avatar>
</ListItemAvatar>
) : (
<Avatar><FolderIcon /></Avatar>
<Avatar>
<FolderIcon />
</Avatar>
)}
<ListItemText
primary="Single-line item"
Expand All @@ -140,17 +147,23 @@ class InteractiveList extends Component {
<ListItem button>
{dense ? (
<ListItemAvatar>
<Avatar><FolderIcon /></Avatar>
<Avatar>
<FolderIcon />
</Avatar>
</ListItemAvatar>
) : (
<Avatar><FolderIcon /></Avatar>
<Avatar>
<FolderIcon />
</Avatar>
)}
<ListItemText
primary="Single-line item"
secondary={secondary ? 'Secondary text' : null}
/>
<ListItemSecondaryAction>
<IconButton>comment</IconButton>
<IconButton>
<DeleteIcon />
</IconButton>
</ListItemSecondaryAction>
</ListItem>
))}
Expand Down
4 changes: 2 additions & 2 deletions docs/site/src/demos/lists/SimpleList.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,8 +10,8 @@ import {
ListItemIcon,
} from 'material-ui/List';
import Divider from 'material-ui/Divider';
import InboxIcon from 'material-ui/svg-icons/inbox';
import DraftsIcon from 'material-ui/svg-icons/drafts';
import InboxIcon from 'material-ui-icons/Inbox';
import DraftsIcon from 'material-ui-icons/Drafts';

const styleSheet = createStyleSheet('SimpleList', (theme) => ({
root: {
Expand Down
Loading