[utils] Drop componentPropType in favor of PropTypes.elementType (#14602

) ### Breaking change ```diff -import { componentPropType } from '@material-ui/utils'; +import PropTypes from 'prop-types'; SomeComponent.propTypes = { - component: componentPropType, + component: PropTypes.elementType, } ``` Switched the wording from `Component` to `element type` in the docs. This is more in line with the [flow types](https://github.com/facebook/flow/blob/master/website/en/docs/react/types.md#toc-react-elementtype) and now `prop-types`.
mui · Feb 21, 2019 · 7a7e8c9 · 7a7e8c9
1 parent 415cbfb
commit 7a7e8c9
Show file tree

Hide file tree

Showing 119 changed files with 133 additions and 324 deletions.
diff --git a/docs/src/modules/utils/generateMarkdown.js b/docs/src/modules/utils/generateMarkdown.js
@@ -156,8 +156,9 @@ function generatePropType(type) {
         return generatePropType(chained.type);
       }
 
-      if (type.raw === 'componentPropType') {
-        return 'Component';
+      // this should be fixed at some point in react-docgen
+      if (type.raw === 'PropTypes.elementType') {
+        return 'element type';
       }
 
       return type.raw;

diff --git a/package.json b/package.json
@@ -151,7 +151,7 @@
     "nyc": "^13.0.0",
     "postcss": "^7.0.0",
     "prettier": "^1.8.2",
-    "prop-types": "^15.6.0",
+    "prop-types": "^15.7.2",
     "puppeteer": "^1.5.0",
     "raw-loader": "^1.0.0",
     "react": "^16.8.0",

diff --git a/packages/material-ui-lab/package.json b/packages/material-ui-lab/package.json
@@ -42,7 +42,7 @@
     "@material-ui/utils": "^4.0.0-alpha.0",
     "clsx": "^1.0.2",
     "keycode": "^2.1.9",
-    "prop-types": "^15.6.0"
+    "prop-types": "^15.7.2"
   },
   "devDependencies": {},
   "sideEffects": false,

diff --git a/packages/material-ui-lab/src/Slider/Slider.js b/packages/material-ui-lab/src/Slider/Slider.js
@@ -5,7 +5,6 @@ import clsx from 'clsx';
 import withStyles from '@material-ui/core/styles/withStyles';
 import ButtonBase from '@material-ui/core/ButtonBase';
 import { fade } from '@material-ui/core/styles/colorManipulator';
-import { componentPropType } from '@material-ui/utils';
 import clamp from '../utils/clamp';
 
 export const styles = theme => {
@@ -616,7 +615,7 @@ Slider.propTypes = {
    * The component used for the root node.
    * Either a string to use a DOM element or a component.
    */
-  component: componentPropType,
+  component: PropTypes.elementType,
   /**
    * If `true`, the slider will be disabled.
    */

diff --git a/packages/material-ui-lab/src/SpeedDial/SpeedDial.js b/packages/material-ui-lab/src/SpeedDial/SpeedDial.js
@@ -3,7 +3,6 @@ import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import keycode from 'keycode';
 import warning from 'warning';
-import { componentPropType } from '@material-ui/utils';
 import { withStyles } from '@material-ui/core/styles';
 import Zoom from '@material-ui/core/Zoom';
 import { duration } from '@material-ui/core/styles/transitions';
@@ -343,7 +342,7 @@ SpeedDial.propTypes = {
   /**
    * The component used for the transition.
    */
-  TransitionComponent: componentPropType,
+  TransitionComponent: PropTypes.elementType,
   /**
    * The duration for the transition, in milliseconds.
    * You may specify a single timeout for all transitions, or individually with an object.

diff --git a/packages/material-ui-styles/package.json b/packages/material-ui-styles/package.json
@@ -51,7 +51,7 @@
     "jss-plugin-props-sort": "^10.0.0-alpha.7",
     "jss-plugin-rule-value-function": "^10.0.0-alpha.7",
     "jss-plugin-vendor-prefixer": "^10.0.0-alpha.7",
-    "prop-types": "^15.6.0",
+    "prop-types": "^15.7.2",
     "warning": "^4.0.1"
   },
   "sideEffects": false,

diff --git a/packages/material-ui-system/package.json b/packages/material-ui-system/package.json
@@ -38,7 +38,7 @@
   "dependencies": {
     "@babel/runtime": "^7.2.0",
     "deepmerge": "^3.0.0",
-    "prop-types": "^15.6.0",
+    "prop-types": "^15.7.2",
     "warning": "^4.0.1"
   },
   "devDependencies": {},

diff --git a/packages/material-ui-utils/package.json b/packages/material-ui-utils/package.json
@@ -37,7 +37,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.2.0",
-    "prop-types": "^15.6.0",
+    "prop-types": "^15.7.2",
     "react-is": "^16.8.0"
   },
   "devDependencies": {},

diff --git a/packages/material-ui-utils/src/componentPropType.js b/packages/material-ui-utils/src/componentPropType.js
diff --git a/packages/material-ui-utils/src/componentPropType.test.js b/packages/material-ui-utils/src/componentPropType.test.js
diff --git a/packages/material-ui-utils/src/index.js b/packages/material-ui-utils/src/index.js
@@ -1,4 +1,3 @@
-export { default as componentPropType } from './componentPropType';
 export { default as chainPropTypes } from './chainPropTypes';
 export { default as exactProp } from './exactProp';
 export { default as getDisplayName } from './getDisplayName';

diff --git a/packages/material-ui/package.json b/packages/material-ui/package.json
@@ -58,7 +58,7 @@
     "jss-vendor-prefixer": "^7.0.0",
     "normalize-scroll-left": "^0.1.2",
     "popper.js": "^1.14.1",
-    "prop-types": "^15.6.0",
+    "prop-types": "^15.7.2",
     "react-event-listener": "^0.6.2",
     "react-transition-group": "^2.2.1",
     "warning": "^4.0.1"

diff --git a/packages/material-ui/src/Avatar/Avatar.js b/packages/material-ui/src/Avatar/Avatar.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 
 export const styles = theme => ({
@@ -123,7 +122,7 @@ Avatar.propTypes = {
    * The component used for the root node.
    * Either a string to use a DOM element or a component.
    */
-  component: componentPropType,
+  component: PropTypes.elementType,
   /**
    * Attributes applied to the `img` element if the component
    * is used to display an image.

diff --git a/packages/material-ui/src/Badge/Badge.js b/packages/material-ui/src/Badge/Badge.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import { capitalize } from '../utils/helpers';
 
@@ -142,7 +141,7 @@ Badge.propTypes = {
    * The component used for the root node.
    * Either a string to use a DOM element or a component.
    */
-  component: componentPropType,
+  component: PropTypes.elementType,
   /**
    * If `true`, the badge will be invisible.
    */

diff --git a/packages/material-ui/src/BottomNavigation/BottomNavigation.js b/packages/material-ui/src/BottomNavigation/BottomNavigation.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { componentPropType } from '@material-ui/utils';
 import warning from 'warning';
 import withStyles from '../styles/withStyles';
 
@@ -76,7 +75,7 @@ BottomNavigation.propTypes = {
    * The component used for the root node.
    * Either a string to use a DOM element or a component.
    */
-  component: componentPropType,
+  component: PropTypes.elementType,
   /**
    * Callback fired when the value changes.
    *

diff --git a/packages/material-ui/src/Breadcrumbs/Breadcrumbs.js b/packages/material-ui/src/Breadcrumbs/Breadcrumbs.js
@@ -2,7 +2,6 @@ import React from 'react';
 import warning from 'warning';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import Typography from '../Typography';
 import BreadcrumbCollapsed from './BreadcrumbCollapsed';
@@ -141,7 +140,7 @@ Breadcrumbs.propTypes = {
    * Either a string to use a DOM element or a component.
    * By default, it maps the variant to a good default headline component.
    */
-  component: componentPropType,
+  component: PropTypes.elementType,
   /**
    * If max items is exceeded, the number of items to show after the ellipsis.
    */

diff --git a/packages/material-ui/src/Button/Button.js b/packages/material-ui/src/Button/Button.js
@@ -3,7 +3,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import { fade } from '../styles/colorManipulator';
 import ButtonBase from '../ButtonBase';
@@ -258,7 +257,7 @@ Button.propTypes = {
    * The component used for the root node.
    * Either a string to use a DOM element or a component.
    */
-  component: componentPropType,
+  component: PropTypes.elementType,
   /**
    * If `true`, the button will be disabled.
    */

diff --git a/packages/material-ui/src/ButtonBase/ButtonBase.js b/packages/material-ui/src/ButtonBase/ButtonBase.js
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import ReactDOM from 'react-dom';
 import clsx from 'clsx';
-import { componentPropType } from '@material-ui/utils';
 import ownerWindow from '../utils/ownerWindow';
 import withStyles from '../styles/withStyles';
 import NoSsr from '../NoSsr';
@@ -348,7 +347,7 @@ ButtonBase.propTypes = {
    * The component used for the root node.
    * Either a string to use a DOM element or a component.
    */
-  component: componentPropType,
+  component: PropTypes.elementType,
   /**
    * If `true`, the base button will be disabled.
    */

diff --git a/packages/material-ui/src/CardContent/CardContent.js b/packages/material-ui/src/CardContent/CardContent.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 
 export const styles = {
@@ -34,7 +33,7 @@ CardContent.propTypes = {
    * The component used for the root node.
    * Either a string to use a DOM element or a component.
    */
-  component: componentPropType,
+  component: PropTypes.elementType,
 };
 
 CardContent.defaultProps = {

diff --git a/packages/material-ui/src/CardHeader/CardHeader.js b/packages/material-ui/src/CardHeader/CardHeader.js
@@ -1,7 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
-import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 import Typography from '../Typography';
 
@@ -114,7 +113,7 @@ CardHeader.propTypes = {
    * The component used for the root node.
    * Either a string to use a DOM element or a component.
    */
-  component: componentPropType,
+  component: PropTypes.elementType,
   /**
    * If `true`, the children won't be wrapped by a Typography component.
    * This can be useful to render an alternative Typography variant by wrapping

diff --git a/packages/material-ui/src/CardMedia/CardMedia.js b/packages/material-ui/src/CardMedia/CardMedia.js
@@ -2,7 +2,6 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import warning from 'warning';
-import { componentPropType } from '@material-ui/utils';
 import withStyles from '../styles/withStyles';
 
 export const styles = {
@@ -63,7 +62,7 @@ CardMedia.propTypes = {
    * Component for rendering image.
    * Either a string to use a DOM element or a component.
    */
-  component: componentPropType,
+  component: PropTypes.elementType,
   /**
    * Image to be displayed as a background image.
    * Either `image` or `src` prop must be specified.