Merge pull request mui#10 from yongxu/mui

Mui

.eslintrc

@@ -5,24 +5,37 @@
     "node": true
   },
   "rules": {
-    "curly": 0,
     "comma-dangle": [2, "always-multiline"],
-    "comma-spacing": 0,
+    "no-var": 2,
     "eqeqeq": [2, "allow-null"],
+    "eol-last": 2,
+    "yoda": 2,
+    "no-unused-expressions": 2,
+    "dot-notation": 2,
+    "dot-location": [2, "property"],
+    "no-undef": 2,
+    "comma-spacing": 2,
+    "jsx-quotes": [2, "prefer-double"],
+
     "key-spacing": 0,
     "no-underscore-dangle": 0,
-    "no-unused-expressions": 0,
     "no-shadow": 0,
     "no-shadow-restricted-names": 0,
     "no-extend-native": 0,
-    "no-var": 2,
+    "curly": 0,
     "new-cap": 0,
     "quotes": 0,
     "semi-spacing": 0,
     "space-unary-ops": 0,
     "space-infix-ops": 0,
     "consistent-return": 0,
-    "strict": 0
+    "strict": 0,
+
+    "react/jsx-boolean-value": 0,
+    "react/jsx-curly-spacing": 2,
+    "react/jsx-max-props-per-line": [2, {maximum: 4}],
+    "react/jsx-no-duplicate-props": 2,
+    "react/jsx-no-undef": 2,
   },
   "parser": "babel-eslint",
   "plugins": [

.gitignore

@@ -1,6 +1,7 @@
 node_modules
 npm-debug.log
 build
+coverage
 
 # Exclude compiled files
 lib

.npmignore

@@ -1,4 +1,5 @@
 build
+coverage
 docs
 example
-icon-builder
+icon-builder

.travis.yml

@@ -1,3 +1,4 @@
 language: node_js
 node_js:
   - "stable"
+sudo: false

CHANGELOG.md

@@ -1,6 +1,109 @@
+## 0.11.1
+###### _Sep 15, 2015_
+
+##### Component Fixes / Enhancements
+- DatePicker - Updated to new design specs (#1266)
+- LeftNav - Fix sidebar position for browsers that don't support transform3d (#1269)
+- TextField - Added props to override underlineStyle when disabled (#1493)
+
+## 0.11.0
+###### _Aug 24, 2015_
+
+##### Breaking Changes
+- The Table component is now composable. (#1199)
+  - JSON objects to create the table and the table component will no longer generate the table for you.
+    The docs site provides a complete example of how a table might look: http://material-ui.com/#/components/table.
+    The example also includes a 'super header' and 'super footer' row.
+  - **Upgrade Path:** Instead of passing in the raw JSON data, you'll need to generate the appropriate
+    TableHeader/TableRow/TableHeaderColumn components and pass them in as children. The same should be applied
+    to the rowData and the footer.
+- Tabs can now be controlled. In order to make this work we had to change the parameters being passed back to
+  the `onChange` event to: `onChange(value, e, tab)`. Where value is the value of the tab that it was changed
+  to, e is the event, and tab is the actual tab component. (#1232, #1235)
+- Added a new `static` flag to the ThemeManager that defaults to `true`. If you're mutating your theme variables
+  after the app initializes, set this flag to `false`. This will allow us to perform some optimizations to
+  components that require theme variables. (#1397)
+- ListItem (#1438, #1105)
+  - Nested list items should no longer be passed in as children. Use the `nestedItems` prop instead.
+  - The `open` prop has been renamed to `initiallyOpen`.
+- Removed classable mixin
+  - This mixin was no longer used in the library. Removing it allowed us to get rid of the `classnames`
+    dependency. If you were using this mixin in your own projects, you'll need to pull the source and manually
+    include it.
+
+##### Component Fixes / Enhancements
+- Buttons - Fixed a bug that caused buttons to not gain keyboard focus in some cases (#1485, #1453, #1458)
+- Card
+  - Properly merge `CardAction` and `CardExpandable` styles. (#1376)
+  - Added Right-To-Left support to `CardExpandable`. To use this, set `isRtl` to `true` in the theme. (#1408)
+- DatePicker - Fixed an error that occurred when using valueLink (#1400)
+- DropDownMenu - Added `disabled` prop (#1406)
+- FlatButton - Added `labelPosition` prop. (#1286)
+- InkBar - Added color prop and inkBar.backgroundColor to theme variables. (#1244)
+- Ripple
+  - Fixed display glitch on Safari (#1420)
+  - Fixed an error when ripples were unMounted (#1416)
+- SelectField
+  - Added `floatingLabelStyle` prop (#1463 #1450)
+- Slider
+  - Fixed a bug when setting the width attr (#1368)
+  - Fixed a bug with disabled sliders (#1417)
+  - Fixed a focus style glitch and other style problems (#1448, #1451, #1468)
+- Snackbar - Added onShow and onDismiss (#1390)
+- Table - Ensure that the table component properly keeps track of selected rows (#1325)
+- TextField
+  - Added `underlineFocusStyle` prop (#1422, #1419)
+  - `hintText` can now be a `string` or `element` (#1424, #1202)
+- TimePicker
+  - Fixed a bug that caused the am/pm selector to switch (#1440)
+  - Fixed a bug that caused defaultTime to not be set (#1466)
+- Tooltip - Probably center tooltips when tooltip text changes (#1205)
+- Theme - Added `setContentFontFamily` (#1405)
+
+## 0.10.4
+###### _Aug 8, 2015_
+
+##### Component Fixes / Enhancements
+- TouchRipple - Fixed a bug that caused onClick to not fire on the first click (#1370)
+
+## 0.10.3
+###### _Aug 8, 2015_
+
+##### General
+- We've set up the project to perform automated tests - now we just need to increase our test coverage. :) (#1331)
+- The style auto-prefixer now caches browser test results so that it only has to perform them once.
+
+##### New Components
+- RefreshIndicator (#1312)
+
+##### Component Fixes / Enhancements
+- AppBar - showMenuIconButton now only affects the icon next to the title (#1295, #1182)
+- CardMedia - CardMedia children styles are now being properly merged (#1306)
+- Dialog - fixed a bug that caused the dialog height to be incorrect on window resize (#1305)
+- FloatingActionButton - Added backgroundColor and disabledColor props (#1329)
+- FocusRipples now only get rendered when needed.
+- IconMenu - Added isOpen() (#1288)
+- LeftNav
+  - Added menuItemClassName, menuItemClassNameSubheader, menuItemClassNameLink props (#1318)
+  - Fixed a display problem that cuased icons to not be the correct color (#1324)
+- ListItem - fixed incorrect styling on disabled list items (#1350)
+- SelectField
+  - Fixed a bug that happened when select field was controlled and the value was undefined (#1227)
+  - Fixed error text positioning (#1341, #1111)
+  - Added errorStyle prop (#1341)
+- Snackbar - Clickaway is now properly bound when openOnMount is true (#1327)
+- Tabs - Added contentContainerClassName prop (#1285)
+- TextField - Added underlineStyle prop (#1343)
+- TimePicker - Added pedantic prop (#1275, #1173)
+
 ## 0.10.2
 ###### _Jul 29, 2015_
 
+##### Breaking Changes (Missed in the original release notes.)
+- Changed `date-picker/index.js` to expose DatePicker and DatePickerDialog.
+  Hence `require('material-ui/lib/date-picker')` no longer works. Use
+  `require('material-ui/lib/date-picker/date-picker')` instead.
+
 ##### General
 - Replaced onMouseOver / onMouseOut with onMouseEnter / onMouseLeave to achieve hover affects.
   This prevented extra unnecessary renders from happening. (#1190)

README.md

@@ -1,14 +1,18 @@
-#[Material-UI](http://callemall.github.io/material-ui/) [![Build Status](https://travis-ci.org/callemall/material-ui.svg?branch=master)](https://travis-ci.org/callemall/material-ui) [![npm version](https://badge.fury.io/js/material-ui.svg)](http://badge.fury.io/js/material-ui)
+#[Material-UI](http://callemall.github.io/material-ui/) [![npm package](https://img.shields.io/npm/v/material-ui.svg?style=flat-square)](https://www.npmjs.org/package/material-ui) [![Build Status](https://img.shields.io/travis/callemall/material-ui.svg?style=flat-square)](https://travis-ci.org/callemall/material-ui) [![Gitter](https://img.shields.io/badge/gitter-join%20chat-f81a65.svg?style=flat-square)](https://gitter.im/callemall/material-ui?utm_source=badge&utm_medium=badge&utm_campaign=pr-badge&utm_content=badge)
 
-[![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) [![Pair on this](https://tf-assets-staging.s3.amazonaws.com/badges/thinkful_repo_badge.svg)](http://start.thinkful.com/react/?utm_source=github&utm_medium=badge&utm_campaign=material-ui)
+[![PeerDependencies](https://img.shields.io/david/peer/callemall/material-ui.svg?style=flat-square)](https://david-dm.org/callemall/material-ui#info=peerDependencies&view=list)
+[![Dependencies](https://img.shields.io/david/callemall/material-ui.svg?style=flat-square)](https://david-dm.org/callemall/material-ui)
+[![DevDependencies](https://img.shields.io/david/dev/callemall/material-ui.svg?style=flat-square)](https://david-dm.org/callemall/material-ui#info=devDependencies&view=list)
 
 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.
 
 ## Prerequisites
 
-We recommend that you get started with the [React Library](http://facebook.github.io/react/) 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.
+We recommend that you get to know [React](http://facebook.github.io/react/) before diving into material-ui. Material-UI is a set of React components, so understanding how React fits into web development is important.
+
+(If you're not familiar with Node, or with the concept of Single Page Applications (SPAs), head over to the [documentation website](http://material-ui.com/#/get-started/prerequisites) for a quick introduction before you read on.)
 
 ## Installation
 
@@ -23,7 +27,7 @@ Some components use [react-tap-event-plugin](https://github.com/zilverline/react
 listen for touch events. This dependency is temporary and will go away once react v1.0 is released. Until then, be
 sure to inject this plugin at the start of your app.
 ```js
-var injectTapEventPlugin = require("react-tap-event-plugin");
+let injectTapEventPlugin = require("react-tap-event-plugin");
 
 //Needed for onTouchTap
 //Can go away when react 1.0 release
@@ -33,40 +37,48 @@ injectTapEventPlugin();
 ```
 
 ### Roboto Font
-Be sure to include the [Roboto](http://www.google.com/fonts/specimen/Roboto) font in your project.
-Here are [some instructions](http://www.google.com/fonts#UsePlace:use/Collection:Roboto:400,300,500) on how to include it in your project.
+Material-UI was designed with the [Roboto](http://www.google.com/fonts/specimen/Roboto) font in mind. So be sure to include it in your project. Here are [some instructions](http://www.google.com/fonts#UsePlace:use/Collection:Roboto:400,300,500) on how to do so.
 
 ## Usage
 
 Once material-ui is included in your project, you can use the components this way:
 ```js
-/** MyAwesomeReactComponent.jsx */
+// get constant references to React and Material-UI
+// components, as we will not be modifying these
+
+const React = require('react');
+
+// it is good practice to require only those components of
+// Material-UI that your app needs, instead of requiring all of
+// Material-UI. This will make your build process faster and
+// your build output smaller
 
-var React = require('react'),
-  mui = require('material-ui'),
-  ThemeManager = new mui.Styles.ThemeManager(),
-  RaisedButton = mui.RaisedButton;
+const RaisedButton = require('material-ui/lib/raised-button');
 
-var MyAwesomeReactComponent = React.createClass({
+// see node_modules/material-ui/lib/index.js for a mapping of
+// Material-UI components to require() calls
+
+const MyAwesomeReactComponent = React.createClass({
 
   childContextTypes: {
     muiTheme: React.PropTypes.object
   },
 
-  getChildContext: function() {
+  getChildContext() {
     return {
       muiTheme: ThemeManager.getCurrentTheme()
     };
   },
 
-  render: function() {
+  render() {
     return (
         <RaisedButton label="Default" />
     );
   }
 
 });
 
+
 module.exports = MyAwesomeReactComponent;
 
 ```
@@ -85,9 +97,10 @@ Material-UI components have their styles defined inline. There are two approache
 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.
 
-The second project is the actual documentation site. This is a more complex project but will give examples of every component. Check out the [docs folder](https://github.com/callemall/material-ui/tree/master/docs) for build instructions.
+There are 2 projects that you can look at to get started. They can be found in the [examples folder](https://github.com/callemall/material-ui/tree/master/examples). These projects are basic examples that show how to consume material-ui components in your own project. The first project uses [browserify](http://browserify.org/) for module bundling and [gulp](http://gulpjs.com/) for JS task automation, while the second project uses [webpack](http://webpack.github.io/) for module bundling and building.
+
+The source code for this documentation site is also included in the repository. This is a slightly more complex project that also uses webpack, and contains examples of every material-ui component. Check out the [docs folder](https://github.com/callemall/material-ui/tree/master/docs) for build instructions.
 
 ## Contribute
 

docs/README.md

@@ -15,17 +15,18 @@ Now you can run your local server:
 ```
 npm start
 ```
-#Description of [Gulp](https://github.com/gulpjs/gulp) Plugins
-
-
-##[browserify](https://github.com/substack/node-browserify) 
-Browsers do not allow us to use the require method from Node.js. With browserify, we can implement dependency management on the browser. It also will bundle the code into one file in an efficient way to not repeat dependiencies that are used more than once. 
-
-##[browserSync](http://www.browsersync.io/)
-When developing and testing the website, browserSync is a powerful tool that will rebuild and refresh the webpage so you can see the changes you make as you are working. 
-
-##markup
-Copies all of the files from /src/www to the build folder. 
-
-##[gulp_starter](https://github.com/greypants/gulp-starter)
-A useful repository that explains how many of gulp's features work and contains an example project to get familiar with it. We use this example to construct our own project.
+Open http://localhost:3000 to view the documentation site.
+#Description of [Webpack](http://webpack.github.io/docs/)
+Webpack is a module bundler that we are using to run our documentation site. This is a quick overview of how the configuration file works.
+##Webpack Configuration:
+###Entry:
+Webpack creates entry points for the application to know where it starts.
+###Resolve:
+Webpack uses this configuration options to determine how it will deal with requiring files. For example, when the extension is omitted in a require, Webpack will look at the extensions option and try applying one of those.
+###Output:
+This is where the bundled project will go to and any other files necessary for it to run.
+###Plugins:
+These are plugins Webpack uses for more functionality. The HTML Webpack Plugin, for example, will add the index.html to your build folder.
+###Modules:
+Modules and other things that are required will usually need to be loaded and interpreted by Webpack when bundling, and this is where Webpack looks for the different loaders.
+*Loading .js files in es6 and es7 will require a loader like babel-loader to interpret the files into es5.