4.12.2: GridListTile and GridListTitleBar deprecation warnings incorrect

[robcaldecott]

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

When rendering a GridListTile a console warning suggests to import and use ImageListTile instead but this is incorrect: you actually need to import ImageListItem.

The same issue exists for GridListTileBar: you are warned to use ImageListTileBar when actually you need to use ImageListItemBar.

Expected Behavior 🤔

The deprecation warnings need to be updated else you end up importing undefined components. :)

Steps to Reproduce 🕹

The following codesandbox exhibits the warnings:

https://codesandbox.io/s/nervous-hooks-oigoe?file=/src/App.js

Your Environment 🌎

`npx @material-ui/envinfo`

  System:
    OS: macOS 10.15.7
  Binaries:
    Node: 14.17.0 - ~/.nvm/versions/node/v14.17.0/bin/node
    Yarn: Not Found
    npm: 6.14.13 - ~/.nvm/versions/node/v14.17.0/bin/npm
  Browsers:
    Chrome: 92.0.4515.107
    Edge: Not Found
    Firefox: 89.0.2
    Safari: 14.0.2
  npmPackages:
    @emotion/styled:  10.0.27 
    @material-ui/core: ^4.12.2 => 4.12.2 
    @material-ui/icons: ^4.11.2 => 4.11.2 
    @material-ui/lab: ^4.0.0-alpha.60 => 4.0.0-alpha.60 
    @material-ui/pickers: ^3.3.10 => 3.3.10 
    @material-ui/styles:  4.11.4 
    @material-ui/system:  4.12.1 
    @material-ui/types:  5.1.0 
    @material-ui/utils:  4.11.2 
    @types/react:  17.0.0 
    react: ^17.0.2 => 17.0.2 
    react-dom: ^17.0.2 => 17.0.2 
    typescript:  4.2.4 

[mnajdova]

Thanks the for the report. Correct, we need to fix the warnings. The following diff should do it:

index 10a3cb6fef..15775d5662 100644
--- a/packages/material-ui/src/GridListTile/GridListTile.d.ts
+++ b/packages/material-ui/src/GridListTile/GridListTile.d.ts
@@ -12,8 +12,8 @@ export interface GridListTileTypeMap<P = {}, D extends React.ElementType = 'li'>
 /**
  * <E2><9A><A0><EF><B8><8F> The GridList component was renamed to ImageList to align with the current Material Design naming.
  *
- * You should use `import { ImageListTile } from '@material-ui/core'`
- * or `import ImageListTile from '@material-ui/core/ImageListTile'`.
+ * You should use `import { ImageListItem } from '@material-ui/core'`
+ * or `import ImageListItem from '@material-ui/core/ImageListItem'`.
  * API:
  *
  * - [GridListTile API](https://material-ui.com/api/grid-list-tile/)
diff --git a/packages/material-ui/src/GridListTile/GridListTile.js b/packages/material-ui/src/GridListTile/GridListTile.js
index 5e6bf88df3..189bacfb82 100644
--- a/packages/material-ui/src/GridListTile/GridListTile.js
+++ b/packages/material-ui/src/GridListTile/GridListTile.js
@@ -70,8 +70,8 @@ let warnedOnce = false;
 /**
  * <E2><9A><A0><EF><B8><8F> The GridList component was renamed to ImageList to align with the current Material Design naming.
  *
- * You should use `import { ImageListTile } from '@material-ui/core'`
- * or `import ImageListTile from '@material-ui/core/ImageListTile'`.
+ * You should use `import { ImageListItem } from '@material-ui/core'`
+ * or `import ImageListItem from '@material-ui/core/ImageListItem'`.
  */
 const GridListTile = React.forwardRef(function GridListTile(props, ref) {
   if (process.env.NODE_ENV !== 'production') {
@@ -79,10 +79,10 @@ const GridListTile = React.forwardRef(function GridListTile(props, ref) {
       warnedOnce = true;
       console.error(
         [
-          'Material-UI: The GridListTile component was renamed to ImageListTile to align with the current Material Design naming.',
+          'Material-UI: The GridListTile component was renamed to ImageListItem to align with the current Material Design naming.',
           '',
-          "You should use `import { ImageListTile } from '@material-ui/core'`",
-          "or `import ImageListTile from '@material-ui/core/ImageListTile'`.",
+          "You should use `import { ImageListItem } from '@material-ui/core'`",
+          "or `import ImageListItem from '@material-ui/core/ImageListItem'`.",
         ].join('\n'),
       );
     }
diff --git a/packages/material-ui/src/GridListTileBar/GridListTileBar.d.ts b/packages/material-ui/src/GridListTileBar/GridListTileBar.d.ts
index 3d46b07e7f..bbb528c5f7 100644
--- a/packages/material-ui/src/GridListTileBar/GridListTileBar.d.ts
+++ b/packages/material-ui/src/GridListTileBar/GridListTileBar.d.ts
@@ -39,10 +39,10 @@ export type GridListTileBarClassKey =
   | 'actionIconActionPosLeft';

 /**
- * <E2><9A><A0><EF><B8><8F> The GridListTileBar component was renamed to ImageListTileBar to align with the current Material Design naming.
+ * <E2><9A><A0><EF><B8><8F> The GridListTileBar component was renamed to ImageListItemBar to align with the current Material Design naming.
  *
- * You should use `import { ImageListTileBar } from '@material-ui/core'`
- * or `import ImageListTileBar from '@material-ui/core/ImageListTileBar'`.
+ * You should use `import { ImageListItemBar } from '@material-ui/core'`
+ * or `import ImageListItemBar from '@material-ui/core/ImageListItemBar'`.
  * API:
  *
  * - [GridListTileBar API](https://material-ui.com/api/grid-list-tile-bar/)
diff --git a/packages/material-ui/src/GridListTileBar/GridListTileBar.js b/packages/material-ui/src/GridListTileBar/GridListTileBar.js
index a4df9aff8e..7417d6e45a 100644
--- a/packages/material-ui/src/GridListTileBar/GridListTileBar.js
+++ b/packages/material-ui/src/GridListTileBar/GridListTileBar.js
@@ -70,10 +70,10 @@ export const styles = (theme) => ({
 let warnedOnce = false;

 /**
- * <E2><9A><A0><EF><B8><8F> The GridListTileBar component was renamed to ImageListTileBar to align with the current Material Design naming.
+ * <E2><9A><A0><EF><B8><8F> The GridListTileBar component was renamed to ImageListItemBar to align with the current Material Design naming.
  *
- * You should use `import { ImageListTileBar } from '@material-ui/core'`
- * or `import ImageListTileBar from '@material-ui/core/ImageListTileBar'`.
+ * You should use `import { ImageListItemBar } from '@material-ui/core'`
+ * or `import ImageListItemBar from '@material-ui/core/ImageListItemBar'`.
  */
 const GridListTileBar = React.forwardRef(function GridListTileBar(props, ref) {
   if (process.env.NODE_ENV !== 'production') {
@@ -81,10 +81,10 @@ const GridListTileBar = React.forwardRef(function GridListTileBar(props, ref) {
       warnedOnce = true;
       console.error(
         [
-          'Material-UI: The GridListTileBar component was renamed to ImageListTileBar to align with the current Material Design naming.',
+          'Material-UI: The GridListTileBar component was renamed to ImageListItemBar to align with the current Material Design naming.',
           '',
-          "You should use `import { ImageListTileBar } from '@material-ui/core'`",
-          "or `import ImageListTileBar from '@material-ui/core/ImageListTileBar'`.",
+          "You should use `import { ImageListItemBar } from '@material-ui/core'`",
+          "or `import ImageListItemBar from '@material-ui/core/ImageListItemBar'`.",
         ].join('\n'),
       );
     }