Implement Grid List Component

[traviskaufman]

Spec reference: https://www.google.com/design/spec/components/grid-lists.html#grid-lists-specs

Copied from google/material-design-lite#4498

[yeelan0319]

Implemented the first prototype, see it in CodePen. Supports:

• Single line footer
• Single line footer with icon on left
• Single line footer with icon on right
• Two line footer
• Two line footer with icon on left and no icon on support text
• Two line footer with icon on right and icon on support text

[yeelan0319]

Next step we need to figure out how grid list item size is defined and if it may have any relationship with grid layout with our designers.

[yeelan0319]

Based on our conversation with the designer this morning, the grid list sounds like

• Grid list cell doesn't necessarily have things to do with Layout grid columns. On the other end, decouple the relationship between this 2 is desirable.
• Grid list container contains Grid list items. The former interact with overall layout (e.g.Layout grid).
• Two patterns are possible here: Grid list container defines how many cells per row it want to have and grid cell size responsive to the screen width changes v.s. grid cell size is defined and occupy the row space provided by grid list container. Both are possible and seems like the former is preferred.

Following up conversation would includes:

• If the grid cell size is responsive, do we have any constraints(e.g: max/min width) to prevent extreme cases (e.g: to preserve text readability)? If we put extra constraints, what shall we sacrifice instead: gutter width? number of cells per row?
• Another following up question is this also makes define different cell per row rule necessary for different screen width, so we need to have some breakpoints. For example it can changes at the same time when layout grid changes from 12 columns to 8 or 4 columns if that make sense. In this case, do we provide default value if user not define their rule for that screen width?
• Do we preserve aspect ratio for the grid list items? If so, is that fixed 1:1/16:9? A set of predefined values? Customizable?

[yeelan0319]

Had another conversation with our designer, there is definitely a lot to figure out, so instead, we will work together to define how the grid list should behave on web.
We will start from the most rigid example - 12 columns with gutter of 8px and I updated the prototype on codepen correspondingly.

Please feel free to left your comments and thought over grid list.

[yeelan0319]

After all the discussion, we decided to line our component with iOS and Android implementation:
User defines the item width and gutter while we provide a reasonable default value so that finding a perfect value by yourself is not a must but an option. Then the items reflow to fill the container and center themselves if there is extra space.

We choose this implementation to align with our current spec and other platform implementation and remain the fixed number of columns as a future option.

Here is the latest prototype