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:
 
@@ -74,7 +74,7 @@ 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:
 

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();
  });
 

packages/material-ui/src/utils/chainPropTypes.js

@@ -0,0 +1,12 @@
+function chainPropTypes(propType1, propType2) {
+ /* istanbul ignore if */
+ if (process.env.NODE_ENV === 'production') {
+ return () => null;
+ }
+
+ return function validate(...args) {
+ return propType1(...args) || propType2(...args);
+ };
+}
+
+export default chainPropTypes;