Update Documentation for Buttons

docs/src/app/app-routes.jsx

@@ -23,12 +23,13 @@ import AppBarPage from './components/pages/components/AppBar/Page';
 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 CardPage from './components/pages/components/Card/Page';
 import DatePicker from './components/pages/components/DatePicker/Page';
 import DialogPage from './components/pages/components/Dialog/Page';
 import DividerPage from './components/pages/components/Divider/Page';
 import DropDownMenuPage from './components/pages/components/DropDownMenu/Page';
+import FlatButtonPage from './components/pages/components/FlatButton/Page';
+import FloatingActionButtonPage from './components/pages/components/FloatingActionButton/Page';
 import GridListPage from './components/pages/components/GridList/Page';
 import Icons from './components/pages/components/icons';
 import IconButtons from './components/pages/components/icon-buttons';
@@ -39,6 +40,7 @@ import Menus from './components/pages/components/menus';
 import Paper from './components/pages/components/paper';
 import Popover from './components/pages/components/popover';
 import Progress from './components/pages/components/progress';
+import RaisedButtonPage from './components/pages/components/RaisedButton/Page';
 import RefreshIndicator from './components/pages/components/refresh-indicator';
 import SelectField from './components/pages/components/SelectField/Page';
 import Sliders from './components/pages/components/sliders';
@@ -84,12 +86,13 @@ const AppRoutes = (
       <Route path="auto-complete" component={AutoComplete} />
       <Route path="avatar" component={AvatarPage} />
       <Route path="badge" component={BadgePage} />
-      <Route path="buttons" component={Buttons} />
       <Route path="card" component={CardPage} />
       <Route path="date-picker" component={DatePicker} />
       <Route path="dialog" component={DialogPage} />
       <Route path="divider" component={DividerPage} />
       <Route path="dropdown-menu" component={DropDownMenuPage} />
+      <Route path="flat-button" component={FlatButtonPage} />
+      <Route path="floating-action-button" component={FloatingActionButtonPage} />
       <Route path="grid-list" component={GridListPage} />
       <Route path="icons" component={Icons} />
       <Route path="icon-buttons" component={IconButtons} />
@@ -100,6 +103,7 @@ const AppRoutes = (
       <Route path="paper" component={Paper} />
       <Route path="popover" component={Popover} />
       <Route path="progress" component={Progress} />
+      <Route path="raised-button" component={RaisedButtonPage} />
       <Route path="refresh-indicator" component={RefreshIndicator} />
       <Route path="select-field" component={SelectField} />
       <Route path="sliders" component={Sliders} />

docs/src/app/components/app-left-nav.jsx

@@ -155,8 +155,22 @@ const AppLeftNav = React.createClass({
                 primaryText="Badge"
               />,
               <ListItem
-                value="/components/buttons"
                 primaryText="Buttons"
+                primaryTogglesNestedList={true}
+                nestedItems={[
+                  <ListItem
+                    value="/components/flat-button"
+                    primaryText="Flat Button"
+                  />,
+                  <ListItem
+                    value="/components/raised-button"
+                    primaryText="Raised Button"
+                  />,
+                  <ListItem
+                    value="/components/floating-action-button"
+                    primaryText="Floating Action Button"
+                  />,
+                ]}
               />,
               <ListItem
                 value="/components/card"

docs/src/app/components/pages/components/FlatButton/ExampleComplex.jsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import FlatButton from 'material-ui/lib/flat-button';
+import Colors from 'material-ui/lib/styles/colors';
+import FontIcon from 'material-ui/lib/font-icon';
+
+const styles = {
+  buttonLabel: {
+    padding: '0px 16px 0px 8px',
+  },
+  exampleImageInput: {
+    cursor: 'pointer',
+    position: 'absolute',
+    top: '0',
+    bottom: '0',
+    right: '0',
+    left: '0',
+    width: '100%',
+    opacity: '0',
+  },
+  exampleFlatButtonIcon: {
+    height: '100%',
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    paddingLeft: '12px',
+    lineHeight: '36px',
+    color: Colors.cyan500,
+  },
+};
+
+const FlatButtonExampleSimple = () => (
+  <div>
+    <FlatButton primary={true} label="Choose an Image">
+      <input type="file" id="imageButton" style={styles.exampleImageInput}></input>
+    </FlatButton>
+    <FlatButton
+      linkButton={true}
+      href="https://github.com/callemall/material-ui"
+      secondary={true}
+      label="GitHub"
+      labelStyle={styles.buttonLabel}>
+      <FontIcon style={styles.exampleFlatButtonIcon} className="muidocs-icon-custom-github"/>
+    </FlatButton>
+    <FlatButton
+      secondary={true}
+      label="Label after"
+      labelPosition="after"
+      labelStyle={styles.buttonLabel}>
+      <FontIcon style={styles.exampleFlatButtonIcon} className="muidocs-icon-custom-github"/>
+    </FlatButton>
+    <FlatButton label="Disabled" disabled={true} />
+  </div>
+);
+
+export default FlatButtonExampleSimple;

docs/src/app/components/pages/components/FlatButton/ExampleSimple.jsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import FlatButton from 'material-ui/lib/flat-button';
+
+const FlatButtonExampleSimple = () => (
+  <div>
+    <FlatButton label="Default" />
+    <FlatButton label="Primary" primary={true} />
+    <FlatButton label="Secondary" secondary={true} />
+  </div>
+);
+
+export default FlatButtonExampleSimple;

docs/src/app/components/pages/components/FlatButton/Page.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import CodeExample from '../../../CodeExample';
+import PropTypeDescription from '../../../PropTypeDescription';
+import MarkdownElement from '../../../MarkdownElement';
+
+import flatButtonCode from '!raw!material-ui/lib/flat-button';
+import flatButtonReadmeText from './README';
+import flatButtonExampleSimpleCode from '!raw!./ExampleSimple';
+import FlatButtonExampleSimple from './ExampleSimple';
+import flatButtonExampleComplexCode from '!raw!./ExampleComplex';
+import FlatButtonExampleComplex from './ExampleComplex';
+
+const FlatButtonPage = () => (
+  <div>
+    <MarkdownElement text={flatButtonReadmeText}/>
+    <CodeExample code={flatButtonExampleSimpleCode}>
+      <FlatButtonExampleSimple />
+    </CodeExample>
+    <CodeExample code={flatButtonExampleComplexCode}>
+      <FlatButtonExampleComplex />
+    </CodeExample>
+    <PropTypeDescription code={flatButtonCode}/>
+  </div>
+);
+
+export default FlatButtonPage;

docs/src/app/components/pages/components/FlatButton/README.md

@@ -0,0 +1,5 @@
+## Flat Button
+[Flat Buttons](https://www.google.com/design/spec/components/buttons.html#buttons-flat-raised-buttons)
+are used for general functions and reduce the amount of layering on the screen, making it more readable.
+
+### Examples

docs/src/app/components/pages/components/FloatingActionButton/ExampleComplex.jsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import FloatingActionButton from 'material-ui/lib/floating-action-button';
+import ToggleStar from 'material-ui/lib/svg-icons/toggle/star';
+import Colors from 'material-ui/lib/styles/colors';
+
+const FloatingButtonExampleComplex = () => (
+  <div>
+    <FloatingActionButton
+      iconClassName="muidocs-icon-action-grade"
+      secondary={true} />
+    <FloatingActionButton mini={true} secondary={true}>
+      <ToggleStar />
+    </FloatingActionButton>
+    <FloatingActionButton
+      iconClassName="muidocs-icon-action-grade"
+      disabled={true}
+      disabledColor={Colors.grey300} />
+    <FloatingActionButton
+      iconClassName="muidocs-icon-action-grade"
+      mini={true}
+      disabled={true}
+      disabledColor={Colors.grey300} />
+  </div>
+);
+export default FloatingButtonExampleComplex;

docs/src/app/components/pages/components/FloatingActionButton/ExampleSimple.jsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import FloatingActionButton from 'material-ui/lib/floating-action-button';
+import ToggleStar from 'material-ui/lib/svg-icons/toggle/star';
+
+const FloatingActionButtonExampleSimple = () => (
+  <div>
+    <FloatingActionButton>
+      <ToggleStar />
+    </FloatingActionButton>
+    <FloatingActionButton iconClassName="muidocs-icon-action-grade" mini={true} />
+  </div>
+);
+
+export default FloatingActionButtonExampleSimple;

docs/src/app/components/pages/components/FloatingActionButton/Page.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import CodeExample from '../../../CodeExample';
+import PropTypeDescription from '../../../PropTypeDescription';
+import MarkdownElement from '../../../MarkdownElement';
+
+import floatingButtonCode from '!raw!material-ui/lib/floating-action-button';
+import floatingButtonReadmeText from './README';
+import floatingButtonExampleSimpleCode from '!raw!./ExampleSimple';
+import FloatingButtonExampleSimple from './ExampleSimple';
+import floatingButtonExampleComplexCode from '!raw!./ExampleComplex';
+import FloatingButtonExampleComplex from './ExampleComplex';
+
+const FloatingActionButtonPage = () => (
+  <div>
+    <MarkdownElement text={floatingButtonReadmeText}/>
+    <CodeExample code={floatingButtonExampleSimpleCode}>
+      <FloatingButtonExampleSimple />
+    </CodeExample>
+    <CodeExample code={floatingButtonExampleComplexCode}>
+      <FloatingButtonExampleComplex />
+    </CodeExample>
+    <PropTypeDescription code={floatingButtonCode}/>
+  </div>
+);
+
+export default FloatingActionButtonPage;

docs/src/app/components/pages/components/FloatingActionButton/README.md

@@ -0,0 +1,5 @@
+## Floating Action Button
+The  [Floating Action Button](https://www.google.com/design/spec/components/buttons-floating-action-button.html)
+is used for frequently used functions.
+
+### Examples

docs/src/app/components/pages/components/RaisedButton/ExampleComplex.jsx

@@ -0,0 +1,60 @@
+import React from 'react';
+import RaisedButton from 'material-ui/lib/raised-button';
+import Colors from 'material-ui/lib/styles/colors';
+import FontIcon from 'material-ui/lib/font-icon';
+import Typography from 'material-ui/lib/styles/typography';
+
+const styles = {
+  buttonLabel: {
+    padding: '0px 16px 0px 8px',
+  },
+  exampleImageInput: {
+    cursor: 'pointer',
+    position: 'absolute',
+    top: '0',
+    bottom: '0',
+    right: '0',
+    left: '0',
+    width: '100%',
+    opacity: '0',
+  },
+  exampleButtonIcon: {
+    color: Typography.textFullWhite,
+    height: '100%',
+    display: 'inline-block',
+    verticalAlign: 'middle',
+    paddingLeft: '12px',
+    lineHeight: '36px',
+  },
+  button: {
+    margin: 12,
+  },
+};
+
+const RaisedButtonExampleComplex = () => (
+  <div>
+    <RaisedButton primary={true} label="Choose an Image" style={styles.button}>
+      <input type="file" style={styles.exampleImageInput}></input>
+    </RaisedButton>
+    <RaisedButton
+      linkButton={true}
+      href="https://github.com/callemall/material-ui"
+      secondary={true}
+      style={styles.button}
+      label="Github"
+      labelStyle={styles.buttonLabel}>
+      <FontIcon style={styles.exampleButtonIcon} className="muidocs-icon-custom-github"/>
+    </RaisedButton>
+    <RaisedButton
+      secondary={true}
+      label="Label after"
+      labelPosition="after"
+      labelStyle={styles.buttonLabel}
+      style={styles.button}>
+      <FontIcon style={styles.exampleButtonIcon} className="muidocs-icon-custom-github"/>
+    </RaisedButton>
+    <RaisedButton label="Disabled" disabled={true} style={styles.button}/>
+  </div>
+);
+
+export default RaisedButtonExampleComplex;

docs/src/app/components/pages/components/RaisedButton/ExampleSimple.jsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import RaisedButton from 'material-ui/lib/raised-button';
+
+const styles = {
+  margin: 12,
+};
+
+const RaisedButtonExampleSimple = () => (
+  <div>
+    <RaisedButton label="Default" style={styles} />
+    <RaisedButton label="Primary" primary={true} style={styles} />
+    <RaisedButton label="Secondary" secondary={true} style={styles} />
+  </div>
+);
+
+export default RaisedButtonExampleSimple;

docs/src/app/components/pages/components/RaisedButton/Page.jsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import CodeExample from '../../../CodeExample';
+import PropTypeDescription from '../../../PropTypeDescription';
+import MarkdownElement from '../../../MarkdownElement';
+
+import raisedButtonCode from '!raw!material-ui/lib/raised-button';
+import raisedButtonReadmeText from './README';
+import raisedButtonExampleSimpleCode from '!raw!./ExampleSimple';
+import RaisedButtonExampleSimple from './ExampleSimple';
+import RaisedButtonExampleComplexCode from '!raw!./ExampleComplex';
+import RaisedButtonExampleComplex from './ExampleComplex';
+
+const FloatingActionButtonPage = () => (
+  <div>
+    <MarkdownElement text={raisedButtonReadmeText}/>
+    <CodeExample code={raisedButtonExampleSimpleCode}>
+      <RaisedButtonExampleSimple />
+    </CodeExample>
+    <CodeExample code={RaisedButtonExampleComplexCode}>
+      <RaisedButtonExampleComplex />
+    </CodeExample>
+    <PropTypeDescription code={raisedButtonCode}/>
+  </div>
+);
+
+export default FloatingActionButtonPage;

docs/src/app/components/pages/components/RaisedButton/README.md

@@ -0,0 +1,5 @@
+## Raised Button
+This [button](https://www.google.com/design/spec/components/buttons.html#buttons-flat-raised-buttons)
+is used to add dimension to mostly flat layouts and emphasizes important functions on your page.
+
+### Examples