Skip to content

Commit

Permalink
Merge pull request #588 from mmrtnz/master
Browse files Browse the repository at this point in the history
v0.8.0 Prerelease
  • Loading branch information
hai-cea committed Apr 27, 2015
2 parents b3ce0b2 + 39abfb9 commit 2eb14e6
Show file tree
Hide file tree
Showing 240 changed files with 9,029 additions and 7,126 deletions.
34 changes: 34 additions & 0 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,37 @@
## 0.8.0 (Pre-release)
###### _TBD_

##### Breaking Changes
- Refactored all CSS into Javascript (#30, #316)
- All Material-UI components now have their styles defined inline. This solves
many problems with CSS as mentions in [@vjeux's presentation](https://speakerdeck.com/vjeux/react-css-in-js)
such polluting the global namespace with classes that really should be
component specific. In addition to the benefits mentioned in the
presentation, inline styles allow Material-UI to become CSS preprocessor
agnostic and make Themeing much more dynamic and simple.
[Read our CSS in JS discussion](https://github.com/callemall/material-ui/issues/30)
- Upgrade path:
- *If you are overriding component CSS classes:* Redefine your overrides as
an object following [React's inline styles format](https://facebook.github.io/react/tips/inline-styles.html),
then pass it into the material-ui component via the `style` prop. These
changes are applied to the root element of the component. If you are
overriding a nested element of the component, check the component's
documentation and see if there is a style prop available for that nested
element. If a style prop does not exist for the component's nested element
that you are trying to override, [submit an issue](https://github.com/callemall/material-ui/issues/new)
requesting to have it added.
- *If you are using any of Material-UI's Less files:* These files have been
refactored into their [own javascript files](https://github.com/callemall/material-ui/tree/css-in-js/src/styles)
and can be accessed like so `var FILENAME = require('material-ui').Styles.FILENAME;`.
Material-UI has moved away from being a CSS Framework to being simply a
set of React components.

##### General
- Themes have been added (#202)
- Requiring individual components is now supported (#363)
- An example would be: `var SvgIcon = require('material-ui/lib/svg-icon);`
- The `/lib` folder in Material-UI contains the file structure needed when referencing individual components.

## 0.7.5
###### _Apr. 27, 2015_

Expand Down
21 changes: 6 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@

[![Gitter](https://badges.gitter.im/Join Chat.svg)](https://gitter.im/callemall/material-ui?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)

Material-UI is a CSS framework and a set of [React](http://facebook.github.io/react/) components that implement [Google's Material Design](https://www.google.com/design/spec/material-design/introduction.html) specification.
Material-UI is a set of [React](http://facebook.github.io/react/) components that implement [Google's Material Design](https://www.google.com/design/spec/material-design/introduction.html) specification.

Check out our [documentation site](http://www.material-ui.com/) for live examples. It's still a work in progress, but hopefully you can see where we're headed.

Expand All @@ -17,8 +17,7 @@ Material-UI is available as an [npm package](https://www.npmjs.org/package/mater
npm install material-ui
```

Use [browserify](http://browserify.org/) and [reactify](https://github.com/andreypopp/reactify) for dependency management and JSX transformation. The CSS framework is written in [Less](http://lesscss.org/), so you'll need to compile that as well. For [Sass](http://www.sass-lang.com) users, [material-ui-sass](https://github.com/gpbl/material-ui-sass) contains the .scss version of the Less framework. People working with [Stylus](http://learnboost.github.io/stylus/) can use [material-ui-stylus](https://github.com/Autarc/material-ui-stylus) to import
the proper .styl version of the files.
Use [browserify](http://browserify.org/) and [reactify](https://github.com/andreypopp/reactify) for dependency management and JSX transformation.

### React-Tap-Event-Plugin
Some components use [react-tap-event-plugin](https://github.com/zilverline/react-tap-event-plugin) to
Expand Down Expand Up @@ -63,19 +62,11 @@ module.exports = MyAwesomeReactComponent;

## Customization

The styles are separated into 2 less files:
* src/less/scaffolding.less
* src/less/components.less
Material-UI components have their styles defined inline. There are two approaches to overriding these styles:
* [Override individual component styles via the `style` prop](http://material-ui.com/#/customization/inline-styles)
* [Define a Theme to apply overarching style changes](http://material-ui.com/#/customization/themes)

This allows you to override any variables defined in [custom-variables.less](https://github.com/callemall/material-ui/blob/master/src/less/variables/custom-variables.less) without having to modify material-ui source files directly. For example, your main.less file could look something like this:
```less
@import "node_modules/material-ui/src/less/scaffolding.less";

//Define a custom less file to override any variables defined in scaffolding.less
@import "my-custom-overrides.less";

@import "node_modules/material-ui/src/less/components.less";
```
This allows you to override variables used by components without having to modify material-ui source files directly.

## Examples
There are 2 projects that you can look at to help you get started. The first project can be found in the [example folder](https://github.com/callemall/material-ui/tree/master/example). This is a basic project that shows how you can consume material-ui components in your own project.
Expand Down
2 changes: 1 addition & 1 deletion docs/package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "material-ui-docs",
"version": "0.7.5",
"version": "0.8.0",
"description": "Documentation site for material-ui",
"repository": {
"type": "git",
Expand Down
18 changes: 11 additions & 7 deletions docs/src/app/app-routes.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -10,11 +10,13 @@ var Master = require('./components/master.jsx');
var Home = require('./components/pages/home.jsx');
var GetStarted = require('./components/pages/get-started.jsx');

var CssFramework = require('./components/pages/css-framework.jsx');
var Colors = require('./components/pages/css-framework/colors.jsx');
var Typography = require('./components/pages/css-framework/typography.jsx');
var Customization = require('./components/pages/customization.jsx');
var Colors = require('./components/pages/customization/colors.jsx');
var Themes = require('./components/pages/customization/themes.jsx');
var InlineStyles = require('./components/pages/customization/inline-styles.jsx');

var Components = require('./components/pages/components.jsx');
var AppBar = require('./components/pages/components/app-bar.jsx');
var Buttons = require('./components/pages/components/buttons.jsx');
var DatePicker = require('./components/pages/components/date-picker.jsx');
var Dialog = require('./components/pages/components/dialog.jsx');
Expand Down Expand Up @@ -45,13 +47,15 @@ var AppRoutes = (
<Route name="root" path="/" handler={Master}>
<Route name="home" handler={Home} />
<Route name="get-started" handler={GetStarted} />
<Route name="css-framework" handler={CssFramework}>
<Route name="customization" handler={Customization}>
<Route name="colors" handler={Colors} />
<Route name="typography" handler={Typography} />
<Redirect from="/css-framework" to="colors" />
<Route name="themes" handler={Themes} />
<Route name="inline-styles" handler={InlineStyles} />
<Redirect from="/customization" to="themes" />
</Route>

<Route name="components" handler={Components}>
<Route name="appbar" handler={AppBar} />
<Route name="buttons" handler={Buttons} />
<Route name="date-picker" handler={DatePicker} />
<Route name="dialog" handler={Dialog} />
Expand All @@ -67,7 +71,7 @@ var AppRoutes = (
<Route name="tabs" handler={Tabs} />
<Route name="text-fields" handler={TextFields} />
<Route name="toolbars" handler={Toolbars} />
<Redirect from="/components" to="buttons" />
<Redirect from="/components" to="appbar" />
</Route>

<DefaultRoute handler={Home}/>
Expand Down
56 changes: 31 additions & 25 deletions docs/src/app/components/app-left-nav.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -2,31 +2,33 @@ var React = require('react'),
Router = require('react-router'),
mui = require('mui'),

{ MenuItem, LeftNav } = mui,

menuItems = [
{ route: 'get-started', text: 'Get Started' },
{ route: 'css-framework', text: 'CSS Framework' },
{ route: 'customization', text: 'Customization' },
{ route: 'components', text: 'Components' },
{ type: mui.MenuItem.Types.SUBHEADER, text: 'Resources' },
{ type: mui.MenuItem.Types.LINK, payload: 'https://github.com/callemall/material-ui', text: 'GitHub' },
{ type: mui.MenuItem.Types.LINK, payload: 'http://facebook.github.io/react', text: 'React' },
{ type: mui.MenuItem.Types.LINK, payload: 'https://www.google.com/design/spec/material-design/introduction.html', text: 'Material Design' }
{ type: MenuItem.Types.SUBHEADER, text: 'Resources' },
{ type: MenuItem.Types.LINK, payload: 'https://github.com/callemall/material-ui', text: 'GitHub' },
{ type: MenuItem.Types.LINK, payload: 'http://facebook.github.io/react', text: 'React' },
{ type: MenuItem.Types.LINK, payload: 'https://www.google.com/design/spec/material-design/introduction.html', text: 'Material Design' }
];

var AppLeftNav = React.createClass({

mixins: [Router.Navigation, Router.State],
class AppLeftNav extends React.Component {

getInitialState: function() {
return {
selectedIndex: null
};
},
constructor() {
super();
this.toggle = this.toggle.bind(this);
this._getSelectedIndex = this._getSelectedIndex.bind(this);
this._onLeftNavChange = this._onLeftNavChange.bind(this);
this._onHeaderClick = this._onHeaderClick.bind(this);
}

render: function() {
render() {
var header = <div className="logo" onClick={this._onHeaderClick}>material ui</div>;

return (
<mui.LeftNav
<LeftNav
ref="leftNav"
docked={false}
isInitiallyOpen={false}
Expand All @@ -35,30 +37,34 @@ var AppLeftNav = React.createClass({
selectedIndex={this._getSelectedIndex()}
onChange={this._onLeftNavChange} />
);
},
}

toggle: function() {
toggle() {
this.refs.leftNav.toggle();
},
}

_getSelectedIndex: function() {
_getSelectedIndex() {
var currentItem;

for (var i = menuItems.length - 1; i >= 0; i--) {
currentItem = menuItems[i];
if (currentItem.route && this.context.router.isActive(currentItem.route)) return i;
};
},
}
}

_onLeftNavChange: function(e, key, payload) {
_onLeftNavChange(e, key, payload) {
this.context.router.transitionTo(payload.route);
},
}

_onHeaderClick: function() {
_onHeaderClick() {
this.context.router.transitionTo('root');
this.refs.leftNav.close();
}

});
}

AppLeftNav.contextTypes = {
router: React.PropTypes.func
};

module.exports = AppLeftNav;
20 changes: 13 additions & 7 deletions docs/src/app/components/code-example/code-block.jsx
Original file line number Diff line number Diff line change
@@ -1,24 +1,30 @@
var React = require('react'),
hljs = require('highlight.js');

var CodeBlock = React.createClass({
class CodeBlock extends React.Component {

componentDidMount: function() {
constructor() {
super();
this.componentDidMount = this.componentDidMount.bind(this);
this.componentDidUpdate = this.componentDidUpdate.bind(this);
}

componentDidMount() {
hljs.highlightBlock(React.findDOMNode(this));
},
}

componentDidUpdate: function(prevProps, prevState) {
componentDidUpdate(prevProps, prevState) {
hljs.highlightBlock(React.findDOMNode(this));
},
}

render: function() {
render() {
return (
<pre className="code-block">
<code>{this.props.children}</code>
</pre>
);
}

});
}

module.exports = CodeBlock;
32 changes: 23 additions & 9 deletions docs/src/app/components/code-example/code-example.jsx
Original file line number Diff line number Diff line change
@@ -1,25 +1,39 @@
var React = require('react'),
mui = require('mui'),
Paper = mui.Paper,
CodeBlock = require('./code-block.jsx');

var CodeExample = React.createClass({
class CodeExample extends React.Component {

propTypes: {
code: React.PropTypes.string.isRequired
},
render() {
var borderColor = this.context.theme.palette.borderColor;
var style = {
label: {
color: borderColor
},
block: {
borderRadius: '0 0 2px 0'
}
};

render: function() {
return (
<mui.Paper className="code-example">
<div className="example-label">example</div>
<div className="example-block">
<div className="example-label" style={style.label}>example</div>
<div className="example-block" style={style.block}>
{this.props.children}
</div>
<CodeBlock>{this.props.code}</CodeBlock>
</mui.Paper>
);
}
}

});
CodeExample.propTypes = {
code: React.PropTypes.string.isRequired
};

module.exports = CodeExample;
CodeExample.contextTypes = {
theme: React.PropTypes.object
}

module.exports = CodeExample;
11 changes: 8 additions & 3 deletions docs/src/app/components/component-doc.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -40,10 +40,15 @@ var ComponentDoc = React.createClass({
}
}

var header;
if (this.props.name.length > 0) {
header = <h2 className="mui-font-style-headline">{this.props.name}</h2>
}

return (
<div className={classes}>

<h2 className="mui-font-style-headline">{this.props.name}</h2>
{header}

<CodeExample code={this.props.code}>
{this.props.children}
Expand All @@ -61,4 +66,4 @@ var ComponentDoc = React.createClass({

});

module.exports = ComponentDoc;
module.exports = ComponentDoc;
16 changes: 8 additions & 8 deletions docs/src/app/components/component-info.jsx
Original file line number Diff line number Diff line change
@@ -1,13 +1,8 @@
var React = require('react');

var ComponentInfo = React.createClass({
class ComponentInfo extends React.Component {

propTypes: {
name: React.PropTypes.string.isRequired,
infoArray: React.PropTypes.array.isRequired
},

render: function() {
render() {
var propElements = [],
typesSpan;

Expand Down Expand Up @@ -38,6 +33,11 @@ var ComponentInfo = React.createClass({
);
}

});
}

ComponentInfo.propTypes = {
name: React.PropTypes.string.isRequired,
infoArray: React.PropTypes.array.isRequired
};

module.exports = ComponentInfo;
Loading

0 comments on commit 2eb14e6

Please sign in to comment.