search

material-components / material-components-web

Modular and customizable Material Design UI components for the web
https://material.io/develop/web
MIT License
17.12k stars 2.15k forks source link

[MdcImageList] Masonry currently not useful in majority of real world scenarios #6548

Open fabiocarneiro opened 3 years ago

fabiocarneiro commented 3 years ago

Bug report

Applying the Masonry style to the mdc-image-list component does not work in any scenario apart from a fixed-size list.

Steps to reproduce

  1. Use Masonry style
  2. Append new items to the list
  3. See things jumping around

Actual behavior

There is a single container where all the items go together. When new items are added, the content comes as part of the last column, and since the component tries to equalize the size of all columns, all the columns except the first one are reordered.

Expected behavior

There should be an HTML element container for each column and items should be added to each column alternately.

Screenshots

Frame 1 (6)

allan-chen commented 3 years ago

Hi Fabio,

Leaning towards intended behavior for this one. For clarification, are you requesting an alternate mode of filling up the list where the items are filled row by row, with each column independent of each other layout-wise and the "shortest" column getting the next item?

fabiocarneiro commented 3 years ago

Leaning towards intended behavior for this one

I can understand, but as pointed out, this is hardly useful. The majority of the use-cases will be with lists that grow, and in this case, the visual glitches make it unusable.

I consider this a bug because this is a material library. It certainly violates the material guidelines for Motion. It doesn't feel natural, intentional, or build the right momentum. https://youtu.be/cQzien5H2Do

requesting an alternate mode of filling up the list where the items are filled row by row, with each column independent of each other layout-wise and the "shortest" column getting the next item?

Yes. I think declaring a container for each column and filling the "shortest" container with the new element would make the most sense. It would probably be an issue if the screen aspect ratio changes and you end up with more/fewer columns, such as when switching a mobile device orientation, but that could justify a full redraw.

If the component itself would provide some javascript to make that behavior work or if that would be left to the developer or framework libraries that build on top of MDC, I think either is valid.

Ideally, one would be able to use a single container list and switch some direction property on CSS, but I don't think this is possible. I also saw other Masonry approaches that use position: absolute and calculate such positions with javascript. I think allowing normal flow position options would be beneficial.

dessant commented 3 years ago

@allan-chen, it's not intended behavior, it stems from a misinterpretation of the spec, and the issue has been reported in https://github.com/material-components/material-components-web/issues/2865.

The gist is that it was easier to implement the feature in a broken way by using only CSS, and even after their designer collegues at Google have confirmed that the implementation was wrong, they've kept it because it was easier to maintain.

allan-chen commented 3 years ago

Thanks for the clarification Armin. I'll close #2865 and keep this open as the canonical FR.