Olivier's fix for titlebar below image

mui · Sep 4, 2020 · 0e6b5a3 · 0e6b5a3
1 parent b0d8f11
commit 0e6b5a3
Show file tree

Hide file tree

Showing 3 changed files with 7 additions and 23 deletions.
diff --git a/docs/src/pages/components/image-list/TitlebarBelowImageList.js b/docs/src/pages/components/image-list/TitlebarBelowImageList.js
@@ -3,8 +3,6 @@ import { makeStyles } from '@material-ui/core/styles';
 import ImageList from '@material-ui/core/ImageList';
 import ImageListItem from '@material-ui/core/ImageListItem';
 import ImageListItemBar from '@material-ui/core/ImageListItemBar';
-import IconButton from '@material-ui/core/IconButton';
-import InfoIcon from '@material-ui/icons/Info';
 import itemData from './itemData';
 
 const useStyles = makeStyles({
@@ -43,14 +41,6 @@ export default function TitlebarBelowImageList() {
           <ImageListItemBar
             title={item.title}
             subtitle={<span>by: {item.author}</span>}
-            actionIcon={
-              <IconButton
-                aria-label={`info about ${item.title}`}
-                className={classes.icon}
-              >
-                <InfoIcon />
-              </IconButton>
-            }
             position="below"
           />
         </ImageListItem>

diff --git a/docs/src/pages/components/image-list/TitlebarBelowImageList.tsx b/docs/src/pages/components/image-list/TitlebarBelowImageList.tsx
@@ -3,8 +3,6 @@ import { makeStyles } from '@material-ui/core/styles';
 import ImageList from '@material-ui/core/ImageList';
 import ImageListItem from '@material-ui/core/ImageListItem';
 import ImageListItemBar from '@material-ui/core/ImageListItemBar';
-import IconButton from '@material-ui/core/IconButton';
-import InfoIcon from '@material-ui/icons/Info';
 import itemData from './itemData';
 
 const useStyles = makeStyles({
@@ -43,14 +41,6 @@ export default function TitlebarBelowImageList() {
           <ImageListItemBar
             title={item.title}
             subtitle={<span>by: {item.author}</span>}
-            actionIcon={
-              <IconButton
-                aria-label={`info about ${item.title}`}
-                className={classes.icon}
-              >
-                <InfoIcon />
-              </IconButton>
-            }
             position="below"
           />
         </ImageListItem>

diff --git a/packages/material-ui/src/ImageListItem/ImageListItem.js b/packages/material-ui/src/ImageListItem/ImageListItem.js
@@ -11,14 +11,18 @@ export const styles = {
   root: {
     position: 'relative',
     lineHeight: 0, // Fix masonry item spacing
-    // display: 'flex',
-    // flexDirection: 'column',
   },
   /* Styles applied to an `img` element to ensure it covers the item. */
   img: {
     objectFit: 'cover',
     width: '100%',
-    height: '100%',
+    // height: '100%',
+    flexGrow: 1,
+  },
+    /* Styles applied to the root element if `variant="standard"`. */
+  standard: {
+    display: 'flex', // For titlebar under list item
+    flexDirection: 'column', // For titlebar under list item
   },
   /* Styles applied to the root element if `variant="woven"`. */
   woven: {