From 66cdd33765432c771538b2c265a2fd8bf9963166 Mon Sep 17 00:00:00 2001 From: Alessandro Pezzato Date: Thu, 19 Mar 2015 18:08:06 +0100 Subject: [PATCH 1/6]  peerDependencies react 0.13 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 0baf9549bde128..2c84a2fa85cc5e 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ "react-draggable2": "^0.5.1" }, "peerDependencies": { - "react": "0.12.x", + "react": ">=0.12", "react-tap-event-plugin": "^0.1.3" }, "devDependencies": { From 572ba3bbe86fde74dc2cd4cb2838fd8da0ff8b90 Mon Sep 17 00:00:00 2001 From: Alessandro Pezzato Date: Thu, 19 Mar 2015 18:28:30 +0100 Subject: [PATCH 2/6] react-tap-event-plugin peerDependencies >=0.1.3 --- package.json | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/package.json b/package.json index 2c84a2fa85cc5e..ef2400a48e52b0 100644 --- a/package.json +++ b/package.json @@ -34,7 +34,7 @@ }, "peerDependencies": { "react": ">=0.12", - "react-tap-event-plugin": "^0.1.3" + "react-tap-event-plugin": ">=0.1.3" }, "devDependencies": { "react-tools": "^0.12.2", From 1ac13c6f433605e7535f09db5fbe1ae7d594ce09 Mon Sep 17 00:00:00 2001 From: Josh Kruder Date: Fri, 20 Mar 2015 20:31:46 -0400 Subject: [PATCH 3/6] Refactored onShow and onDismiss and added call to onShow if onImmediately. --- src/js/dialog-window.jsx | 19 ++++++++++++++----- 1 file changed, 14 insertions(+), 5 deletions(-) diff --git a/src/js/dialog-window.jsx b/src/js/dialog-window.jsx index 89b98d01a4b3bb..13d5333c072be4 100644 --- a/src/js/dialog-window.jsx +++ b/src/js/dialog-window.jsx @@ -40,7 +40,10 @@ var DialogWindow = React.createClass({ componentDidMount: function() { this._positionDialog(); - if (this.props.openImmediately) this.refs.dialogOverlay.preventScrolling(); + if (this.props.openImmediately) { + this.refs.dialogOverlay.preventScrolling(); + this._onShow(); + } }, componentDidUpdate: function (prevProps, prevState) { @@ -79,14 +82,14 @@ var DialogWindow = React.createClass({ }.bind(this)); this.setState({ open: false }); - if (this.props.onDismiss) this.props.onDismiss(); + this._onDismiss(); }, show: function() { this.refs.dialogOverlay.preventScrolling(); this.setState({ open: true }); - if (this.props.onShow) this.props.onShow(); + this._onShow(); }, _addClassName: function(reactObject, className) { @@ -153,10 +156,16 @@ var DialogWindow = React.createClass({ container.style.paddingTop = ((containerHeight - dialogWindowHeight) / 2) - 64 + 'px'; } - - } }, + + _onShow: function() { + if (this.props.onShow) this.props.onShow(); + }, + + _onDismiss: function() { + if (this.props.onDismiss) this.props.onDismiss(); + }, _handleOverlayTouchTap: function() { this.dismiss(); From 72dd8a0fb85ae49c59a8e3533ce4feae9b112146 Mon Sep 17 00:00:00 2001 From: Alessandro Pezzato Date: Sat, 21 Mar 2015 02:04:13 +0100 Subject: [PATCH 4/6] dependencies update --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index ef2400a48e52b0..943d83eee3df45 100644 --- a/package.json +++ b/package.json @@ -37,9 +37,9 @@ "react-tap-event-plugin": ">=0.1.3" }, "devDependencies": { - "react-tools": "^0.12.2", + "react-tools": "^0.13", "browserify": "^7.0.3", "reactify": "^0.17.1", - "react-router": "^0.11.6" + "react-router": "^0.13" } } From 953606f4d1a9e3a33798b499219fe40b1f81fd96 Mon Sep 17 00:00:00 2001 From: M03M Date: Wed, 25 Mar 2015 18:45:51 -0500 Subject: [PATCH 5/6] v0.7.2 Release --- CHANGELOG.md | 34 ++++++++++++++++++++++++++++++++++ package.json | 2 +- 2 files changed, 35 insertions(+), 1 deletion(-) diff --git a/CHANGELOG.md b/CHANGELOG.md index 077d8a61d62367..c4b48e93bdfad3 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -1,3 +1,37 @@ +## 0.7.2 +###### _Mar. 25, 2015_ + +##### General +- Updated react-draggable2 dependency (#391) +- Updated react and peer dependecies to React v0.13 (#452) + +##### Components +- Date Picker + - Added `onShow` and `onDismiss` props (#399) +- Dialog + - Fixed scrolling issue when opened immediately (#406) + - `onShow` is now called when opened immediately (#453) +- Flat Button + - Disabled primary buttons use disabled styling over primary (#432) +- Floating Action Button + - Fixed zdepth to update when `disabled` prop changes (#390) + - Disabled secondary buttons use disabled styling over secondary (#432) +- Left Nav + - Scrolling is prevented when displayed (#406) +- Menu + - Menu and menu-related components have been moved into `js/menu/*` (#402) + - Added LinkMenuItem component (#402) +- Menu Item + - Added `disable` prop (#402) +- Overlay + - Now control scroll un/locking. (#406) +- Paper + - Added `innerStyle` prop (#418) +- Raised Button + - Disabled primary buttons use disabled styling over primary (#432) +- Tabs + - Added `initialSelectedIndex` prop (#389) + ## 0.7.1 ###### _Mar. 4, 2015_ diff --git a/package.json b/package.json index 943d83eee3df45..7ae1f7b8b470e0 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "material-ui", "author": "Call-em-all Engineering Team", - "version": "0.7.1", + "version": "0.7.2", "description": "Material Design UI components built with React", "main": "./lib", "scripts": { From 32c32b9ea29218b8ebad892231c681e54e77a633 Mon Sep 17 00:00:00 2001 From: BobertForever Date: Thu, 26 Mar 2015 14:51:38 -0500 Subject: [PATCH 6/6] Update docs to use React 0.13 ES6 Classes and style --- docs/src/app/components/app-left-nav.jsx | 62 ++++++++------ .../components/code-example/code-block.jsx | 24 ++++-- .../components/code-example/code-example.jsx | 17 ++-- docs/src/app/components/component-doc.jsx | 2 +- docs/src/app/components/component-info.jsx | 16 ++-- docs/src/app/components/master.jsx | 39 +++++---- docs/src/app/components/pages/components.jsx | 8 +- .../components/pages/components/buttons.jsx | 25 +++--- .../components/pages/components/dialog.jsx | 34 +++++--- .../pages/components/drop-down-menu.jsx | 10 +-- .../pages/components/icon-buttons.jsx | 66 +++++++------- .../app/components/pages/components/icons.jsx | 50 +++++------ .../components/pages/components/left-nav.jsx | 30 ++++--- .../app/components/pages/components/paper.jsx | 8 +- .../components/pages/components/sliders.jsx | 22 ++--- .../components/pages/components/snackbar.jsx | 37 ++++---- .../components/pages/components/switches.jsx | 85 +++++++++---------- .../app/components/pages/components/tabs.jsx | 25 ++++-- .../components/pages/components/toolbars.jsx | 22 ++--- .../app/components/pages/css-framework.jsx | 6 +- docs/src/app/components/pages/get-started.jsx | 14 +-- .../src/app/components/pages/home-feature.jsx | 38 +++++---- docs/src/app/components/pages/home.jsx | 27 +++--- .../app/components/pages/page-with-nav.jsx | 46 ++++++---- 24 files changed, 385 insertions(+), 328 deletions(-) diff --git a/docs/src/app/components/app-left-nav.jsx b/docs/src/app/components/app-left-nav.jsx index 9c186f7e8c4564..d08ef27d1c48ca 100644 --- a/docs/src/app/components/app-left-nav.jsx +++ b/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: '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 =
material ui
; return ( - ); - }, + } - 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.isActive(currentItem.route)) return i; - }; - }, + if (currentItem.route && this.context.router.isActive(currentItem.route)) { + return i; + } + } + } - _onLeftNavChange: function(e, key, payload) { - this.transitionTo(payload.route); - }, + _onLeftNavChange(e, key, payload) { + this.context.router.transitionTo(payload.route); + } - _onHeaderClick: function() { - this.transitionTo('root'); + _onHeaderClick() { + this.context.router.transitionTo('root'); this.refs.leftNav.close(); } -}); +} + +AppLeftNav.contextTypes = { + router: React.PropTypes.func +}; module.exports = AppLeftNav; diff --git a/docs/src/app/components/code-example/code-block.jsx b/docs/src/app/components/code-example/code-block.jsx index 5b4cf89ff81fc1..4f1c34382ab89b 100644 --- a/docs/src/app/components/code-example/code-block.jsx +++ b/docs/src/app/components/code-example/code-block.jsx @@ -1,17 +1,23 @@ var React = require('react'), hljs = require('highlight.js'); -var CodeBlock = React.createClass({ +class CodeBlock extends React.Component { - componentDidMount: function() { - hljs.highlightBlock(this.getDOMNode()); - }, + constructor() { + super(); + this.componentDidMount = this.componentDidMount.bind(this); + this.componentDidUpdate = this.componentDidUpdate.bind(this); + } + + componentDidMount() { + hljs.highlightBlock(React.findDOMNode(this)); + } - componentDidUpdate: function(prevProps, prevState) { - hljs.highlightBlock(this.getDOMNode()); - }, + componentDidUpdate(prevProps, prevState) { + hljs.highlightBlock(React.findDOMNode(this)); + } - render: function() { + render() { return ( 
         {this.props.children}
@@ -19,6 +25,6 @@ var CodeBlock = React.createClass({
     );
   }
 
-});
+}
 
 module.exports = CodeBlock;
diff --git a/docs/src/app/components/code-example/code-example.jsx b/docs/src/app/components/code-example/code-example.jsx
index 337f733f54c6ab..205332fe402cef 100644
--- a/docs/src/app/components/code-example/code-example.jsx
+++ b/docs/src/app/components/code-example/code-example.jsx
@@ -1,14 +1,11 @@
 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: function() {
+  render() {
     return (
       
         
example

@@ -20,6 +17,10 @@ var CodeExample = React.createClass({
     );
   }
 
-});
+}
+
+CodeExample.propTypes = {
+  code: React.PropTypes.string.isRequired
+};
 
-module.exports = CodeExample;
\ No newline at end of file
+module.exports = CodeExample;
diff --git a/docs/src/app/components/component-doc.jsx b/docs/src/app/components/component-doc.jsx
index 3049278a697d83..70c07c93c97b8f 100644
--- a/docs/src/app/components/component-doc.jsx
+++ b/docs/src/app/components/component-doc.jsx
@@ -61,4 +61,4 @@ var ComponentDoc = React.createClass({
 
 });
 
-module.exports = ComponentDoc;
\ No newline at end of file
+module.exports = ComponentDoc;
diff --git a/docs/src/app/components/component-info.jsx b/docs/src/app/components/component-info.jsx
index a730a0740038e0..a534bad2f3c655 100644
--- a/docs/src/app/components/component-info.jsx
+++ b/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;
diff --git a/docs/src/app/components/master.jsx b/docs/src/app/components/master.jsx
index e4f6631b2c3097..15a96901ed5a88 100644
--- a/docs/src/app/components/master.jsx
+++ b/docs/src/app/components/master.jsx
@@ -2,22 +2,23 @@ var React = require('react');
 var Router = require('react-router');
 var RouteHandler = Router.RouteHandler;
 var mui = require('mui');
-var AppBar = mui.AppBar;
-var AppCanvas = mui.AppCanvas;
-var Menu = mui.Menu;
-var IconButton = mui.IconButton;
 var AppLeftNav = require('./app-left-nav.jsx');
 
-var Master = React.createClass({
+var { AppBar, AppCanvas, Menu, IconButton } = mui;
 
-  mixins: [Router.State],
+class Master extends React.Component {
 
-  render: function() {
+  constructor() {
+    super();
+    this._onMenuIconButtonTouchTap = this._onMenuIconButtonTouchTap.bind(this);
+  }
+
+  render() {
+    var title =
+      this.context.router.isActive('get-started') ? 'Get Started' :
+      this.context.router.isActive('css-framework') ? 'Css Framework' :
+      this.context.router.isActive('components') ? 'Components' : '';
 
-    var title = 
-      this.isActive('get-started') ? 'Get Started' :
-      this.isActive('css-framework') ? 'Css Framework' :
-      this.isActive('components') ? 'Components' : '';
     var githubButton = (
       
           

-            Hand crafted with love by the engineers at Call-Em-All and our 
+            Hand crafted with love by the engineers at Call-Em-All and our
             awesome contributors.
           

           {githubButton}
@@ -51,12 +52,16 @@ var Master = React.createClass({
 
       
     );
-  },
+  }
 
-  _onMenuIconButtonTouchTap: function() {
+  _onMenuIconButtonTouchTap() {
     this.refs.leftNav.toggle();
   }
-  
-});
 
-module.exports = Master;
\ No newline at end of file
+}
+
+Master.contextTypes = {
+  router: React.PropTypes.func
+};
+
+module.exports = Master;
diff --git a/docs/src/app/components/pages/components.jsx b/docs/src/app/components/pages/components.jsx
index 311af3b6030f88..e2573bdd7a9d0a 100644
--- a/docs/src/app/components/pages/components.jsx
+++ b/docs/src/app/components/pages/components.jsx
@@ -1,9 +1,9 @@
 var React = require('react');
 var PageWithNav = require('./page-with-nav.jsx');
 
-var Components = React.createClass({
+class Components extends React.Component {
 
-  render: function() {
+  render() {
     var menuItems = [
       { route: 'buttons', text: 'Buttons'},
       { route: 'date-picker', text: 'Date Picker'},
@@ -27,6 +27,6 @@ var Components = React.createClass({
     );
   }
 
-});
+}
 
-module.exports = Components;
\ No newline at end of file
+module.exports = Components;
diff --git a/docs/src/app/components/pages/components/buttons.jsx b/docs/src/app/components/pages/components/buttons.jsx
index e956eb20b265c8..bf280e6d549e19 100644
--- a/docs/src/app/components/pages/components/buttons.jsx
+++ b/docs/src/app/components/pages/components/buttons.jsx
@@ -1,24 +1,21 @@
 var React = require('react');
 var mui = require('mui');
-var FlatButton = mui.FlatButton;
-var FloatingActionButton = mui.FloatingActionButton;
-var RaisedButton = mui.RaisedButton;
-var FontIcon = mui.FontIcon;
 var ComponentDoc = require('../../component-doc.jsx');
 
-var ButtonPage = React.createClass({
+var {FlatButton, FloatingActionButton, RaisedButton, FontIcon} = mui;
 
+class ButtonPage extends React.Component {
 
   /** Styles */
-  _buttonLabel: function() {
+  _buttonLabel() {
     return {
       padding: '0px 16px 0px 8px',
     }
-  },
+  }
 
-  render: function() {
+  render() {
 
-    var code = 
+    var code =
       '//Flat Buttons\n' +
       '\n' +
       '\n' +
@@ -34,7 +31,7 @@ var ButtonPage = React.createClass({
       '  \n' +
       '\n' +
       '\n\n' +
-      '//Raised Buttons\n' + 
+      '//Raised Buttons\n' +
       '\n' +
       '\n' +
       '\n' +
@@ -144,8 +141,8 @@ var ButtonPage = React.createClass({
           {
             name: 'iconClassName',
             type: 'string',
-            header: 'optional', 
-            desc: 'The icon within the FloatingActionButton is a FontIcon component. This property ' + 
+            header: 'optional',
+            desc: 'The icon within the FloatingActionButton is a FontIcon component. This property ' +
                   'is the classname of the icon to be displayed inside the button. An alternative ' +
                   'to adding an iconClassName would be to manually insert a FontIcon component or ' +
                   'custom SvgIcon component or as a child of FloatingActionButton.'
@@ -274,6 +271,6 @@ var ButtonPage = React.createClass({
     );
   }
 
-});
+}
 
-module.exports = ButtonPage;
\ No newline at end of file
+module.exports = ButtonPage;
diff --git a/docs/src/app/components/pages/components/dialog.jsx b/docs/src/app/components/pages/components/dialog.jsx
index cf9085467f2406..c49861d1bfcffd 100644
--- a/docs/src/app/components/pages/components/dialog.jsx
+++ b/docs/src/app/components/pages/components/dialog.jsx
@@ -5,11 +5,19 @@ var FlatButton = mui.FlatButton;
 var RaisedButton = mui.RaisedButton;
 var ComponentDoc = require('../../component-doc.jsx');
 
-var DialogPage = React.createClass({
+class DialogPage extends React.Component {
+
+  constructor() {
+    super();
+    this._handleCustomDialogCancel = this._handleCustomDialogCancel.bind(this);
+    this._handleCustomDialogSubmit = this._handleCustomDialogSubmit.bind(this);
+    this.handleCustomDialogTouchTap = this.handleCustomDialogTouchTap.bind(this);
+    this.handleStandardDialogTouchTap = this.handleStandardDialogTouchTap.bind(this);
+  }
 
-  render: function() {
+  render() {
 
-    var code = 
+    var code =
       '//Standard Actions\n' +
       'var standardActions = [\n' +
       '  { text: \'Cancel\' },\n' +
@@ -140,24 +148,24 @@ var DialogPage = React.createClass({
       
     );
 
-  },
+  }
 
-  _handleCustomDialogCancel: function() {
+  _handleCustomDialogCancel() {
     this.refs.customDialog.dismiss();
-  },
+  }
 
-  _handleCustomDialogSubmit: function() {
+  _handleCustomDialogSubmit() {
     this.refs.customDialog.dismiss();
-  },
+  }
 
-  handleCustomDialogTouchTap: function() {
+  handleCustomDialogTouchTap() {
     this.refs.customDialog.show();
-  },
+  }
 
-  handleStandardDialogTouchTap: function() {
+  handleStandardDialogTouchTap() {
     this.refs.standardDialog.show();
   }
 
-});
+}
 
-module.exports = DialogPage;
\ No newline at end of file
+module.exports = DialogPage;
diff --git a/docs/src/app/components/pages/components/drop-down-menu.jsx b/docs/src/app/components/pages/components/drop-down-menu.jsx
index 3a93e2143511e0..29fa7b235d175d 100644
--- a/docs/src/app/components/pages/components/drop-down-menu.jsx
+++ b/docs/src/app/components/pages/components/drop-down-menu.jsx
@@ -3,9 +3,9 @@ var mui = require('mui');
 var DropDownMenu = mui.DropDownMenu;
 var ComponentDoc = require('../../component-doc.jsx');
 
-var DropDownMenuPage = React.createClass({
+class DropDownMenuPage extends React.Component {
 
-  render: function() {
+  render() {
 
     var menuItems = [
       { payload: '1', text: 'Never' },
@@ -15,7 +15,7 @@ var DropDownMenuPage = React.createClass({
       { payload: '5', text: 'Weekly' },
     ];
 
-    var code = 
+    var code =
       "var menuItems = [\n" +
       "   { payload: '1', text: 'Never' },\n" +
       "   { payload: '2', text: 'Every Night' },\n" +
@@ -70,6 +70,6 @@ var DropDownMenuPage = React.createClass({
     );
   }
 
-});
+}
 
-module.exports = DropDownMenuPage;
\ No newline at end of file
+module.exports = DropDownMenuPage;
diff --git a/docs/src/app/components/pages/components/icon-buttons.jsx b/docs/src/app/components/pages/components/icon-buttons.jsx
index d377201d518c2e..c5b02ba7bbd8af 100644
--- a/docs/src/app/components/pages/components/icon-buttons.jsx
+++ b/docs/src/app/components/pages/components/icon-buttons.jsx
@@ -7,9 +7,9 @@ var ActionGrade = require('../../svg-icons/action-grade.jsx');
 var ActionHome = require('../../svg-icons/action-home.jsx');
 var FontIcon = mui.FontIcon;
 
-var IconButtonsPage = React.createClass({
+class IconButtonsPage extends React.Component {
 
-  render: function() {
+  render() {
 
     var code =
         '//Method 1: muidocs-icon-github is defined in a style sheet.\n' +
@@ -24,32 +24,34 @@ var IconButtonsPage = React.createClass({
         '  \n' +
         '';
 
-    var desc =  

-                  This component generates a button element and all props. 
-                  Also, focus styles will happen on tab but not on click. 
-                  There are three ways to add an icon:
-                  

-                  
    
-                    
  1. 
-                      For stylesheets: Set the prop "iconClassName" to the 
-                      classname for you icon.
-                    
    2. 
-                    
  2. 
-                      For svg icons: Insert the svg component as a child of icon
-                      buttons. This is the method we are using. 
-                      View our source to see how ActionGrade was created 
-                      using mui.SvgIcon.
-                    
    3. 
-                    
  3. 
-                      Alternative: You can also insert a 
-                      FontIcon component as a child of IconButton. This is 
-                      similiar to how the iconClassName prop from method 1 is 
-                      handled.
-                    
    4. 
-                  

-                
;
+    var desc = (
+      

+        This component generates a button element and all props.
+        Also, focus styles will happen on tab but not on click.
+        There are three ways to add an icon:
+        

+        
    
+          
  1. 
+            For stylesheets: Set the prop "iconClassName" to the
+            classname for you icon.
+          
    2. 
+          
  2. 
+            For svg icons: Insert the svg component as a child of icon
+            buttons. This is the method we are using. 
+            View our source to see how ActionGrade was created
+            using mui.SvgIcon.
+          
    3. 
+          
  3. 
+            Alternative: You can also insert a 
+            FontIcon component as a child of IconButton. This is
+            similiar to how the iconClassName prop from method 1 is
+            handled.
+          
    4. 
+        

+      

+    );
 
     var componentInfo = [
       {
@@ -59,7 +61,7 @@ var IconButtonsPage = React.createClass({
             name: 'iconClassName',
             type: 'string',
             header: 'optional',
-            desc: 'If you are using a stylesheet for your icons, enter the ' + 
+            desc: 'If you are using a stylesheet for your icons, enter the ' +
                   'class name for the icon to be used here.'
           },
           {
@@ -97,9 +99,9 @@ var IconButtonsPage = React.createClass({
 
       
     );
-    
+
   }
 
-});
+}
 
-module.exports = IconButtonsPage;
\ No newline at end of file
+module.exports = IconButtonsPage;
diff --git a/docs/src/app/components/pages/components/icons.jsx b/docs/src/app/components/pages/components/icons.jsx
index 6c072ac8a3563c..c5f9835261a683 100644
--- a/docs/src/app/components/pages/components/icons.jsx
+++ b/docs/src/app/components/pages/components/icons.jsx
@@ -4,13 +4,13 @@ var FontIcon = mui.FontIcon;
 var ComponentDoc = require('../../component-doc.jsx');
 var ActionHome = require('../../svg-icons/action-home.jsx');
 
-var FontIconPage = React.createClass({
+class FontIconPage extends React.Component {
 
-	render: function() {
+	render() {
     var fontIconCode =
       '';
 
-    var svgIconCode = 
+    var svgIconCode =
       '/** action-home.jsx */\n' +
       'var React = require(\'react\');\n' +
       'var mui = require(\'mui\');\n' +
@@ -31,26 +31,28 @@ var FontIconPage = React.createClass({
       '\n' +
       '...';
 
-    var fontIconDesc = 
-              

-                This component will render any icon defined in any style sheets included in your 
-                project. We are using Google's Material Design 
-                Icons for our documentation site along with some custom icons. You can use  
-                sites like IcoMoon for 
-                generating custom font files. To use FontIcons, add your stylesheet to your project 
-                and reference the icon's className in the "className" prop.
-              
;
+    var fontIconDesc = (
+      

+        This component will render any icon defined in any style sheets included in your
+        project. We are using Google's Material Design
+        Icons for our documentation site along with some custom icons. You can use
+        sites like IcoMoon for
+        generating custom font files. To use FontIcons, add your stylesheet to your project
+        and reference the icon's className in the "className" prop.
+      

+    );
 
-    var svgIconDesc = 
-              

-                Alternatively, it is possible to include svg icons using mui.SvgIcon to 
-                create a custom svg component. Here we are creating the ActionHome 
-                SvgIcon for this docs site, and using it in some seperate component. 
-                Custom SvgIcon components can be included as children for other Material 
-                UI components that use icons such as IconButtons.
-              
;
+    var svgIconDesc = (
+      

+        Alternatively, it is possible to include svg icons using mui.SvgIcon to
+        create a custom svg component. Here we are creating the ActionHome
+        SvgIcon for this docs site, and using it in some seperate component.
+        Custom SvgIcon components can be included as children for other Material
+        UI components that use icons such as IconButtons.
+      

+    );
 
     var componentInfo = [];
 
@@ -74,6 +76,6 @@ var FontIconPage = React.createClass({
 		);
 	}
 
-});
+}
 
-module.exports = FontIconPage;
\ No newline at end of file
+module.exports = FontIconPage;
diff --git a/docs/src/app/components/pages/components/left-nav.jsx b/docs/src/app/components/pages/components/left-nav.jsx
index 50318c4d5f38a5..04ec7d13bcac51 100644
--- a/docs/src/app/components/pages/components/left-nav.jsx
+++ b/docs/src/app/components/pages/components/left-nav.jsx
@@ -5,15 +5,19 @@ var LeftNav = mui.LeftNav;
 var RaisedButton = mui.RaisedButton;
 var ComponentDoc = require('../../component-doc.jsx');
 
-var LeftNavPage = React.createClass({
+class LeftNavPage extends React.Component {
 
-  getInitialState: function() {
-    return {
+  constructor() {
+    super();
+    this._showLeftNavClick = this._showLeftNavClick.bind(this);
+    this._toggleDockedLeftNavClick = this._toggleDockedLeftNavClick.bind(this);
+
+    this.state = {
       isDocked: false
     };
-  },
+  }
 
-  render: function() { 
+  render() {
 
     var menuItems = [
       { route: 'get-started', text: 'Get Started' },
@@ -25,7 +29,7 @@ var LeftNavPage = React.createClass({
       { type: MenuItem.Types.LINK, payload: 'https://www.google.com', text: 'Disabled Link', disabled: true }
     ];
 
-    var code = 
+    var code =
       'menuItems = [\n' +
       '  { route: \'get-started\', text: \'Get Started\' },\n' +
       '  { route: \'css-framework\', text: \'CSS Framework\' },\n' +
@@ -128,20 +132,20 @@ var LeftNavPage = React.createClass({
 
       
     );
-    
-  },
 
-  _showLeftNavClick: function() {
+  }
+
+  _showLeftNavClick() {
     this.refs.leftNav.toggle();
-  },
+  }
 
-  _toggleDockedLeftNavClick: function() {
+  _toggleDockedLeftNavClick() {
     this.refs.dockedLeftNav.toggle();
     this.setState({
       isDocked: !this.state.isDocked
     });
   }
 
-});
+}
 
-module.exports = LeftNavPage;
\ No newline at end of file
+module.exports = LeftNavPage;
diff --git a/docs/src/app/components/pages/components/paper.jsx b/docs/src/app/components/pages/components/paper.jsx
index f4f9149ba73c98..f92907f8c66251 100644
--- a/docs/src/app/components/pages/components/paper.jsx
+++ b/docs/src/app/components/pages/components/paper.jsx
@@ -3,9 +3,9 @@ var mui = require('mui');
 var Paper = mui.Paper;
 var ComponentDoc = require('../../component-doc.jsx');
 
-var PaperPage = React.createClass({
+class PaperPage extends React.Component {
 
-  render: function() {
+  render() {
 
     var code = [
       '//Rounded Corners',
@@ -81,7 +81,7 @@ var PaperPage = React.createClass({
             type: 'string',
             header: 'optional',
             desc: 'Similiar to innerClassName. Overrides the inline-style of ' +
-                  'the inner div.' 
+                  'the inner div.'
           },
           {
             name: 'rounded',
@@ -183,6 +183,6 @@ var PaperPage = React.createClass({
     );
   }
 
-});
+}
 
 module.exports = PaperPage;
diff --git a/docs/src/app/components/pages/components/sliders.jsx b/docs/src/app/components/pages/components/sliders.jsx
index 499c0ee09325a8..c0c26ca590f7e6 100644
--- a/docs/src/app/components/pages/components/sliders.jsx
+++ b/docs/src/app/components/pages/components/sliders.jsx
@@ -3,13 +3,13 @@ var mui = require('mui');
 var Slider = mui.Slider;
 var ComponentDoc = require('../../component-doc.jsx');
 
-var SlidersPage = React.createClass({
+class SlidersPage extends React.Component {
 
-  handleMouseDown: function(e){
+  handleMouseDown(e){
     console.log('hmd', e);
-  },
+  }
 
-  render: function() {
+  render() {
 
     var code =
       '// Default\n' +
@@ -32,16 +32,16 @@ var SlidersPage = React.createClass({
         componentInfo={componentInfo}>
 
         
-          
-          
-          
-          
-          
+        
+        
+        
+        
+        
 
       
     );
   }
 
-});
+}
 
-module.exports = SlidersPage;
\ No newline at end of file
+module.exports = SlidersPage;
diff --git a/docs/src/app/components/pages/components/snackbar.jsx b/docs/src/app/components/pages/components/snackbar.jsx
index 4752031ae9c8d8..0901bd1f413f79 100644
--- a/docs/src/app/components/pages/components/snackbar.jsx
+++ b/docs/src/app/components/pages/components/snackbar.jsx
@@ -4,13 +4,18 @@ var RaisedButton = mui.RaisedButton;
 var Snackbar = mui.Snackbar;
 var ComponentDoc = require('../../component-doc.jsx');
 
-var SnackbarPage = React.createClass({
+class SnackbarPage extends React.Component {
 
-  render: function() {
-    var code = 
-      '\n\n' +
       '//Somewhere in our code\n' +
       '_handleAction: function() {\n' +
@@ -75,29 +80,29 @@ var SnackbarPage = React.createClass({
         code={code}
         componentInfo={componentInfo}>
 
-        
 
-        
 
       
     );
-  },
+  }
 
-  _handleClick: function(e) {
+  _handleClick(e) {
     this.refs.snackbar.show();
-  },
+  }
 
-  _handleAction: function() {
+  _handleAction() {
     //We can add more code here! In this example, we'll just include an alert.
     alert("We removed the event from your calendar.");
   }
 
-});
+}
 
 module.exports = SnackbarPage;
diff --git a/docs/src/app/components/pages/components/switches.jsx b/docs/src/app/components/pages/components/switches.jsx
index 23c4a90b1341ef..65f391d925aca9 100644
--- a/docs/src/app/components/pages/components/switches.jsx
+++ b/docs/src/app/components/pages/components/switches.jsx
@@ -1,18 +1,15 @@
 var React = require('react');
 var mui = require('mui');
-var Checkbox = mui.Checkbox;
-var RadioButton = mui.RadioButton;
-var RadioButtonGroup = mui.RadioButtonGroup;
-var Toggle = mui.Toggle;
 var CodeExample = require('../../code-example/code-example.jsx');
 var ComponentDoc = require('../../component-doc.jsx');
-var RaisedButton = mui.RaisedButton;
 
-var SwitchesPage = React.createClass({
+var {Checkbox, RadioButton, RadioButtonGroup, Toggle, RaisedButton} = mui;
 
-  render: function() {
+class SwitchesPage extends React.Component {
 
-    var code = 
+  render() {
+
+    var code =
       '//Checkboxes\n' +
       '\n' +
       '\n' +
       '\n\n' +
       '//Radio Buttons\n' +
@@ -53,15 +50,15 @@ var SwitchesPage = React.createClass({
       '  name="toggleName2"\n' +
       '  value="toggleValue2"\n' +
       '  label="auto-pilot"\n' +
-      '  defaultToggled={true} />\n' + 
+      '  defaultToggled={true} />\n' +
       '\n\n';
 
-    var desc = 'These components extend their current input elements (checkbox and radio) and ' + 
-               'will support all of its props and events. Checkboxes and Toggles support ' + 
+    var desc = 'These components extend their current input elements (checkbox and radio) and ' +
+               'will support all of its props and events. Checkboxes and Toggles support ' +
                'checkedLink';
 
     var componentInfo = [
@@ -90,7 +87,7 @@ var SwitchesPage = React.createClass({
             name: 'labelPosition',
             type: 'string',
             header: 'default:"right"',
-            desc: 'Where the label will be placed next to the checkbox. Options include ' + 
+            desc: 'Where the label will be placed next to the checkbox. Options include ' +
                   '"left" and "right" (case-sensitive). Default option is "left".'
           },
           {
@@ -112,7 +109,7 @@ var SwitchesPage = React.createClass({
           {
             name: 'setChecked',
             header: 'Checkbox.setChecked(newCheckedValue)',
-            desc: 'Sets the checkbox to the value of newCheckedValue. This method cannot be used ' + 
+            desc: 'Sets the checkbox to the value of newCheckedValue. This method cannot be used ' +
                   'while "checked" is defined as a property.'
           }
         ]
@@ -147,7 +144,7 @@ var SwitchesPage = React.createClass({
             name: 'labelPosition',
             type: 'string',
             header: 'default:"right"',
-            desc: 'Where the label will be placed next to the radio button. Options include ' + 
+            desc: 'Where the label will be placed next to the radio button. Options include ' +
                   '"left" and "right" (case-sensitive). Default option is "left".'
           },
           {
@@ -171,7 +168,7 @@ var SwitchesPage = React.createClass({
             name: 'defaultSelected',
             type: 'string',
             header: 'optional',
-            desc: 'Sets the default radio button to be the one whose value matches ' + 
+            desc: 'Sets the default radio button to be the one whose value matches ' +
                   'defaultSelected (case-sensitive). This will override any individual radio ' +
                   'button with the defaultChecked or checked property stated.'
           },
@@ -185,7 +182,7 @@ var SwitchesPage = React.createClass({
             name: 'labelPosition',
             type: 'string',
             header: 'optional',
-            desc: 'Where the label will be placed for all radio buttons. Options include ' + 
+            desc: 'Where the label will be placed for all radio buttons. Options include ' +
                   '"left" and "right" (case-sensitive). This will override any labelPosition ' +
                   'properties defined for an individual radio button.'
           },
@@ -220,7 +217,7 @@ var SwitchesPage = React.createClass({
             name: 'onChange',
             type: 'function(e, selected)',
             header: 'optional',
-            desc: 'Callback function that is fired when a radio button has been clicked. Returns ' + 
+            desc: 'Callback function that is fired when a radio button has been clicked. Returns ' +
                   'the event and the value of the radio button that has been selected.'
           }
         ]
@@ -252,7 +249,7 @@ var SwitchesPage = React.createClass({
             name: 'labelPosition',
             type: 'string',
             header: 'default:"left"',
-            desc: 'Where the label will be placed next to the toggle switch. Options include ' + 
+            desc: 'Where the label will be placed next to the toggle switch. Options include ' +
                   '"left" and "right" (case-sensitive). Default option is "left".'
           },
           {
@@ -265,7 +262,7 @@ var SwitchesPage = React.createClass({
             name: 'defaultToggled',
             type: 'boolean',
             header: 'default:false',
-            desc: 'The value of the toggle button. Is true when toggle has been turned on. ' + 
+            desc: 'The value of the toggle button. Is true when toggle has been turned on. ' +
               'False otherwise.'
           }
         ]
@@ -281,7 +278,7 @@ var SwitchesPage = React.createClass({
           {
             name: 'setToggled',
             header: 'Toggle.setToggled(newToggledValue)',
-            desc: 'Sets the toggle to the value of newToggledValue. This method cannot be used ' + 
+            desc: 'Sets the toggle to the value of newToggledValue. This method cannot be used ' +
                   'while "checked" is defined as a property.'
           }
         ]
@@ -300,7 +297,7 @@ var SwitchesPage = React.createClass({
     ];
 
     return (
-      
     );
-  },
+  }
 
-  _getCheckboxExample: function() {
+  _getCheckboxExample() {
 
     return (
       

@@ -328,14 +325,14 @@ var SwitchesPage = React.createClass({
         

           
         

         

           
@@ -343,16 +340,16 @@ var SwitchesPage = React.createClass({
         

           
         

       

     );
-  },
+  }
 
-  _getToggleExample: function() {
+  _getToggleExample() {
 
     return (
       

@@ -373,22 +370,22 @@ var SwitchesPage = React.createClass({
             id="toggleId2"
             name="toggleName2"
             value="toggleValue2"
-            label="auto-pilot" 
+            label="auto-pilot"
             defaultToggled={true}/>
         

         

-          
         

       

     );
-  },
+  }
 
-  _getRadioButtonExample: function() {
+  _getRadioButtonExample() {
 
     return (
       

@@ -397,7 +394,7 @@ var SwitchesPage = React.createClass({
           
Radio Buttons

         

 
-        
             
     );
-  },
+  }
 
-  _onCheck: function(e, checked) {
+  _onCheck(e, checked) {
     console.log('Checked: ', checked);
-  },
+  }
 
-  _onToggle: function(e, toggled) {
+  _onToggle(e, toggled) {
     console.log('Toggled: ', toggled);
-  },
+  }
 
-  _onRadioButtonClick: function(e, selected) {
+  _onRadioButtonClick(e, selected) {
     console.log('Selected: ', selected);
-  },
-});
+  }
+}
 
 module.exports = SwitchesPage;
diff --git a/docs/src/app/components/pages/components/tabs.jsx b/docs/src/app/components/pages/components/tabs.jsx
index 3eff6e4cefabc3..5c73cef213518b 100644
--- a/docs/src/app/components/pages/components/tabs.jsx
+++ b/docs/src/app/components/pages/components/tabs.jsx
@@ -4,14 +4,17 @@ var mui = require('mui');
 var Router = require('react-router');
 var ComponentDoc = require('../../component-doc.jsx');
 var RouteHandler = Router.RouteHandler;
-var Tabs = mui.Tabs;
-var Tab= mui.Tab;
 
-var TabsPage = React.createClass({
+var {Tabs, Tab} = mui;
 
-  mixins: [Router.Navigation, Router.State],
+class TabsPage extends React.Component {
 
-  render: function(){
+  constructor() {
+    super();
+    this._onActive = this._onActive.bind(this);
+  }
+
+  render(){
     var code =  ' \n' +
                 '   \n' +
                 '    
 \n' +
@@ -152,11 +155,15 @@ var TabsPage = React.createClass({
 
       
     );
-  },
+  }
 
-  _onActive: function(tab){
-    this.transitionTo(tab.props.route);
+  _onActive(tab){
+    this.context.router.transitionTo(tab.props.route);
   }
-});
+}
+
+TabsPage.contextTypes = {
+  router: React.PropTypes.func
+};
 
 module.exports = TabsPage;
diff --git a/docs/src/app/components/pages/components/toolbars.jsx b/docs/src/app/components/pages/components/toolbars.jsx
index 6cd37f0861fd8d..634dacb938cd3f 100644
--- a/docs/src/app/components/pages/components/toolbars.jsx
+++ b/docs/src/app/components/pages/components/toolbars.jsx
@@ -1,20 +1,14 @@
 var React = require('react');
 var mui = require('mui');
-var DropDownIcon = mui.DropDownIcon;
-var DropDownMenu = mui.DropDownMenu;
-var FontIcon = mui.FontIcon;
-var RaisedButton = mui.RaisedButton;
-var Toolbar = mui.Toolbar;
-var ToolbarGroup = mui.ToolbarGroup;
-var ToolbarSeparator = mui.ToolbarSeparator;
-var ToolbarTitle = mui.ToolbarTitle;
 var ComponentDoc = require('../../component-doc.jsx');
 
-var ToolbarPage = React.createClass({
+var {DropDownIcon, DropDownMenu, FontIcon, RaisedButton, Toolbar, ToolbarGroup, ToolbarSeparator, ToolbarTitle} = mui;
 
-  render: function() {
+class ToolbarPage extends React.Component {
 
-    var code = 
+  render() {
+
+    var code =
       'var filterOptions = [\n' +
       '  { payload: \'1\', text: \'All Broadcasts\' },\n' +
       '  { payload: \'2\', text: \'All Voice\' },\n' +
@@ -28,7 +22,7 @@ var ToolbarPage = React.createClass({
       '  { payload: \'1\', text: \'Download\' },\n' +
       '  { payload: \'2\', text: \'More Info\' }\n' +
       '];\n\n' +
-      '\n' + 
+      '\n' +
       '  \n' +
       '    \n' +
       '  \n' +
@@ -63,7 +57,7 @@ var ToolbarPage = React.createClass({
               desc: 'The text to be displayed for the element.'
             }
           ]
-      },      
+      },
     ];
 
     var filterOptions = [
@@ -103,6 +97,6 @@ var ToolbarPage = React.createClass({
     );
   }
 
-});
+}
 
 module.exports = ToolbarPage;
diff --git a/docs/src/app/components/pages/css-framework.jsx b/docs/src/app/components/pages/css-framework.jsx
index 0c66114b5aae76..5fa6a3093d1be7 100644
--- a/docs/src/app/components/pages/css-framework.jsx
+++ b/docs/src/app/components/pages/css-framework.jsx
@@ -1,9 +1,9 @@
 var React = require('react'),
   PageWithNav = require('./page-with-nav.jsx');
 
-var CssFramework = React.createClass({
+class CssFramework extends React.Component {
 
-  render: function() {
+  render() {
     var menuItems = [
       { route: 'colors', text: 'Colors'},
       { route: 'typography', text: 'Typography'}
@@ -14,6 +14,6 @@ var CssFramework = React.createClass({
     );
   }
 
-});
+}
 
 module.exports = CssFramework;
diff --git a/docs/src/app/components/pages/get-started.jsx b/docs/src/app/components/pages/get-started.jsx
index 402c22898cb117..5b422d77aa914a 100644
--- a/docs/src/app/components/pages/get-started.jsx
+++ b/docs/src/app/components/pages/get-started.jsx
@@ -2,9 +2,9 @@ var React = require('react'),
   mui = require('mui'),
   CodeBlock = require('../code-example/code-block.jsx');
 
-var GetStarted = React.createClass({
+class GetStarted extends React.Component {
 
-  render: function() {
+  render() {
     var usageCode =
           '/** MyAwesomeReactComponent.jsx */\n\n' +
           'var React = require(\'react\'),\n' +
@@ -19,7 +19,7 @@ var GetStarted = React.createClass({
           '});\n\n' +
           'module.exports = MyAwesomeReactComponent;\n\n\n',
 
-      customizationCode = 
+      customizationCode =
         '@import "node_modules/material-ui/src/less/scaffolding.less";\n\n' +
         '//Define a custom less file to override\n//any variables defined in scaffolding.less\n' +
         '@import "my-custom-overrides.less";\n\n' +
@@ -39,15 +39,15 @@ var GetStarted = React.createClass({
 
           
Prerequisites

           

-            We recommend that you get started with the React Library before diving into 
-            material-ui for a better understanding. Should you choose to skip this, don't worry, we'll explain relevant React concepts as 
+            We recommend that you get started with the React Library before diving into
+            material-ui for a better understanding. Should you choose to skip this, don't worry, we'll explain relevant React concepts as
             they come along.
           

 
 
           
Installation

           

-            Material-UI is available as an npm package. 
+            Material-UI is available as an npm package.
             Use browserify and reactify for
             dependency management and JSX transformation. The CSS framework is written in Less,
             so you'll need to compile that as well. For Sass users, material-ui-sass contains
@@ -107,6 +107,6 @@ var GetStarted = React.createClass({
     );
   }
 
-});
+}
 
 module.exports = GetStarted;
diff --git a/docs/src/app/components/pages/home-feature.jsx b/docs/src/app/components/pages/home-feature.jsx
index 42823165ce9afc..9e2289e3afc881 100644
--- a/docs/src/app/components/pages/home-feature.jsx
+++ b/docs/src/app/components/pages/home-feature.jsx
@@ -4,21 +4,19 @@ var React = require('react'),
   mui = require('mui'),
   Paper = mui.Paper;
 
-var HomeFeature = React.createClass({
+class HomeFeature extends React.Component {
 
-  propTypes: {
-    heading: React.PropTypes.string,
-    route: React.PropTypes.string,
-    img: React.PropTypes.string
-  },
-
-  getInitialState: function() {
-    return {
-      zDepth: 0 
+  constructor(props) {
+    super(props);
+    this.state = {
+      zDepth: 0
     };
-  },
 
-  render: function() {
+    this._onMouseOver = this._onMouseOver.bind(this);
+    this._onMouseOut = this._onMouseOut.bind(this);
+  }
+
+  render() {
     return (
       
@@ -26,20 +24,26 @@ var HomeFeature = React.createClass({
         
       
     );
-  },
+  }
 
-  _onMouseOver: function() {
+  _onMouseOver() {
     this.setState({
       zDepth: 4
     });
-  },
+  }
 
-  _onMouseOut: function() {
+  _onMouseOut() {
     this.setState({
       zDepth: 0
     });
   }
 
-});
+}
+
+HomeFeature.propTypes = {
+  heading: React.PropTypes.string,
+  route: React.PropTypes.string,
+  img: React.PropTypes.string
+};
 
 module.exports = HomeFeature;
diff --git a/docs/src/app/components/pages/home.jsx b/docs/src/app/components/pages/home.jsx
index 380e5c5a5701cb..ed1ca82aeccf08 100644
--- a/docs/src/app/components/pages/home.jsx
+++ b/docs/src/app/components/pages/home.jsx
@@ -5,11 +5,14 @@ var RaisedButton = mui.RaisedButton;
 var HomeFeature = require('./home-feature.jsx');
 var Theme = mui.Styles.Theme;
 
-var HomePage = React.createClass({
+class HomePage extends React.Component {
 
-  mixins: [Router.Navigation],
+  constructor() {
+    super();
+    this._onDemoClick = this._onDemoClick.bind(this);
+  }
 
-  _raisedButton: function() {
+  _raisedButton() {
     return {
       label: {
         color: Theme.primary1Color,
@@ -23,9 +26,9 @@ var HomePage = React.createClass({
         minWidth: 0,
       },
     }
-  },
+  }
 
-  render: function() {
+  render() {
 
     return (
       

@@ -78,12 +81,16 @@ var HomePage = React.createClass({
 
       

     );
-  },
+  }
 
-  _onDemoClick: function() {
-    this.transitionTo('components');
+  _onDemoClick() {
+    this.context.router.transitionTo('components');
   }
 
-});
+}
+
+HomePage.contextTypes = {
+  router: React.PropTypes.func
+};
 
-module.exports = HomePage;
\ No newline at end of file
+module.exports = HomePage;
diff --git a/docs/src/app/components/pages/page-with-nav.jsx b/docs/src/app/components/pages/page-with-nav.jsx
index 72af80db073bfd..31859ba61bf274 100644
--- a/docs/src/app/components/pages/page-with-nav.jsx
+++ b/docs/src/app/components/pages/page-with-nav.jsx
@@ -4,15 +4,15 @@ var React = require('react'),
   mui = require('mui'),
   Menu = mui.Menu;
 
-var PageWithNav = React.createClass({
+class PageWithNav extends React.Component {
 
-  mixins: [Router.Navigation, Router.State],
-
-  propTypes: {
-    menuItems: React.PropTypes.array
-  },
+  constructor() {
+    super();
+    this._getSelectedIndex = this._getSelectedIndex.bind(this);
+    this._onMenuItemClick = this._onMenuItemClick.bind(this);
+  }
 
-  render: function() {
+  render() {
     return (
       

         

@@ -28,22 +28,32 @@ var PageWithNav = React.createClass({
         

       

     );
-  },
+  }
 
-  _getSelectedIndex: function() {
-    var menuItems = this.props.menuItems,
-      currentItem;
+  _getSelectedIndex() {
+    var menuItems = this.props.menuItems;
+    var currentItem;
 
     for (var i = menuItems.length - 1; i >= 0; i--) {
       currentItem = menuItems[i];
-      if (currentItem.route && this.isActive(currentItem.route)) return i;
-    };
-  },
+      if (currentItem.route && this.context.router.isActive(currentItem.route)) {
+        return i;
+      }
+    }
+  }
 
-  _onMenuItemClick: function(e, index, item) {
-    this.transitionTo(item.route);
+  _onMenuItemClick(e, index, item) {
+    this.context.router.transitionTo(item.route);
   }
   
-});
+}
+
+PageWithNav.propTypes = {
+  menuItems: React.PropTypes.array
+};
+
+PageWithNav.contextTypes = {
+  router: React.PropTypes.func
+};
 
-module.exports = PageWithNav;
\ No newline at end of file
+module.exports = PageWithNav;