diff --git a/components/app_bar/AppBar.js b/components/app_bar/AppBar.js
index bd2b27b1..de74eac4 100644
--- a/components/app_bar/AppBar.js
+++ b/components/app_bar/AppBar.js
@@ -2,64 +2,69 @@ import React, { PropTypes } from 'react';
import classnames from 'classnames';
import { themr } from 'react-css-themr';
import { APP_BAR } from '../identifiers.js';
-import FontIcon from '../font_icon/FontIcon.js';
+import InjectedFontIcon from '../font_icon/FontIcon.js';
-const AppBar = ({ theme, title, ...props }) => {
- const className = classnames(theme.appBar, {
- [theme.fixed]: props.fixed,
- [theme.flat]: props.flat
- }, props.className);
- const { leftIcon, onLeftIconClick, rightIcon, onRightIconClick } = props;
+const factory = (FontIcon) => {
+ const AppBar = ({ children, leftIcon, onLeftIconClick, onRightIconClick, rightIcon, theme, title, ...props }) => {
+ const className = classnames(theme.appBar, {
+ [theme.fixed]: props.fixed,
+ [theme.flat]: props.flat
+ }, props.className);
- return (
-
- {leftIcon ? : null
- }
- {title ? {title}
: null}
- {props.children}
- {rightIcon ? : null
- }
-
- );
-};
+ return (
+
+ {leftIcon &&
+ }
+ {title && {title}
}
+ {children}
+ {rightIcon &&
+ }
+
+ );
+ };
-AppBar.propTypes = {
- children: PropTypes.node,
- className: PropTypes.string,
- fixed: PropTypes.bool,
- flat: PropTypes.bool,
- leftIcon: PropTypes.oneOfType(
- PropTypes.string,
- PropTypes.element
- ),
- onLeftIconClick: PropTypes.func,
- onRightIconClick: PropTypes.func,
- rightIcon: PropTypes.oneOfType(
- PropTypes.string,
- PropTypes.element
- ),
- theme: PropTypes.shape({
- appBar: PropTypes.string,
- leftIcon: PropTypes.string,
- rightIcon: PropTypes.string,
- fixed: PropTypes.string,
- flat: PropTypes.string,
+ AppBar.propTypes = {
+ children: PropTypes.node,
+ className: PropTypes.string,
+ fixed: PropTypes.bool,
+ flat: PropTypes.bool,
+ leftIcon: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.element
+ ]),
+ onLeftIconClick: PropTypes.func,
+ onRightIconClick: PropTypes.func,
+ rightIcon: PropTypes.oneOfType([
+ PropTypes.string,
+ PropTypes.element
+ ]),
+ theme: PropTypes.shape({
+ appBar: PropTypes.string,
+ fixed: PropTypes.string,
+ flat: PropTypes.string,
+ leftIcon: PropTypes.string,
+ rightIcon: PropTypes.string,
+ title: PropTypes.string
+ }),
title: PropTypes.string
- }),
- title: PropTypes.string
+ };
+
+ AppBar.defaultProps = {
+ className: '',
+ fixed: false,
+ flat: false
+ };
+
+ return AppBar;
};
-AppBar.defaultProps = {
- className: '',
- fixed: false,
- flat: false
-};
-
-export default themr(APP_BAR)(AppBar);
+const AppBar = factory(InjectedFontIcon);
+export default themr(APP_BAR, null)(AppBar);
+export { factory as appBarFactory };
export { AppBar };
diff --git a/components/app_bar/index.js b/components/app_bar/index.js
index 998ed5a7..4f6f17f8 100644
--- a/components/app_bar/index.js
+++ b/components/app_bar/index.js
@@ -1,8 +1,10 @@
import { themr } from 'react-css-themr';
-import { AppBar } from './AppBar.js';
import { APP_BAR } from '../identifiers.js';
+import { appBarFactory } from './AppBar.js';
+import FontIcon from '../font_icon/FontIcon.js';
import theme from './theme.scss';
+const AppBar = appBarFactory(FontIcon);
const ThemedAppBar = themr(APP_BAR, theme)(AppBar);
export default ThemedAppBar;
diff --git a/spec/components/button.js b/spec/components/button.js
index 1a841ee7..f74691b3 100644
--- a/spec/components/button.js
+++ b/spec/components/button.js
@@ -29,12 +29,12 @@ const ButtonTest = () => (
Icon Buttons should align in the vertical center, to see this we need to
put them next to text or highlight thier background color.
-
- Menu
+
+ Menu
- Menu
+ Menu
- Github
+ Github
);