From 522c0419cc235c0e1b4dafb98a99a1b467fe9def Mon Sep 17 00:00:00 2001 From: Olivier Tassinari Date: Thu, 11 Oct 2018 21:48:58 +0200 Subject: [PATCH 1/3] [Typography] Improve the upgrade story --- .size-limit.js | 4 +- CHANGELOG.md | 2 - docs/scripts/buildApi.js | 2 +- .../pages/demos/buttons/CustomizedButtons.js | 3 + .../installation/installation.md | 4 +- .../pages/style/typography/DeprecatedTypes.js | 2 +- docs/src/pages/style/typography/typography.md | 32 ++-- examples/cdn/index.html | 3 + .../src/withRoot.js | 3 + .../create-react-app-with-jss/src/withRoot.js | 3 + .../src/withRoot.tsx | 3 + examples/create-react-app/src/withRoot.js | 3 + examples/gatsby/src/getPageContext.js | 3 + examples/nextjs/src/getPageContext.js | 3 + examples/parcel/src/withRoot.js | 3 + examples/ssr/client.js | 3 + examples/ssr/server.js | 3 + package.json | 6 +- packages/material-ui/src/Button/Button.js | 46 +++--- .../material-ui/src/Typography/Typography.js | 132 ++++++++--------- .../src/Typography/Typography.test.js | 137 ++++-------------- .../src/styles/createTypography.d.ts | 1 - .../src/styles/createTypography.js | 24 +-- .../src/styles/createTypography.test.js | 67 +++------ .../src/styles/typographyMigration.js | 22 --- .../material-ui/src/utils/chainPropType.js | 20 +++ .../src/utils/chainPropType.test.js | 37 +++++ pages/api/button.md | 20 ++- pages/api/typography.md | 52 ++++++- test/karma.conf.js | 1 - test/utils/setup.js | 2 + 31 files changed, 321 insertions(+), 325 deletions(-) delete mode 100644 packages/material-ui/src/styles/typographyMigration.js create mode 100644 packages/material-ui/src/utils/chainPropType.js create mode 100644 packages/material-ui/src/utils/chainPropType.test.js diff --git a/.size-limit.js b/.size-limit.js index 415878b491fd17..34b213519383a3 100644 --- a/.size-limit.js +++ b/.size-limit.js @@ -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', diff --git a/CHANGELOG.md b/CHANGELOG.md index 32329366cc1121..374e0032ab2562 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -35,8 +35,6 @@ This change updates the variant wording to match the one used in the Material De +, ); 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); }); }); diff --git a/packages/material-ui/src/Typography/Typography.js b/packages/material-ui/src/Typography/Typography.js index 611a1f90a268fb..12023f3dd26fd0 100644 --- a/packages/material-ui/src/Typography/Typography.js +++ b/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', diff --git a/packages/material-ui/src/Typography/Typography.test.js b/packages/material-ui/src/Typography/Typography.test.js index 5a9c7687dcaa12..0f5df03f978cc8 100644 --- a/packages/material-ui/src/Typography/Typography.test.js +++ b/packages/material-ui/src/Typography/Typography.test.js @@ -102,13 +102,13 @@ describe('', () => { 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(); }); diff --git a/packages/material-ui/src/internal/svg-icons/README.md b/packages/material-ui/src/internal/svg-icons/README.md index 626e762ed2ef9e..1be78e55145625 100644 --- a/packages/material-ui/src/internal/svg-icons/README.md +++ b/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. diff --git a/packages/material-ui/src/styles/createTypography.js b/packages/material-ui/src/styles/createTypography.js index 46819404f2b14e..6a0f1680438ece 100644 --- a/packages/material-ui/src/styles/createTypography.js +++ b/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, diff --git a/packages/material-ui/src/styles/createTypography.test.js b/packages/material-ui/src/styles/createTypography.test.js index c81de8a78c7911..b2ee587a11f8c3 100644 --- a/packages/material-ui/src/styles/createTypography.test.js +++ b/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(); }); diff --git a/packages/material-ui/src/utils/chainPropType.js b/packages/material-ui/src/utils/chainPropType.js deleted file mode 100644 index 90bed589225459..00000000000000 --- a/packages/material-ui/src/utils/chainPropType.js +++ /dev/null @@ -1,18 +0,0 @@ -function chainPropType(propType, check) { - /* istanbul ignore if */ - if (process.env.NODE_ENV === 'production') { - return () => null; - } - - return function validate(...args) { - const err = check(...args); - - if (err) { - return err; - } - - return propType(...args); - }; -} - -export default chainPropType; diff --git a/packages/material-ui/src/utils/chainPropType.test.js b/packages/material-ui/src/utils/chainPropType.test.js deleted file mode 100644 index 5c2c1e22ce19c6..00000000000000 --- a/packages/material-ui/src/utils/chainPropType.test.js +++ /dev/null @@ -1,45 +0,0 @@ -import { assert } from 'chai'; -import PropTypes from 'prop-types'; -import { mock } from 'sinon'; -import chainPropType from './chainPropType'; - -describe('chainPropType', () => { - const propName = 'children'; - const props = { [propName]: 'some string' }; - const componentName = 'ComponentName'; - const location = 'prop'; - let warning; - - beforeEach(() => { - warning = mock(console).expects('error'); - }); - - afterEach(() => { - warning.restore(); - }); - - it('should have the right shape', () => { - assert.strictEqual(typeof chainPropType, 'function'); - }); - - it('should not warn for supported types', () => { - PropTypes.checkPropTypes( - { [propName]: chainPropType(PropTypes.string, () => null) }, - props, - location, - componentName, - ); - assert.strictEqual(warning.called, false); - }); - - it('should warn for unsupported properties', () => { - PropTypes.checkPropTypes( - { [propName]: chainPropType(PropTypes.string, () => new Error('something is wrong')) }, - props, - location, - componentName, - ); - assert.strictEqual(warning.calledOnce, true); - assert.match(warning.firstCall.args[0], /something is wrong/); - }); -}); diff --git a/packages/material-ui/src/utils/chainPropTypes.js b/packages/material-ui/src/utils/chainPropTypes.js new file mode 100644 index 00000000000000..4b3991e15728b2 --- /dev/null +++ b/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; diff --git a/packages/material-ui/src/utils/chainPropTypes.test.js b/packages/material-ui/src/utils/chainPropTypes.test.js new file mode 100644 index 00000000000000..d06aa845d999a9 --- /dev/null +++ b/packages/material-ui/src/utils/chainPropTypes.test.js @@ -0,0 +1,51 @@ +import { assert } from 'chai'; +import PropTypes from 'prop-types'; +import consoleErrorMock from 'test/utils/consoleErrorMock'; +import chainPropTypes from './chainPropTypes'; + +describe('chainPropTypes', () => { + const props = {}; + const propName = 'children'; + const componentName = 'ComponentName'; + const location = 'prop'; + + beforeEach(() => { + consoleErrorMock.spy(); + }); + + afterEach(() => { + consoleErrorMock.reset(); + }); + + it('should have the right shape', () => { + assert.strictEqual(typeof chainPropTypes, 'function'); + }); + + it('should return null for supported properties', () => { + PropTypes.checkPropTypes( + { + [propName]: chainPropTypes(PropTypes.string, () => null), + }, + props, + location, + componentName, + ); + assert.strictEqual(consoleErrorMock.callCount(), 0); + }); + + it('should return an error for unsupported properties', () => { + PropTypes.checkPropTypes( + { + [propName]: chainPropTypes( + PropTypes.string, + () => new Error(`something is wrong ${Date.now()}`), + ), + }, + props, + location, + componentName, + ); + assert.strictEqual(consoleErrorMock.callCount(), 1); + assert.match(consoleErrorMock.args()[0][0], /something is wrong/); + }); +}); diff --git a/pages/api/button.md b/pages/api/button.md index f64df49f0e43b1..f26ba61ee77cfc 100644 --- a/pages/api/button.md +++ b/pages/api/button.md @@ -30,25 +30,7 @@ import Button from '@material-ui/core/Button'; | href | string |   | The URL to link to when the button is clicked. If defined, an `a` element will be used as the root node. | | mini | bool | false | If `true`, and `variant` is `'fab'`, will use mini floating action button styling. | | size | enum: 'small' |
 'medium' |
 'large'
| 'medium' | The size of the button. `small` is equivalent to the dense button styling. | -| 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; - }, -) | 'text' | The variant to use. __WARNING__: `flat` and `raised` are deprecated. Instead use `text` and `contained` respectively. | +| variant | enum: 'text', 'flat', 'outlined', 'contained', 'raised', 'fab', 'extendedFab'
| 'text' | The variant to use. __WARNING__: `flat` and `raised` are deprecated. Instead use `text` and `contained` respectively. | Any other properties supplied will be spread to the root element ([ButtonBase](/api/button-base/)). diff --git a/pages/api/typography.md b/pages/api/typography.md index e0c60f9e4b8533..963b93fac9974f 100644 --- a/pages/api/typography.md +++ b/pages/api/typography.md @@ -29,57 +29,7 @@ import Typography from '@material-ui/core/Typography'; | internalDeprecatedVariant | bool |   | A deprecated variant is used from an internal component. Users don't need a deprecation warning here if they switched to the v2 theme. They already get the mapping that will be applied in the next major release. | | noWrap | bool | false | If `true`, the text will not wrap, but instead will truncate with an ellipsis. | | paragraph | bool | false | If `true`, the text will have a bottom margin. | -| variant | chainPropType( - PropTypes.oneOf([ - 'h1', - 'h2', - 'h3', - 'h4', - 'h5', - 'h6', - 'subtitle1', - 'subtitle2', - 'body1', - 'body2', - 'caption', - 'button', - 'overline', - 'srOnly', - 'inherit', - // deprecated - 'display4', - 'display3', - 'display2', - 'display1', - 'headline', - 'title', - 'subheading', - ]), - props => { - const deprecatedVariants = [ - 'display4', - 'display3', - 'display2', - 'display1', - 'headline', - 'title', - 'subheading', - ]; - if ( - props.theme.typography.useNextVariants && - !props.internalDeprecatedVariant && - deprecatedVariants.indexOf(props.variant) !== -1 - ) { - return new Error( - 'You are using a deprecated typography variant: ' + - `\`${props.variant}\` that will be removed in the next major release.` + - '\nPlease read the migration guide under https://material-ui.com/style/typography#migration-to-typography-v2', - ); - } - - return null; - }, -) |   | Applies the theme typography styles. Use `body1` as the default value with the legacy implementation and `body2` with the new one. | +| variant | enum: 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'subtitle1', 'subtitle2', 'body1', 'body2', 'caption', 'button', 'overline', 'srOnly', 'inherit', "display4", 'display3', 'display2', 'display1', 'headline', 'title', 'subheading'
|   | Applies the theme typography styles. Use `body1` as the default value with the legacy implementation and `body2` with the new one. | Any other properties supplied will be spread to the root element (native element). diff --git a/test/karma.tests.js b/test/karma.tests.js index 5a6e7726ed837e..cb0997793e227c 100644 --- a/test/karma.tests.js +++ b/test/karma.tests.js @@ -1,6 +1,9 @@ import './utils/performance'; import './utils/init'; +// eslint-disable-next-line no-underscore-dangle +window.__MUI_USE_NEXT_TYPOGRAPHY_VARIANTS__ = true; + const integrationContext = require.context( '../packages/material-ui/test/integration', true, diff --git a/test/utils/consoleErrorMock.js b/test/utils/consoleErrorMock.js index f6bcc9f70fbbb2..61db622ea37ec7 100644 --- a/test/utils/consoleErrorMock.js +++ b/test/utils/consoleErrorMock.js @@ -2,6 +2,19 @@ import { spy } from 'sinon'; +/** + * One alternative to this module is to use something like: + * + * let warning; + * + * beforeEach(() => { + * warning = mock(console).expects('error'); + * }); + * + * afterEach(() => { + * warning.restore(); + * }); + */ class ConsoleErrorMock { consoleErrorContainer; diff --git a/test/utils/setup.js b/test/utils/setup.js index d52789fbfead8a..0fb4344fcaa0e5 100644 --- a/test/utils/setup.js +++ b/test/utils/setup.js @@ -1,6 +1,6 @@ const createDOM = require('./createDOM'); // eslint-disable-next-line no-underscore-dangle -global.__MUI_USE_NEW_TYPOGRAPHY_VARIANTS__ = true; +global.__MUI_USE_NEXT_TYPOGRAPHY_VARIANTS__ = true; createDOM(); require('./init');