Skip to content

feat(EuiFilterButton): accept percentages in numActiveFilters prop #8705

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
tkajtoch merged 5 commits into from
Jun 3, 2025
Merged

feat(EuiFilterButton): accept percentages in numActiveFilters prop #8705

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
53e2dba
feat(EuiFilterButton): accept percentages in `numActiveFilters` prop
tkajtoch May 8, 2025
431aa2a
chore: add changelog
tkajtoch May 30, 2025
cb96cbb
chore: update EuiFilterButton docs
tkajtoch May 30, 2025
12bae84
chore: fix typo
tkajtoch May 30, 2025
b2dd13b
chore(EuiFilterButton): update `numActiveFilters` prop control to tex…
tkajtoch Jun 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions packages/eui/changelogs/upcoming/8705.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
- Updated EuiFilterButton's `numActiveFilters` prop to accept percentage values
1 change: 1 addition & 0 deletions packages/eui/src/components/filter_group/filter_button.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ const meta: Meta<EuiFilterButtonProps> = {
component: EuiFilterButton as any,
argTypes: {
color: { control: 'select', options: BUTTON_COLORS },
numActiveFilters: { control: 'text' },
},
args: {
// Component defaults
Expand Down
15 changes: 10 additions & 5 deletions packages/eui/src/components/filter_group/filter_button.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -34,10 +34,16 @@ export type EuiFilterButtonProps = {
*/
numFilters?: number;
/**
* Pass the number of selected filters and it will
* add a bright notification badge showing the number
* The number of active (selected) filters.
* The value will be displayed as a bright notification badge.
*
* Accepted values are integers and percentages (e.g., 20%).
* Passing other values is not supported and may break the layout.
*
* @example 10
* @example '20%'
*/
numActiveFilters?: number;
numActiveFilters?: number | string;
Copy link
Contributor

@mgadewoll mgadewoll May 30, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Looking at Storybook, we'll need to set the control type. It currently (wrongly) falls back to object.
We either set it to only string numActiveFilters: { control: 'text' } (which also allows passing numbers - as string) or we'd need to use a radio group to provide fixed examples (example). I'd think using a text field is enough here.

Copy link
Member Author

@tkajtoch tkajtoch Jun 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Fixed in b2dd13b

/**
* Applies a visual state to the button useful when using with a popover.
*/
Expand Down Expand Up @@ -85,8 +91,7 @@ export const EuiFilterButton: FunctionComponent<EuiFilterButtonProps> = ({
...rest
}) => {
const numFiltersDefined = numFilters != null; // != instead of !== to allow for null and undefined
const numActiveFiltersDefined =
numActiveFilters != null && numActiveFilters > 0;
const numActiveFiltersDefined = !!numActiveFilters;

const styles = useEuiMemoizedStyles(euiFilterButtonStyles);
const cssStyles = [
Expand Down
7 changes: 6 additions & 1 deletion packages/website/docs/components/forms/search-and-filter/filter-group.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,12 @@ To provide a long list of grouped filters, we recommend wrapping the filter butt

### Indicating number of filters

By passing a number to `numFilters` you can express the number of filters available. When the user has applied these filter add the prop `hasActiveFilters` as before and this will change the coloring of the indicator. You can also supply a number to `numActiveFilters`which will change the number displayed.
You can use the `numFilters` prop to display the total number of filters
Copy link
Contributor

@weronikaolejniczak weronikaolejniczak Jun 3, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I like this wording much better, thanks for updating! 💚

available and `numActiveFilters` to set the number of currently active filters.
Pass `hasActiveFilters` to visually indicate that there are active filters.

`numActiveFilters` accepts integer numbers. In special cases, you may pass
a percentage value as a string if UX justifies it.

```tsx interactive
import React, { useEffect, useRef, useState } from 'react';
Expand Down