search

eBay / skin

Pure CSS framework designed & developed by eBay for a branded, e-commerce marketplace.
https://ebay.github.io/skin/
MIT License
178 stars 67 forks source link

Ebay-icon-button: add priority levels #2148

Closed randybascue closed 6 months ago

randybascue commented 1 year ago

Summary

Problem: Our icon buttons only come in a single visual treatment, leading to issues when icon buttons are adjacent to quick filters or other buttons.

Solution: Add additional levels to the icon button to match other buttons levels. This update adds a primary, secondary, and tertiary styling, and converts the current treatment to a "borderless" level.

Resources

Figma spec

Use cases

  1. Watchlist
  2. Seller Hub table filtering controls
  3. SRP search filter controls
  4. BLING filter controls
  5. VOD button groups with overflow

image

ArtBlue commented 6 months ago

@randybascue , just a heads up: the smallest spinner button has the spinner icon at 16px, but we don't have a 16px spinner icon. Our spinner variations are 20, 24 and 30. For that variation, I'll be using the smallest icon we have (20) and forcing a 16x16 display using css.

ArtBlue commented 6 months ago

@randybascue , the variations that have the white background; are they supposed to have a transparent background or white?

ArtBlue commented 6 months ago

@randybascue , can you verify the tokens in use for these? Some of the variations look a bit odd in dark mode.

image
ArtBlue commented 6 months ago

@randybascue , can you verify the tokens in use for these? Some of the variations look a bit odd in dark mode.

Actually, I think I may have figured this one out. There was no token defined for the strokes; the color looked to have been hiding in the markup of the stroke. I assume this is just an override on top of the spinner color combinations.

It looks like the stroke had #3665F3 defined with an svg opacity set on it at 40%, which looks to result in #3665f366. This is what it results in:

image

image

Please confirm this is accurate. Thanks!

randybascue commented 6 months ago

@randybascue , just a heads up: the smallest spinner button has the spinner icon at 16px, but we don't have a 16px spinner icon. Our spinner variations are 20, 24 and 30. For that variation, I'll be using the smallest icon we have (20) and forcing a 16x16 display using css.

Ok, sounds good. I'll submit a ticket on our end

randybascue commented 6 months ago

@randybascue , the variations that have the white background; are they supposed to have a transparent background or white?

They should be transparent