deprecations

docs/pages/api-docs/image-list-item-bar.md

@@ -31,9 +31,9 @@ The `MuiImageListItemBar` name can be used for providing [default props](/custom
 | <span class="prop-name">actionIcon</span> | <span class="prop-type">node</span> |  | An IconButton element to be used as secondary action target (primary action target is the item itself). |
 | <span class="prop-name">actionPosition</span> | <span class="prop-type">'left'<br>&#124;&nbsp;'right'</span> | <span class="prop-default">'right'</span> | Position of secondary action IconButton. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
+| <span class="prop-name">position</span> | <span class="prop-type">'bottom'<br>&#124;&nbsp;'top'</span> | <span class="prop-default">'bottom'</span> | Position of the title bar. |
 | <span class="prop-name">subtitle</span> | <span class="prop-type">node</span> |  | String or element serving as subtitle (support text). |
 | <span class="prop-name">title</span> | <span class="prop-type">node</span> |  | Title to be displayed on item. |
-| <span class="prop-name">titlePosition</span> | <span class="prop-type">'bottom'<br>&#124;&nbsp;'top'</span> | <span class="prop-default">'bottom'</span> | Position of the title bar. |
 
 The `ref` is forwarded to the root element.
 
@@ -44,8 +44,8 @@ Any other props supplied will be provided to the root element (native element).
 | Rule name | Global class | Description |
 |:-----|:-------------|:------------|
 | <span class="prop-name">root</span> | <span class="prop-name">.MuiImageListItemBar-root</span> | Styles applied to the root element.
-| <span class="prop-name">titlePositionBottom</span> | <span class="prop-name">.MuiImageListItemBar-titlePositionBottom</span> | Styles applied to the root element if `titlePosition="bottom"`.
-| <span class="prop-name">titlePositionTop</span> | <span class="prop-name">.MuiImageListItemBar-titlePositionTop</span> | Styles applied to the root element if `titlePosition="top"`.
+| <span class="prop-name">positionBottom</span> | <span class="prop-name">.MuiImageListItemBar-positionBottom</span> | Styles applied to the root element if `position="bottom"`.
+| <span class="prop-name">positionTop</span> | <span class="prop-name">.MuiImageListItemBar-positionTop</span> | Styles applied to the root element if `position="top"`.
 | <span class="prop-name">rootSubtitle</span> | <span class="prop-name">.MuiImageListItemBar-rootSubtitle</span> | Styles applied to the root element if a `subtitle` is provided.
 | <span class="prop-name">titleWrap</span> | <span class="prop-name">.MuiImageListItemBar-titleWrap</span> | Styles applied to the title and subtitle container element.
 | <span class="prop-name">titleWrapActionPosLeft</span> | <span class="prop-name">.MuiImageListItemBar-titleWrapActionPosLeft</span> | Styles applied to the container element if `actionPosition="left"`.

docs/pages/api-docs/image-list-item.md

@@ -28,8 +28,11 @@ The `MuiImageListItem` name can be used for providing [default props](/customiza
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
+| <span class="prop-name">children</span> | <span class="prop-type">node</span> |  | While you can pass any node as children, the main use case is for an img. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
+| <span class="prop-name">cols</span> | <span class="prop-type">number</span> | <span class="prop-default">1</span> | Width of the item in number of grid columns. |
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'li'</span> | The component used for the root node. Either a string to use a HTML element or a component. |
+| <span class="prop-name">rows</span> | <span class="prop-type">number</span> | <span class="prop-default">1</span> | Height of the item in number of grid rows. |
 
 The `ref` is forwarded to the root element.
 

docs/pages/api-docs/image-list.md

@@ -28,8 +28,12 @@ The `MuiImageList` name can be used for providing [default props](/customization
 
 | Name | Type | Default | Description |
 |:-----|:-----|:--------|:------------|
+| <span class="prop-name required">children<abbr title="required">*</abbr></span> | <span class="prop-type">node</span> |  | Items that will be in the image list. |
 | <span class="prop-name">classes</span> | <span class="prop-type">object</span> |  | Override or extend the styles applied to the component. See [CSS API](#css) below for more details. |
+| <span class="prop-name">cols</span> | <span class="prop-type">number</span> | <span class="prop-default">2</span> | Number of columns. |
 | <span class="prop-name">component</span> | <span class="prop-type">elementType</span> | <span class="prop-default">'ul'</span> | The component used for the root node. Either a string to use a HTML element or a component. |
+| <span class="prop-name">gap</span> | <span class="prop-type">number</span> | <span class="prop-default">4</span> | The gap between items in `px`. |
+| <span class="prop-name">rowHeight</span> | <span class="prop-type">number<br>&#124;&nbsp;'auto'</span> | <span class="prop-default">180</span> | The height of one row in `px`. |
 
 The `ref` is forwarded to the root element.
 

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

@@ -3,6 +3,7 @@ import { isFragment } from 'react-is';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
+import deprecatedPropType from '../utils/deprecatedPropType';
 
 export const styles = {
   /* Styles applied to the root element. */
@@ -18,17 +19,22 @@ export const styles = {
 
 const ImageList = React.forwardRef(function ImageList(props, ref) {
   const {
-    rowHeight = 180,
+    cellHeight,
     children,
     classes,
     className,
     cols = 2,
     component: Component = 'ul',
-    gap = 4,
+    gap: gapProp = 4,
+    rowHeight :rowHeightProp = 180,
+    spacing,
     style,
     ...other
   } = props;
 
+  const gap = spacing || gapProp;
+  const rowHeight = cellHeight || rowHeightProp;
+
   return (
     <Component
       className={clsx(classes.root, className)}
@@ -69,29 +75,25 @@ const ImageList = React.forwardRef(function ImageList(props, ref) {
 });
 
 ImageList.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
   /**
-   * @ignore
+   * Items that will be in the image list.
    */
-  rowHeight: PropTypes.oneOfType([PropTypes.oneOf(['auto']), PropTypes.number]),
+  children: PropTypes.node.isRequired,
   /**
    * @ignore
    */
-  children: PropTypes.node,
+  cellHeight: deprecatedPropType(PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])]), 'Use the `rowHeight` prop instead.'),
   /**
    * Override or extend the styles applied to the component.
    * See [CSS API](#css) below for more details.
    */
-  classes: PropTypes.object,
+  classes: PropTypes.object.isRequired,
   /**
    * @ignore
    */
   className: PropTypes.string,
   /**
-   * @ignore
+   * Number of columns.
    */
   cols: PropTypes.number,
   /**
@@ -100,9 +102,17 @@ ImageList.propTypes = {
    */
   component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
   /**
-   * @ignore
+   * The gap between items in `px`.
    */
   gap: PropTypes.number,
+  /**
+   * The height of one row in `px`.
+   */
+  rowHeight: PropTypes.oneOfType([PropTypes.number, PropTypes.oneOf(['auto'])]),
+  /**
+   * @ignore
+   */
+  spacing: deprecatedPropType(PropTypes.number, 'Use the `rowHeight` prop instead.'),
   /**
    * @ignore
    */

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

@@ -119,12 +119,8 @@ const ImageListItem = React.forwardRef(function ImageListItem(props, ref) {
 });
 
 ImageListItem.propTypes = {
-  // ----------------------------- Warning --------------------------------
-  // | These PropTypes are generated from the TypeScript type definitions |
-  // |     To update them edit the d.ts file and run "yarn proptypes"     |
-  // ----------------------------------------------------------------------
   /**
-   * @ignore
+   * While you can pass any node as children, the main use case is for an img.
    */
   children: PropTypes.node,
   /**
@@ -137,7 +133,7 @@ ImageListItem.propTypes = {
    */
   className: PropTypes.string,
   /**
-   * @ignore
+   * Width of the item in number of grid columns.
    */
   cols: PropTypes.number,
   /**
@@ -146,7 +142,7 @@ ImageListItem.propTypes = {
    */
   component: PropTypes /* @typescript-to-proptypes-ignore */.elementType,
   /**
-   * @ignore
+   * Height of the item in number of grid rows.
    */
   rows: PropTypes.number,
 };

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

@@ -2,6 +2,7 @@ import * as React from 'react';
 import PropTypes from 'prop-types';
 import clsx from 'clsx';
 import withStyles from '../styles/withStyles';
+import deprecatedPropType from '../utils/deprecatedPropType';
 
 export const styles = (theme) => ({
   /* Styles applied to the root element. */
@@ -75,10 +76,12 @@ const ImageListItemBar = React.forwardRef(function ImageListItemBar(props, ref)
     className,
     subtitle,
     title,
-    position = 'bottom',
+    position: positionProp = 'bottom',
+    titlePosition,
     ...other
   } = props;
 
+  const position = titlePosition || positionProp;
   const actionPos = actionIcon && actionPosition;
 
   return (
@@ -140,6 +143,10 @@ ImageListItemBar.propTypes = {
    * @ignore
    */
   className: PropTypes.string,
+  /**
+   * Position of the title bar.
+   */
+  position: PropTypes.oneOf(['bottom', 'top']),
   /**
    * String or element serving as subtitle (support text).
    */
@@ -149,9 +156,9 @@ ImageListItemBar.propTypes = {
    */
   title: PropTypes.node,
   /**
-   * Position of the title bar.
+   * @ignore
    */
-  position: PropTypes.oneOf(['bottom', 'top']),
+  titlePosition: deprecatedPropType(PropTypes.oneOf(['bottom', 'top']), 'Use the `position` prop instead.'),
 };
 
 export default withStyles(styles, { name: 'MuiImageListItemBar' })(ImageListItemBar);