v0.8.0 Prerelease

CHANGELOG.md

@@ -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_
 

README.md

@@ -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.
 
@@ -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
@@ -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.

docs/package.json

@@ -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",

docs/src/app/app-routes.jsx

@@ -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');
@@ -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} />
@@ -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}/>

docs/src/app/components/app-left-nav.jsx

@@ -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}
@@ -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;

docs/src/app/components/code-example/code-block.jsx

@@ -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;

docs/src/app/components/code-example/code-example.jsx

@@ -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;

docs/src/app/components/component-doc.jsx

@@ -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}
@@ -61,4 +66,4 @@ var ComponentDoc = React.createClass({
 
 });
 
-module.exports = ComponentDoc;
+module.exports = ComponentDoc;

docs/src/app/components/component-info.jsx

@@ -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;
 
@@ -38,6 +33,11 @@ var ComponentInfo = React.createClass({
     );
   }
 
-});
+}
+
+ComponentInfo.propTypes = {
+  name: React.PropTypes.string.isRequired,
+  infoArray: React.PropTypes.array.isRequired
+};
 
 module.exports = ComponentInfo;