230810 - Item tile framework and components

[ratinsl]

All item tile documentation has been updated on Playbook:
https://playbook.ebay.com/design-system/components/item-tile

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.

[namtheho]

Deprioritized for now. Suggested to bring in the seller team to understand use case.

[ratinsl]

@ArtBlue updated all of the documentation on Playbook to reflect what was asked above.
https://playbook.ebay.com/design-system/components/item-tile

Let me know if there is anything else that needs to be expanded on.

[ratinsl]

@ArtBlue here are the figma files:

Component in FIgma (I think this is the only one you'll need)

Playbook page in Figma

[ArtBlue]

@ratinsl , I'm posting the questions/clarifications I need here for better transparency.

Here are some of the things (so far) I need clarifications on:

1. We're actually not using page-grid for the layout; it's not ideal for internal layouts of repeating elements. The pink lines may be a bit misleading.
2. The item-tiles will be laid out responsively within a container, so we should simply concentrate on the container widths, not screen widths.
3. There's no guidance for 320px - our minimal breakpoint. We will need that.
4. There's also no guidance for anything what appears to be beyond a 768px container. What would wider containers look like?
5. We should probably be explicit about this in Playbook, but is it safe to assume the widths of item-tiles are simply fluid between breakpoints, and they simply expand until the next larger breakpoint prescribes a new set of display rules, if any?
6. Does large/small variation make sense? We’re going to be using fluid elements that will auto-expend in size.
7. Some specs have max 3 lines for Title, others have 2. Which one is it?
8. We are using (under Stacked Attributes) 3px margins under each line. Are we ok with a zoomed view having fonts much larger, but spacing not properly relative to font size?
9. I was actually looking forward to having more details in the Figma like for previous projects. The Item Tile Figma (https://www.figma.com/design/zEBdEhbonrBOGzZ0fXzWvM/eBay-Evo-Design-System?node-id=0-7342&p=f&m=dev) does not have the level of detail that Search field Figma (https://www.figma.com/design/lZ16bn80nnK6XgdURgGosa/Search-field?node-id=1-209&p=f&m=dev) does.

Also, as previously briefly discussed, some of the more eBay proprietary sections will need to be made more generalized. The internals that need to be more specific in terms of custom styling/spacing will need to be built in Business Components. This includes sections, such as price, for example.

[ratinsl]

• Confirming that title text clamps at 3 lines for small screens. And 2 lines for Medium and larger.
• And to use em values for the margins instead of hard px values for zoomed in text