[docs] Fix yarn docs:build script (#7745)

docs/src/pages/component-api/BottomNavigation/BottomNavigation.md

@@ -11,7 +11,7 @@
 | classes | object |  | Useful to extend the style applied to components. |
 | onChange | function |  | Callback fired when the value changes.<br><br>**Signature:**<br>`function(event: object, value: any) => void`<br>*event:* The event source of the callback<br>*value:* We default to the index of the child |
 | showLabels | bool | false | If `true`, all `BottomNavigationButton`s will show their labels. By default only the selected `BottomNavigationButton` will show its label. |
-| value | any |  | The value of the currently selected `BottomNavigationButton`. |
+| <span style="color: #31a148">value *</span> | any |  | The value of the currently selected `BottomNavigationButton`. |
 
 Any other properties supplied will be spread to the root element.
 

docs/src/pages/component-api/BottomNavigation/BottomNavigationButton.md

@@ -11,6 +11,7 @@
 | icon | node |  | The icon element. If a string is provided, it will be used as a font ligature. |
 | label | node |  | The label element. |
 | showLabel | bool |  | If `true`, the BottomNavigationButton will show its label. |
+| value | any |  | You can provide your own value. Otherwise, we fallback to the child position index. |
 
 Any other properties supplied will be spread to the root element.
 

docs/src/pages/component-api/Form/FormControl.md

@@ -9,6 +9,7 @@ Provides context such as dirty/focused/error/required for form inputs.
 |:-----|:-----|:--------|:------------|
 | children | Element |  | The contents of the form control. |
 | classes | Object | {} | Useful to extend the style applied to components. |
+| component | union:&nbsp;string<br>&nbsp;Function<br> | 'div' | The component used for the root node. Either a string to use a DOM element or a component. |
 | disabled | boolean | false | If `true`, the label, input and helper text should be displayed in a disabled state. |
 | error | boolean | false | If `true`, the label should be displayed in an error state. |
 | fullWidth | boolean | false | If `true`, the label will take up the full width of its container. |

docs/src/pages/component-api/Form/FormLabel.md

@@ -9,6 +9,7 @@
 |:-----|:-----|:--------|:------------|
 | children | Element |  | The content of the component. |
 | classes | Object |  | Useful to extend the style applied to components. |
+| component | union:&nbsp;string<br>&nbsp;Function<br> | 'label' | The component used for the root node. Either a string to use a DOM element or a component. |
 | disabled | boolean |  | If `true`, the label should be displayed in a disabled state. |
 | error | boolean |  | If `true`, the label should be displayed in an error state. |
 | focused | boolean |  | If `true`, the input of this label is focused (used by `FormGroup` components). |

docs/src/pages/component-api/Grid/Grid.md

@@ -61,10 +61,6 @@ This property accepts the following keys:
 - `grid-xs-10`
 - `grid-xs-11`
 - `grid-xs-12`
-- `@media (min-width:600px)`
-- `@media (min-width:960px)`
-- `@media (min-width:1280px)`
-- `@media (min-width:1920px)`
 
 Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.

docs/src/pages/component-api/Progress/CircularProgress.md

@@ -29,8 +29,6 @@ This property accepts the following keys:
 - `circle`
 - `indeterminateCircle`
 - `determinateCircle`
-- `@keyframes mui-rotate-progress-circle`
-- `@keyframes mui-scale-progress-circle`
 
 Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.

docs/src/pages/component-api/Progress/LinearProgress.md

@@ -37,9 +37,6 @@ This property accepts the following keys:
 - `bufferBar1`
 - `bufferBar2Primary`
 - `bufferBar2Accent`
-- `@keyframes mui-indeterminate1`
-- `@keyframes mui-indeterminate2`
-- `@keyframes buffer`
 
 Have a look at [overriding with classes](/customization/overrides#overriding-with-classes)
 section for more detail.

docs/src/pages/component-api/Tabs/Tab.md

@@ -11,6 +11,7 @@
 | disabled | bool | false | If `true`, the tab will be disabled. |
 | icon | node |  | The icon element. If a string is provided, it will be used as a font ligature. |
 | label | node |  | The label element. |
+| value | any |  | You can provide your own value. Otherwise, we fallback to the child position index. |
 
 Any other properties supplied will be spread to the root element.
 

docs/src/pages/component-api/Tabs/Tabs.md

@@ -12,13 +12,13 @@ Notice that this Component is incompatible with server side rendering.
 | children | node |  | The content of the component. |
 | classes | object |  | Useful to extend the style applied to components. |
 | fullWidth | bool | false | If `true`, the tabs will grow to use all the available space. This property is intended for small views. |
-| <span style="color: #31a148">index *</span> | union:&nbsp;[object Object]<br>&nbsp;number<br> |  | The index of the currently selected `Tab`. If you don't want any selected `Tab`, you can set this property to `false`. |
 | indicatorClassName | string |  | The CSS class name of the indicator element. |
 | indicatorColor | union:&nbsp;[object Object],[object Object]<br>&nbsp;string<br> | 'accent' | Determines the color of the indicator. |
-| <span style="color: #31a148">onChange *</span> | function |  | Callback fired when the index changes.<br><br>**Signature:**<br>`function(event: object, index: number) => void`<br>*event:* The event source of the callback<br>*index:* We default to the index of the child |
+| <span style="color: #31a148">onChange *</span> | function |  | Callback fired when the value changes.<br><br>**Signature:**<br>`function(event: object, value: number) => void`<br>*event:* The event source of the callback<br>*value:* We default to the index of the child |
 | scrollButtons | enum:&nbsp;'auto'<br>&nbsp;'on'<br>&nbsp;'off'<br> | 'auto' | Determine behavior of scroll buttons when tabs are set to scroll `auto` will only present them on medium and larger viewports `on` will always present them `off` will never present them |
 | scrollable | bool | false | True invokes scrolling properties and allow for horizontally scrolling (or swiping) the tab bar. |
 | textColor | union:&nbsp;[object Object],[object Object],[object Object]<br>&nbsp;string<br> | 'inherit' | Determines the color of the `Tab`. |
+| <span style="color: #31a148">value *</span> | any |  | The value of the currently selected `Tab`. If you don't want any selected `Tab`, you can set this property to `false`. |
 
 Any other properties supplied will be spread to the root element.
 

docs/src/pages/getting-started/installation.md

@@ -7,7 +7,7 @@ Material-UI is available as an [npm package](https://www.npmjs.org/package/mater
 To install and save in your `package.json` dependencies, run:
 
 ```
-npm install -S material-ui@next
+npm install material-ui@next
 ```
 
 ## Roboto Font
@@ -28,7 +28,7 @@ In order to use prebuilt SVG Material icons, such as those found in the [compone
 you must first install the [material-ui-icons](https://www.npmjs.org/package/material-ui-icons) package:
 
 ```
-npm install -S material-ui-icons
+npm install material-ui-icons
 ```
 
 This package replaces the `svg-icons` previously included with Material-UI.

package.json

@@ -76,8 +76,8 @@
     "warning": "^3.0.0"
   },
   "devDependencies": {
-    "@types/enzyme": "^2.8.4",
-    "@types/react": "^16.0.0",
+    "@types/enzyme": "^2.8.5",
+    "@types/react": "^16.0.2",
     "app-module-path": "^2.2.0",
     "argos-cli": "^0.0.9",
     "babel-cli": "^6.24.1",
@@ -100,7 +100,7 @@
     "babel-preset-stage-1": "^6.24.1",
     "babel-register": "^6.24.1",
     "chai": "^4.1.1",
-    "cross-env": "^5.0.4",
+    "cross-env": "^5.0.5",
     "doctrine": "^2.0.0",
     "enzyme": "^2.9.1",
     "eslint": "^3.19.0",
@@ -113,7 +113,7 @@
     "eslint-plugin-material-ui": "file:packages/eslint-plugin-material-ui",
     "eslint-plugin-mocha": "^4.11.0",
     "eslint-plugin-prettier": "^2.1.2",
-    "eslint-plugin-react": "^7.1.0",
+    "eslint-plugin-react": "^7.2.0",
     "eslint-plugin-spellcheck": "^0.0.8",
     "eventsource-polyfill": "^0.9.6",
     "file-loader": "^0.11.2",
@@ -145,8 +145,8 @@
     "recast": "^0.12.6",
     "recursive-readdir-sync": "^1.0.6",
     "rimraf": "^2.6.1",
-    "sinon": "^3.0.0",
-    "size-limit": "^0.8.0",
+    "sinon": "^3.2.0",
+    "size-limit": "^0.8.4",
     "url-loader": "^0.5.9",
     "vrtest": "^0.2.0",
     "webfontloader": "^1.6.28",

scripts/build-api-docs.js

@@ -6,6 +6,7 @@ import path from 'path';
 import * as reactDocgen from 'react-docgen';
 import generateMarkdown from './generate-docs-markdown';
 import createMuiTheme from '../src/styles/theme';
+import getStylesCreator from '../src/styles/getStylesCreator';
 
 const theme = createMuiTheme();
 const componentRegex = /^([A-Z][a-z]+)+\.js/;
@@ -34,10 +35,12 @@ function buildDocs(componentPath) {
     name: null,
   };
 
-  if (component.styleSheet) {
+  if (component.styles && component.default.options) {
     // Collect the customization points of the `classes` property.
-    styles.classes = Object.keys(component.styleSheet.createStyles(theme));
-    styles.name = component.styleSheet.name;
+    styles.classes = Object.keys(getStylesCreator(component.styles).create(theme)).filter(
+      className => !className.match(/^(@media|@keyframes)/),
+    );
+    styles.name = component.default.options.name;
   }
 
   readFile(componentPath, 'utf8', (err, src) => {

src/Checkbox/Checkbox.js

@@ -18,7 +18,7 @@ export const styles = (theme: Object) => ({
   },
 });
 
-export const SwitchBase = withStyles(styles, { name: 'MuiCheckbox' })(createSwitch());
+const SwitchBase = createSwitch();
 
 export type Props = {
   /**
@@ -118,4 +118,4 @@ Checkbox.defaultProps = {
   indeterminateIcon: <IndeterminateCheckBoxIcon />,
 };
 
-export default Checkbox;
+export default withStyles(styles, { name: 'MuiCheckbox' })(Checkbox);

src/Checkbox/Checkbox.spec.js

@@ -3,28 +3,27 @@
 import React from 'react';
 import { assert } from 'chai';
 import { createShallow, getClasses } from '../test-utils';
-import Checkbox, { SwitchBase } from './Checkbox';
+import Checkbox from './Checkbox';
 
 describe('<Checkbox />', () => {
   let shallow;
   let classes;
 
   before(() => {
-    shallow = createShallow();
-    classes = getClasses(<SwitchBase />);
+    shallow = createShallow({ dive: true });
+    classes = getClasses(<Checkbox />);
   });
 
   describe('styleSheet', () => {
-    it('should have the classes required for SwitchBase', () => {
+    it('should have the classes required for Checkbox', () => {
       assert.strictEqual(typeof classes.default, 'string');
       assert.strictEqual(typeof classes.checked, 'string');
       assert.strictEqual(typeof classes.disabled, 'string');
     });
   });
 
   it('should render a div with a SwitchBase', () => {
-    assert.strictEqual(Checkbox.name, 'Checkbox', 'set for debugging');
     const wrapper = shallow(<Checkbox />);
-    assert.strictEqual(wrapper.name(), 'withStyles(withStyles(SwitchBase))');
+    assert.strictEqual(wrapper.name(), 'withStyles(SwitchBase)');
   });
 });

src/Toolbar/Toolbar.js

@@ -62,4 +62,4 @@ Toolbar.defaultProps = {
   disableGutters: false,
 };
 
-export default withStyles(styles, { name: 'MuiCollapse' })(Toolbar);
+export default withStyles(styles, { name: 'MuiToolbar' })(Toolbar);

src/styles/withStyles.js

@@ -278,6 +278,10 @@ const withStyles = (stylesOrCreator: Object, options?: Object = {}) => BaseCompo
 
   hoistNonReactStatics(Style, BaseComponent);
 
+  // Added for tests purposes
+  // $FlowFixMe
+  Style.options = options;
+
   if (process.env.NODE_ENV !== 'production') {
     Style.displayName = wrapDisplayName(BaseComponent, 'withStyles');
   }

yarn.lock

@@ -6,9 +6,9 @@
   version "0.22.2"
   resolved "https://registry.yarnpkg.com/@types/cheerio/-/cheerio-0.22.2.tgz#539625874bc856086ad491c2fdc9b10c05ae308e"
 
-"@types/enzyme@^2.8.4":
-  version "2.8.4"
-  resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-2.8.4.tgz#0a75487091978a77178920fa0437c0f13a8e2dcd"
+"@types/enzyme@^2.8.5":
+  version "2.8.5"
+  resolved "https://registry.yarnpkg.com/@types/enzyme/-/enzyme-2.8.5.tgz#0bcf505358db8967fea2d86534fce6b901539ce7"
   dependencies:
     "@types/cheerio" "*"
     "@types/react" "*"
@@ -17,10 +17,14 @@
   version "6.0.84"
   resolved "https://registry.yarnpkg.com/@types/node/-/node-6.0.84.tgz#193ffe5a9f42864d425ffd9739d95b753c6a1eab"
 
-"@types/react@*", "@types/react@^16.0.0":
+"@types/react@*":
   version "16.0.0"
   resolved "https://registry.yarnpkg.com/@types/react/-/react-16.0.0.tgz#fec7e6302e11c1cd307129d8ce1e6d5dca4a0283"
 
+"@types/react@^16.0.2":
+  version "16.0.2"
+  resolved "https://registry.yarnpkg.com/@types/react/-/react-16.0.2.tgz#0b31a73cdde6272b719e5b05a7df6d1e2654a804"
+
 abab@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/abab/-/abab-1.0.3.tgz#b81de5f7274ec4e756d797cd834f303642724e5d"
@@ -1656,6 +1660,14 @@ chalk@^2.0.1:
     escape-string-regexp "^1.0.5"
     supports-color "^4.0.0"
 
+chalk@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/chalk/-/chalk-2.1.0.tgz#ac5becf14fa21b99c6c92ca7a7d7cfd5b17e743e"
+  dependencies:
+    ansi-styles "^3.1.0"
+    escape-string-regexp "^1.0.5"
+    supports-color "^4.0.0"
+
 change-emitter@^0.1.2:
   version "0.1.6"
   resolved "https://registry.yarnpkg.com/change-emitter/-/change-emitter-0.1.6.tgz#e8b2fe3d7f1ab7d69a32199aff91ea6931409515"
@@ -1972,9 +1984,9 @@ create-react-class@^15.6.0:
     loose-envify "^1.3.1"
     object-assign "^4.1.1"
 
-cross-env@^5.0.4:
-  version "5.0.4"
-  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-5.0.4.tgz#af93f5ce541ca9de49250b988104112e31c22563"
+cross-env@^5.0.5:
+  version "5.0.5"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-5.0.5.tgz#4383d364d9660873dd185b398af3bfef5efffef3"
   dependencies:
     cross-spawn "^5.1.0"
     is-windows "^1.0.0"
@@ -2629,13 +2641,13 @@ eslint-plugin-prettier@^2.1.2:
     fast-diff "^1.1.1"
     jest-docblock "^20.0.1"
 
-eslint-plugin-react@^7.1.0:
-  version "7.1.0"
-  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.1.0.tgz#27770acf39f5fd49cd0af4083ce58104eb390d4c"
+eslint-plugin-react@^7.2.0:
+  version "7.2.0"
+  resolved "https://registry.yarnpkg.com/eslint-plugin-react/-/eslint-plugin-react-7.2.0.tgz#25c77a4ec307e3eebb248ea3350960e372ab6406"
   dependencies:
     doctrine "^2.0.0"
     has "^1.0.1"
-    jsx-ast-utils "^1.4.1"
+    jsx-ast-utils "^2.0.0"
 
 eslint-plugin-spellcheck@^0.0.8:
   version "0.0.8"
@@ -4148,10 +4160,16 @@ jss@^8.1.0:
     is-in-browser "^1.0.2"
     warning "^3.0.0"
 
-jsx-ast-utils@^1.4.0, jsx-ast-utils@^1.4.1:
+jsx-ast-utils@^1.4.0:
   version "1.4.1"
   resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-1.4.1.tgz#3867213e8dd79bf1e8f2300c0cfc1efb182c0df1"
 
+jsx-ast-utils@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/jsx-ast-utils/-/jsx-ast-utils-2.0.0.tgz#ec06a3d60cf307e5e119dac7bad81e89f096f0f8"
+  dependencies:
+    array-includes "^3.0.3"
+
 just-extend@^1.1.22:
   version "1.1.22"
   resolved "https://registry.yarnpkg.com/just-extend/-/just-extend-1.1.22.tgz#3330af756cab6a542700c64b2e4e4aa062d52fff"
@@ -6011,9 +6029,9 @@ signal-exit@^3.0.0, signal-exit@^3.0.1, signal-exit@^3.0.2:
   version "3.0.2"
   resolved "https://registry.yarnpkg.com/signal-exit/-/signal-exit-3.0.2.tgz#b5fdc08f1287ea1178628e415e25132b73646c6d"
 
-sinon@^3.0.0:
-  version "3.0.0"
-  resolved "https://registry.yarnpkg.com/sinon/-/sinon-3.0.0.tgz#f6919755c8c705e0b4ae977e8351bbcbaf6d91de"
+sinon@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/sinon/-/sinon-3.2.0.tgz#8848a66ab6e8b80b5532e3824f59f83ea2628c77"
   dependencies:
     diff "^3.1.0"
     formatio "1.2.0"
@@ -6025,21 +6043,21 @@ sinon@^3.0.0:
     text-encoding "0.6.4"
     type-detect "^4.0.0"
 
-size-limit@^0.8.0:
-  version "0.8.0"
-  resolved "https://registry.yarnpkg.com/size-limit/-/size-limit-0.8.0.tgz#f30ab13c9bf9190158af8a326ae7763505a8ea38"
+size-limit@^0.8.4:
+  version "0.8.4"
+  resolved "https://registry.yarnpkg.com/size-limit/-/size-limit-0.8.4.tgz#26e02ef81c3c7fe29547fb1c197f5d4c252359c9"
   dependencies:
     babili-webpack-plugin "^0.1.2"
     bytes "^2.5.0"
-    chalk "^2.0.1"
+    chalk "^2.1.0"
     ci-job-number "^0.3.0"
     compression-webpack-plugin "^1.0.0"
     file-loader "^0.11.2"
     globby "^6.1.0"
     memory-fs "^0.4.1"
     read-pkg-up "^2.0.0"
-    webpack "^3.4.1"
-    webpack-bundle-analyzer "^2.8.3"
+    webpack "^3.5.3"
+    webpack-bundle-analyzer "^2.9.0"
     yargs "^8.0.2"
 
 slash@^1.0.0:
@@ -6748,9 +6766,9 @@ webidl-conversions@^4.0.0, webidl-conversions@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/webidl-conversions/-/webidl-conversions-4.0.1.tgz#8015a17ab83e7e1b311638486ace81da6ce206a0"
 
-webpack-bundle-analyzer@^2.8.3:
-  version "2.8.3"
-  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.8.3.tgz#8e7b3deb3832698c24b09c84dfe5b43902a83991"
+webpack-bundle-analyzer@^2.9.0:
+  version "2.9.0"
+  resolved "https://registry.yarnpkg.com/webpack-bundle-analyzer/-/webpack-bundle-analyzer-2.9.0.tgz#b58bc34cc30b27ffdbaf3d00bf27aba6fa29c6e3"
   dependencies:
     acorn "^5.1.1"
     chalk "^1.1.3"
@@ -6780,9 +6798,9 @@ webpack-sources@^1.0.1:
     source-list-map "^2.0.0"
     source-map "~0.5.3"
 
-webpack@^3.4.1:
-  version "3.4.1"
-  resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.4.1.tgz#4c3f4f3fb318155a4db0cb6a36ff05c5697418f4"
+webpack@^3.5.3:
+  version "3.5.4"
+  resolved "https://registry.yarnpkg.com/webpack/-/webpack-3.5.4.tgz#5583eb263ed27b78b5bd17bfdfb0eb1b1cd1bf81"
   dependencies:
     acorn "^5.0.0"
     acorn-dynamic-import "^2.0.0"