GridListTileBar add component prop

• This is not a v0.x issue.
• I have searched the issues of this repository and believe that this is not a duplicate.

Expected Behavior 🤔

GridListTileBar should accept TransitionComponent same as Dialog does

function Transition(props) {
  return <Slide direction="up" {...props} />;
}

Current Behavior 😯

GridListTileBar has no animation as seen on https://material-ui.com/demos/grid-list/#grid-list-with-titlebars

Examples 🌈

Gmail

Context 🔦

[adeelibr]

I am so sorry for the late response @oliviertassinari but I didn’t understand your comment. About adding a Component prop since we can have the transition effect without adding this prop.

For this file docs\src\pages\components\grid-list\TitlebarGridList.js. I just wrapped GridListTileBar in Slide component and it works.

Codesandbox https://codesandbox.io/s/material-ui-example-gridlisttitlebar-rstr9

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import GridList from '@material-ui/core/GridList';
import GridListTile from '@material-ui/core/GridListTile';
import GridListTileBar from '@material-ui/core/GridListTileBar';
import ListSubheader from '@material-ui/core/ListSubheader';
import IconButton from '@material-ui/core/IconButton';
import InfoIcon from '@material-ui/icons/Info';
import Slide from '@material-ui/core/Slide';
import tileData from './tileData';

const useStyles = makeStyles(theme => ({
  root: {
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'space-around',
    overflow: 'hidden',
    backgroundColor: theme.palette.background.paper,
  },
  gridList: {
    width: 500,
    height: 450,
  },
  icon: {
    color: 'rgba(255, 255, 255, 0.54)',
  },
}));

export default function TitlebarGridList() {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <GridList cellHeight={180} className={classes.gridList}>
        <GridListTile key="Subheader" cols={2} style={{ height: 'auto' }}>
          <ListSubheader component="div">December</ListSubheader>
        </GridListTile>
        {tileData.map(tile => (
          <GridListTile key={tile.img}>
            <img src={tile.img} alt={tile.title} />
            <Slide direction="up" in mountOnEnter unmountOnExit>
              <GridListTileBar
                title={tile.title}
                subtitle={<span>by: {tile.author}</span>}
                actionIcon={
                  <IconButton aria-label={`info about ${tile.title}`} className={classes.icon}>
                    <InfoIcon />
                  </IconButton>
                }
              />
            </Slide>
          </GridListTile>
        ))}
      </GridList>
    </div>
  );
}

[oliviertassinari]

@adeelibr Oh, right, thanks.