Align Filter and Facet button styles

[cchaos]

Fixes #1511

Essentially, this PR aligns the EuiFilterButton styles too look similar to the EuiFacetButton. It also means allowing to pass the "total available filters" when none are selected:

As well as highlight when there are selected filters:

Which meant adding numActiveFilters to EuiFilterButton.

As a reference, this is what the facet buttons look like

---

Typescript

I had originally attempted to convert them to TS, but because they each imported a non-TS'd component or the props of one, I couldn't do it. Maybe someone with better TS chops than me can. But I did make sure the TS def's were up to date so it will be easier to convert down the line.

---

Other

Added some extra props to EuiNotificationBadge:

• size: s, m (default: s)
• color: accent, subdued (default: accent)

I also did some quick updates to EuiAvatar (thicker font weight and font size adjustment) and to EuiIcon so that both do never shrink because of flex.

I also added a global mixin for the text-weight-shifting stuff since we're seeing it more often.

---

Checklist

• This was checked in mobile
• This was checked in IE11
• This was checked in dark mode
• Any props added have proper autodocs
• [ ] Documentation examples were added
• A changelog entry exists and is marked appropriately
• [ ] This was checked for breaking changes and labeled appropriately
• Jest tests were updated or added to match the most common scenarios
• [ ] This was checked against keyboard-only and screenreader scenarios
• [ ] This required updates to Framer X components

[snide]

Reviewed code and loaded locally. Do you think we should start using the active filters now in the default searchbar / table usage. Example here.

[ryankeairns]

What do you think about using an underline to differentiate the active state, as opposed to a heavier weight, so that the line length doesn't grow?

[cchaos]

Do you think we should start using the active filters now in the default searchbar / table usage.

Thought about it, looked at it, abandoned it. Someone more engineery would need to do that bit.

What do you think about using an underline to differentiate the active state

I think the bold weight is a lot easier to notice than an underline and just by way of consistency elsewhere we use underlines to indicate focus state not selected state.

[cchaos]

Ready for another pass @thompsongl

[thompsongl]

🔜