Merge pull request #540 from react-toolbox/react-css-themr-migration

React css themr migration

.babelrc

@@ -16,4 +16,4 @@
       ]
     }
   }
-}
+}

.gitignore

@@ -1,5 +1,4 @@
 build
-lib
 node_modules
 npm-debug.log
 .idea

.nvmrc

@@ -1 +1 @@
-4.3.2
+4.4.3

components/_mixins.scss

@@ -197,38 +197,38 @@
 
 @mixin shadow-2dp() {
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-                0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
-                0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
+  0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
+  0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
 }
 
 @mixin shadow-3dp() {
   box-shadow: 0 3px 4px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-                0 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
-                0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
+  0 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
+  0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
 }
 
 @mixin shadow-4dp() {
   box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-                0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
-                0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+  0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
+  0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
 }
 
 @mixin shadow-6dp() {
   box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-                0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
-                0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+  0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
+  0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
 }
 
 @mixin shadow-8dp() {
   box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-                0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
-                0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+  0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
+  0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity);
 }
 
 @mixin shadow-16dp() {
   box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity),
-                0 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
-                0 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity);
+  0 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
+  0 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity);
 }
 
 //-- Animations
@@ -258,21 +258,3 @@
     height: 0;
   }
 }
-
-@mixin btn-colors($name, $color, $background, $hover) {
-  .#{$name}:not([disabled]) {
-    &.raised, &.floating {
-      color: $color;
-      background: $background;
-    }
-    &.flat, &.toggle {
-      color: $background;
-      &:focus:not(:active) {
-        background: $hover;
-      }
-    }
-    &.flat:hover {
-      background: $hover;
-    }
-  }
-}

components/animations/index.js

@@ -1,4 +1,4 @@
-export SlideLeft from './slide-left';
-export SlideRight from './slide-right';
-export ZoomIn from './zoom-in';
-export ZoomOut from './zoom-out';
+export SlideLeft from './slide-left.scss';
+export SlideRight from './slide-right.scss';
+export ZoomIn from './zoom-in.scss';
+export ZoomOut from './zoom-out.scss';

components/animations/zoom-in.scss

@@ -1,4 +1,6 @@
-@import "../base";
+@import "../colors";
+@import "../globals";
+@import "../mixins";
 
 .enter, .leave {
   position: absolute;

components/animations/zoom-out.scss

@@ -1,4 +1,6 @@
-@import "../base";
+@import "../colors";
+@import "../globals";
+@import "../mixins";
 
 .enter, .leave {
   position: absolute;

components/app_bar/AppBar.js

@@ -1,11 +1,12 @@
-import React from 'react';
-import ClassNames from 'classnames';
-import style from './style';
+import React, { PropTypes } from 'react';
+import classnames from 'classnames';
+import { themr } from 'react-css-themr';
+import { APP_BAR } from '../identifiers.js';
 
-const AppBar = (props) => {
-  const className = ClassNames(style.root, {
-    [style.fixed]: props.fixed,
-    [style.flat]: props.flat
+const AppBar = ({ theme, ...props }) => {
+  const className = classnames(theme.appBar, {
+    [theme.fixed]: props.fixed,
+    [theme.flat]: props.flat
   }, props.className);
 
   return (
@@ -16,10 +17,15 @@ const AppBar = (props) => {
 };
 
 AppBar.propTypes = {
-  children: React.PropTypes.node,
-  className: React.PropTypes.string,
-  fixed: React.PropTypes.bool,
-  flat: React.PropTypes.bool
+  children: PropTypes.node,
+  className: PropTypes.string,
+  fixed: PropTypes.bool,
+  flat: PropTypes.bool,
+  theme: PropTypes.shape({
+    appBar: PropTypes.string,
+    fixed: PropTypes.string,
+    flat: PropTypes.string
+  })
 };
 
 AppBar.defaultProps = {
@@ -28,4 +34,5 @@ AppBar.defaultProps = {
   flat: false
 };
 
-export default 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

@@ -13,7 +13,7 @@ const AppBarTest = () => (
 );
 ```
 
-Coming soon, the `AppBar` component will support arbitrary content attributes for left and right content and a title, for now it's just a wrapper.
+If you want to provide a theme via context, the component key is `RTAppBar`.
 
 ## Properties
 
@@ -22,3 +22,12 @@ Coming soon, the `AppBar` component will support arbitrary content attributes fo
 | `className` | `String`  | `''`     | Set a class for the root component.|
 | `fixed`     | `Bool`    | `false`  | Determine if the bar should have position `fixed` or `relative`.|
 | `flat`      | `Bool`    | `false`  | If true, the AppBar shows a shadow.|
+| `theme`     | `Object`  | `null`   | Classnames object defining the component style.|
+
+## Theme
+
+| Name     | Description|
+|:---------|:-----------|
+| `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/app_bar/style.scss → components/app_bar/theme.scss

@@ -1,19 +1,21 @@
-@import "../base";
+@import "../colors";
+@import "../globals";
+@import "../mixins";
 @import "./config";
 
-.root {
+.appBar {
   display: flex;
   height: $appbar-height;
   align-items: center;
   padding: 0 $appbar-h-padding;
   color: $appbar-contrast;
   background: $appbar-color;
 
-  @media screen and (max-width: $layout-breakpoint-xxs) and (orientation:portrait) {
+  @media screen and (max-width: $layout-breakpoint-xxs) and (orientation: portrait) {
     height: $appbar-height-m-portrait;
   }
 
-  @media screen and (max-width: $layout-breakpoint-xs) and (orientation:landscape) {
+  @media screen and (max-width: $layout-breakpoint-xs) and (orientation: landscape) {
     height: $appbar-height-m-landscape;
   }