Skip to content

Commit

Permalink
[Typography] Improve the upgrade story
Browse files Browse the repository at this point in the history
  • Loading branch information
oliviertassinari committed Oct 11, 2018
1 parent 105ed3b commit 080be09
Show file tree
Hide file tree
Showing 31 changed files with 321 additions and 325 deletions.
4 changes: 2 additions & 2 deletions .size-limit.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,13 @@ module.exports = [
name: 'The initial cost paid for using one component',
webpack: true,
path: 'packages/material-ui/build/Paper/index.js',
limit: '18.2 KB',
limit: '17.6 KB',
},
{
name: 'The size of all the material-ui modules.',
webpack: true,
path: 'packages/material-ui/build/index.js',
limit: '93.2 KB',
limit: '92.7 KB',
},
{
name: 'The main docs bundle',
Expand Down
2 changes: 0 additions & 2 deletions CHANGELOG.md
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
2 changes: 1 addition & 1 deletion docs/scripts/buildApi.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 (.*)/;

Expand Down
3 changes: 3 additions & 0 deletions docs/src/pages/demos/buttons/CustomizedButtons.js
Original file line number Diff line number Diff line change
Expand Up @@ -60,6 +60,9 @@ const theme = createMuiTheme({
palette: {
primary: green,
},
typography: {
useNextVariants: true,
},
});

function CustomizedInputs(props) {
Expand Down
4 changes: 2 additions & 2 deletions docs/src/pages/getting-started/installation/installation.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down
2 changes: 1 addition & 1 deletion docs/src/pages/style/typography/DeprecatedTypes.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,7 +14,7 @@ function typographyV1Theme(theme) {
return createMuiTheme({
...theme,
typography: {
suppressDeprecationWarnings: true,
...theme.typography,
useNextVariants: false,
},
});
Expand Down
32 changes: 9 additions & 23 deletions docs/src/pages/style/typography/typography.md
Original file line number Diff line number Diff line change
Expand Up @@ -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:

Expand Down Expand Up @@ -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: {
Expand All @@ -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
Expand All @@ -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.
3 changes: 3 additions & 0 deletions examples/cdn/index.html
Original file line number Diff line number Diff line change
Expand Up @@ -43,6 +43,9 @@
dark: colors.green[700],
},
},
typography: {
useNextVariants: true,
},
});

const styles = theme => ({
Expand Down
3 changes: 3 additions & 0 deletions examples/create-react-app-with-flow/src/withRoot.js
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,9 @@ const theme = createMuiTheme({
dark: green[700],
},
},
typography: {
useNextVariants: true,
},
});

function withRoot(Component: ComponentType<*>) {
Expand Down
3 changes: 3 additions & 0 deletions examples/create-react-app-with-jss/src/withRoot.js
Original file line number Diff line number Diff line change
Expand Up @@ -18,6 +18,9 @@ const theme = createMuiTheme({
primary: purple,
secondary: green,
},
typography: {
useNextVariants: true,
},
});

// Create a JSS instance with the default preset of plugins.
Expand Down
3 changes: 3 additions & 0 deletions examples/create-react-app-with-typescript/src/withRoot.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,9 @@ const theme = createMuiTheme({
primary: purple,
secondary: green,
},
typography: {
useNextVariants: true,
},
});

function withRoot<P>(Component: React.ComponentType<P>) {
Expand Down
3 changes: 3 additions & 0 deletions examples/create-react-app/src/withRoot.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ const theme = createMuiTheme({
dark: green[700],
},
},
typography: {
useNextVariants: true,
},
});

function withRoot(Component) {
Expand Down
3 changes: 3 additions & 0 deletions examples/gatsby/src/getPageContext.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@ const theme = createMuiTheme({
dark: green[700],
},
},
typography: {
useNextVariants: true,
},
});

function createPageContext() {
Expand Down
3 changes: 3 additions & 0 deletions examples/nextjs/src/getPageContext.js
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,9 @@ const theme = createMuiTheme({
dark: green[700],
},
},
typography: {
useNextVariants: true,
},
});

function createPageContext() {
Expand Down
3 changes: 3 additions & 0 deletions examples/parcel/src/withRoot.js
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,9 @@ const theme = createMuiTheme({
dark: green[700],
},
},
typography: {
useNextVariants: true,
},
});

function withRoot(Component) {
Expand Down
3 changes: 3 additions & 0 deletions examples/ssr/client.js
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,9 @@ const theme = createMuiTheme({
accent: red,
type: 'light',
},
typography: {
useNextVariants: true,
},
});

// Create a new class name generator.
Expand Down
3 changes: 3 additions & 0 deletions examples/ssr/server.js
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,9 @@ function handleRender(req, res) {
accent: red,
type: 'light',
},
typography: {
useNextVariants: true,
},
});

// Create a new class name generator.
Expand Down
6 changes: 3 additions & 3 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -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}\"",
Expand Down
46 changes: 22 additions & 24 deletions packages/material-ui/src/Button/Button.js
Original file line number Diff line number Diff line change
Expand Up @@ -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 => ({
Expand Down Expand Up @@ -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';
Expand Down Expand Up @@ -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 = {
Expand Down
Loading

0 comments on commit 080be09

Please sign in to comment.