From 2a4414d554f5e41c72d6241372604787fe8ecdba Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Sat, 19 Dec 2015 11:12:51 +0100 Subject: [PATCH] [Doc] Update early migrated component and the README --- docs/src/app/app-routes.jsx | 4 +- docs/src/app/components/MarkdownElement.jsx | 4 +- docs/src/app/components/pages/components.jsx | 2 +- .../pages/components/AppBar/ExampleIcon.jsx | 16 +- .../components/AppBar/ExampleIconButton.jsx | 18 +-- .../components/AppBar/ExampleIconMenu.jsx | 40 +++-- .../pages/components/AppBar/Page.jsx | 36 +++-- .../pages/components/AppBar/README.md | 5 +- .../pages/components/Avatar/ExampleSimple.jsx | 144 +++++++++--------- .../pages/components/Avatar/Page.jsx | 25 ++- .../pages/components/Badge/Page.jsx | 27 ++-- .../{Cards => Card}/ExampleWithAvatar.jsx | 0 .../{Cards => Card}/ExampleWithoutAvatar.jsx | 0 .../pages/components/{Cards => Card}/Page.jsx | 31 ++-- .../components/{Cards => Card}/README.md | 0 .../pages/components/Dialog/ExampleModal.jsx | 31 ++-- .../pages/components/Dialog/ExampleSimple.jsx | 31 ++-- .../pages/components/Dialog/Page.jsx | 31 ++-- .../pages/components/Dialog/README.md | 5 +- .../pages/components/Divider/Page.jsx | 1 + .../pages/components/DropDownMenu/Page.jsx | 37 +++-- .../pages/components/LeftNav/Page.jsx | 37 +++-- .../pages/components/LeftNav/README.md | 4 +- .../pages/components/Snackbar/Page.jsx | 1 + .../components/pages/components/Tabs/Page.jsx | 42 +++-- .../components/Toolbars/ExampleSimple.jsx | 62 ++++---- .../pages/components/Toolbars/Page.jsx | 47 +++--- .../pages/components/Toolbars/README.md | 2 +- 28 files changed, 328 insertions(+), 355 deletions(-) rename docs/src/app/components/pages/components/{Cards => Card}/ExampleWithAvatar.jsx (100%) rename docs/src/app/components/pages/components/{Cards => Card}/ExampleWithoutAvatar.jsx (100%) rename docs/src/app/components/pages/components/{Cards => Card}/Page.jsx (54%) rename docs/src/app/components/pages/components/{Cards => Card}/README.md (100%) diff --git a/docs/src/app/app-routes.jsx b/docs/src/app/app-routes.jsx index 1864860add75b3..bbae460cb3e7c1 100644 --- a/docs/src/app/app-routes.jsx +++ b/docs/src/app/app-routes.jsx @@ -25,7 +25,7 @@ import AutoComplete from './components/pages/components/auto-complete'; import AvatarPage from './components/pages/components/Avatar/Page'; import BadgePage from './components/pages/components/Badge/Page'; import Buttons from './components/pages/components/buttons'; -import CardsPage from './components/pages/components/Cards/Page'; +import CardPage from './components/pages/components/Card/Page'; import DatePicker from './components/pages/components/date-picker'; import DialogPage from './components/pages/components/Dialog/Page'; import DividerPage from './components/pages/components/Divider/Page'; @@ -84,7 +84,7 @@ const AppRoutes = ( - + diff --git a/docs/src/app/components/MarkdownElement.jsx b/docs/src/app/components/MarkdownElement.jsx index 64aaba970d7c99..b84f1a7d7b8bdb 100644 --- a/docs/src/app/components/MarkdownElement.jsx +++ b/docs/src/app/components/MarkdownElement.jsx @@ -7,8 +7,8 @@ require('./mui-github-markdown.css'); const styles = { root: { - marginTop: 10, - marginBottom: 14, + marginTop: 20, + marginBottom: 20, padding: '0 10px', }, }; diff --git a/docs/src/app/components/pages/components.jsx b/docs/src/app/components/pages/components.jsx index 88ded05f19c73c..57d8aa32316ff3 100644 --- a/docs/src/app/components/pages/components.jsx +++ b/docs/src/app/components/pages/components.jsx @@ -10,7 +10,7 @@ export default class Components extends React.Component { {route: '/components/avatar', text: 'Avatar'}, {route: '/components/badge', text: 'Badge'}, {route: '/components/buttons', text: 'Buttons'}, - {route: '/components/cards', text: 'Cards'}, + {route: '/components/card', text: 'Card'}, {route: '/components/date-picker', text: 'Date Picker'}, {route: '/components/dialog', text: 'Dialog'}, {route: '/components/divider', text: 'Divider'}, diff --git a/docs/src/app/components/pages/components/AppBar/ExampleIcon.jsx b/docs/src/app/components/pages/components/AppBar/ExampleIcon.jsx index b4f6cd8bbcd0fd..f71254000f8d9e 100644 --- a/docs/src/app/components/pages/components/AppBar/ExampleIcon.jsx +++ b/docs/src/app/components/pages/components/AppBar/ExampleIcon.jsx @@ -1,15 +1,11 @@ import React from 'react'; import AppBar from 'material-ui/lib/app-bar'; -const AppBarExampleIcon = React.createClass({ - render() { - return ( - - ); - }, -}); +const AppBarExampleIcon = () => ( + +); export default AppBarExampleIcon; diff --git a/docs/src/app/components/pages/components/AppBar/ExampleIconButton.jsx b/docs/src/app/components/pages/components/AppBar/ExampleIconButton.jsx index 6fda172e7b6696..1d6e8f18fb73ac 100644 --- a/docs/src/app/components/pages/components/AppBar/ExampleIconButton.jsx +++ b/docs/src/app/components/pages/components/AppBar/ExampleIconButton.jsx @@ -14,16 +14,12 @@ const styles = { }, }; -const AppBarExampleIconButton = React.createClass({ - render() { - return ( - Title} - iconElementLeft={} - iconElementRight={} - /> - ); - }, -}); +const AppBarExampleIconButton = () => ( + Title} + iconElementLeft={} + iconElementRight={} + /> +); export default AppBarExampleIconButton; diff --git a/docs/src/app/components/pages/components/AppBar/ExampleIconMenu.jsx b/docs/src/app/components/pages/components/AppBar/ExampleIconMenu.jsx index 33b670ccc4e4a9..38f79eacbc3d52 100644 --- a/docs/src/app/components/pages/components/AppBar/ExampleIconMenu.jsx +++ b/docs/src/app/components/pages/components/AppBar/ExampleIconMenu.jsx @@ -6,28 +6,24 @@ import IconMenu from 'material-ui/lib/menus/icon-menu'; import MoreVertIcon from 'material-ui/lib/svg-icons/navigation/more-vert'; import MenuItem from 'material-ui/lib/menus/menu-item'; -const AppBarExampleIconMenu = React.createClass({ - render() { - return ( - } - iconElementRight={ - - } - targetOrigin={{horizontal: 'right', vertical: 'top'}} - anchorOrigin={{horizontal: 'right', vertical: 'top'}} - > - - - - +const AppBarExampleIconMenu = () => ( + } + iconElementRight={ + } - /> - ); - }, -}); + targetOrigin={{horizontal: 'right', vertical: 'top'}} + anchorOrigin={{horizontal: 'right', vertical: 'top'}} + > + + + + + } + /> +); export default AppBarExampleIconMenu; diff --git a/docs/src/app/components/pages/components/AppBar/Page.jsx b/docs/src/app/components/pages/components/AppBar/Page.jsx index d02144b19ae044..fd7ba57483ef47 100644 --- a/docs/src/app/components/pages/components/AppBar/Page.jsx +++ b/docs/src/app/components/pages/components/AppBar/Page.jsx @@ -2,6 +2,7 @@ import React from 'react'; import CodeExample from '../../../CodeExample'; import PropTypeDescription from '../../../PropTypeDescription'; import MarkdownElement from '../../../MarkdownElement'; + import appBarReadmeText from './README'; import AppBarExampleIcon from './ExampleIcon'; import appBarExampleIconCode from '!raw!./ExampleIcon'; @@ -11,23 +12,20 @@ import AppBarExampleIconMenu from './ExampleIconMenu'; import appBarExampleIconMenuCode from '!raw!./ExampleIconMenu'; import appBarCode from '!raw!material-ui/lib/app-bar'; -export default class AppBarPage extends React.Component { +const AppBarPage = () => ( +
+ + + + + + + + + + + +
+); - render() { - return ( -
- - - - - - - - - - - -
- ); - } -} +export default AppBarPage; diff --git a/docs/src/app/components/pages/components/AppBar/README.md b/docs/src/app/components/pages/components/AppBar/README.md index 4cbf97ae3f9ee9..282b20a32945b5 100644 --- a/docs/src/app/components/pages/components/AppBar/README.md +++ b/docs/src/app/components/pages/components/AppBar/README.md @@ -1,7 +1,6 @@ ## App Bar -App bars are a collection of components placed as a static header for an application. -It is used for navigation, search branding, and actions. -An app bar is also referred to as the primary toolbar or action bar for Android. +The [app bar](https://www.google.com/design/spec/layout/structure.html#structure-app-bar), formerly known as the action bar in Android, +is a special kind of toolbar that’s used for branding, navigation, search, and actions. ### Examples diff --git a/docs/src/app/components/pages/components/Avatar/ExampleSimple.jsx b/docs/src/app/components/pages/components/Avatar/ExampleSimple.jsx index 4e32f1a80181fe..1122f14d2f5386 100644 --- a/docs/src/app/components/pages/components/Avatar/ExampleSimple.jsx +++ b/docs/src/app/components/pages/components/Avatar/ExampleSimple.jsx @@ -8,80 +8,76 @@ import ListItem from 'material-ui/lib/lists/list-item'; const colors = styles.Colors; -const AvatarExampleSimple = React.createClass({ - render() { - return ( - - - } +const AvatarExampleSimple = () => ( + + + } + > + Image Avatar + + } /> + } + > + SvgIcon Avatar + + } + color={colors.orange200} + backgroundColor={colors.pink400} + /> + } + > + SvgIcon Avatar with custom colors + + } /> + } + > + FontIcon Avatar + + } + color={colors.blue300} + backgroundColor={colors.indigo900} + /> + } + > + FontIcon Avatar with custom colors + + A} + > + Letter Avatar + + - Image Avatar - - } /> - } - > - SvgIcon Avatar - - } - color={colors.orange200} - backgroundColor={colors.pink400} - /> - } - > - SvgIcon Avatar with custom colors - - } /> - } - > - FontIcon Avatar - - } - color={colors.blue300} - backgroundColor={colors.indigo900} - /> - } - > - FontIcon Avatar with custom colors - - A} - > - Letter Avatar - - - A - - } - > - Letter Avatar with custom colors - - - ); - }, -}); + A + + } + > + Letter Avatar with custom colors + + +); export default AvatarExampleSimple; diff --git a/docs/src/app/components/pages/components/Avatar/Page.jsx b/docs/src/app/components/pages/components/Avatar/Page.jsx index f1f1652a7bd449..925e8ea5ded713 100644 --- a/docs/src/app/components/pages/components/Avatar/Page.jsx +++ b/docs/src/app/components/pages/components/Avatar/Page.jsx @@ -2,21 +2,20 @@ import React from 'react'; import CodeExample from '../../../CodeExample'; import PropTypeDescription from '../../../PropTypeDescription'; import MarkdownElement from '../../../MarkdownElement'; + import avatarReadmeText from './README'; import AvatarExampleSimple from './ExampleSimple'; import avatarExampleSimpleCode from '!raw!./ExampleSimple'; import avatarCode from '!raw!material-ui/lib/avatar'; -export default class AvatarsPage extends React.Component { - render() { - return ( -
- - - - - -
- ); - } -} +const AvatarsPage = () => ( +
+ + + + + +
+); + +export default AvatarsPage; diff --git a/docs/src/app/components/pages/components/Badge/Page.jsx b/docs/src/app/components/pages/components/Badge/Page.jsx index d701ad4a512e85..ff7d457e061df2 100644 --- a/docs/src/app/components/pages/components/Badge/Page.jsx +++ b/docs/src/app/components/pages/components/Badge/Page.jsx @@ -2,6 +2,7 @@ import React from 'react'; import CodeExample from '../../../CodeExample'; import PropTypeDescription from '../../../PropTypeDescription'; import MarkdownElement from '../../../MarkdownElement'; + import badgeReadmeText from './README'; import BadgeExampleSimple from './ExampleSimple'; import badgeExampleSimpleCode from '!raw!./ExampleSimple'; @@ -9,19 +10,17 @@ import BadgeExampleContent from './ExampleContent'; import badgeExampleContentCode from '!raw!./ExampleContent'; import badgeCode from '!raw!material-ui/lib/badge'; -const BadgePage = () => { - return ( -
- - - - - - - - -
- ); -}; +const BadgePage = () => ( +
+ + + + + + + + +
+); export default BadgePage; diff --git a/docs/src/app/components/pages/components/Cards/ExampleWithAvatar.jsx b/docs/src/app/components/pages/components/Card/ExampleWithAvatar.jsx similarity index 100% rename from docs/src/app/components/pages/components/Cards/ExampleWithAvatar.jsx rename to docs/src/app/components/pages/components/Card/ExampleWithAvatar.jsx diff --git a/docs/src/app/components/pages/components/Cards/ExampleWithoutAvatar.jsx b/docs/src/app/components/pages/components/Card/ExampleWithoutAvatar.jsx similarity index 100% rename from docs/src/app/components/pages/components/Cards/ExampleWithoutAvatar.jsx rename to docs/src/app/components/pages/components/Card/ExampleWithoutAvatar.jsx diff --git a/docs/src/app/components/pages/components/Cards/Page.jsx b/docs/src/app/components/pages/components/Card/Page.jsx similarity index 54% rename from docs/src/app/components/pages/components/Cards/Page.jsx rename to docs/src/app/components/pages/components/Card/Page.jsx index 548b641cc849f4..a8b1668bc66d07 100644 --- a/docs/src/app/components/pages/components/Cards/Page.jsx +++ b/docs/src/app/components/pages/components/Card/Page.jsx @@ -2,6 +2,7 @@ import React from 'react'; import CodeExample from '../../../CodeExample'; import PropTypeDescription from '../../../PropTypeDescription'; import MarkdownElement from '../../../MarkdownElement'; + import cardReadmeText from './README'; import cardExampleWithAvatarCode from '!raw!./ExampleWithAvatar'; import CardExampleWithAvatar from './ExampleWithAvatar'; @@ -9,19 +10,17 @@ import cardExampleWithoutAvatarCode from '!raw!./ExampleWithoutAvatar'; import CardExampleWithoutAvatar from './ExampleWithoutAvatar'; import cardCode from '!raw!material-ui/lib/card/card'; -export default class CardPage extends React.Component { - render() { - return ( -
- - - - - - - - -
- ); - } -} +const CardPage = () => ( +
+ + + + + + + + +
+); + +export default CardPage; diff --git a/docs/src/app/components/pages/components/Cards/README.md b/docs/src/app/components/pages/components/Card/README.md similarity index 100% rename from docs/src/app/components/pages/components/Cards/README.md rename to docs/src/app/components/pages/components/Card/README.md diff --git a/docs/src/app/components/pages/components/Dialog/ExampleModal.jsx b/docs/src/app/components/pages/components/Dialog/ExampleModal.jsx index 5e2958e897b41d..fd2e64d913c3a8 100644 --- a/docs/src/app/components/pages/components/Dialog/ExampleModal.jsx +++ b/docs/src/app/components/pages/components/Dialog/ExampleModal.jsx @@ -3,19 +3,21 @@ import Dialog from 'material-ui/lib/dialog'; import FlatButton from 'material-ui/lib/flat-button'; import RaisedButton from 'material-ui/lib/raised-button'; -const DialogExampleModal = React.createClass({ +export default class DialogExampleModal extends React.Component { + constructor(props) { + super(props); + this.state = { + open: false, + }; + } - getInitialState() { - return {open: false}; - }, - - handleOpen() { + handleOpen = () => { this.setState({open: true}); - }, + } - handleClose() { + handleClose = () => { this.setState({open: false}); - }, + } render() { const actions = [ @@ -31,7 +33,8 @@ const DialogExampleModal = React.createClass({ ]; return ( - +
+ Only actions can close this dialog. - +
); - }, -}); - -export default DialogExampleModal; + } +} diff --git a/docs/src/app/components/pages/components/Dialog/ExampleSimple.jsx b/docs/src/app/components/pages/components/Dialog/ExampleSimple.jsx index d3b35f779b045f..78b529c481769b 100644 --- a/docs/src/app/components/pages/components/Dialog/ExampleSimple.jsx +++ b/docs/src/app/components/pages/components/Dialog/ExampleSimple.jsx @@ -3,19 +3,21 @@ import Dialog from 'material-ui/lib/dialog'; import FlatButton from 'material-ui/lib/flat-button'; import RaisedButton from 'material-ui/lib/raised-button'; -const DialogExampleSimple = React.createClass({ +export default class DialogExampleSimple extends React.Component { + constructor(props) { + super(props); + this.state = { + open: false, + }; + } - getInitialState() { - return {open: false}; - }, - - handleOpen() { + handleOpen = () => { this.setState({open: true}); - }, + } - handleClose() { + handleClose = () => { this.setState({open: false}); - }, + } render() { const actions = [ @@ -31,7 +33,8 @@ const DialogExampleSimple = React.createClass({ ]; return ( - +
+ The actions in this window were passed in as an array of react objects. - +
); - }, -}); - -export default DialogExampleSimple; + } +} diff --git a/docs/src/app/components/pages/components/Dialog/Page.jsx b/docs/src/app/components/pages/components/Dialog/Page.jsx index 4df50c48dd48b9..db21080e83dd02 100644 --- a/docs/src/app/components/pages/components/Dialog/Page.jsx +++ b/docs/src/app/components/pages/components/Dialog/Page.jsx @@ -2,6 +2,7 @@ import React from 'react'; import CodeExample from '../../../CodeExample'; import PropTypeDescription from '../../../PropTypeDescription'; import MarkdownElement from '../../../MarkdownElement'; + import dialogReadmeText from './README'; import DialogExampleSimple from './ExampleSimple'; import DialogExampleSimpleCode from '!raw!./ExampleSimple'; @@ -9,19 +10,17 @@ import DialogExampleModal from './ExampleModal'; import DialogExampleModalCode from '!raw!./ExampleModal'; import dialogCode from '!raw!material-ui/lib/dialog'; -export default class DialogPage extends React.Component { - render() { - return ( -
- - - - - - - - -
- ); - } -} +const DialogPage = () => ( +
+ + + + + + + + +
+); + +export default DialogPage; diff --git a/docs/src/app/components/pages/components/Dialog/README.md b/docs/src/app/components/pages/components/Dialog/README.md index c06dbad31c4cf6..7a39c812bd094f 100644 --- a/docs/src/app/components/pages/components/Dialog/README.md +++ b/docs/src/app/components/pages/components/Dialog/README.md @@ -1,7 +1,8 @@ ## Dialog -For more information on the `Dialog` please visit the Material Design's -specifications [here](https://www.google.com/design/spec/components/dialogs.html). +[Dialogs](https://www.google.com/design/spec/components/dialogs.html) contain text +and UI controls focused on a specific task. They inform users about critical information, +require users to make decisions, or involve multiple tasks. Dialog can only be a controlled component. You must provide the open prop and handle `onRequestClose` in order to use this component. diff --git a/docs/src/app/components/pages/components/Divider/Page.jsx b/docs/src/app/components/pages/components/Divider/Page.jsx index b61f35d04dee49..eb3028213a674a 100644 --- a/docs/src/app/components/pages/components/Divider/Page.jsx +++ b/docs/src/app/components/pages/components/Divider/Page.jsx @@ -2,6 +2,7 @@ import React from 'react'; import CodeExample from '../../../CodeExample'; import PropTypeDescription from '../../../PropTypeDescription'; import MarkdownElement from '../../../MarkdownElement'; + import dividerReadmeText from './README'; import DividerExampleForm from './ExampleForm'; import dividerExampleFormCode from '!raw!./ExampleForm'; diff --git a/docs/src/app/components/pages/components/DropDownMenu/Page.jsx b/docs/src/app/components/pages/components/DropDownMenu/Page.jsx index 0c4d714002d324..d74bca18cbefa1 100644 --- a/docs/src/app/components/pages/components/DropDownMenu/Page.jsx +++ b/docs/src/app/components/pages/components/DropDownMenu/Page.jsx @@ -2,6 +2,7 @@ import React from 'react'; import CodeExample from '../../../CodeExample'; import PropTypeDescription from '../../../PropTypeDescription'; import MarkdownElement from '../../../MarkdownElement'; + import dropDownMenuReadmeText from './README'; import DropDownMenuSimpleExample from './ExampleSimple'; import dropDownMenuSimpleExampleCode from '!raw!./ExampleSimple'; @@ -11,22 +12,20 @@ import DropDownMenuLabeledExample from './ExampleLabeled'; import dropDownMenuLabeledExampleCode from '!raw!./ExampleLabeled'; import dropDownMenuCode from '!raw!material-ui/lib/DropDownMenu/DropDownMenu'; -export default class LeftNavPage extends React.Component { - render() { - return ( -
- - - - - - - - - - - -
- ); - } -} +const DropDownMenuPage = () => ( +
+ + + + + + + + + + + +
+); + +export default DropDownMenuPage; diff --git a/docs/src/app/components/pages/components/LeftNav/Page.jsx b/docs/src/app/components/pages/components/LeftNav/Page.jsx index fee9ff44ef0988..e93271870ab1e1 100644 --- a/docs/src/app/components/pages/components/LeftNav/Page.jsx +++ b/docs/src/app/components/pages/components/LeftNav/Page.jsx @@ -2,6 +2,7 @@ import React from 'react'; import CodeExample from '../../../CodeExample'; import PropTypeDescription from '../../../PropTypeDescription'; import MarkdownElement from '../../../MarkdownElement'; + import leftNavReadmeText from './README'; import LeftNavSimpleExample from './ExampleSimple'; import leftNavSimpleExampleCode from '!raw!./ExampleSimple'; @@ -11,22 +12,20 @@ import LeftNavOpenRightExample from './ExampleOpenRight'; import leftNavOpenRightExampleCode from '!raw!./ExampleOpenRight'; import leftNavCode from '!raw!material-ui/lib/left-nav'; -export default class LeftNavPage extends React.Component { - render() { - return ( -
- - - - - - - - - - - -
- ); - } -} +const LeftNavPage = () => ( +
+ + + + + + + + + + + +
+); + +export default LeftNavPage; diff --git a/docs/src/app/components/pages/components/LeftNav/README.md b/docs/src/app/components/pages/components/LeftNav/README.md index 22f34efda8b096..7c5eae7e883368 100644 --- a/docs/src/app/components/pages/components/LeftNav/README.md +++ b/docs/src/app/components/pages/components/LeftNav/README.md @@ -1,7 +1,7 @@ ## Left Nav -To find out more about the `LeftNav` component please visit the Material Design's -specifications [here](https://www.google.com/design/spec/patterns/navigation-drawer.html). +The [Left Nav](https://www.google.com/design/spec/patterns/navigation-drawer.html) slides in from the left. +It is a common pattern found in Google apps and follows the keylines and metrics for lists. The API of `LeftNav` has been changed to be declarative and composable. The methods `close()`, `open()` and `toggle()` have been deprecated. diff --git a/docs/src/app/components/pages/components/Snackbar/Page.jsx b/docs/src/app/components/pages/components/Snackbar/Page.jsx index d8f867b20142b6..343b45fa7b3786 100644 --- a/docs/src/app/components/pages/components/Snackbar/Page.jsx +++ b/docs/src/app/components/pages/components/Snackbar/Page.jsx @@ -2,6 +2,7 @@ import React from 'react'; import CodeExample from '../../../CodeExample'; import PropTypeDescription from '../../../PropTypeDescription'; import MarkdownElement from '../../../MarkdownElement'; + import SnackbarReadmeText from './README'; import SnackbarExampleSimple from './ExampleSimple'; import SnackbarExampleSimpleCode from '!raw!./ExampleSimple'; diff --git a/docs/src/app/components/pages/components/Tabs/Page.jsx b/docs/src/app/components/pages/components/Tabs/Page.jsx index ef12302d19ad94..2920b27b5bba02 100644 --- a/docs/src/app/components/pages/components/Tabs/Page.jsx +++ b/docs/src/app/components/pages/components/Tabs/Page.jsx @@ -14,27 +14,25 @@ import tabsText from './Tabs'; import tabCode from '!raw!material-ui/lib/tabs/tab'; import tabText from './Tab'; -const TabsPage = () => { - return ( -
- - - - - - - - - - - - -
- ); -}; +const TabsPage = () => ( +
+ + + + + + + + + + + + +
+); export default TabsPage; diff --git a/docs/src/app/components/pages/components/Toolbars/ExampleSimple.jsx b/docs/src/app/components/pages/components/Toolbars/ExampleSimple.jsx index ea374856128197..98ec4d7b4c9516 100644 --- a/docs/src/app/components/pages/components/Toolbars/ExampleSimple.jsx +++ b/docs/src/app/components/pages/components/Toolbars/ExampleSimple.jsx @@ -11,38 +11,34 @@ import ToolbarGroup from 'material-ui/lib/toolbar/toolbar-group'; import ToolbarSeparator from 'material-ui/lib/toolbar/toolbar-separator'; import ToolbarTitle from 'material-ui/lib/toolbar/toolbar-title'; -const ToolbarsExamplesSimple = React.createClass({ - render() { - return ( - - - - - - - - - - - - - - - - - - - }> - - - - - - - - ); - }, -}); +const ToolbarsExamplesSimple = () => ( + + + + + + + + + + + + + + + + + + + }> + + + + + + + +); export default ToolbarsExamplesSimple; diff --git a/docs/src/app/components/pages/components/Toolbars/Page.jsx b/docs/src/app/components/pages/components/Toolbars/Page.jsx index 127accdd8a7ab5..9aebab76f05217 100644 --- a/docs/src/app/components/pages/components/Toolbars/Page.jsx +++ b/docs/src/app/components/pages/components/Toolbars/Page.jsx @@ -2,6 +2,7 @@ import React from 'react'; import CodeExample from '../../../CodeExample'; import PropTypeDescription from '../../../PropTypeDescription'; import MarkdownElement from '../../../MarkdownElement'; + import toolbarsReadmeText from './README'; import toolbarsExampleSimpleCode from '!raw!./ExampleSimple'; import ToolbarsExampleSimple from './ExampleSimple'; @@ -14,27 +15,25 @@ import toolbarSeparatorReadmeText from './ToolbarSeparator'; import toolbarTitleCode from '!raw!material-ui/toolbar/toolbar-title'; import toolbarTitleReadmeText from './ToolbarTitle'; -export default class ToolbarPage extends React.Component { - render() { - return ( -
- - - - - - - - -
- ); - } -} +const ToolbarPage = () => ( +
+ + + + + + + + +
+); + +export default ToolbarPage; diff --git a/docs/src/app/components/pages/components/Toolbars/README.md b/docs/src/app/components/pages/components/Toolbars/README.md index 30316bb014b72c..30e633f3c119dc 100644 --- a/docs/src/app/components/pages/components/Toolbars/README.md +++ b/docs/src/app/components/pages/components/Toolbars/README.md @@ -1,6 +1,6 @@ ## Toolbars -Toolbars are collections of components stacked horizontally against each other. +[Toolbars](https://www.google.com/design/spec/layout/structure.html#structure-toolbars) are collections of components stacked horizontally against each other. Toolbars provide greater versatility than AppBars which are a subset of toolbars. The following toolbar components can help organize your layout.