[Typography] Improve the upgrade story

CHANGELOG.md

@@ -35,8 +35,6 @@ This change updates the variant wording to match the one used in the Material De
 +<Button variant="contained" />
 ```
 
-You can suppress the warnings with the environment variable `MUI_SUPPRESS_DEPRECATION_WARNINGS` set to a truthy value.
-
 #### Changes
 
 - [TextField] Ensure labelWidth is set (#13077) @evanstern

docs/scripts/buildApi.js

@@ -39,7 +39,7 @@ if (args.length < 4) {
 
 const rootDirectory = path.resolve(__dirname, '../../');
 const docsApiDirectory = path.resolve(rootDirectory, args[3]);
-const theme = createMuiTheme();
+const theme = createMuiTheme({ typography: { useNextVariants: true } });
 
 const inheritedComponentRegexp = /\/\/ @inheritedComponent (.*)/;
 

docs/src/pages/demos/buttons/CustomizedButtons.js

@@ -60,6 +60,9 @@ const theme = createMuiTheme({
  palette: {
  primary: green,
  },
+ typography: {
+ useNextVariants: true,
+ },
 });
 
 function CustomizedInputs(props) {

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/typography/DeprecatedTypes.js

@@ -14,7 +14,7 @@ function typographyV1Theme(theme) {
  return createMuiTheme({
  ...theme,
  typography: {
- suppressDeprecationWarnings: true,
+ ...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:
 
@@ -57,15 +57,15 @@ 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.
+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).
 
 ### Strategies
 
 To make an immediate switch to typography v2 you can simply pass `useNextVariants: true` when
 calling `createMuiTheme`:
+
 ```js
 const theme = createMuiTheme({
  typography: {
@@ -74,9 +74,11 @@ const theme = createMuiTheme({
 });
 ```
 
+or set `window.__MUI_USE_NEW_TYPOGRAPHY_VARIANTS__ = true;` if you don't use the theme.
+
 This will use new variants instead of old variants according to the following mapping:
 
-```json
+```
 display4 => h1
 display3 => h2
 display2 => h3
@@ -88,24 +90,8 @@ body2 => body1
 body1 (default) => body2 (default)
 ```
 
-Please note that this will still log deprecation warnings if you use one of the variants.
+Please note that this will still 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.
-
-### Deprecation warnings for v4.0.0
-
-Deprecation warnings are logged when:
-- `NODE_ENV` is not strictly equal to `production`
-- Regardless of whether you directly use the `Typography` component with a deprecated variant or another component
- has a `Typography` component with a deprecated variant
-- You override the style of a deprecated variant with `createMuiTheme`
-- You override the style of a restyled variant without `useNextVariants` with `createMuiTheme`
-- Variants are considered deprecated if:
- - They will be removed in the next major release. This includes: display4, display3, display2, display1, headline, title, subheading
- - They will be restyled and `useNextVariants` is falsy. This includes: body2, body1, caption, button
-
-In some cases the deprecation warnings can break your test suite which might be inconvenient.
-In those cases you can set the environment variable `MUI_SUPPRESS_DEPRECATION_WARNINGS` to a truthy value.
-Passing `suppressDeprecationWarnings: true` to the typography options in `createMuiTheme` is equivalent.

examples/cdn/index.html

@@ -43,6 +43,9 @@
  dark: colors.green[700],
  },
  },
+ typography: {
+ useNextVariants: true,
+ },
 });
 
 const styles = theme => ({

examples/create-react-app-with-flow/src/withRoot.js

@@ -22,6 +22,9 @@ const theme = createMuiTheme({
  dark: green[700],
  },
  },
+ typography: {
+ useNextVariants: true,
+ },
 });
 
 function withRoot(Component: ComponentType<*>) {

examples/create-react-app-with-jss/src/withRoot.js

@@ -18,6 +18,9 @@ const theme = createMuiTheme({
  primary: purple,
  secondary: green,
  },
+ typography: {
+ useNextVariants: true,
+ },
 });
 
 // Create a JSS instance with the default preset of plugins.

examples/create-react-app-with-typescript/src/withRoot.tsx

@@ -11,6 +11,9 @@ const theme = createMuiTheme({
  primary: purple,
  secondary: green,
  },
+ typography: {
+ useNextVariants: true,
+ },
 });
 
 function withRoot<P>(Component: React.ComponentType<P>) {

examples/create-react-app/src/withRoot.js

@@ -19,6 +19,9 @@ const theme = createMuiTheme({
  dark: green[700],
  },
  },
+ typography: {
+ useNextVariants: true,
+ },
 });
 
 function withRoot(Component) {

examples/gatsby/src/getPageContext.js

@@ -20,6 +20,9 @@ const theme = createMuiTheme({
  dark: green[700],
  },
  },
+ typography: {
+ useNextVariants: true,
+ },
 });
 
 function createPageContext() {

examples/nextjs/src/getPageContext.js

@@ -20,6 +20,9 @@ const theme = createMuiTheme({
  dark: green[700],
  },
  },
+ typography: {
+ useNextVariants: true,
+ },
 });
 
 function createPageContext() {

examples/parcel/src/withRoot.js

@@ -19,6 +19,9 @@ const theme = createMuiTheme({
  dark: green[700],
  },
  },
+ typography: {
+ useNextVariants: true,
+ },
 });
 
 function withRoot(Component) {

examples/ssr/client.js

@@ -31,6 +31,9 @@ const theme = createMuiTheme({
  accent: red,
  type: 'light',
  },
+ typography: {
+ useNextVariants: true,
+ },
 });
 
 // Create a new class name generator.

examples/ssr/server.js

@@ -42,6 +42,9 @@ function handleRender(req, res) {
  accent: red,
  type: 'light',
  },
+ typography: {
+ useNextVariants: true,
+ },
  });
 
  // Create a new class name generator.

package.json

@@ -44,10 +44,10 @@
  "size:why": "size-limit --why packages/material-ui/build/index.js",
  "size:overhead:why": "size-limit --why ./test/size/overhead.js",
  "test": "yarn lint && yarn typescript && yarn test:coverage",
- "test:unit": "cross-env NODE_ENV=test MUI_SUPPRESS_DEPRECATION_WARNINGS=true mocha packages/material-ui/test/**/*.test.js packages/material-ui/src/{,**/}*.test.js docs/src/**/*.test.js",
+ "test:unit": "cross-env NODE_ENV=test mocha packages/material-ui/test/**/*.test.js packages/material-ui/src/{,**/}*.test.js docs/src/**/*.test.js",
  "test:watch": "yarn test:unit --watch",
- "test:coverage": "cross-env NODE_ENV=test BABEL_ENV=coverage MUI_SUPPRESS_DEPRECATION_WARNINGS=true nyc mocha packages/material-ui/test/**/*.test.js packages/material-ui/src/{,**/}*.test.js && nyc report -r lcovonly",
- "test:coverage:html": "cross-env NODE_ENV=test BABEL_ENV=coverage MUI_SUPPRESS_DEPRECATION_WARNINGS=true nyc mocha packages/material-ui/test/**/*.test.js packages/material-ui/src/{,**/}*.test.js && nyc report --reporter=html",
+ "test:coverage": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc mocha packages/material-ui/test/**/*.test.js packages/material-ui/src/{,**/}*.test.js && nyc report -r lcovonly",
+ "test:coverage:html": "cross-env NODE_ENV=test BABEL_ENV=coverage nyc mocha packages/material-ui/test/**/*.test.js packages/material-ui/src/{,**/}*.test.js && nyc report --reporter=html",
  "test:karma": "cross-env NODE_ENV=test karma start test/karma.conf.js --single-run",
  "test:regressions": "webpack --config test/regressions/webpack.config.js && rimraf test/regressions/screenshots/chrome/* && vrtest run --config test/vrtest.config.js --record",
  "typescript": "tslint -p tsconfig.json \"packages/*/{src,test}/**/*.{ts,tsx}\"",

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

@@ -3,10 +3,10 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import warning from 'warning';
 import withStyles from '../styles/withStyles';
 import { fade } from '../styles/colorManipulator';
 import ButtonBase from '../ButtonBase';
+import chainPropType from '../utils/chainPropType';
 import { capitalize } from '../utils/helpers';
 
 export const styles = theme => ({
@@ -226,18 +226,6 @@ function Button(props) {
  ...other
  } = props;
 
- warning(
- process.env.MUI_SUPPRESS_DEPRECATION_WARNINGS || variant !== 'flat',
- 'Material-UI: The `flat` Button variant will be removed in ' +
- 'the next major release. `text` is equivalent and should be used instead.',
- );
-
- warning(
- process.env.MUI_SUPPRESS_DEPRECATION_WARNINGS || variant !== 'raised',
- 'Material-UI: The `raised` Button variant will be removed in ' +
- 'the next major release. `contained` is equivalent and should be used instead.',
- );
-
  const fab = variant === 'fab' || variant === 'extendedFab';
  const contained = variant === 'contained' || variant === 'raised';
  const text = variant === 'text' || variant === 'flat' || variant === 'outlined';
@@ -346,18 +334,28 @@ Button.propTypes = {
  */
  type: PropTypes.string,
  /**
- * The variant to use. __WARNING__: `flat` and `raised` are deprecated. Instead use
- * `text` and `contained` respectively.
+ * The variant to use. __WARNING__: `flat` and `raised` are deprecated.
+ * Instead use `text` and `contained` respectively.
  */
- variant: PropTypes.oneOf([
- 'text',
- 'flat',
- 'outlined',
- 'contained',
- 'raised',
- 'fab',
- 'extendedFab',
- ]),
+ variant: chainPropType(
+ PropTypes.oneOf(['text', 'flat', 'outlined', 'contained', 'raised', 'fab', 'extendedFab']),
+ props => {
+ if (props.variant === 'flat') {
+ return new Error(
+ 'The `flat` variant will be removed in the next major release. ' +
+ '`text` is equivalent and should be used instead.',
+ );
+ }
+ if (props.variant === 'raised') {
+ return new Error(
+ 'The `raised` variant will be removed in the next major release. ' +
+ '`contained` is equivalent and should be used instead.',
+ );
+ }
+
+ return null;
+ },
+ ),
 };
 
 Button.defaultProps = {