[ImageList] Refactor using CSS grid & React context

[mbrookes]

Goodbye IE11?

• Use CSS grid & columns for layout
• Use CSS object-fit for image placement
• Use React context in place of cloneElement for parent/child sync
• Use react-testing-library for tests

Support:

• Standard image list
• Quilted image list
• Woven image list (basic)
• Masonry image list
• Horizontal scroll Not included in this PR.
• Bar below image

https://material.io/components/image-lists

Preview:

https://deploy-preview-22395--material-ui.netlify.app/components/image-list/

Additional breaking changes

• Rename the GridList spacing prop to gap to align with the CSS attribute.
• Rename the GridList cellHeight prop to rowHeight.
• Add the variant prop to GridList.
• Rename the GridListItemBar titlePosition prop to position. (Note also the related classname changes.)

-<ImageList spacing={8} cellHeight={200}>
  <ImageListItem>
+<ImageList gap={8} rowHeight={200}>
  <ImageListItem>
     <img src="file.jpg" alt="Image title" />
    <ImageListItemBar
-       titlePosition="top"
+       position="top"
       title="Title"
       subtitle="Subtitle"
     />
  </ImageListItem>
</ImageList>

Fix #19221

[mui-pr-bot]

Details of bundle changes

Generated by 🚫 dangerJS against adb9d62

[oliviertassinari]

Goodbye IE11?

Well, it depends on the features we need. There is a potential to make it work: https://css-tricks.com/css-grid-in-ie-debunking-common-ie-grid-misconceptions/. I have used https://autoprefixer.github.io/ in the past when doing a couple of tests with it.

[mbrookes]

I have used https://autoprefixer.github.io/ in the past

object-fit would also need to be polyfilled, but that seems like a fair trade-off if someone must support IE, and won't use the V4 version.

[mnajdova]

We can use https://www.npmjs.com/package/object-fit-images for the polyfilling the object-fit if we need to

[mbrookes]

We can use https://www.npmjs.com/package/object-fit-images for the polyfilling the object-fit if we need to

Yes, I'd found that one too. I think we'd simply document it as a pre-req for using the 5.x image list with IE11.

[mbrookes]

My only outstanding concern is whether ImageListItemBar should be named ImageListItemTitlebar instead. The fact that the demo is called TitlebarImageList suggests that the component name is wrong.

[oliviertassinari]

@mbrookes Anything missing to merge? I guess it comes down to, are we dropping IE 11 for the Image List component and what are the implications?

[mbrookes]

Yep, just wanted to do one more pass over the migration guide to pick up the additional breaking changes, and document IE11 prereqs, then I think we're good to go.

Edit: Also, as mentioned, I'm still wondering whether ImageListItemBar should be ImageListItemTitlebar instead; but perhaps it isn't important.