Skip to content

FilterBar: Generic filter type enhancements #3591

Merged
dchyun merged 4 commits intomainfrom
dchyun/filter-bar-generic-enhancements
Feb 20, 2026
Merged

FilterBar: Generic filter type enhancements #3591
dchyun merged 4 commits intomainfrom
dchyun/filter-bar-generic-enhancements

Conversation

@dchyun
Copy link
Contributor

@dchyun dchyun commented Feb 11, 2026

📌 Summary

If merged, this PR would improve the flexibility of the FilterBar's generic filter type in the following ways

  • Add support for the data of the filter being an array of values, similar to a multi-select filter
  • Add an onClear callback to the FilterGroup that a consumer can use to reset their content

Generic filter demo preview

🛠️ Detailed description

Currently in the FilterBar component, the generic filter type only supports a single value, and a single filter for each FilterGroup.

'demo-generic': {
  type: 'generic',
  text: 'Generic',
  dismissTagText: 'equals lorem ipsum',
  data: {
    value: 'lorem ipsum',
  },
}

This PR adds support to the generic filter type for having an array of filters, similar to the multi-select filter type.

'demo-generic': {
  type: 'generic',
  text: 'Generic',
  data: [
    { value: '1', label: 'Option 1'},
    { value: '2', label: 'Option 2'}
  ]
}

If filter data such as what is listed above is provided, an applied filters tag will be added for each object inside the data. The format of the tag text will be similar to how the multi-select filter data is displayed.

Screenshot 2026-02-11 at 3 35 27 PM

Additionally, the data type for the generic filter data now includes an optional dismissTagText value which allows the consumer to customize how the text is displayed.

'demo-generic': {
  type: 'generic',
  text: 'Generic',
  data: [
    { value: '1', dismissTagText: 'equals Option 1'},
    { value: '2', dismissTagText: 'equals Option 2'}
  ]
}
Screenshot 2026-02-11 at 3 35 49 PM

An @onClear argument has also been added to the FilterGroup. When the "Clear filter" button is clicked this callback is triggered. This allows a consumer with a generic filter group to have a way of resetting it if the filter group is cleared. For example, if their filter group has an input, they can use the @onClear callback to reset the value of it.

🔗 External links

Jira ticket: HDS-5998


👀 Component checklist

💬 Please consider using conventional comments when reviewing this PR.

📋 PCI review checklist
  • If applicable, I've documented a plan to revert these changes if they require more than reverting the pull request.
  • If applicable, I've worked with GRC to document the impact of any changes to security controls.
    Examples of changes to controls include access controls, encryption, logging, etc.
  • If applicable, I've worked with GRC to ensure compliance due to a significant change to the in-scope PCI environment.
    Examples include changes to operating systems, ports, protocols, services, cryptography-related components, PII processing code, etc.

@vercel
Copy link

vercel bot commented Feb 11, 2026

The latest updates on your projects. Learn more about Vercel for GitHub.

Project Deployment Actions Updated (UTC)
hds-showcase Ready Ready Preview Feb 17, 2026 2:47pm
hds-website Ready Ready Preview Feb 17, 2026 2:47pm

Request Review

{{on "click" this.addExtraName}}
/>
{{/if}}
<HdsTextBody @size="100">
Copy link
Contributor Author

@dchyun dchyun Feb 11, 2026

Choose a reason for hiding this comment

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

[Note] Currently upon click of the "Add name" button the dropdown will close. This issue is being solved in #3571 on the PopoverPrimitive. Once those changes are merged this example will be updated to implement the onFocusOut argument added in that PR.

@dchyun dchyun marked this pull request as ready for review February 13, 2026 15:41
@dchyun dchyun requested a review from a team as a code owner February 13, 2026 15:41
@dchyun dchyun added this to the design-system-components@6.1.0 milestone Feb 13, 2026
@dchyun dchyun requested a review from a team as a code owner February 13, 2026 20:43
@hashibot-hds hashibot-hds added the docs-website Updates to the documentation website label Feb 13, 2026
shleewhite
shleewhite previously approved these changes Feb 16, 2026
Copy link
Contributor

@shleewhite shleewhite left a comment

Choose a reason for hiding this comment

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

functionality looks great! just one nit.

Copy link
Contributor

@jorytindall jorytindall left a comment

Choose a reason for hiding this comment

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

No impact on the Figma components, nice one!

@dchyun dchyun merged commit 4170857 into main Feb 20, 2026
15 checks passed
@dchyun dchyun deleted the dchyun/filter-bar-generic-enhancements branch February 20, 2026 21:15
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Projects

None yet

Development

Successfully merging this pull request may close these issues.

4 participants