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

[Doc] Update early migrated component and the README #2592

Merged
merged 1 commit into from
Dec 22, 2015
Merged

[Doc] Update early migrated component and the README #2592

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
4 changes: 2 additions & 2 deletions docs/src/app/app-routes.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand Down Expand Up @@ -84,7 +84,7 @@ const AppRoutes = (
<Route path="avatar" component={AvatarPage} />
<Route path="badge" component={BadgePage} />
<Route path="buttons" component={Buttons} />
<Route path="cards" component={CardsPage} />
<Route path="card" component={CardPage} />
<Route path="date-picker" component={DatePicker} />
<Route path="dialog" component={DialogPage} />
<Route path="divider" component={DividerPage} />
Expand Down
4 changes: 2 additions & 2 deletions docs/src/app/components/MarkdownElement.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,8 +7,8 @@ require('./mui-github-markdown.css');

const styles = {
root: {
marginTop: 10,
marginBottom: 14,
marginTop: 20,
marginBottom: 20,
padding: '0 10px',
},
};
Expand Down
2 changes: 1 addition & 1 deletion docs/src/app/components/pages/components.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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'},
Expand Down
16 changes: 6 additions & 10 deletions docs/src/app/components/pages/components/AppBar/ExampleIcon.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,15 +1,11 @@
import React from 'react';
import AppBar from 'material-ui/lib/app-bar';

const AppBarExampleIcon = React.createClass({
render() {
return (
<AppBar
title="Title"
iconClassNameRight="muidocs-icon-navigation-expand-more"
/>
);
},
});
const AppBarExampleIcon = () => (
<AppBar
title="Title"
iconClassNameRight="muidocs-icon-navigation-expand-more"
/>
);

export default AppBarExampleIcon;
18 changes: 7 additions & 11 deletions docs/src/app/components/pages/components/AppBar/ExampleIconButton.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -14,16 +14,12 @@ const styles = {
},
};

const AppBarExampleIconButton = React.createClass({
render() {
return (
<AppBar
title={<span style={styles.title} onTouchTap={handleTouchTap}>Title</span>}
iconElementLeft={<IconButton><NavigationClose /></IconButton>}
iconElementRight={<FlatButton label="Save" />}
/>
);
},
});
const AppBarExampleIconButton = () => (
<AppBar
title={<span style={styles.title} onTouchTap={handleTouchTap}>Title</span>}
iconElementLeft={<IconButton><NavigationClose /></IconButton>}
iconElementRight={<FlatButton label="Save" />}
/>
);

export default AppBarExampleIconButton;
40 changes: 18 additions & 22 deletions docs/src/app/components/pages/components/AppBar/ExampleIconMenu.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<AppBar
title="Title"
iconElementLeft={<IconButton><NavigationClose /></IconButton>}
iconElementRight={
<IconMenu
iconButtonElement={
<IconButton><MoreVertIcon /></IconButton>
}
targetOrigin={{horizontal: 'right', vertical: 'top'}}
anchorOrigin={{horizontal: 'right', vertical: 'top'}}
>
<MenuItem primaryText="Refresh" />
<MenuItem primaryText="Help" />
<MenuItem primaryText="Sign out" />
</IconMenu>
const AppBarExampleIconMenu = () => (
<AppBar
title="Title"
iconElementLeft={<IconButton><NavigationClose /></IconButton>}
iconElementRight={
<IconMenu
iconButtonElement={
<IconButton><MoreVertIcon /></IconButton>
}
/>
);
},
});
targetOrigin={{horizontal: 'right', vertical: 'top'}}
anchorOrigin={{horizontal: 'right', vertical: 'top'}}
>
<MenuItem primaryText="Refresh" />
<MenuItem primaryText="Help" />
<MenuItem primaryText="Sign out" />
</IconMenu>
}
/>
);

export default AppBarExampleIconMenu;
36 changes: 17 additions & 19 deletions docs/src/app/components/pages/components/AppBar/Page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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';
Expand All @@ -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 = () => (
<div>
<MarkdownElement text={appBarReadmeText} />
<CodeExample code={appBarExampleIconCode}>
<AppBarExampleIcon />
</CodeExample>
<CodeExample code={appBarExampleIconButtonCode}>
<AppBarExampleIconButton />
</CodeExample>
<CodeExample code={appBarExampleIconMenuCode}>
<AppBarExampleIconMenu />
</CodeExample>
<PropTypeDescription code={appBarCode}/>
</div>
);

render() {
return (
<div>
<MarkdownElement text={appBarReadmeText} />
<CodeExample code={appBarExampleIconCode}>
<AppBarExampleIcon />
</CodeExample>
<CodeExample code={appBarExampleIconButtonCode}>
<AppBarExampleIconButton />
</CodeExample>
<CodeExample code={appBarExampleIconMenuCode}>
<AppBarExampleIconMenu />
</CodeExample>
<PropTypeDescription code={appBarCode}/>
</div>
);
}
}
export default AppBarPage;
5 changes: 2 additions & 3 deletions docs/src/app/components/pages/components/AppBar/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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
144 changes: 70 additions & 74 deletions docs/src/app/components/pages/components/Avatar/ExampleSimple.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,80 +8,76 @@ import ListItem from 'material-ui/lib/lists/list-item';

const colors = styles.Colors;

const AvatarExampleSimple = React.createClass({
render() {
return (
<List>
<ListItem
disabled={true}
leftAvatar={
<Avatar src="images/uxceo-128.jpg" />
}
const AvatarExampleSimple = () => (
<List>
<ListItem
disabled={true}
leftAvatar={
<Avatar src="images/uxceo-128.jpg" />
}
>
Image Avatar
</ListItem>
<ListItem
disabled={true}
leftAvatar={
<Avatar icon={<FileFolder />} />
}
>
SvgIcon Avatar
</ListItem>
<ListItem
disabled={true}
leftAvatar={
<Avatar
icon={<FileFolder />}
color={colors.orange200}
backgroundColor={colors.pink400}
/>
}
>
SvgIcon Avatar with custom colors
</ListItem>
<ListItem
disabled={true}
leftAvatar={
<Avatar icon={<FontIcon className="muidocs-icon-communication-voicemail" />} />
}
>
FontIcon Avatar
</ListItem>
<ListItem
disabled={true}
leftAvatar={
<Avatar
icon={<FontIcon className="muidocs-icon-communication-voicemail" />}
color={colors.blue300}
backgroundColor={colors.indigo900}
/>
}
>
FontIcon Avatar with custom colors
</ListItem>
<ListItem
disabled={true}
leftAvatar={<Avatar>A</Avatar>}
>
Letter Avatar
</ListItem>
<ListItem
disabled={true}
leftAvatar={
<Avatar
color={colors.deepOrange300}
backgroundColor={colors.purple500}
>
Image Avatar
</ListItem>
<ListItem
disabled={true}
leftAvatar={
<Avatar icon={<FileFolder />} />
}
>
SvgIcon Avatar
</ListItem>
<ListItem
disabled={true}
leftAvatar={
<Avatar
icon={<FileFolder />}
color={colors.orange200}
backgroundColor={colors.pink400}
/>
}
>
SvgIcon Avatar with custom colors
</ListItem>
<ListItem
disabled={true}
leftAvatar={
<Avatar icon={<FontIcon className="muidocs-icon-communication-voicemail" />} />
}
>
FontIcon Avatar
</ListItem>
<ListItem
disabled={true}
leftAvatar={
<Avatar
icon={<FontIcon className="muidocs-icon-communication-voicemail" />}
color={colors.blue300}
backgroundColor={colors.indigo900}
/>
}
>
FontIcon Avatar with custom colors
</ListItem>
<ListItem
disabled={true}
leftAvatar={<Avatar>A</Avatar>}
>
Letter Avatar
</ListItem>
<ListItem
disabled={true}
leftAvatar={
<Avatar
color={colors.deepOrange300}
backgroundColor={colors.purple500}
>
A
</Avatar>
}
>
Letter Avatar with custom colors
</ListItem>
</List>
);
},
});
A
</Avatar>
}
>
Letter Avatar with custom colors
</ListItem>
</List>
);

export default AvatarExampleSimple;
25 changes: 12 additions & 13 deletions docs/src/app/components/pages/components/Avatar/Page.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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 (
<div>
<MarkdownElement text={avatarReadmeText} />
<CodeExample code={avatarExampleSimpleCode}>
<AvatarExampleSimple />
</CodeExample>
<PropTypeDescription code={avatarCode}/>
</div>
);
}
}
const AvatarsPage = () => (
<div>
<MarkdownElement text={avatarReadmeText} />
<CodeExample code={avatarExampleSimpleCode}>
<AvatarExampleSimple />
</CodeExample>
<PropTypeDescription code={avatarCode}/>
</div>
);

export default AvatarsPage;
Loading