Filter Bar - Githubissues

eBay / skin

Pure CSS framework designed & developed by eBay for a branded, e-commerce marketplace.

https://ebay.github.io/skin/

MIT License

176 stars 66 forks source link

Filter Bar #1927

Open hej-wesley opened 1 year ago

hej-wesley commented 1 year ago

A filter bar is a collection of components that provide controls to give users more agency over their content or data sets.

This page covers principles, controls, behavior scaling for build a filter bar.

Figma LINK

agliga commented 1 year ago

Initial passthrough for this seems to me there are some concerns with this component.

Questions and concerns:

the buttons that live in the filter bar are based on the teams. I assume the page should decide what filtering components, and items should be added.
The end bar is the same, some teams might have search, some might not
The first filter button, what does it do exactly?

If we were to build this, the only thing I could see is us building a resizable bar to allow teams to place what they want in there. We could have the first filter button as the only part of this that we provide and then have a section for users to add filter buttons and another section to add end buttons or something and space them out and resize them properly. But other than that, I don't believe there's anything else for us to build.

hej-wesley commented 1 year ago

Currently we present filters / section level controls in a lot of various ways across the experience. This is a framework a consistent presentation for designer to use.

Yes a lot of this is up to domains.

agliga commented 1 year ago

Lets have a kickoff with this, need some questions answered.

agliga commented 1 year ago

Probably will not do this issue. Will keep it open for now. We need to extract the icon buttons that are present here and create a module for those since those do not exist in skin currently.

agliga commented 4 months ago

Had an initial kickoff. We will do the layout for this. Still waiting on updated design treatment

agliga commented 1 month ago

Will need to build a add new item component, which has the + button on small containers, but on large container shows text as well
Will need to build a search textbox, and have the search button turn into a search textbox. This will need to be built first https://github.com/eBay/skin/issues/2341

We will need to discuss what parts need to be built by skin and be generic enough to be a skin component.

ArtBlue commented 3 weeks ago

I added back the blocked discussion tag because we need to build other internal components first, and we haven't begun to talk about those yet. See Andrew's comment from June 27.