Autoinject style for AppBar

components/app_bar/AppBar.js

@@ -1,6 +1,7 @@
-import React from 'react';
+import React, { PropTypes } from 'react';
 import classnames from 'classnames';
 import { themr } from 'react-css-themr';
+import { APP_BAR } from '../identifiers.js';
 
 const AppBar = ({ theme, ...props }) => {
   const className = classnames(theme.appBar, {
@@ -16,14 +17,14 @@ const AppBar = ({ theme, ...props }) => {
 };
 
 AppBar.propTypes = {
-  children: React.PropTypes.node,
-  className: React.PropTypes.string,
-  fixed: React.PropTypes.bool,
-  flat: React.PropTypes.bool,
-  theme: React.PropTypes.shape({
-    appBar: React.PropTypes.string.isRequired,
-    fixed: React.PropTypes.string.isRequired,
-    flat: React.PropTypes.string.isRequired
+  children: PropTypes.node,
+  className: PropTypes.string,
+  fixed: PropTypes.bool,
+  flat: PropTypes.bool,
+  theme: PropTypes.shape({
+    appBar: PropTypes.string,
+    fixed: PropTypes.string,
+    flat: PropTypes.string
   })
 };
 
@@ -33,4 +34,5 @@ AppBar.defaultProps = {
   flat: false
 };
 
-export default themr('ToolboxAppBar')(AppBar);
+export default themr(APP_BAR)(AppBar);
+export { AppBar };

components/app_bar/index.js

@@ -1 +1,9 @@
-export default from './AppBar';
+import { themr } from 'react-css-themr';
+import { AppBar } from './AppBar.js';
+import { APP_BAR } from '../identifiers.js';
+import theme from './theme.scss';
+
+const ThemedAppBar = themr(APP_BAR, theme)(AppBar);
+
+export default ThemedAppBar;
+export { ThemedAppBar as AppBar };

components/app_bar/readme.md

@@ -4,16 +4,17 @@ The app bar is a special kind of toolbar that’s used for branding, navigation,
 
 ```jsx
 import AppBar from 'react-toolbox/lib/app_bar';
-import theme from 'react-toolbox/lib/app_bar/theme';
 
 const AppBarTest = () => (
-  <AppBar theme={theme} fixed flat>
+  <AppBar fixed flat>
     <a href="/home">React Toolbox Docs</a>
     <Navigation />
   </AppBar>
 );
 ```
 
+If you want to provide a theme via context, the component key is `RTAppBar`.
+
 ## Properties
 
 | Name          | Type    | Default  | Description|
@@ -23,12 +24,10 @@ const AppBarTest = () => (
 | `flat`      | `Bool`    | `false`  | If true, the AppBar shows a shadow.|
 | `theme`     | `Object`  | `null`   | Classnames object defining the component style.|
 
-## Theming
-
-You can take a look to the `_config.scss` variables. The themed key for this component is `ToolboxAppBar`, it should implement the following interface:
+## Theme
 
 | Name     | Description|
 |:---------|:-----------|
-| `appBar` | Root class.|
-| `fixed`  | Implemented when the app bar is fixed.|
-| `flat`   | Implemented when the app bar is flat.|
+| `appBar` | Used for the component root element.|
+| `fixed`  | Added to the root element when the app bar is fixed.|
+| `flat`   | Added to the root element when the app bar is flat.|

components/identifiers.js

@@ -1,2 +1,3 @@
+export const APP_BAR = 'RTAppBar';
 export const BUTTON = 'RTButton';
 export const RIPPLE = 'RTRipple';

spec/theme.js

@@ -1,6 +1,5 @@
 import '../components/commons.scss';
 
-import ToolboxAppBar from '../components/app_bar/theme.scss';
 import ToolboxAutocomplete from '../components/autocomplete/theme.scss';
 import ToolboxAvatar from '../components/avatar/theme.scss';
 import ToolboxCard from '../components/card/theme.scss';
@@ -28,7 +27,6 @@ import ToolboxTimePicker from '../components/time_picker/theme.scss';
 import ToolboxTooltip from '../components/tooltip/theme.scss';
 
 export default {
-  ToolboxAppBar,
   ToolboxAutocomplete,
   ToolboxAvatar,
   ToolboxCard,