230810 - Item tile framework and components

[ratinsl]

DS has constructed a new item tile framework and would like to partner with the skin team in building out item tile components. Below you will find links to the KO item tile framework deck we shared, as well as the updated documentation page.

• Item tile framework deck
• Item tile documentation

Please reach out to Jeremy and I with any questions.

Best, Ryan

[agliga]

Need to verify if we can use grid layout to align the title and price elements.

[ArtBlue]

I verified that display: grid can be used with grid-template-areas "cells" to accomplish the layout. The most flexible layout appears to be an outer flex for the item tiles and a grid display for each item tile.

The solution will involve something along the lines of:

grid-template-rows: auto 25px 60px 1fr;
grid-template-areas:
    "image"
    "signal"
    "title"
    "highlight";

[ArtBlue]

@ratinsl , I'm punting this for now. The DS specs are not feasible in some instances and they generally need to be more responsive-centric and less pixel-prescriptive. We can discuss offline.

[ArtBlue]

Hey, @ratinsl , to start this issue, we'll need the number of item tiles to display per row before wrapping to next line. Once those specs are defined, we can start this. This is related to the discussion we had previously about responsive elements that repeat. The minimum and maximum widths of the item tiles should also not block the item tiles from being fluid enough with the rules you put in place.

[randybascue]

I'm assuming we can update the specs to match the toggle button. I can try helping there.

[ArtBlue]

I'm assuming we can update the specs to match the toggle button. I can try helping there.

Thanks, @randybascue . Yes, it would be similar to what you did with toggle-button-group.

[ArtBlue]

Ideally, before doing this or alongside this issue, it would be great to abstract the responsive group items/row handling into an abstract module (initially used in toggle-button-group) so we can use it with other repeating components.