diff --git a/CHANGELOG.md b/CHANGELOG.md index e7d43e967fe..18abe6baac8 100644 --- a/CHANGELOG.md +++ b/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** diff --git a/src/components/filter_group/filter_button.tsx b/src/components/filter_group/filter_button.tsx index bbbc420d107..a087cef5110 100644 --- a/src/components/filter_group/filter_button.tsx +++ b/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 = ({ 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 = ({ 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 && ( + + {badgeCount} + + ); let dataText; if (typeof children === 'string') { @@ -113,29 +131,7 @@ export const EuiFilterButton: FunctionComponent = ({ {children} - {(numFiltersDefined || activeFilters) && ( - - {(filterBadge: string) => { - return ( - - {numActiveFilters || numFilters} - - ); - }} - - )} + {badgeContent} );