appbar: fonticon -> iconbutton

components/app_bar/AppBar.js

@@ -2,9 +2,9 @@ import React, { PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
 import { APP_BAR } from '../identifiers.js';
-import InjectedFontIcon from '../font_icon/FontIcon.js';
+import InjectIconButton from '../button/IconButton.js';
 
-const factory = (FontIcon) => {
+const factory = (IconButton) => {
   const AppBar = ({ children, leftIcon, onLeftIconClick, onRightIconClick, rightIcon, theme, title, ...props }) => {
     const className = classnames(theme.appBar, {
       [theme.fixed]: props.fixed,
@@ -13,17 +13,19 @@ const factory = (FontIcon) => {
 
     return (
       <header className={className} data-react-toolbox='app-bar'>
-        {leftIcon && <FontIcon
+        {leftIcon && <IconButton
+          inverse
           className={classnames(theme.leftIcon)}
           onClick={onLeftIconClick}
-          value={leftIcon} />
+          icon={leftIcon} />
         }
         {title && <h1 className={classnames(theme.title)}>{title}</h1>}
         {children}
-        {rightIcon && <FontIcon
+        {rightIcon && <IconButton
+          inverse
           className={classnames(theme.rightIcon)}
           onClick={onRightIconClick}
-          value={rightIcon} />
+          icon={rightIcon} />
         }
       </header>
     );
@@ -64,7 +66,7 @@ const factory = (FontIcon) => {
   return AppBar;
 };
 
-const AppBar = factory(InjectedFontIcon);
-export default themr(APP_BAR, null)(AppBar);
+const AppBar = factory(InjectIconButton);
+export default themr(APP_BAR)(AppBar);
 export { factory as appBarFactory };
 export { AppBar };

components/app_bar/index.js

@@ -1,10 +1,10 @@
 import { themr } from 'react-css-themr';
 import { APP_BAR } from '../identifiers.js';
 import { appBarFactory } from './AppBar.js';
-import FontIcon from '../font_icon/FontIcon.js';
+import { IconButton } from '../button';
 import theme from './theme.scss';
 
-const AppBar = appBarFactory(FontIcon);
+const AppBar = appBarFactory(IconButton);
 const ThemedAppBar = themr(APP_BAR, theme)(AppBar);
 
 export default ThemedAppBar;

components/app_bar/readme.md

@@ -26,9 +26,9 @@ The `AppBar` component provides properties for the common use cases of `title`,
 | `flat`             | `Bool`     | `false` | If true, the AppBar shows a shadow.|
 | `theme`            | `Object`   | `null`  | Classnames object defining the component style.|
 | `title`            | `String`   | `null`  | Title used for the appbar.|
-| `leftIcon`         | `String`   | `null`  | Left icon.|
+| `leftIcon`         | `String|Element`   | `null`  | Left icon.|
 | `onLeftIconClick`  | `Function` | `null`  | Called on left icon click event.|
-| `rightIcon`        | `String`   | `null`  | Right icon.|
+| `rightIcon`        | `String|Element`   | `null`  | Right icon.|
 | `onRightIconClick` | `Function` | `null`  | Called on right icon click event.|
 
 ## Theme

components/app_bar/theme.scss

@@ -47,13 +47,11 @@
   }
 
   .leftIcon {
-    padding: 1.2 * $unit 1.2 * $unit 1.2 * $unit 0;
-    text-align: left;
+    margin-left: -1.2 * $unit;
   }
 
   .rightIcon {
-    padding: 1.2 * $unit 0 1.2 * $unit 1.2 * $unit;
     margin-left: auto;
-    text-align: right;
+    margin-right: -1.2 * $unit;
   }
 }