let's complete the effort

docs/scripts/buildApi.js

@@ -3,7 +3,7 @@
 import { mkdir, readFileSync, writeFileSync } from 'fs';
 import path from 'path';
 import kebabCase from 'lodash/kebabCase';
-import * as reactDocgen from 'react-docgen';
+import { parse as docgenParse } from 'react-docgen';
 import generateMarkdown from '../src/modules/utils/generateMarkdown';
 import { findPagesMarkdown, findComponents } from '../src/modules/utils/find';
 import { getHeaders } from '../src/modules/utils/parseMarkdown';
@@ -123,7 +123,7 @@ function buildDocs(options) {
 
   let reactAPI;
   try {
-    reactAPI = reactDocgen.parse(src);
+    reactAPI = docgenParse(src);
   } catch (err) {
     console.log('Error parsing src for', componentObject.filename);
     throw err;
@@ -134,7 +134,7 @@ function buildDocs(options) {
   reactAPI.pagesMarkdown = pagesMarkdown;
   reactAPI.src = src;
 
-  // if (reactAPI.name !== 'Snackbar') {
+  // if (reactAPI.name !== 'Button') {
   //   return;
   // }
 

docs/src/modules/utils/generateMarkdown.js

@@ -2,6 +2,7 @@
 
 import { parse as parseDoctrine } from 'doctrine';
 import recast from 'recast';
+import { parse as docgenParse } from 'react-docgen';
 import { _rewriteUrlForNextExport } from 'next/router';
 import { pageToTitle } from './helpers';
 
@@ -23,20 +24,39 @@ function generateHeader(reactAPI) {
 }
 
 function getDeprecatedInfo(type) {
-  const deprecatedPropType = 'deprecated(PropTypes.';
-
-  const indexStart = type.raw.indexOf(deprecatedPropType);
+  const marker = 'deprecated(PropTypes.';
+  const indexStart = type.raw.indexOf(marker);
 
   if (indexStart !== -1) {
     return {
-      propTypes: type.raw.substring(indexStart + deprecatedPropType.length, type.raw.indexOf(',')),
+      propTypes: type.raw.substring(indexStart + marker.length, type.raw.indexOf(',')),
       explanation: recast.parse(type.raw).program.body[0].expression.arguments[1].value,
     };
   }
 
   return false;
 }
 
+function getChained(type) {
+  const marker = 'chainPropTypes';
+  const indexStart = type.raw.indexOf(marker);
+
+  if (indexStart !== -1) {
+    const parsed = docgenParse(`
+      import PropTypes from 'prop-types';
+      const Foo = () => <div />
+      Foo.propTypes = {
+        bar: ${recast.print(recast.parse(type.raw).program.body[0].expression.arguments[0]).code}
+      }
+      export default Foo
+    `);
+
+    return parsed.props.bar.type;
+  }
+
+  return false;
+}
+
 function escapeCell(value) {
   // As the pipe is use for the table structure
   return value
@@ -50,7 +70,6 @@ function generatePropDescription(description, type) {
 
   if (type.name === 'custom') {
     const deprecatedInfo = getDeprecatedInfo(type);
-
     if (deprecatedInfo) {
       deprecated = `*Deprecated*. ${deprecatedInfo.explanation}<br><br>`;
     }
@@ -123,13 +142,17 @@ function generatePropType(type) {
   switch (type.name) {
     case 'custom': {
       const deprecatedInfo = getDeprecatedInfo(type);
-
       if (deprecatedInfo !== false) {
         return generatePropType({
           name: deprecatedInfo.propTypes,
         });
       }
 
+      const chained = getChained(type);
+      if (chained !== false) {
+        return generatePropType(chained);
+      }
+
       return type.raw;
     }
 

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

@@ -2,9 +2,9 @@
 
 <p class="description">Install Material-UI, the world's most popular React UI framework.</p>
 
-Material-UI is available as an [NPM package](https://www.npmjs.com/package/@material-ui/core).
+Material-UI is available as an [npm package](https://www.npmjs.com/package/@material-ui/core).
 
-## NPM
+## npm
 
 To install and save in your `package.json` dependencies, run:
 

docs/src/pages/style/icons/icons.md

@@ -29,7 +29,7 @@ Optionally, you can set the icon color using one of the theme color properties:
 ### SVG Material icons
 
 It's interesting to have the building blocks needed to implement custom icons, but what about presets?
-We provide a separate NPM package,
+We provide a separate npm package,
 [@material-ui/icons](https://www.npmjs.com/package/@material-ui/icons),
 that includes the 1,000+ official [Material icons](https://material.io/tools/icons/?style=baseline) converted to `SvgIcon` components.
 

docs/src/pages/style/typography/DeprecatedTypes.js

@@ -14,7 +14,6 @@ function typographyV1Theme(theme) {
   return createMuiTheme({
     ...theme,
     typography: {
-      ...theme.typography,
       useNextVariants: false,
     },
   });

docs/src/pages/style/typography/typography.md

@@ -22,7 +22,7 @@ Shown below is a sample link markup used to load the Roboto font from a CDN.
 <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
 ```
 
-## Install with NPM
+## Install with npm
 
 You can [install it](https://www.npmjs.com/package/typeface-roboto) by typing the below command in your terminal:
 
@@ -58,8 +58,8 @@ Hopefully, you might be able to take advantage of the [`typography`](/customizat
 ## Migration to typography v2
 
 The material design specification changed concerning variant names and styles.
-To allow a smooth transition we kept old variants and restyled variants for backwards compatibility but will log deprecation warnings.
-We will remove the old variants with our next major release v4.0.0 (Q1 2019).
+To allow a smooth transition we kept old variants and restyled variants for backwards compatibility but we log deprecation warnings.
+We will remove the old typography variants in the next major release v4.0.0 (Q1 2019).
 
 ### Strategies
 
@@ -74,11 +74,11 @@ const theme = createMuiTheme({
 });
 ```
 
-or set `window.__MUI_USE_NEW_TYPOGRAPHY_VARIANTS__ = true;` if you don't use the theme.
+or set `window.__MUI_USE_NEXT_TYPOGRAPHY_VARIANTS__ = true;` if you don't use the theme.
 
 This will use new variants instead of old variants according to the following mapping:
 
-```
+```sh
 display4 => h1
 display3 => h2
 display2 => h3
@@ -90,8 +90,6 @@ body2 => body1
 body1 (default) => body2 (default)
 ```
 
-Please note that this will still log deprecation warnings if you use one of the old variants.
+Please note that this will log deprecation warnings if you use one of the old variants.
 We recommend you replace those old variants with the recommended variants to be prepared
-for the next major release.
-
-See [Themes](/customization/themes/) for more information about how to use a global theme.
+for the next major release. See [Themes](/customization/themes/) for more information about how to use a global theme.

packages/material-ui/src/Button/Button.js

@@ -6,7 +6,7 @@ import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
 import { fade } from '../styles/colorManipulator';
 import ButtonBase from '../ButtonBase';
-import chainPropType from '../utils/chainPropType';
+import chainPropTypes from '../utils/chainPropTypes';
 import { capitalize } from '../utils/helpers';
 
 export const styles = theme => ({
@@ -334,10 +334,11 @@ Button.propTypes = {
    */
   type: PropTypes.string,
   /**
-   * The variant to use. __WARNING__: `flat` and `raised` are deprecated.
+   * The variant to use.
+   * __WARNING__: `flat` and `raised` are deprecated.
    * Instead use `text` and `contained` respectively.
    */
-  variant: chainPropType(
+  variant: chainPropTypes(
     PropTypes.oneOf(['text', 'flat', 'outlined', 'contained', 'raised', 'fab', 'extendedFab']),
     props => {
       if (props.variant === 'flat') {

packages/material-ui/src/Button/Button.test.js

@@ -1,8 +1,8 @@
 import React from 'react';
 import { assert } from 'chai';
-import { mock } from 'sinon';
 import { createShallow, createRender, getClasses } from '../test-utils';
 import Button from './Button';
+import consoleErrorMock from 'test/utils/consoleErrorMock';
 import ButtonBase from '../ButtonBase';
 import Icon from '../Icon';
 
@@ -106,14 +106,12 @@ describe('<Button />', () => {
   });
 
   describe('raised legacy', () => {
-    let warning;
-
     beforeEach(() => {
-      warning = mock(console).expects('error');
+      consoleErrorMock.spy();
     });
 
     afterEach(() => {
-      warning.restore();
+      consoleErrorMock.reset();
     });
 
     it('should render a raised button', () => {
@@ -144,20 +142,17 @@ describe('<Button />', () => {
       assert.strictEqual(wrapper.hasClass(classes.raisedSecondary), false);
     });
 
-    it('should render a raised secondary button', () => {
+    it('should render a flat secondary button', () => {
       const wrapper = shallow(
-        <Button variant="raised" color="secondary">
+        <Button variant="flat" color="secondary">
           Hello World
         </Button>,
       );
       assert.strictEqual(wrapper.hasClass(classes.root), true);
-      assert.strictEqual(wrapper.hasClass(classes.contained), true);
-      assert.strictEqual(wrapper.hasClass(classes.raised), true);
-      assert.strictEqual(wrapper.hasClass(classes.fab), false);
-      assert.strictEqual(wrapper.hasClass(classes.containedPrimary), false);
-      assert.strictEqual(wrapper.hasClass(classes.raisedPrimary), false);
-      assert.strictEqual(wrapper.hasClass(classes.containedSecondary), true);
-      assert.strictEqual(wrapper.hasClass(classes.raisedSecondary), true);
+      assert.strictEqual(wrapper.hasClass(classes.text), true);
+      assert.strictEqual(wrapper.hasClass(classes.flat), true);
+      assert.strictEqual(wrapper.hasClass(classes.textSecondary), true);
+      assert.strictEqual(wrapper.hasClass(classes.flatSecondary), true);
     });
   });
 

packages/material-ui/src/Typography/Typography.js

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import withStyles from '../styles/withStyles';
 import { capitalize } from '../utils/helpers';
-import chainPropType from '../utils/chainPropType';
+import chainPropTypes from '../utils/chainPropTypes';
 
 export const styles = theme => ({
   /* Styles applied to the root element. */
@@ -268,7 +268,7 @@ Typography.propTypes = {
    * Applies the theme typography styles.
    * Use `body1` as the default value with the legacy implementation and `body2` with the new one.
    */
-  variant: chainPropType(
+  variant: chainPropTypes(
     PropTypes.oneOf([
       'h1',
       'h2',

packages/material-ui/src/Typography/Typography.test.js

@@ -102,13 +102,13 @@ describe('<Typography />', () => {
 
     beforeEach(() => {
       // eslint-disable-next-line no-underscore-dangle
-      global.__MUI_USE_NEW_TYPOGRAPHY_VARIANTS__ = false;
+      global.__MUI_USE_NEXT_TYPOGRAPHY_VARIANTS__ = false;
       consoleErrorMock.spy();
     });
 
     afterEach(() => {
       // eslint-disable-next-line no-underscore-dangle
-      global.__MUI_USE_NEW_TYPOGRAPHY_VARIANTS__ = true;
+      global.__MUI_USE_NEXT_TYPOGRAPHY_VARIANTS__ = true;
       consoleErrorMock.reset();
     });
 

packages/material-ui/src/internal/svg-icons/README.md

@@ -3,4 +3,4 @@
 The icons provided here are intended for use internally within Material-UI components.
 
 For the complete set of SVG Material icons previously provided with Material-UI,
-please refer to the [@material-ui/icons](https://www.npmjs.com/package/@material-ui/icons) NPM package.
+please refer to the [@material-ui/icons](https://www.npmjs.com/package/@material-ui/icons) npm package.

packages/material-ui/src/styles/createTypography.js

@@ -26,7 +26,7 @@ export default function createTypography(palette, typography) {
     // 16px is the default font-size used by browsers.
     htmlFontSize = 16,
     // eslint-disable-next-line no-underscore-dangle
-    useNextVariants = false || global.__MUI_USE_NEW_TYPOGRAPHY_VARIANTS__,
+    useNextVariants = Boolean(global.__MUI_USE_NEXT_TYPOGRAPHY_VARIANTS__),
     // Apply the CSS properties to all the variants.
     allVariants,
     ...other
@@ -180,15 +180,15 @@ export default function createTypography(palette, typography) {
       fontWeightRegular,
       fontWeightMedium,
       ...oldVariants,
+      ...nextVariants,
       ...(useNextVariants
         ? {
-            ...nextVariants,
             body1: nextVariants.body1Next,
             body2: nextVariants.body2Next,
             button: nextVariants.buttonNext,
             caption: nextVariants.captionNext,
           }
-        : nextVariants),
+        : {}),
       useNextVariants,
     },
     other,

packages/material-ui/src/styles/createTypography.test.js

@@ -74,13 +74,13 @@ describe('createTypography', () => {
   describe('typography v2 migration', () => {
     beforeEach(() => {
       // eslint-disable-next-line no-underscore-dangle
-      global.__MUI_USE_NEW_TYPOGRAPHY_VARIANTS__ = false;
+      global.__MUI_USE_NEXT_TYPOGRAPHY_VARIANTS__ = false;
       consoleErrorMock.spy();
     });
 
     afterEach(() => {
       // eslint-disable-next-line no-underscore-dangle
-      global.__MUI_USE_NEW_TYPOGRAPHY_VARIANTS__ = true;
+      global.__MUI_USE_NEXT_TYPOGRAPHY_VARIANTS__ = true;
       consoleErrorMock.reset();
     });