Update docs for Icon Button

docs/src/app/app-routes.jsx

@@ -31,7 +31,7 @@ import DividerPage from './components/pages/components/Divider/Page';
 import DropDownMenuPage from './components/pages/components/DropDownMenu/Page';
 import GridListPage from './components/pages/components/GridList/Page';
 import Icons from './components/pages/components/icons';
-import IconButtons from './components/pages/components/icon-buttons';
+import IconButtonPage from './components/pages/components/IconButton/Page';
 import IconMenus from './components/pages/components/icon-menus';
 import LeftNavPage from './components/pages/components/LeftNav/Page';
 import Lists from './components/pages/components/lists';
@@ -92,7 +92,7 @@ const AppRoutes = (
       <Route path="dropdown-menu" component={DropDownMenuPage} />
       <Route path="grid-list" component={GridListPage} />
       <Route path="icons" component={Icons} />
-      <Route path="icon-buttons" component={IconButtons} />
+      <Route path="icon-buttons" component={IconButtonPage} />
       <Route path="icon-menus" component={IconMenus} />
       <Route path="left-nav" component={LeftNavPage} />
       <Route path="lists" component={Lists} />

docs/src/app/components/pages/components/IconButton/ExampleMaterial.jsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import FontIcon from 'material-ui/lib/font-icon';
+import IconButton from 'material-ui/lib/icon-button';
+
+const IconButtonExampleMaterial = () => (
+  <div>
+    <IconButton tooltip="Sort" disabled={true}>
+      <FontIcon className="muidocs-icon-custom-sort"/>
+    </IconButton>
+    <IconButton
+      iconClassName="material-icons"
+      tooltip="Sky">
+      settings_system_daydream
+    </IconButton>
+  </div>
+);
+
+export default IconButtonExampleMaterial;

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

@@ -0,0 +1,8 @@
+import React from 'react';
+import IconButton from 'material-ui/lib/icon-button';
+
+const IconButtonExampleSimple = () => (
+  <IconButton iconClassName="muidocs-icon-custom-github" />
+);
+
+export default IconButtonExampleSimple;

docs/src/app/components/pages/components/IconButton/ExampleTooltip.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import IconButton from 'material-ui/lib/icon-button';
+
+const IconButtonExampleTooltip = () => (
+  <div>
+    <IconButton iconClassName="muidocs-icon-custom-github" tooltip="bottom-right"
+      tooltipPosition="bottom-right" />
+    <IconButton iconClassName="muidocs-icon-custom-github" tooltip="bottom-center"
+      tooltipPosition="bottom-center" />
+    <IconButton iconClassName="muidocs-icon-custom-github" tooltip="bottom-left"
+      tooltipPosition="bottom-left" />
+    <IconButton iconClassName="muidocs-icon-custom-github" tooltip="top-right"
+      tooltipPosition="top-right" />
+    <IconButton iconClassName="muidocs-icon-custom-github" tooltip="top-center"
+      tooltipPosition="top-center" />
+    <IconButton iconClassName="muidocs-icon-custom-github" tooltip="top-left"
+      tooltipPosition="top-left" />
+  </div>
+);
+
+export default IconButtonExampleTooltip;

docs/src/app/components/pages/components/IconButton/ExampleTouch.jsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import IconButton from 'material-ui/lib/icon-button';
+import ActionGrade from 'material-ui/lib/svg-icons/action/grade';
+
+const IconButtonExampleTouch = () => (
+  <div>
+    <IconButton tooltip="bottom-right" touch={true} tooltipPosition="bottom-right">
+      <ActionGrade/>
+    </IconButton>
+    <IconButton tooltip="bottom-center" touch={true} tooltipPosition="bottom-center">
+      <ActionGrade/>
+    </IconButton>
+    <IconButton tooltip="bottom-left" touch={true} tooltipPosition="bottom-left">
+      <ActionGrade/>
+    </IconButton>
+    <IconButton tooltip="top-right" touch={true} tooltipPosition="top-right">
+      <ActionGrade/>
+    </IconButton>
+    <IconButton tooltip="top-center" touch={true} tooltipPosition="top-center">
+      <ActionGrade/>
+    </IconButton>
+    <IconButton tooltip="top-left" touch={true} tooltipPosition="top-left">
+      <ActionGrade/>
+    </IconButton>
+  </div>
+);
+
+export default IconButtonExampleTouch;

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

@@ -0,0 +1,37 @@
+import React from 'react';
+import CodeExample from '../../../CodeExample';
+import PropTypeDescription from '../../../PropTypeDescription';
+import MarkdownElement from '../../../MarkdownElement';
+
+import iconButtonCode from '!raw!material-ui/lib/icon-button';
+import iconButtonReadmeText from './README';
+import iconButtonExampleSimpleCode from '!raw!./ExampleSimple';
+import IconButtonExampleSimple from './ExampleSimple';
+import iconButtonExampleTooltipCode from '!raw!./ExampleTooltip';
+import IconButtonExampleTooltip from './ExampleTooltip';
+import iconButtonExampleTouchCode from '!raw!./ExampleTouch';
+import IconButtonExampleTouch from './ExampleTouch';
+import iconButtonExampleMaterialCode from '!raw!./ExampleMaterial';
+import IconButtonExampleMaterial from './ExampleMaterial';
+
+
+const IconButtonPage = () => (
+  <div>
+    <MarkdownElement text={iconButtonReadmeText} />
+    <CodeExample code={iconButtonExampleSimpleCode}>
+      <IconButtonExampleSimple/>
+    </CodeExample>
+    <CodeExample code={iconButtonExampleTooltipCode}>
+      <IconButtonExampleTooltip/>
+    </CodeExample>
+    <CodeExample code={iconButtonExampleTouchCode}>
+      <IconButtonExampleTouch/>
+    </CodeExample>
+    <CodeExample code={iconButtonExampleMaterialCode}>
+      <IconButtonExampleMaterial/>
+    </CodeExample>
+    <PropTypeDescription code={iconButtonCode} />
+  </div>
+);
+
+export default IconButtonPage;

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

@@ -0,0 +1,9 @@
+## Icon Button
+An [Icon Button](https://www.google.com/design/spec/components/buttons.html#buttons-toggle-buttons) generates a button element around an icon. Also, focus styles will happen on tab but not on click. There are three ways to add an icon:
+
+  1. For stylesheets: Set the prop "iconClassName" to the classname for you icon.
+  2. For SVG icons: Insert the SVG component as a child of icon buttons. This is the method we are using. [View our source](https://github.com/callemall/material-ui/blob/master/src/svg-icons/action/grade.jsx) to see how ActionGrade was created using mui.SvgIcon.
+  3. Alternative: You can also insert a [FontIcon](http://www.material-ui.com/#/components/icons) component as a child of IconButton. This is similar to how the iconClassName prop from method 1 is handled.
+  4. Google Material Icons: Now also supported for iconButtons by passing "material-icons" in iconClassName prop.
+
+### Examples