From 8e8c9289342f422e77a69f9e85c8e9ee8ec609c9 Mon Sep 17 00:00:00 2001 From: mbrookes Date: Sat, 18 Mar 2017 14:57:53 +0000 Subject: [PATCH 1/5] [docs] Use material-ui-icons package, remove unneeded svg-icons --- docs/site/package.json | 1 + docs/site/src/components/AppFrame.js | 4 +-- docs/site/src/components/Demo.js | 2 +- docs/site/src/demos/app-bar/ButtonAppBar.js | 2 +- docs/site/src/demos/avatars/IconAvatars.js | 6 ++--- .../LabelBottomNavigation.js | 8 +++--- .../SimpleBottomNavigation.js | 6 ++--- .../demos/buttons/FloatingActionButtons.js | 4 +-- docs/site/src/demos/chips/Chips.js | 4 +-- .../src/demos/dialogs/FullScreenDialog.js | 2 +- docs/site/src/demos/dividers/InsetDividers.js | 4 +-- docs/site/src/demos/drawers/UndockedDrawer.js | 14 +++++------ docs/site/src/demos/lists/FolderList.js | 2 +- docs/site/src/demos/lists/InsetList.js | 2 +- docs/site/src/demos/lists/InteractiveList.js | 5 ++-- docs/site/src/demos/lists/SimpleList.js | 4 +-- .../src/demos/lists/SwitchListSecondary.js | 8 +++--- docs/site/src/demos/progress/CircularFab.js | 4 +-- docs/site/src/demos/tabs/IconLabelTabs.js | 6 ++--- docs/site/src/demos/tabs/IconTabs.js | 6 ++--- docs/site/webpack.dll.config.js | 2 +- docs/site/webpack.dll.prod.config.js | 2 +- docs/site/yarn.lock | 25 ++++++++++++++++--- src/Avatar/Avatar.spec.js | 4 +-- src/svg-icons/add.js | 15 ----------- src/svg-icons/assignment.js | 15 ----------- src/svg-icons/bluetooth.js | 15 ----------- src/svg-icons/check.js | 15 ----------- src/svg-icons/close.js | 15 ----------- src/svg-icons/code.js | 15 ----------- src/svg-icons/delete.js | 15 ----------- src/svg-icons/drafts.js | 15 ----------- src/svg-icons/face.js | 15 ----------- src/svg-icons/favorite.js | 15 ----------- src/svg-icons/folder.js | 15 ----------- src/svg-icons/image.js | 15 ----------- src/svg-icons/inbox.js | 15 ----------- src/svg-icons/lightbulb-outline.js | 15 ----------- src/svg-icons/location-on.js | 15 ----------- src/svg-icons/mail.js | 15 ----------- src/svg-icons/menu.js | 15 ----------- src/svg-icons/mode-edit.js | 15 ----------- src/svg-icons/pageview.js | 15 ----------- src/svg-icons/person-pin.js | 15 ----------- src/svg-icons/phone.js | 15 ----------- src/svg-icons/report.js | 15 ----------- src/svg-icons/restore.js | 15 ----------- src/svg-icons/save.js | 15 ----------- src/svg-icons/send.js | 15 ----------- src/svg-icons/star.js | 15 ----------- src/svg-icons/wifi.js | 15 ----------- 51 files changed, 75 insertions(+), 457 deletions(-) delete mode 100644 src/svg-icons/add.js delete mode 100644 src/svg-icons/assignment.js delete mode 100644 src/svg-icons/bluetooth.js delete mode 100644 src/svg-icons/check.js delete mode 100644 src/svg-icons/close.js delete mode 100644 src/svg-icons/code.js delete mode 100644 src/svg-icons/delete.js delete mode 100644 src/svg-icons/drafts.js delete mode 100644 src/svg-icons/face.js delete mode 100644 src/svg-icons/favorite.js delete mode 100644 src/svg-icons/folder.js delete mode 100644 src/svg-icons/image.js delete mode 100644 src/svg-icons/inbox.js delete mode 100644 src/svg-icons/lightbulb-outline.js delete mode 100644 src/svg-icons/location-on.js delete mode 100644 src/svg-icons/mail.js delete mode 100644 src/svg-icons/menu.js delete mode 100644 src/svg-icons/mode-edit.js delete mode 100644 src/svg-icons/pageview.js delete mode 100644 src/svg-icons/person-pin.js delete mode 100644 src/svg-icons/phone.js delete mode 100644 src/svg-icons/report.js delete mode 100644 src/svg-icons/restore.js delete mode 100644 src/svg-icons/save.js delete mode 100644 src/svg-icons/send.js delete mode 100644 src/svg-icons/star.js delete mode 100644 src/svg-icons/wifi.js diff --git a/docs/site/package.json b/docs/site/package.json index b1fbe91a637a1e..3973c90a19e010 100644 --- a/docs/site/package.json +++ b/docs/site/package.json @@ -35,6 +35,7 @@ }, "dependencies": { "marked": "^0.3.6", + "material-ui-icons": "^1.0.0-alpha.2", "prismjs": "^1.6.0", "react-redux": "^5.0.3", "react-router": "^3.0.2", diff --git a/docs/site/src/components/AppFrame.js b/docs/site/src/components/AppFrame.js index ade503035ee0f9..0ee68309438747 100644 --- a/docs/site/src/components/AppFrame.js +++ b/docs/site/src/components/AppFrame.js @@ -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'; diff --git a/docs/site/src/components/Demo.js b/docs/site/src/components/Demo.js index ac932f55e46929..34ac85c059b7f1 100644 --- a/docs/site/src/components/Demo.js +++ b/docs/site/src/components/Demo.js @@ -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$/); diff --git a/docs/site/src/demos/app-bar/ButtonAppBar.js b/docs/site/src/demos/app-bar/ButtonAppBar.js index 3cbc8311795a07..54b3a7f64ec6a4 100644 --- a/docs/site/src/demos/app-bar/ButtonAppBar.js +++ b/docs/site/src/demos/app-bar/ButtonAppBar.js @@ -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: { diff --git a/docs/site/src/demos/avatars/IconAvatars.js b/docs/site/src/demos/avatars/IconAvatars.js index fdfb90b5342fc6..54d6b816c0c6bf 100644 --- a/docs/site/src/demos/avatars/IconAvatars.js +++ b/docs/site/src/demos/avatars/IconAvatars.js @@ -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: { diff --git a/docs/site/src/demos/bottom-navigation/LabelBottomNavigation.js b/docs/site/src/demos/bottom-navigation/LabelBottomNavigation.js index 405d8c04fcc67b..36b5789d081e67 100644 --- a/docs/site/src/demos/bottom-navigation/LabelBottomNavigation.js +++ b/docs/site/src/demos/bottom-navigation/LabelBottomNavigation.js @@ -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: { diff --git a/docs/site/src/demos/bottom-navigation/SimpleBottomNavigation.js b/docs/site/src/demos/bottom-navigation/SimpleBottomNavigation.js index 3aed1fe4f30c52..deacb6b1c26d63 100644 --- a/docs/site/src/demos/bottom-navigation/SimpleBottomNavigation.js +++ b/docs/site/src/demos/bottom-navigation/SimpleBottomNavigation.js @@ -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: { diff --git a/docs/site/src/demos/buttons/FloatingActionButtons.js b/docs/site/src/demos/buttons/FloatingActionButtons.js index 7fc121d9369caa..87b4cd9e4438ec 100644 --- a/docs/site/src/demos/buttons/FloatingActionButtons.js +++ b/docs/site/src/demos/buttons/FloatingActionButtons.js @@ -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: { diff --git a/docs/site/src/demos/chips/Chips.js b/docs/site/src/demos/chips/Chips.js index 8a1aaacd034624..c0ba50ac7c14bc 100644 --- a/docs/site/src/demos/chips/Chips.js +++ b/docs/site/src/demos/chips/Chips.js @@ -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'; @@ -52,7 +52,7 @@ export default function Chips(props, context) { className={classes.chip} /> } + avatar={} label="Clickable Deletable Chip" onClick={handleClick} onRequestDelete={handleRequestDelete} diff --git a/docs/site/src/demos/dialogs/FullScreenDialog.js b/docs/site/src/demos/dialogs/FullScreenDialog.js index 673a4f975aca9c..fc8120941b526a 100644 --- a/docs/site/src/demos/dialogs/FullScreenDialog.js +++ b/docs/site/src/demos/dialogs/FullScreenDialog.js @@ -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', () => ({ diff --git a/docs/site/src/demos/dividers/InsetDividers.js b/docs/site/src/demos/dividers/InsetDividers.js index b73aa939567109..8be7fe0182ece6 100644 --- a/docs/site/src/demos/dividers/InsetDividers.js +++ b/docs/site/src/demos/dividers/InsetDividers.js @@ -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: { diff --git a/docs/site/src/demos/drawers/UndockedDrawer.js b/docs/site/src/demos/drawers/UndockedDrawer.js index e66c93bc041a63..d39cc9d491e460 100644 --- a/docs/site/src/demos/drawers/UndockedDrawer.js +++ b/docs/site/src/demos/drawers/UndockedDrawer.js @@ -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', () => ({ diff --git a/docs/site/src/demos/lists/FolderList.js b/docs/site/src/demos/lists/FolderList.js index 48563a38ee5051..10f5ed30a08f93 100644 --- a/docs/site/src/demos/lists/FolderList.js +++ b/docs/site/src/demos/lists/FolderList.js @@ -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: { diff --git a/docs/site/src/demos/lists/InsetList.js b/docs/site/src/demos/lists/InsetList.js index 513f55a74283f5..b80d3b7bb01b23 100644 --- a/docs/site/src/demos/lists/InsetList.js +++ b/docs/site/src/demos/lists/InsetList.js @@ -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: { diff --git a/docs/site/src/demos/lists/InteractiveList.js b/docs/site/src/demos/lists/InteractiveList.js index 6e649322c5a329..39130870eb93c0 100644 --- a/docs/site/src/demos/lists/InteractiveList.js +++ b/docs/site/src/demos/lists/InteractiveList.js @@ -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 FolderIcon from 'material-ui-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 DeleteIcon from 'material-ui-icons/Delete' const styleSheet = createStyleSheet('InteractiveList', (theme) => ({ root: { @@ -150,7 +151,7 @@ class InteractiveList extends Component { secondary={secondary ? 'Secondary text' : null} /> - comment + ))} diff --git a/docs/site/src/demos/lists/SimpleList.js b/docs/site/src/demos/lists/SimpleList.js index a21d2a72c04bc2..2a82b1ae0400ec 100644 --- a/docs/site/src/demos/lists/SimpleList.js +++ b/docs/site/src/demos/lists/SimpleList.js @@ -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: { diff --git a/docs/site/src/demos/lists/SwitchListSecondary.js b/docs/site/src/demos/lists/SwitchListSecondary.js index 5c35d985c7f88b..1f778a590fa7f5 100644 --- a/docs/site/src/demos/lists/SwitchListSecondary.js +++ b/docs/site/src/demos/lists/SwitchListSecondary.js @@ -12,8 +12,8 @@ import { ListSubheader, } from 'material-ui/List'; import Switch from 'material-ui/Switch'; -import WifiIcon from 'material-ui/svg-icons/wifi'; -import BluetoothIcon from 'material-ui/svg-icons/bluetooth'; +import WifiIcon from 'material-ui-icons/Wifi'; +import BluetoothIcon from 'material-ui-icons/Bluetooth'; const styleSheet = createStyleSheet('SwitchListSecondary', (theme) => ({ root: { @@ -67,7 +67,9 @@ export default class SwitchListSecondary extends Component { - + + + ({ wrapper: { diff --git a/docs/site/src/demos/tabs/IconLabelTabs.js b/docs/site/src/demos/tabs/IconLabelTabs.js index e0e61fff5734af..d6da67bc8e84e1 100644 --- a/docs/site/src/demos/tabs/IconLabelTabs.js +++ b/docs/site/src/demos/tabs/IconLabelTabs.js @@ -3,9 +3,9 @@ import React, { Component } from 'react'; import Paper from 'material-ui/Paper'; import { Tabs, Tab } from 'material-ui/Tabs'; -import PhoneIcon from 'material-ui/svg-icons/phone'; -import FavoriteIcon from 'material-ui/svg-icons/favorite'; -import PersonPinIcon from 'material-ui/svg-icons/person-pin'; +import PhoneIcon from 'material-ui-icons/Phone'; +import FavoriteIcon from 'material-ui-icons/Favorite'; +import PersonPinIcon from 'material-ui-icons/PersonPin'; export default class IconLabelTabs extends Component { state = { diff --git a/docs/site/src/demos/tabs/IconTabs.js b/docs/site/src/demos/tabs/IconTabs.js index 726aa2e555668e..147f77eefa3d7c 100644 --- a/docs/site/src/demos/tabs/IconTabs.js +++ b/docs/site/src/demos/tabs/IconTabs.js @@ -3,9 +3,9 @@ import React, { Component } from 'react'; import Paper from 'material-ui/Paper'; import { Tabs, Tab } from 'material-ui/Tabs'; -import PhoneIcon from 'material-ui/svg-icons/phone'; -import FavoriteIcon from 'material-ui/svg-icons/favorite'; -import PersonPinIcon from 'material-ui/svg-icons/person-pin'; +import PhoneIcon from 'material-ui-icons/Phone'; +import FavoriteIcon from 'material-ui-icons/Favorite'; +import PersonPinIcon from 'material-ui-icons/PersonPin'; export default class IconTabs extends Component { state = { diff --git a/docs/site/webpack.dll.config.js b/docs/site/webpack.dll.config.js index 6c241839ec9381..0d8cbdccf37e70 100644 --- a/docs/site/webpack.dll.config.js +++ b/docs/site/webpack.dll.config.js @@ -6,7 +6,7 @@ const packageJson = require('./package.json'); const packageJsonSrc = require('../../package.json'); const excludedDeps = [ - 'lodash', 'recompose', 'object-assign', + 'lodash', 'recompose', 'object-assign', 'material-ui-icons', ]; const deps = [ diff --git a/docs/site/webpack.dll.prod.config.js b/docs/site/webpack.dll.prod.config.js index f24868e5bdf63d..109b9b915f6090 100644 --- a/docs/site/webpack.dll.prod.config.js +++ b/docs/site/webpack.dll.prod.config.js @@ -6,7 +6,7 @@ const packageJson = require('./package.json'); const packageJsonSrc = require('../../package.json'); const excludedDeps = [ - 'lodash', 'recompose', 'object-assign', + 'lodash', 'recompose', 'object-assign', 'material-ui-icons', ]; const deps = [] diff --git a/docs/site/yarn.lock b/docs/site/yarn.lock index de159bc176e37c..b337f7ae07f78c 100644 --- a/docs/site/yarn.lock +++ b/docs/site/yarn.lock @@ -1171,6 +1171,10 @@ chalk@^1.0.0, chalk@^1.1.0, chalk@^1.1.1, chalk@^1.1.3: strip-ansi "^3.0.0" supports-color "^2.0.0" +change-emitter@^0.1.2: + version "0.1.3" + resolved "https://registry.yarnpkg.com/change-emitter/-/change-emitter-0.1.3.tgz#731c9360913855f613dd256568d50f854a8806ac" + chokidar@^1.4.3, chokidar@^1.6.0, chokidar@^1.6.1: version "1.6.1" resolved "https://registry.yarnpkg.com/chokidar/-/chokidar-1.6.1.tgz#2f4447ab5e96e50fb3d789fd90d4c72e0e4c70c2" @@ -1982,7 +1986,7 @@ faye-websocket@~0.11.0: dependencies: websocket-driver ">=0.5.1" -fbjs@^0.8.4: +fbjs@^0.8.1, fbjs@^0.8.4: version "0.8.9" resolved "https://registry.yarnpkg.com/fbjs/-/fbjs-0.8.9.tgz#180247fbd347dcc9004517b904f865400a0c8f14" dependencies: @@ -2445,7 +2449,7 @@ hoek@2.x.x: version "2.16.3" resolved "https://registry.yarnpkg.com/hoek/-/hoek-2.16.3.tgz#20bb7403d3cea398e91dc4710a8ff1b8274a25ed" -hoist-non-react-statics@^1.0.3, hoist-non-react-statics@^1.2.0: +hoist-non-react-statics@^1.0.0, hoist-non-react-statics@^1.0.3, hoist-non-react-statics@^1.2.0: version "1.2.0" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-1.2.0.tgz#aa448cf0986d55cc40773b17174b7dd066cb7cfb" @@ -3172,6 +3176,12 @@ marked: version "0.3.6" resolved "https://registry.yarnpkg.com/marked/-/marked-0.3.6.tgz#b2c6c618fccece4ef86c4fc6cb8a7cbf5aeda8d7" +material-ui-icons@^1.0.0-alpha.2: + version "1.0.0-alpha.2" + resolved "https://registry.yarnpkg.com/material-ui-icons/-/material-ui-icons-1.0.0-alpha.2.tgz#97b32c719088f09b44d19c43638f111325eb940d" + dependencies: + recompose "^0.22.0" + math-expression-evaluator@^1.2.14: version "1.2.14" resolved "https://registry.yarnpkg.com/math-expression-evaluator/-/math-expression-evaluator-1.2.14.tgz#39511771ed9602405fba9affff17eb4d2a3843ab" @@ -4171,6 +4181,15 @@ readdirp@^2.0.0: readable-stream "^2.0.2" set-immediate-shim "^1.0.1" +recompose@^0.22.0: + version "0.22.0" + resolved "https://registry.yarnpkg.com/recompose/-/recompose-0.22.0.tgz#f099d18385882ca41d9eec891718dadddc3204ef" + dependencies: + change-emitter "^0.1.2" + fbjs "^0.8.1" + hoist-non-react-statics "^1.0.0" + symbol-observable "^1.0.4" + redbox-react@^1.2.5, redbox-react@^1.3.4: version "1.3.4" resolved "https://registry.yarnpkg.com/redbox-react/-/redbox-react-1.3.4.tgz#3d882bb62cc7c8f6256279d12f05c6a5a96d24c6" @@ -4719,7 +4738,7 @@ svgo@^0.7.0: sax "~1.2.1" whet.extend "~0.9.9" -symbol-observable@^1.0.2: +symbol-observable@^1.0.2, symbol-observable@^1.0.4: version "1.0.4" resolved "https://registry.yarnpkg.com/symbol-observable/-/symbol-observable-1.0.4.tgz#29bf615d4aa7121bdd898b22d4b3f9bc4e2aa03d" diff --git a/src/Avatar/Avatar.spec.js b/src/Avatar/Avatar.spec.js index 0a620dbf54cc17..4f9b320e5a13ea 100644 --- a/src/Avatar/Avatar.spec.js +++ b/src/Avatar/Avatar.spec.js @@ -4,7 +4,7 @@ import React from 'react'; import { assert } from 'chai'; import { createShallow } from 'test/utils'; import Avatar, { styleSheet } from './Avatar'; -import FaceIcon from '../svg-icons/face'; +import DeleteIcon from '../svg-icons/cancel'; describe('', () => { let shallow; @@ -104,7 +104,7 @@ describe('', () => { data-my-prop="woof" childrenClassName="my-children" > - + , ); }); diff --git a/src/svg-icons/add.js b/src/svg-icons/add.js deleted file mode 100644 index cac08bf02cac24..00000000000000 --- a/src/svg-icons/add.js +++ /dev/null @@ -1,15 +0,0 @@ -/* eslint-disable */ - -import React from 'react'; -import pure from 'recompose/pure'; -import SvgIcon from '../SvgIcon'; - -let Add = (props) => ( - - - -); -Add = pure(Add); -Add.muiName = 'SvgIcon'; - -export default Add; diff --git a/src/svg-icons/assignment.js b/src/svg-icons/assignment.js deleted file mode 100644 index 0501eed0bb5a6e..00000000000000 --- a/src/svg-icons/assignment.js +++ /dev/null @@ -1,15 +0,0 @@ -/* eslint-disable */ - -import React from 'react'; -import pure from 'recompose/pure'; -import SvgIcon from '../SvgIcon'; - -let Assignment = (props) => ( - - - -); -Assignment = pure(Assignment); -Assignment.muiName = 'SvgIcon'; - -export default Assignment; diff --git a/src/svg-icons/bluetooth.js b/src/svg-icons/bluetooth.js deleted file mode 100644 index 5aa3fff8de7015..00000000000000 --- a/src/svg-icons/bluetooth.js +++ /dev/null @@ -1,15 +0,0 @@ -/* eslint-disable */ - -import React from 'react'; -import pure from 'recompose/pure'; -import SvgIcon from '../SvgIcon'; - -let Bluetooth = (props) => ( - - - -); -Bluetooth = pure(Bluetooth); -Bluetooth.muiName = 'SvgIcon'; - -export default Bluetooth; diff --git a/src/svg-icons/check.js b/src/svg-icons/check.js deleted file mode 100644 index 04417e4355f244..00000000000000 --- a/src/svg-icons/check.js +++ /dev/null @@ -1,15 +0,0 @@ -/* eslint-disable */ - -import React from 'react'; -import pure from 'recompose/pure'; -import SvgIcon from '../SvgIcon'; - -let Check = (props) => ( - - - -); -Check = pure(Check); -Check.muiName = 'SvgIcon'; - -export default Check; diff --git a/src/svg-icons/close.js b/src/svg-icons/close.js deleted file mode 100644 index 1f58140adc7963..00000000000000 --- a/src/svg-icons/close.js +++ /dev/null @@ -1,15 +0,0 @@ -/* eslint-disable */ - -import React from 'react'; -import pure from 'recompose/pure'; -import SvgIcon from '../SvgIcon'; - -let Close = (props) => ( - - - -); -Close = pure(Close); -Close.muiName = 'SvgIcon'; - -export default Close; diff --git a/src/svg-icons/code.js b/src/svg-icons/code.js deleted file mode 100644 index 1d7d881abe4faa..00000000000000 --- a/src/svg-icons/code.js +++ /dev/null @@ -1,15 +0,0 @@ -/* eslint-disable */ - -import React from 'react'; -import pure from 'recompose/pure'; -import SvgIcon from '../SvgIcon'; - -let Code = (props) => ( - - - -); -Code = pure(Code); -Code.muiName = 'SvgIcon'; - -export default Code; diff --git a/src/svg-icons/delete.js b/src/svg-icons/delete.js deleted file mode 100644 index 7f4e2f134adcd7..00000000000000 --- a/src/svg-icons/delete.js +++ /dev/null @@ -1,15 +0,0 @@ -/* eslint-disable */ - -import React from 'react'; -import pure from 'recompose/pure'; -import SvgIcon from '../SvgIcon'; - -let ActionDelete = (props) => ( - - - -); -ActionDelete = pure(ActionDelete); -ActionDelete.muiName = 'SvgIcon'; - -export default ActionDelete; diff --git a/src/svg-icons/drafts.js b/src/svg-icons/drafts.js deleted file mode 100644 index 055ef8e7c6a844..00000000000000 --- a/src/svg-icons/drafts.js +++ /dev/null @@ -1,15 +0,0 @@ -/* eslint-disable */ - -import React from 'react'; -import pure from 'recompose/pure'; -import SvgIcon from '../SvgIcon'; - -let Drafts = (props) => ( - - - -); -Drafts = pure(Drafts); -Drafts.muiName = 'SvgIcon'; - -export default Drafts; diff --git a/src/svg-icons/face.js b/src/svg-icons/face.js deleted file mode 100644 index 896286ffa7d6f7..00000000000000 --- a/src/svg-icons/face.js +++ /dev/null @@ -1,15 +0,0 @@ -/* eslint-disable */ - -import React from 'react'; -import pure from 'recompose/pure'; -import SvgIcon from '../SvgIcon'; - -let Face = (props) => ( - - - -); -Face = pure(Face); -Face.muiName = 'SvgIcon'; - -export default Face; diff --git a/src/svg-icons/favorite.js b/src/svg-icons/favorite.js deleted file mode 100644 index 0b59be70898a42..00000000000000 --- a/src/svg-icons/favorite.js +++ /dev/null @@ -1,15 +0,0 @@ -/* eslint-disable */ - -import React from 'react'; -import pure from 'recompose/pure'; -import SvgIcon from '../SvgIcon'; - -let Favorite = (props) => ( - - - -); -Favorite = pure(Favorite); -Favorite.muiName = 'SvgIcon'; - -export default Favorite; diff --git a/src/svg-icons/folder.js b/src/svg-icons/folder.js deleted file mode 100644 index 2fc881d5c6a482..00000000000000 --- a/src/svg-icons/folder.js +++ /dev/null @@ -1,15 +0,0 @@ -/* eslint-disable */ - -import React from 'react'; -import pure from 'recompose/pure'; -import SvgIcon from '../SvgIcon'; - -let Folder = (props) => ( - - - -); -Folder = pure(Folder); -Folder.muiName = 'SvgIcon'; - -export default Folder; diff --git a/src/svg-icons/image.js b/src/svg-icons/image.js deleted file mode 100644 index 5ad6950b9ffea4..00000000000000 --- a/src/svg-icons/image.js +++ /dev/null @@ -1,15 +0,0 @@ -/* eslint-disable */ - -import React from 'react'; -import pure from 'recompose/pure'; -import SvgIcon from '../SvgIcon'; - -let Image = (props) => ( - - - -); -Image = pure(Image); -Image.muiName = 'SvgIcon'; - -export default Image; diff --git a/src/svg-icons/inbox.js b/src/svg-icons/inbox.js deleted file mode 100644 index fdb4ffffa49608..00000000000000 --- a/src/svg-icons/inbox.js +++ /dev/null @@ -1,15 +0,0 @@ -/* eslint-disable */ - -import React from 'react'; -import pure from 'recompose/pure'; -import SvgIcon from '../SvgIcon'; - -let Inbox = (props) => ( - - - -); -Inbox = pure(Inbox); -Inbox.muiName = 'SvgIcon'; - -export default Inbox; diff --git a/src/svg-icons/lightbulb-outline.js b/src/svg-icons/lightbulb-outline.js deleted file mode 100644 index c488dce39690a4..00000000000000 --- a/src/svg-icons/lightbulb-outline.js +++ /dev/null @@ -1,15 +0,0 @@ -/* eslint-disable */ - -import React from 'react'; -import pure from 'recompose/pure'; -import SvgIcon from '../SvgIcon'; - -let LightbulbOutline = (props) => ( - - - -); -LightbulbOutline = pure(LightbulbOutline); -LightbulbOutline.muiName = 'SvgIcon'; - -export default LightbulbOutline; diff --git a/src/svg-icons/location-on.js b/src/svg-icons/location-on.js deleted file mode 100644 index 1e143e0b88cc7c..00000000000000 --- a/src/svg-icons/location-on.js +++ /dev/null @@ -1,15 +0,0 @@ -/* eslint-disable */ - -import React from 'react'; -import pure from 'recompose/pure'; -import SvgIcon from '../SvgIcon'; - -let LocationOn = (props) => ( - - - -); -LocationOn = pure(LocationOn); -LocationOn.muiName = 'SvgIcon'; - -export default LocationOn; diff --git a/src/svg-icons/mail.js b/src/svg-icons/mail.js deleted file mode 100644 index 8ac06350568b11..00000000000000 --- a/src/svg-icons/mail.js +++ /dev/null @@ -1,15 +0,0 @@ -/* eslint-disable */ - -import React from 'react'; -import pure from 'recompose/pure'; -import SvgIcon from '../SvgIcon'; - -let ContentMail = (props) => ( - - - -); -ContentMail = pure(ContentMail); -ContentMail.muiName = 'SvgIcon'; - -export default ContentMail; diff --git a/src/svg-icons/menu.js b/src/svg-icons/menu.js deleted file mode 100644 index 3ada0f95cdb699..00000000000000 --- a/src/svg-icons/menu.js +++ /dev/null @@ -1,15 +0,0 @@ -/* eslint-disable */ - -import React from 'react'; -import pure from 'recompose/pure'; -import SvgIcon from '../SvgIcon'; - -let Menu = (props) => ( - - - -); -Menu = pure(Menu); -Menu.muiName = 'SvgIcon'; - -export default Menu; diff --git a/src/svg-icons/mode-edit.js b/src/svg-icons/mode-edit.js deleted file mode 100644 index 543aaf506c2079..00000000000000 --- a/src/svg-icons/mode-edit.js +++ /dev/null @@ -1,15 +0,0 @@ -/* eslint-disable */ - -import React from 'react'; -import pure from 'recompose/pure'; -import SvgIcon from '../SvgIcon'; - -let ModeEdit = (props) => ( - - - -); -ModeEdit = pure(ModeEdit); -ModeEdit.muiName = 'SvgIcon'; - -export default ModeEdit; diff --git a/src/svg-icons/pageview.js b/src/svg-icons/pageview.js deleted file mode 100644 index b7188904b26f2b..00000000000000 --- a/src/svg-icons/pageview.js +++ /dev/null @@ -1,15 +0,0 @@ -/* eslint-disable */ - -import React from 'react'; -import pure from 'recompose/pure'; -import SvgIcon from '../SvgIcon'; - -let Pageview = (props) => ( - - - -); -Pageview = pure(Pageview); -Pageview.muiName = 'SvgIcon'; - -export default Pageview; diff --git a/src/svg-icons/person-pin.js b/src/svg-icons/person-pin.js deleted file mode 100644 index 54ae1e58409744..00000000000000 --- a/src/svg-icons/person-pin.js +++ /dev/null @@ -1,15 +0,0 @@ -/* eslint-disable */ - -import React from 'react'; -import pure from 'recompose/pure'; -import SvgIcon from '../SvgIcon'; - -let PersonPin = (props) => ( - - - -); -PersonPin = pure(PersonPin); -PersonPin.muiName = 'SvgIcon'; - -export default PersonPin; diff --git a/src/svg-icons/phone.js b/src/svg-icons/phone.js deleted file mode 100644 index 2bb97396bd6df2..00000000000000 --- a/src/svg-icons/phone.js +++ /dev/null @@ -1,15 +0,0 @@ -/* eslint-disable */ - -import React from 'react'; -import pure from 'recompose/pure'; -import SvgIcon from '../SvgIcon'; - -let Phone = (props) => ( - - - -); -Phone = pure(Phone); -Phone.muiName = 'SvgIcon'; - -export default Phone; diff --git a/src/svg-icons/report.js b/src/svg-icons/report.js deleted file mode 100644 index 289947111da8d6..00000000000000 --- a/src/svg-icons/report.js +++ /dev/null @@ -1,15 +0,0 @@ -/* eslint-disable */ - -import React from 'react'; -import pure from 'recompose/pure'; -import SvgIcon from '../SvgIcon'; - -let ContentReport = (props) => ( - - - -); -ContentReport = pure(ContentReport); -ContentReport.muiName = 'SvgIcon'; - -export default ContentReport; diff --git a/src/svg-icons/restore.js b/src/svg-icons/restore.js deleted file mode 100644 index 61f17cbedaf1f3..00000000000000 --- a/src/svg-icons/restore.js +++ /dev/null @@ -1,15 +0,0 @@ -/* eslint-disable */ - -import React from 'react'; -import pure from 'recompose/pure'; -import SvgIcon from '../SvgIcon'; - -let Restore = (props) => ( - - - -); -Restore = pure(Restore); -Restore.muiName = 'SvgIcon'; - -export default Restore; diff --git a/src/svg-icons/save.js b/src/svg-icons/save.js deleted file mode 100644 index d3e8bf2a2215be..00000000000000 --- a/src/svg-icons/save.js +++ /dev/null @@ -1,15 +0,0 @@ -/* eslint-disable */ - -import React from 'react'; -import pure from 'recompose/pure'; -import SvgIcon from '../SvgIcon'; - -let Save = (props) => ( - - - -); -Save = pure(Save); -Save.muiName = 'SvgIcon'; - -export default Save; diff --git a/src/svg-icons/send.js b/src/svg-icons/send.js deleted file mode 100644 index e6db6b67e4d89b..00000000000000 --- a/src/svg-icons/send.js +++ /dev/null @@ -1,15 +0,0 @@ -/* eslint-disable */ - -import React from 'react'; -import pure from 'recompose/pure'; -import SvgIcon from '../SvgIcon'; - -let ContentSend = (props) => ( - - - -); -ContentSend = pure(ContentSend); -ContentSend.muiName = 'SvgIcon'; - -export default ContentSend; diff --git a/src/svg-icons/star.js b/src/svg-icons/star.js deleted file mode 100644 index a27f2cd652b6b1..00000000000000 --- a/src/svg-icons/star.js +++ /dev/null @@ -1,15 +0,0 @@ -/* eslint-disable */ - -import React from 'react'; -import pure from 'recompose/pure'; -import SvgIcon from '../SvgIcon'; - -let Star = (props) => ( - - - -); -Star = pure(Star); -Star.muiName = 'SvgIcon'; - -export default Star; diff --git a/src/svg-icons/wifi.js b/src/svg-icons/wifi.js deleted file mode 100644 index d166bb1464c211..00000000000000 --- a/src/svg-icons/wifi.js +++ /dev/null @@ -1,15 +0,0 @@ -/* eslint-disable */ - -import React from 'react'; -import pure from 'recompose/pure'; -import SvgIcon from '../SvgIcon'; - -let Wifi = (props) => ( - - - -); -Wifi = pure(Wifi); -Wifi.muiName = 'SvgIcon'; - -export default Wifi; From e7f91fa43b315f75dd5b251d7740597cdedb507f Mon Sep 17 00:00:00 2001 From: mbrookes Date: Sun, 19 Mar 2017 17:44:30 +0000 Subject: [PATCH 2/5] [docs] Replace font-icon with SvgIcons in IconButton --- docs/site/src/demos/buttons/IconButtons.js | 12 ++++++---- docs/site/src/demos/cards/NowPlayingCard.js | 18 ++++++++++---- docs/site/src/demos/cards/RecipeReviewCard.js | 13 +++++++--- docs/site/src/demos/lists/CheckboxList.js | 5 +++- docs/site/src/demos/lists/InteractiveList.js | 24 +++++++++++++------ docs/site/src/demos/tables/EnhancedTable.js | 10 ++++++-- 6 files changed, 60 insertions(+), 22 deletions(-) diff --git a/docs/site/src/demos/buttons/IconButtons.js b/docs/site/src/demos/buttons/IconButtons.js index 593adc9d94abc6..3e490a508b5291 100644 --- a/docs/site/src/demos/buttons/IconButtons.js +++ b/docs/site/src/demos/buttons/IconButtons.js @@ -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: { @@ -17,16 +19,16 @@ export default function IconButtons(props, context) { return (
- delete + - delete + - alarm + - add_shopping_cart +
); diff --git a/docs/site/src/demos/cards/NowPlayingCard.js b/docs/site/src/demos/cards/NowPlayingCard.js index 8b7ed6d773cf69..b8d71b363fe474 100644 --- a/docs/site/src/demos/cards/NowPlayingCard.js +++ b/docs/site/src/demos/cards/NowPlayingCard.js @@ -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', () => ({ @@ -33,7 +36,8 @@ const styleSheet = createStyleSheet('NowPlayingCard', () => ({ paddingBottom: 8, }, playIcon: { - fontSize: 38, + height: 38, + width: 38, }, })); @@ -51,9 +55,15 @@ export default function NowPlayingCard(props, context) {
- skip_previous - play_arrow - skip_next + + + + + + + + +
diff --git a/docs/site/src/demos/cards/RecipeReviewCard.js b/docs/site/src/demos/cards/RecipeReviewCard.js index e5d5d4f0ee769c..48f9cc1b7d82d3 100644 --- a/docs/site/src/demos/cards/RecipeReviewCard.js +++ b/docs/site/src/demos/cards/RecipeReviewCard.js @@ -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) => ({ @@ -64,8 +67,12 @@ export default class RecipeReviewCard extends Component { - favorite - share + + + + + +
- expand_more + diff --git a/docs/site/src/demos/lists/CheckboxList.js b/docs/site/src/demos/lists/CheckboxList.js index 1d944a8ae23d25..1365408a52595c 100644 --- a/docs/site/src/demos/lists/CheckboxList.js +++ b/docs/site/src/demos/lists/CheckboxList.js @@ -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: { @@ -65,7 +66,9 @@ export default class CheckboxList extends Component { /> - comment + + + ))} diff --git a/docs/site/src/demos/lists/InteractiveList.js b/docs/site/src/demos/lists/InteractiveList.js index 39130870eb93c0..b73e6ca711de51 100644 --- a/docs/site/src/demos/lists/InteractiveList.js +++ b/docs/site/src/demos/lists/InteractiveList.js @@ -12,13 +12,13 @@ import { ListItemText, } from 'material-ui/List'; import Avatar from 'material-ui/Avatar'; -import FolderIcon from 'material-ui-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 DeleteIcon from 'material-ui-icons/Delete' +import FolderIcon from 'material-ui-icons/Folder'; +import DeleteIcon from 'material-ui-icons/Delete'; const styleSheet = createStyleSheet('InteractiveList', (theme) => ({ root: { @@ -117,10 +117,14 @@ class InteractiveList extends Component { {dense ? ( - + + + ) : ( - + + + )} {dense ? ( - + + + ) : ( - + + + )} - + + + ))} diff --git a/docs/site/src/demos/tables/EnhancedTable.js b/docs/site/src/demos/tables/EnhancedTable.js index 9fb41886fcb430..70c6f33c3f2cd2 100644 --- a/docs/site/src/demos/tables/EnhancedTable.js +++ b/docs/site/src/demos/tables/EnhancedTable.js @@ -18,6 +18,8 @@ import Text from 'material-ui/Text'; import Paper from 'material-ui/Paper'; import Checkbox from 'material-ui/Checkbox'; import IconButton from 'material-ui/IconButton'; +import DeleteIcon from 'material-ui-icons/Delete'; +import FilterListIcon from 'material-ui-icons/FilterList'; const styleSheet = createStyleSheet('EnhancedTable', () => ({ paper: { @@ -121,9 +123,13 @@ function EnhancedTableToolbar(props, context) {
{numSelected > 0 ? ( - delete + + + ) : ( - filter_list + + + )}
From 9e2efa8fc8dc03675d1bf6d1910f35f1bf7e1929 Mon Sep 17 00:00:00 2001 From: mbrookes Date: Sun, 19 Mar 2017 20:58:17 +0000 Subject: [PATCH 3/5] [docs] Replace Icon with material-ui-icons --- docs/site/src/demos/badges/SimpleBadge.js | 7 ++++--- docs/site/src/demos/lists/InteractiveList.js | 4 +++- 2 files changed, 7 insertions(+), 4 deletions(-) diff --git a/docs/site/src/demos/badges/SimpleBadge.js b/docs/site/src/demos/badges/SimpleBadge.js index 33c1fcb22f7106..1b507578e2e437 100644 --- a/docs/site/src/demos/badges/SimpleBadge.js +++ b/docs/site/src/demos/badges/SimpleBadge.js @@ -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: { @@ -21,14 +22,14 @@ export default function SimpleBadge(props, context) { badgeContent={4} primary > - mail + - folder +
); diff --git a/docs/site/src/demos/lists/InteractiveList.js b/docs/site/src/demos/lists/InteractiveList.js index b73e6ca711de51..1b4f5200fd3ad7 100644 --- a/docs/site/src/demos/lists/InteractiveList.js +++ b/docs/site/src/demos/lists/InteractiveList.js @@ -97,7 +97,9 @@ class InteractiveList extends Component { {generate(( - + + + Date: Sun, 19 Mar 2017 20:14:00 +0000 Subject: [PATCH 4/5] [docs] Update style/icons docs --- docs/site/src/pages/style/icons/icons.md | 41 ++++++++++++++++++------ 1 file changed, 31 insertions(+), 10 deletions(-) diff --git a/docs/site/src/pages/style/icons/icons.md b/docs/site/src/pages/style/icons/icons.md index 9c26e031d80fc1..1a0bb69357dbe2 100644 --- a/docs/site/src/pages/style/icons/icons.md +++ b/docs/site/src/pages/style/icons/icons.md @@ -1,20 +1,41 @@ # Icons -Material [icons](https://material.io/guidelines/style/icons.html) use geometric shapes to visually represent core ideas, capabilities, or topics. - -Icons are commonly found in app bars, toolbars, buttons, and lists. - -## Font Icons - -An `Icon` will display one of the many [material design icons freely available](https://material.io/icons/). As a prerequisite, you must include an icon font such as [the material icon font](http://google.github.io/material-design-icons/#icon-font-for-the-web). +Material [icons](https://material.io/guidelines/style/icons.html) use geometric shapes to visually +represent core ideas, capabilities, or topics. + +## System icons +A [system icon](https://material.io/guidelines/style/icons.html#icons-system-icons) or UI icon, symbolizes +a command, file, device, or directory. System icons are also used to represent common actions like trash, +print, and save, and are commonly found in app bars, toolbars, buttons, and lists. Google has provided a +set of [Material icons](https://material.io/icons/) that follow these guidelines. + +Material-UI provides two components to render system icons: `Icon` for rendering font icons, and `SvgIcon` +for rendering SVG paths. + +### Font Icons + +The `Icon` component will display an icon from any icon font that supports ligatures. +As a prerequisite, you must include one, such as the +[Material icon font](http://google.github.io/material-design-icons/#icon-font-for-the-web) in your project. + +`Icon` will set the correct class name for the Material icon font. For other fonts, you must supply the +class name using the Icon component's `className` property. + +To use an icon simply wrap the icon name (font ligature) with the `Icon` component, for example +`star` +By default, an Icon will inherit the current text color. Optionally, you can set the icon color using one +of the theme color properties: `accent`, `action`, `contrast`, `disabled`, `error`, & `primary`. {{demo='pages/style/icons/Icons.js'}} -## SVG Icons +### SVG Icons -The `SvgIcon` component takes an SVG `path` element as its child, and converts it to a React component which displays -the path and allows the icon to be styled and respond to mouse events. +The `SvgIcon` component takes an SVG `path` element as its child and converts it to a React component that +displays the path, and allows the icon to be styled and respond to mouse events. The resulting icon can be used as is, or included as a child for other Material-UI components that use icons. {{demo='pages/style/icons/SvgPaths.js'}} + +We also provide a separate package, [material-ui-icons](https://www.npmjs.com/package/material-ui-icons), +that includes the Material icons converted to SvgIcon components. From 5c3c4791ad4a0e22274aabc210e9ef1718b7eb8d Mon Sep 17 00:00:00 2001 From: mbrookes Date: Sun, 19 Mar 2017 21:42:36 +0000 Subject: [PATCH 5/5] [Avatar] Fix failing test --- src/Avatar/Avatar.spec.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Avatar/Avatar.spec.js b/src/Avatar/Avatar.spec.js index 4f9b320e5a13ea..3462f97f8f2a40 100644 --- a/src/Avatar/Avatar.spec.js +++ b/src/Avatar/Avatar.spec.js @@ -4,7 +4,7 @@ import React from 'react'; import { assert } from 'chai'; import { createShallow } from 'test/utils'; import Avatar, { styleSheet } from './Avatar'; -import DeleteIcon from '../svg-icons/cancel'; +import CancelIcon from '../svg-icons/cancel'; describe('', () => { let shallow; @@ -104,14 +104,14 @@ describe('', () => { data-my-prop="woof" childrenClassName="my-children" > - + , ); }); it('should render a div containing an svg icon', () => { assert.strictEqual(wrapper.is('div'), true, 'should be a div'); - assert.strictEqual(wrapper.childAt(0).is('pure(Face)'), true, 'should be an svg icon'); + assert.strictEqual(wrapper.childAt(0).is('pure(Cancel)'), true, 'should be an svg icon'); }); it('should merge user classes & spread custom props to the root node', () => {