Skip to content

Commit

Permalink
Add themr to AppBar
Browse files Browse the repository at this point in the history
  • Loading branch information
@javivelasco
javivelasco committed May 15, 2016
1 parent 33ff491 commit c7f8d83
Show file tree
Hide file tree
Showing 8 changed files with 73 additions and 55 deletions.
2 changes: 1 addition & 1 deletion .babelrc
View file
Expand Up @@ -16,4 +16,4 @@
]
}
}
}
}
21 changes: 13 additions & 8 deletions components/app_bar/AppBar.js
View file
@@ -1,11 +1,11 @@
import React from 'react';
import ClassNames from 'classnames';
import style from './style';
import { themr } from 'react-css-themr';
import classnames from 'classnames';

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 (
Expand All @@ -19,7 +19,12 @@ AppBar.propTypes = {
children: React.PropTypes.node,
className: React.PropTypes.string,
fixed: React.PropTypes.bool,
flat: 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
})
};

AppBar.defaultProps = {
Expand All @@ -28,4 +33,4 @@ AppBar.defaultProps = {
flat: false
};

export default AppBar;
export default themr('ToolboxAppBar')(AppBar);

This comment has been minimized.

Sign in to view

Copy link
@KerenChandran

KerenChandran May 15, 2016

Contributor

So I noticed that you are not including the default styles for the component, but are suggesting we use the ThemeProvider with a javascript file that imports all the base themes with the key matching the identifier for each component.

This comment has been minimized.

Sign in to view

Copy link
@KerenChandran

KerenChandran May 15, 2016

Contributor

This might be a dumb question, but how are fixed and flat styles keys in the AppBar style? I'm pretty sure it has nothing to do with your implementation as the only thing changed in the theme file was .root to .appBar; I just don't understand how the object created those keys when you imported the file.
14 changes: 11 additions & 3 deletions components/app_bar/readme.md
View file
Expand Up @@ -4,21 +4,29 @@ 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/style';

const AppBarTest = () => (
<AppBar fixed flat>
<AppBar theme={theme} fixed flat>
<a href="/home">React Toolbox Docs</a>
<Navigation />
</AppBar>
);
```

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.

## Properties

| Name | Type | Default | Description|
|:-----|:-----|:-----|:-----|
| `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 interface

| Name | Description|
|:---------|:-----------|
| `appBar` | Root class.|
| `fixed` | Implemented when the app bar is fixed.|
| `flat` | Implemented when the app bar is flat.|
2 changes: 1 addition & 1 deletion components/app_bar/style.scss → components/app_bar/theme.scss
View file
@@ -1,7 +1,7 @@
@import "../base";
@import "./config";

.root {
.appBar {
display: flex;
height: $appbar-height;
align-items: center;
Expand Down
3 changes: 2 additions & 1 deletion package.json
View file
Expand Up @@ -36,7 +36,8 @@
"toolkit"
],
"dependencies": {
"classnames": "^2.2.5"
"classnames": "^2.2.5",
"react-css-themr": "^1.0.0"
},
"devDependencies": {
"autoprefixer": "^6.3.6",
Expand Down
79 changes: 40 additions & 39 deletions spec/root.js
View file
@@ -1,5 +1,8 @@
/* global VERSION */
import React from 'react';
import { ThemeProvider } from 'react-css-themr';
import theme from './theme';

import AppBarToolbox from '../components/app_bar';
import Avatar from './components/avatar';
import ButtonToolbox from '../components/button';
Expand Down Expand Up @@ -27,47 +30,45 @@ import Tabs from './components/tabs';
import Tooltip from './components/tooltip';
import style from './style';

const _hrefProject = () => {
window.href = 'http://react-toolbox';
};

const Root = () => (
<div className={style.app}>
<AppBarToolbox fixed flat className={style.appbar}>
<h1>React Toolbox <small>Spec {VERSION}</small></h1>
<ButtonToolbox
accent
className={style.github}
icon='web'
floating
onClick={_hrefProject}
/>
</AppBarToolbox>
<ThemeProvider theme={theme}>
<div className={style.app}>
<AppBarToolbox className={style.appbar} fixed flat>
<h1>React Toolbox <small>Spec {VERSION}</small></h1>
<ButtonToolbox
accent
className={style.github}
icon='web'
floating
onClick={() => {window.href = 'http://react-toolbox';}}
/>
</AppBarToolbox>

<Autocomplete />
<Avatar />
<Button />
<Card />
<Checkbox />
<Chip />
<Dialog />
<Drawer />
<Dropdown />
<IconMenu />
<Input />
<Layout />
<List />
<Menu />
<Pickers />
<Progress />
<Radio />
<Slider />
<Snackbar />
<Switch />
<Table />
<Tabs />
<Tooltip />
</div>
<Autocomplete />
<Avatar />
<Button />
<Card />
<Checkbox />
<Chip />
<Dialog />
<Drawer />
<Dropdown />
<IconMenu />
<Input />
<Layout />
<List />
<Menu />
<Pickers />
<Progress />
<Radio />
<Slider />
<Snackbar />
<Switch />
<Table />
<Tabs />
<Tooltip />
</div>
</ThemeProvider>
);

export default Root;
3 changes: 3 additions & 0 deletions spec/theme.js
View file
@@ -0,0 +1,3 @@
import ToolboxAppBar from '../components/app_bar/theme.scss';

export default { ToolboxAppBar };

This comment has been minimized.

Sign in to view

Copy link
@KerenChandran

KerenChandran May 15, 2016

Contributor

I think we may want to have this file available for users to import, incase they want to use default styles and then add their own style afterwards.
4 changes: 2 additions & 2 deletions webpack.config.development.js
View file
Expand Up @@ -6,7 +6,7 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
context: __dirname,
devtool: 'inline-source-map',
devtool: 'inline-source-map',
entry: [
'webpack-hot-middleware/client',
'./spec/index.js'
Expand All @@ -25,7 +25,7 @@ module.exports = {
{
test: /\.js$/,
loader: 'babel',
exclude: /(node_modules)/
exclude: [/(node_modules)/, /react-css-themr/]
}, {
test: /\.(scss|css)$/,
loader: ExtractTextPlugin.extract('style', 'css?sourceMap&modules&importLoaders=1&localIdentName=[name]__[local]___[hash:base64:5]!postcss!sass?sourceMap')
Expand Down

1 comment on commit c7f8d83

@KerenChandran
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Just to clarify, this method can be used in conjunction with react-toolbox-loader right? Like I can use the default style for the input field and have a different style (using this approach) for the textarea, but both will allow toolbox-loader to override default config variables right?

Please sign in to comment.