Merge branch 'master' of https://github.com/material-components/mater…

…ial-components-web-react into fix/list/allow-alternate-tags

* 'master' of https://github.com/material-components/material-components-web-react:
  docs(menu-surface): open state & ref errors (material-components#412)
  fix(text-field): allow for input isValid override (material-components#374)
  feat(list): Add List Group and List Group Subheader (material-components#386)
  fix(top-app-bar): allow react elements in title (material-components#376)
  docs: update main component manifest on main Readme (material-components#394)
  docs: update roadmap (material-components#396)
  docs: Add web survey link in readmes (material-components#402)
  docs: update main README with CRA2 guidelines (material-components#393)

README.md

@@ -1,3 +1,5 @@
+> ✨ Are you a part of the Material Design web community? Help us improve by filling out this <a href='https://bit.ly/materialwebsurvey'>**10 minute survey**</a>. ✨
+
 [![Build Status](https://api.travis-ci.com/material-components/material-components-web-react.svg?branch=master)](https://travis-ci.com/material-components/material-components-web-react/)
 [![codecov](https://codecov.io/gh/material-components/material-components-web-react/branch/master/graph/badge.svg)](https://codecov.io/gh/material-components/material-components-web-react)
 [![Chat](https://img.shields.io/discord/259087343246508035.svg)](https://discord.gg/material-components)
@@ -18,9 +20,12 @@ Component | Spec | MDC Web
 [Card](./packages/card) | [Card Design Page](https://material.io/design/components/cards.html) | [MDC Card](https://github.com/material-components/material-components-web/tree/master/packages/mdc-card)
 [Checkbox](./packages/checkbox) | [Checkbox Design Page](https://material.io/design/components/selection-controls.html#checkboxes) | [MDC Checkbox](https://github.com/material-components/material-components-web/tree/master/packages/mdc-checkbox)
 [Chips](./packages/chips) | [Chips Design Page](https://material.io/design/components/chips.html) | [MDC Chips](https://github.com/material-components/material-components-web/tree/master/packages/mdc-chips)
+[Drawer](./packages/drawer) | [Drawer Design Page](https://material.io/design/components/navigation-drawer.html) | [MDC Drawer](https://github.com/material-components/material-components-web/tree/master/packages/mdc-drawer)
 [Fab](./packages/fab) | [Fab Design Page](https://material.io/design/components/buttons-floating-action-button.html) | [MDC Fab](https://github.com/material-components/material-components-web/tree/master/packages/mdc-fab)
 [Floating Label](./packages/floating-label) | [Text Field Design Page](https://material.io/design/components/text-fields.html) | [MDC Floating Label](https://github.com/material-components/material-components-web/tree/master/packages/mdc-floating-label)
+[Layout Grid](./packages/layout-grid) | [Layout Grid Design Page](https://material.io/design/layout/responsive-layout-grid.html#responsive-ui-grid) | [MDC Layout Grid](https://github.com/material-components/material-components-web/tree/latest-release/packages/mdc-layout-grid)
 [Line Ripple](./packages/line-ripple) | [Text Field Design Page](https://material.io/design/components/text-fields.html) | [MDC Line Ripple](https://github.com/material-components/material-components-web/tree/master/packages/mdc-line-ripple)
+[List](./packages/list) | [List Design Page](https://material.io/design/components/lists.html) | [MDC List](https://github.com/material-components/material-components-web/tree/latest-release/packages/mdc-list)
 [Material Icon](./packages/material-icon) | [Material Icon Design Page](https://material.io/design/iconography/system-icons.html#design-principles) | [Material Icon Tool](https://material.io/tools/icons/?style=baseline)
 [Menu Surface](./packages/menu-surface) | [Menu Surface Design Page](https://material.io/design/components/menus.html#design-principles) | [MDC Menu Surface](https://github.com/material-components/material-components-web/tree/master/packages/mdc-menu-surface)
 [Notched Outline](./packages/notched-outline) | [Text Field Design Page](https://material.io/design/components/text-fields.html) | [MDC Notched Outline](https://github.com/material-components/material-components-web/tree/master/packages/mdc-notched-outline)
@@ -40,6 +45,8 @@ Component | Spec | MDC Web
 
 `create-react-app` is a popular CLI tool to getting started with React. If you're new to React or Webpack, you might be starting out here. This section will walk you through configuring `create-react-app` to install and use our components.
 
+If you're using an older version (v1) of `create-react-app`, please refer to our [create-react-app-v1 doc](docs/create-react-app-v1.md).
+
 >  Recommended things to know
 
 > 1. node/npm
@@ -49,18 +56,17 @@ Component | Spec | MDC Web
 
 > _NOTE:_ If you haven't used `create-react-app` before, you may want to read the [Overview Guide](https://github.com/facebook/create-react-app#quick-overview).
 
-
 #### Step 1: Install create-react-app
 
 Install `create-react-app`:
 
 ```
-npm i -g create-react-app
-create-react-app my-app
+npx create-react-app my-app
 cd my-app
+npm start
 ```
 
-> NOTE: all npm commands can be replaced with yarn
+> _NOTE:_ all npm commands can be replaced with yarn
 
 #### Step 2: Install Components
 
@@ -74,46 +80,36 @@ npm install --save @material/react-button
 
 If you want to use the compiled CSS and not customize any colors, text, etc. you can skip to [Step 3a](#step-3a-use-compiled-css).
 
-Most likely you'll want to start using the [Sass mixins](https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md#sass) to customize your app. There are a few ways to achieve this. `create-react-app` does have a [recommended approach](https://github.com/facebook/create-react-app/blob/master/packages/react-scripts/template/README.md#adding-a-css-preprocessor-sass-less-etc), which we also recommend.
+Most likely you'll want to start using the [Sass mixins](https://github.com/material-components/material-components-web/blob/master/docs/code/architecture.md#sass) to customize your app. MDC Sass files are not supported out of the box, since we do not prepend `~` to our module imports. See this [Github issue](https://github.com/facebook/create-react-app/issues/4494#issuecomment-428531848) explaining the issue in detail. There is a workaround, but requires some work on your end (we promise it is not too difficult).
 
-The following is an alternate version of the `create-react-app` approach. The difference being all the `node_modules` imports will go into `./src/App.scss`. First install `node-sass-chokidar`:
+##### Add environment variable
 
-```
-npm install -D node-sass-chokidar npm-run-all
+To get MDC React Components to work with `create-react-app` you need to set a `SASS_PATH` environment variable that points to your `node_modules` directory. To quickly do this on OS X or Linux enter the following in your command line:
+
+```sh
+export SASS_PATH=./node_modules
 ```
 
-In `package.json` replace the following:
+If you're on Windows use the following:
 
-```js
-"scripts": {
-  "start": "react-scripts start",
-  "build": "react-scripts build",
-  "test": "react-scripts test --env=jsdom",
-  "eject": "react-scripts eject"
-}
+```bat
+SET SASS_PATH=.\node_modules
 ```
 
-with:
+Rename your `src/App.css` file to `src/App.scss`. You will also need to install `node-sass`:
 
-```js
-"scripts": {
-  "build-css": "node-sass-chokidar --include-path ./src --include-path ./node_modules ./src/App.scss -o ./src",
-  "watch-css": "npm run build-css && node-sass-chokidar --include-path ./src --include-path ./node_modules --watch ./src/App.scss ./src/App.css",
-  "start-js": "react-scripts start",
-  "start": "npm-run-all -p watch-css start-js",
-  "build-js": "react-scripts build",
-  "build": "npm-run-all build-css build-js",
-  "test": "react-scripts test --env=jsdom",
-  "eject": "react-scripts eject"
-}
+```sh
+npm install node-sass
 ```
 
-Then rename `./src/App.css` --> `./src/App.scss`. The `build-css` and `watch-css` tasks will now watch App.scss file changes, which holds all your Sass imports. You can now import Sass files from `node_modules` like so:
+If you permanently want to add this to your environment, read [adding environment variables](./docs/adding-env-variables.md). You're now ready to start using MDC React Sass modules in your `create-react-app`.
+
+> _NOTE:_ this assumes that you will run `npm start` (or `yarn start`) from the root directory. By default this is how create-react-app is setup.
 
 ```sass
 // ./src/App.scss
 
-@import "@material/react-button/index"; // the .scss extension is implied
+@import "@material/react-button/index.scss";
 @import "./react-button-overrides";
 
 ...
@@ -130,7 +126,6 @@ Then rename `./src/App.css` --> `./src/App.scss`. The `build-css` and `watch-css
 
 ```
 
-
 #### Step 3a: Use Compiled CSS
 
 If you performed [Step 3](#step-3-using-sass), then you can skip to [Step 4](#step-4-use-mdc-react-button).
@@ -153,9 +148,9 @@ Open `./src/App.js`. Then replace the boilerplate App code (entire file) with th
 
 ```js
 import React, {Component} from 'react';
-import Button from '@material/react-button/dist'; // /index.js is implied
+import Button from '@material/react-button';
 
-import './App.css';
+import './App.scss';
 // add the appropriate line(s) in Step 3a if you are using compiled CSS instead.
 
 class App extends Component {

ROADMAP.md

@@ -3,31 +3,36 @@ We release a new version of MDC React every 2 weeks. We try and keep MDC React w
 
 ## Current Release
 
-### 0.5.x - September 2018
-- Depend on MDC Web 0.39.x
-- New tabs
-- New switch
-- New chips
-- New icon button
-
-## Upcoming Releases
-
 ### 0.6.x - October 2018
+[Related Milestone](https://github.com/material-components/material-components-web-react/milestone/1)
 - Depend on MDC Web 0.40.x
 - New list
 - New navigation drawer
 - New menu surface
 - New checkbox
 
-### 0.7.x - November 2018
+## Upcoming Releases
+
+### 0.6.2 - November 2018
+[Related Milestone](https://github.com/material-components/material-components-web-react/milestone/4)
+- Bug fixes for Text Field
+- Remove the need for an ID in List
+
+### 0.7.x - Mid November 2018
+[Related Milestone](https://github.com/material-components/material-components-web-react/milestone/2)
+
+[Related Branch](https://github.com/material-components/material-components-web-react/tree/rc7.0)
 - Depend on MDC Web 0.41.x
-- New menu
-- New dialog
 - New radio
+- Typings
 
 ### 0.8.x - December 2018
-- Depend on MDC Web 0.42.x
-- Introduce Typescript to select
+[Related Milestone](https://github.com/material-components/material-components-web-react/milestone/3)
+- Depend on MDC Web 0.42.X
 - New select (drop down menu attached to a text field)
-- New side sheet
-- Prefix and suffix support in Text Field
+- New menu
+
+### 0.9.x - January 2019
+[Related Milestone](https://github.com/material-components/material-components-web-react/milestone/5)
+- Depend on MDC Web 0.43.X
+- New dialog

docs/adding-env-variables.md

@@ -0,0 +1,72 @@
+# Adding Environment Variables
+
+Environment variables are a great way to molding your developer environment your own. You can create alias's or variables that you can refer to in your command line. In our case, it's useful for configuring `create-react-app` to work with our Sass modules. To permanently set your `SASS_PATH` environment follow the instructions below:
+
+## Windows
+
+#### Using SETX
+
+Windows is straightforward and requires just one command.
+
+Open command line terminal, and enter the following:
+
+```bat
+SETX SASS_PATH .\node_modules
+```
+
+> _NOTE:_ Be sure to close that terminal and open a new one for the new settings to take effect.
+
+## Mac OS X
+
+#### Open your `bash_profile`
+You can add an environment variable to your system by updating your `~/.bash_profile`. Open a terminal window and follow these steps:
+
+```sh
+vi ~/.bash_profile # you can use your favorite text editor here (nano, vim, etc.)
+```
+
+If you already have one that exists, it might have properties that look like text below. If it does, you're probably in the right place.
+
+```sh
+source ~/.nvm/nvm.sh
+
+export CLICOLOR=1
+export LSCOLORS=ExFxBxDxCxegedabagacad
+
+alias ls='ls -GFh'
+```
+
+#### Add the new environment variable
+
+To add a new environment variable add the following line:
+
+```sh
+source ~/.nvm/nvm.sh
+
+export CLICOLOR=1
+export LSCOLORS=ExFxBxDxCxegedabagacad
+
+alias ls='ls -GFh'
+
+export SASS_PATH=./node_modules # !add this line!
+```
+
+Save and exit from the file.
+
+#### Source your updated `bash_profile`
+
+Open new terminal window for these settings to take effect.
+
+If you want to keep the same terminal, source your `bash_profile` with the following:
+
+```sh
+source ~/.bash_profile
+```
+
+## Linux
+
+Linux is pretty similar to Mac OS X if you're familiar with that operating system. The steps are identical, with the exception that your environment configuration lives in the `~/.bashrc` file.
+
+
+
+You can add an environment variable to your system by updating your `~/.bash_profile` (on OS X) or `~/.bashrc` (on Linux). If you're on Windows please read