Add filter quantity badge on mobile

[pedrobernardina]

What problem are you trying to solve?.

At the search page, where products are shown, the user can apply different filters in order to get better results. On desktop, selected filters are displayed on the left side of the screen, and users always know how many filters they've applied.

On mobile, the filters menu is inside a drawer, that is toggled by clicking a button. However, there is no indication if there's any active filter, forcing users to open the drawer in order to know how many filters they have applied.

Describe the solution you'd like

On mobile, we'd like to have a badge on top of the filters button, similar to what we have on MinicartIconButton, indicating how many filters the user has applied. It can be an optional prop, so it doesn't change the behaviour of other stores.

Why do you think this feature should be available to all stores?

Mobile users would have a better user experience.

Describe alternatives you've considered

We read the docs and code of FilterNavigation.v3 to see if there was any way of enabling the desired behaviour, but there is none.

[pedrobernardina]

We've opened a pull request.

https://github.com/vtex-apps/search-result/pull/566

[igorbrasileiro]

Your proposal looks good, @pedrobernardina! Thank you

[pedrobernardina]

Implemented in https://github.com/vtex-apps/search-result/pull/566