[EUI] Improve EuiFilterButton badge i18n (#5061)

* [setup] Misc variable refactors

- Refactor `activeFilters` to `numActiveFiltersDefined` to be more consistent with existing `numFiltersDefined` var

- pull out showBadge conditional to make reading it a little clearer

- DRY out badgeCount var

* Fix un-i18n'ed conditional active/available strings

- Rather than trying to conditionally chop up the i18n string into parts, it makes more sense (and likely makes for better translations) to have 2 separate labels that render conditionally based on state

+ Switch from i18n render prop to use hook

* [optional] Refactor badge JSX into a separate var to keep badge logic together

- this feels more organized and easy to follow distinct groups of logic to me, but happy to revert if others disagree

* Add changelog entry

CHANGELOG.md

@@ -6,6 +6,7 @@
 - Fixed rerender state issues in `PaginationButton` inside `EuiPagination` ([#5048](https://github.com/elastic/eui/pull/5048))
 - Fixed bug in `euiHeaderAffordForFixed` mixin that was not accounting for situations where `EuiDataGrid` was in full screen mode ([#5054](https://github.com/elastic/eui/pull/5054))
 - Fixed `z-index` styles that were causing `EuiModal` and `EuiFlyout` components to appear behind `EuiDataGrid` when in full screen mode ([#5054](https://github.com/elastic/eui/pull/5054))
+- Fixed untranslated i18n strings for `EuiFilterButton` - adds 2 new tokens and removes old `euiFilterButton.filterBadge` token ([#4750](https://github.com/elastic/eui/pull/5061))
 
 **Theme: Amsterdam**
 

src/components/filter_group/filter_button.tsx

@@ -9,7 +9,7 @@
 import React, { Fragment, FunctionComponent } from 'react';
 import classNames from 'classnames';
 
-import { EuiI18n } from '../i18n';
+import { useEuiI18n } from '../i18n';
 import { EuiNotificationBadge } from '../badge/notification_badge';
 import { EuiButtonEmpty, EuiButtonEmptyProps } from '../button/button_empty';
 
@@ -67,8 +67,8 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
   textProps,
   ...rest
 }) => {
-  // != instead of !== to allow for null and undefined
-  const numFiltersDefined = numFilters != null;
+  const numFiltersDefined = numFilters != null; // != instead of !== to allow for null and undefined
+  const numActiveFiltersDefined = numActiveFilters && numActiveFilters > 0;
 
   const classes = classNames(
     'euiFilterButton',
@@ -91,10 +91,28 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
     textProps && textProps.className
   );
 
-  let activeFilters;
-  if (numActiveFilters && numActiveFilters > 0) {
-    activeFilters = true;
-  }
+  const showBadge = numFiltersDefined || numActiveFiltersDefined;
+  const badgeCount = numActiveFilters || numFilters;
+  const activeBadgeLabel = useEuiI18n(
+    'euiFilterButton.filterBadgeActiveAriaLabel',
+    '{count} active filters',
+    { count: badgeCount }
+  );
+  const availableBadgeLabel = useEuiI18n(
+    'euiFilterButton.filterBadgeAvailableAriaLabel',
+    '{count} available filters',
+    { count: badgeCount }
+  );
+  const badgeContent = showBadge && (
+    <EuiNotificationBadge
+      className="euiFilterButton__notification"
+      size="m"
+      aria-label={hasActiveFilters ? activeBadgeLabel : availableBadgeLabel}
+      color={isDisabled || !hasActiveFilters ? 'subdued' : 'accent'}
+    >
+      {badgeCount}
+    </EuiNotificationBadge>
+  );
 
   let dataText;
   if (typeof children === 'string') {
@@ -113,29 +131,7 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
         {children}
       </span>
 
-      {(numFiltersDefined || activeFilters) && (
-        <EuiI18n
-          token="euiFilterButton.filterBadge"
-          values={{
-            count: numActiveFilters || numFilters,
-            hasActiveFilters: hasActiveFilters ? 'active' : 'available',
-          }}
-          default="{count} {hasActiveFilters} filters"
-        >
-          {(filterBadge: string) => {
-            return (
-              <EuiNotificationBadge
-                className="euiFilterButton__notification"
-                size="m"
-                aria-label={filterBadge}
-                color={isDisabled || !hasActiveFilters ? 'subdued' : 'accent'}
-              >
-                {numActiveFilters || numFilters}
-              </EuiNotificationBadge>
-            );
-          }}
-        </EuiI18n>
-      )}
+      {badgeContent}
     </Fragment>
   );