Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

230810 - Item tile framework and components #2133

Open
ratinsl opened this issue Aug 10, 2023 · 12 comments
Open

230810 - Item tile framework and components #2133

ratinsl opened this issue Aug 10, 2023 · 12 comments
Assignees
Labels
design system Requested by the design system size: 2 type: feature
Milestone

Comments

@ratinsl
Copy link

ratinsl commented Aug 10, 2023

Image

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
Copy link
Contributor

agliga commented Jan 19, 2024

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

@agliga agliga added this to the 17.4.0 milestone Mar 21, 2024
@agliga agliga modified the milestones: 17.4.0, 17.5.0 Apr 15, 2024
@ArtBlue ArtBlue moved this from Todo to In Progress in eBayUI Apr 17, 2024
@ArtBlue
Copy link
Contributor

ArtBlue commented Apr 19, 2024

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";

image

@ArtBlue
Copy link
Contributor

ArtBlue commented May 6, 2024

@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 ArtBlue modified the milestones: 17.5.0, 18.0.0 May 6, 2024
@agliga agliga moved this from In Progress to Todo in eBayUI May 14, 2024
@agliga agliga modified the milestones: 18.0.0, 18.1.0 May 14, 2024
@agliga agliga modified the milestones: 18.1.0, 18.2.0 Jun 27, 2024
@ArtBlue
Copy link
Contributor

ArtBlue commented Jun 27, 2024

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
Copy link

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

@ArtBlue
Copy link
Contributor

ArtBlue commented Jun 28, 2024

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 ArtBlue modified the milestones: 18.2.0, 18.3.0 Jul 31, 2024
@agliga agliga added the size: 2 label Aug 21, 2024
@agliga agliga removed this from the 18.3.0 milestone Aug 23, 2024
@ArtBlue
Copy link
Contributor

ArtBlue commented Aug 23, 2024

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
Copy link

namtheho commented Oct 3, 2024

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

@agliga agliga added the design system Requested by the design system label Oct 30, 2024
@agliga agliga added this to the 19.1.0 milestone Jan 31, 2025
@agliga agliga mentioned this issue Jan 31, 2025
6 tasks
@ArtBlue ArtBlue moved this from Todo to In Progress in eBayUI Feb 6, 2025
@ArtBlue ArtBlue moved this from In Progress to Todo in eBayUI Feb 6, 2025
@ratinsl
Copy link
Author

ratinsl commented Feb 8, 2025

@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.

@ArtBlue ArtBlue moved this from Todo to In Progress in eBayUI Feb 12, 2025
@ArtBlue ArtBlue modified the milestones: 19.1.0, 19.2.0 Feb 18, 2025
@ArtBlue ArtBlue moved this from In Progress to Todo in eBayUI Feb 27, 2025
@ArtBlue ArtBlue moved this from Todo to In Progress in eBayUI Feb 28, 2025
@ratinsl
Copy link
Author

ratinsl commented Mar 6, 2025

@ArtBlue here are the figma files:

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

Playbook page in Figma

@ArtBlue
Copy link
Contributor

ArtBlue commented Mar 13, 2025

@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
Copy link
Author

ratinsl commented Mar 14, 2025

  • 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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
design system Requested by the design system size: 2 type: feature
Projects
Status: In Progress
Development

When branches are created from issues, their pull requests are automatically linked.

5 participants