[EuiFilterButton] Add isClearable prop #8955
Description
Problem Statement
We're having to re-design input controls in order to introduce them in Discover. In particular we're removing the hover actions and displaying them in a different way. One of this actions is the "clear selections" action. We would like it's new location to be inside the input (in the form of a cross icon, as typically found on inputs).
We're currently hacking a solution for this which results in the clear button placed in an odd location (i.e. after the arrowDown).
Proposed Solution
Implement a isClearable prop in EuiFilterButton so that the component can offer this functionality natively. The clear button should appear after the counter and before the arrowDown.
Use Case
Anywhere where controls are available: Dashboard, Discover and some solution pages.
Value / Impact
Controls are about to land (PR) in our most important application (Discover) and they will get a lot of exposure, we want the UI of these elements to feel polished and clean according to our standards.
Urgency
There's an urgency to release controls in Discover and therefore we're going with the temporary fix but it results in a very odd design. We would like to fix this from within EUI asap.
Do alternatives or workarounds exist?
No
Related code or customizations
Link to Hannah's PR to be pasted here.
Additional context (Optional)