vtex / shoreline

VTEX Design System for back-office experiences. Currently available for internal usage at VTEX.
https://shoreline.vtex.com
24 stars 1 forks source link

FilterItem: `value` prop #1505

Open rafarubim opened 8 months ago

rafarubim commented 8 months ago

Support or Feedback

Context

Shoreline's component FilterItem receives a value and a children prop (it works like the <select>/<option> HTML tags).

image

The children text is presented at each of the Filter popover options. But after an option is "selected" then "applied", the value prop is what is actually shown by the Filter button (in the following image, look at the Roles: 123 text):

image

Suggestion

My suggestion is to change this behavior, to show the children prop text instead:

image

This would make the <Filter>/<FilterOption> behavior work more like HTML's <select>/<option> tags, making the children prop related to the visuals and the value prop related to React's controlled state. This would allow us to use ID strings in the value prop without harming UI visuals - and without constantly converting IDs<=>strings within controlled filters.

Additional Suggestion

If the previous suggestion is accepted, I would also suggest accepting the type number in the value prop, so there's no need for constant conversion from/to numeric IDs (id.toString()/Number.parseInt(value, 10)).``

matheusps commented 8 months ago

I agree with the suggestion for the children! Regarding numbers, I don't. I think that is better to stick with string, which is the standard for inputs in HTML, and convert to a number if you need to.

davicostalf commented 2 months ago

@matheusps can you update the issue title with a definition of what should be done?