Filter Bar - new component #3386

dchyun · 2025-11-24T21:51:07Z

📌 Summary

If merged, this PR would add a new FilterBar component to the library, and a FilterBar contextual component to the AdvancedTable.

Related spike PR: #3336

Preview links

🛠️ Detailed description

This PR adds support for filtering data through the new FilterBar component, and adds this as a contextual component to the AdvancedTable.

FilterBar

The FilterBar is a new component to the component library, which supports providing both a set of filter options through a dropdown with various contextual components, and tracking applied filters through the filters argument.

Filter types

The filters argument is used to track the various filters currently applied to a data set. A consumer will pass an object with various filters to this argument, and all filters will be displayed as dismissible tags.

The format of the object for the filters argument also matches the object that is bubbled up to the user when any filters are applied via the onFilter argument.

The following filter types are supported:

single-select
multi-select
numerical
date
datetime
time
custom / generic

The format of the object for the applied filters is as follows:

const FILTERS = {
  'column-single-select': {
    type: 'single-select',
    data: {
      value: '1',
      label: 'Option 1',
    }
  },
  'column-multi-select': {
    type: 'multi-select',
    data: [
      { value: '1', label: 'Option 1' },
      { value: '2', label: 'Option 2' },
    ]
  },
  'column-date': {
    type: 'date',
    data: {
      selector: 'before',
      value: '2025-01-01',
    }
  },
  'search': {
    type: 'search',
    data: {
      value: 'search term',
    }
  },
  'column-custom': {
    type: 'generic',
    dismissTagText: 'contains Custom Filter',
    data: {
      value: 'custom filter',
    },
  },
}

Filter contextual components
The options available for a user to select in the filters dropdown are provided via contextual Dropdown and FilterGroup components.

<HdsFilterBar @filters={{this.filters}} onFilter={{this.onFilter}} as |F|>
  <F.Dropdown as |D|>
    <D.FilterGroup
      @key="column-single-select"
      @text="Single-select"
      @type="single-select"
      as |F|
    >
      <F.Radio @value="1" @label="Option 1" />
      <F.Radio @value="2" @label="Option 2" />
      <F.Radio @value="3" @label="Option 3" />
    </D.FilterGroup>
    <D.FilterGroup
      @key="column-multi-select"
      @text="Multi-select"
      @type="multi-select"
      as |F|
    >
      <F.Checkbox @value="1" @label="Option 1" />
      <F.Checkbox @value="2" @label="Option 2" />
      <F.Checkbox @value="3" @label="Option 3" />
    </D.FilterGroup>
  </F.Dropdown>
</HdsFilterBar>

AdvancedTable

In the AdvancedTable filtering support has been added through a new named block :actions and contextual component FilterBar used inside that block, which uses the new FilterBar component.

Also a new named argument isEmpty and named block :emptyState have been added to support showing a block of content when no data is available. When isEmpty is true, the table body is not rendered, and the content inside the :emptyState is shown.

<HdsAdvancedTable @isEmpty={{this.isTableEmpty}}>
  <:actions as |A|>
    <A.FilterBar @filters={{this.filters}} onFilter={{this.onFilter}} as |F|>
      <F.Dropdown as |D|>
        <D.FilterGroup
          @key="column-single-select"
          @text="Single-select"
          @type="single-select"
          as |F|
        >
          <F.Radio @value="1" @label="Option 1" />
          <F.Radio @value="2" @label="Option 2" />
          <F.Radio @value="3" @label="Option 3" />
        </D.FilterGroup>
      </F.Dropdown>
    </A.FilterBar>
  </:actions>
  <:emptyState>
    <HdsTextDisplay>No data available</HdsTextDisplay>
  </:emptyState>
</HdsAdvancedTable>

📸 Screenshots

Filter Bar in AdvancedTable

AdvancedTable empty state

🔗 External links

Jira ticket: HDS-4591
Figma file: File

👀 Component checklist

Percy was checked for any visual regression
A changelog entry was added via Changesets if needed (see templates here)

💬 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 · 2025-11-24T21:51:11Z

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

Project	Deployment	Preview	Updated (UTC)
hds-showcase	Ready	Preview	Dec 8, 2025 2:24pm
hds-website	Ready	Preview	Dec 8, 2025 2:24pm

github-actions · 2025-11-25T15:14:01Z

📦 RC Packages Published

Latest commit: aaa30cc

Published 1 packages

@hashicorp/design-system-components@5.1.0-rc-20251125211530

yarn up -C @hashicorp/design-system-components@rc

Copilot

Pull request overview

This PR introduces a new FilterBar component to the design system library and integrates it as a contextual component within the AdvancedTable. The FilterBar supports multiple filter types (single-select, multi-select, numerical, date, datetime, time, and generic) and provides both immediate and deferred filtering modes. The AdvancedTable gains new filtering capabilities through an :actions named block and an :emptyState named block for displaying content when no data is available.

Key Changes

Added new FilterBar component with support for multiple filter types and live filtering
Integrated FilterBar as a contextual component in AdvancedTable via new :actions named block
Added isEmpty argument and :emptyState named block to AdvancedTable for empty state handling

Reviewed changes

Copilot reviewed 69 out of 69 changed files in this pull request and generated 2 comments.

Show a summary per file

File	Description
packages/components/src/components/hds/filter-bar/index.ts	Main FilterBar component logic with filter management and state handling
packages/components/src/components/hds/filter-bar/types.ts	TypeScript type definitions for all filter types and data structures
packages/components/src/styles/components/filter-bar.scss	SCSS styles for FilterBar component and subcomponents
packages/components/src/components/hds/filter-bar/tabs/index.ts	Tabs component for organizing filter groups
packages/components/src/components/hds/filter-bar/filter-group/index.ts	FilterGroup component managing individual filter selections
packages/components/src/components/hds/filter-bar/dropdown.ts	Dropdown wrapper for filter selection UI
packages/components/src/components/hds/advanced-table/index.ts	Updated AdvancedTable to support FilterBar integration and empty state
packages/components/src/styles/components/advanced-table.scss	Styles for FilterBar integration and empty state in AdvancedTable
showcase/app/mocks/run-data.ts	Mock data for FilterBar demos and testing
showcase/app/components/page-components/filter-bar/index.gts	Showcase page structure for FilterBar component
showcase/app/components/mock/app/main/generic-advanced-table.gts	Updated demo with FilterBar integration and filtering logic
packages/components/translations/hds/components/filter-bar/en-us.yaml	Translation strings for FilterBar component
packages/components/src/components.ts	Export statements for new FilterBar components
packages/components/src/template-registry.ts	Template registry entries for FilterBar components

Copilot · 2025-12-08T16:13:35Z

packages/components/src/components/hds/filter-bar/index.ts

+  private _dropdownToggleElemenet!: HTMLDivElement;
+  private _appliedFiltersButtonId = 'applied-filters-button-' + guidFor(this);
+  private _appliedFiltersContentId = 'applied-filters-content-' + guidFor(this);
+
+  private _setUpFilterBar = modifier((element: HTMLDivElement) => {
+    this._dropdownToggleElemenet = element.querySelector(


Corrected spelling of 'Elemenet' to 'Element'.

Suggested change

private _dropdownToggleElemenet!: HTMLDivElement;

private _appliedFiltersButtonId = 'applied-filters-button-' + guidFor(this);

private _appliedFiltersContentId = 'applied-filters-content-' + guidFor(this);

private _setUpFilterBar = modifier((element: HTMLDivElement) => {

this._dropdownToggleElemenet = element.querySelector(

private _dropdownToggleElement!: HTMLDivElement;

private _appliedFiltersButtonId = 'applied-filters-button-' + guidFor(this);

private _appliedFiltersContentId = 'applied-filters-content-' + guidFor(this);

private _setUpFilterBar = modifier((element: HTMLDivElement) => {

this._dropdownToggleElement = element.querySelector(

Copilot · 2025-12-08T16:13:35Z

packages/components/src/components/hds/filter-bar/filter-group/index.hbs

+      <div class="hds-filter-bar__filter-group__search">
+        <Hds::Form::TextInput::Base
+          @type="search"
+          placeholder={{hds-t "components.filter-bar.filter-group.search-input-placeholder" default="Search"}}


The translation key is inconsistent with other translation keys in the FilterBar component. It should use the 'hds.components' prefix like other keys (e.g., 'hds.components.filter-bar.filter-group.search-input-placeholder').

Suggested change

placeholder={{hds-t "components.filter-bar.filter-group.search-input-placeholder" default="Search"}}

placeholder={{hds-t "hds.components.filter-bar.filter-group.search-input-placeholder" default="Search"}}

zamoore

Left a bunch of early feedback on the components. Still need to review the docs, styles, and do some QA testing.

Looking really nice!

zamoore · 2025-12-08T17:36:36Z

packages/components/src/components/hds/advanced-table/index.hbs

+<div class="hds-advanced-table__actions-container-wrapper">
+  {{#if (has-block "actions")}}
+    <div class="hds-advanced-table__actions">
+      {{yield (hash FilterBar=(component "hds/filter-bar")) to="actions"}}


[question] Is this actions block used in case we plan to add more yielded components or are we letting users add whatever they'd like here?

It was mainly used for organization since the rest of the component uses named blocks for other sections. It could also open up using more things inside there in the future, but they would probably be other contextual components we control. No need to allow people to add anything in.

Originally I did just have the FilterBar as a default contextual component, but because of the other named blocks a template like this doesn't work.

<HdsAdvancedTable as |T|> <T.FilterBar /> <:body> ... </:body> <HdsAdvancedTable>

The consumer has to use a <:default> named block, which isn't a pattern we've used in any other components.

<HdsAdvancedTable> <:default as |D|> <D.FilterBar /> <:/default> <:body> ... </:body> <HdsAdvancedTable>

I'm good with using a :default block if we want to go that way. This was more so just an organization and consistency choice.

zamoore · 2025-12-08T17:38:07Z

packages/components/src/components/hds/advanced-table/index.hbs

+      {{/if}}
+    {{/unless}}
+
+    {{#if this.isEmpty}}


[question] Could this be an if/else with the condition above it?

zamoore · 2025-12-08T17:40:56Z

packages/components/src/components/hds/advanced-table/index.ts

+    if (isEmpty !== undefined) {
+      return isEmpty;
+    }
+    return false;


[nit]

I think return isEmpty ?? false my be a bit faster to read, but that's just a style thing.

zamoore · 2025-12-08T17:51:45Z

packages/components/src/components/hds/filter-bar/index.ts

+  HdsFilterBarData,
+  HdsFilterBarGenericFilterData,
+} from './types.ts';
+// import HdsDropdown from '../dropdown/index.ts';


zamoore · 2025-12-08T17:53:08Z

packages/components/src/components/hds/filter-bar/index.ts

+
+  @tracked _isExpanded: boolean = this.hasActiveFilters;
+
+  private _dropdownToggleElemenet!: HTMLDivElement;


Suggested change

private _dropdownToggleElemenet!: HTMLDivElement;

private _dropdownToggleElement!: HTMLDivElement;

zamoore · 2025-12-08T21:11:44Z

packages/components/src/components/hds/filter-bar/tabs/tab.ts

+    if (this.nodeIndex !== undefined && typeof onClick === 'function') {
+      onClick(event, this.nodeIndex);
+    } else {
+      return false;


I think we could remove the else block unless you need to return false here.

zamoore · 2025-12-08T21:14:23Z

packages/components/src/components/hds/filter-bar/tabs/panel.ts

+
+export default class HdsFilterBarTabsPanel extends Component<HdsFilterBarTabsPanelSignature> {
+  private _panelId = 'panel-' + guidFor(this);
+  private _elementId?: string;


[question] Is this used?

No think it can be removed

zamoore · 2025-12-08T21:24:53Z

packages/components/src/components/hds/filter-bar/filter-group/index.ts

+        this.internalFilters = newFilter;
+      } else {
+        if (Array.isArray(this.internalFilters)) {
+          this.internalFilters.push(newFilter);


[nit] Prefer non-mutative vhanges

Suggested change

this.internalFilters.push(newFilter);

this.internalFilters = [...this.internalFilters, newFilter];

zamoore · 2025-12-08T21:25:43Z

packages/components/src/components/hds/filter-bar/filter-group/index.ts

+  }
+
+  private onSearch = (event: Event) => {
+    const listItems = this._panelElement.querySelectorAll(


[question] - Can we use the modifier registration pattern here rather than query for elements?

zamoore · 2025-12-08T21:26:33Z

packages/components/src/components/hds/filter-bar/filter-group/index.ts

+        const text = item.textContent.toLowerCase();
+        const searchText = input.value.toLowerCase();
+        if (text.includes(searchText)) {
+          item.classList.remove(


Is there a way we can do this idiomatically in the template?

hashibot-hds added packages/components showcase labels Nov 24, 2025

dchyun force-pushed the dchyun/filter-bar-component branch from a13589e to 2216998 Compare November 24, 2025 21:51

vercel bot deployed to Preview – hds-showcase November 24, 2025 21:53 View deployment

vercel bot deployed to Preview – hds-website November 24, 2025 21:56 View deployment

dchyun added the release-candidate Publishes release candidates to npm label Nov 25, 2025

dchyun added release-candidate Publishes release candidates to npm and removed release-candidate Publishes release candidates to npm labels Nov 25, 2025

vercel bot deployed to Preview – hds-showcase November 25, 2025 21:14 View deployment

dchyun added the release-candidate Publishes release candidates to npm label Nov 25, 2025

vercel bot deployed to Preview – hds-website November 25, 2025 21:16 View deployment

dchyun removed the release-candidate Publishes release candidates to npm label Nov 25, 2025

vercel bot deployed to Preview – hds-showcase December 2, 2025 16:49 View deployment

vercel bot deployed to Preview – hds-website December 2, 2025 16:51 View deployment

dchyun mentioned this pull request Dec 2, 2025

[Docs] Filter Bar component #3396

Draft

5 tasks

vercel bot had a problem deploying to Preview – hds-showcase December 3, 2025 15:58 Failure

dchyun force-pushed the dchyun/filter-bar-component branch from 6078967 to 3b7d553 Compare December 3, 2025 16:00

vercel bot deployed to Preview – hds-showcase December 3, 2025 16:02 View deployment

vercel bot deployed to Preview – hds-website December 3, 2025 16:05 View deployment

vercel bot deployed to Preview – hds-showcase December 4, 2025 14:32 View deployment

vercel bot deployed to Preview – hds-website December 4, 2025 14:34 View deployment

vercel bot deployed to Preview – hds-showcase December 5, 2025 15:53 View deployment

vercel bot deployed to Preview – hds-website December 5, 2025 15:55 View deployment

dchyun added 2 commits December 8, 2025 09:19

SPIKE Adv table filter bar filtering

f381d23

Feat: Add search bar, filters toggle, yielded block

5b9e84f

dchyun added 21 commits December 8, 2025 09:19

Feat: ActionsGeneric block

d1c3425

Feat: Design alignments

237a868

Feat: Custom generic filter type

3e67e30

Fix: Remove numFilters count on dropdown

551dd3a

HDS-4591 Feat: re-organize filter group components

f7c0e07

Chore: Organize styles

7f58801

Chore: Add FilterBar showcase page

09b4938

Feat: Customize selection input dismiss tag text

b9ddb65

Fix: Selection dismiss tag label

25200c8

Fix: Clean up filter bar organization

e106f10

Fix: FilterBar tab focus state styles

cbe5f46

Feat: FilterBar showcase pages

05db345

Fix: Showcase linting and component types clean up

f32c625

Feat: AdvTable showcase filtering examples

f52262f

Feat: Customize search placeholder

ed07ba3

Fix: Linting

a4b9597

Feat: ActionsDropdown component

646f6b3

Fix: Clean up translations

6b76748

Fix: Table empty state styling

3a1dbef

Fix: A11y improvements

358f452

Fix: Date inputs between selector style issue

64c48b9

dchyun force-pushed the dchyun/filter-bar-component branch from fcce535 to 64c48b9 Compare December 8, 2025 14:20

vercel bot deployed to Preview – hds-showcase December 8, 2025 14:22 View deployment

vercel bot deployed to Preview – hds-website December 8, 2025 14:24 View deployment

zamoore self-assigned this Dec 8, 2025

zamoore requested review from Copilot and zamoore December 8, 2025 16:12

zamoore added this to the 5.2.0 milestone Dec 8, 2025

Copilot AI reviewed Dec 8, 2025

View reviewed changes

zamoore reviewed Dec 8, 2025

View reviewed changes

	placeholder={{hds-t "components.filter-bar.filter-group.search-input-placeholder" default="Search"}}
	placeholder={{hds-t "hds.components.filter-bar.filter-group.search-input-placeholder" default="Search"}}


		@tracked _isExpanded: boolean = this.hasActiveFilters;

		private _dropdownToggleElemenet!: HTMLDivElement;

	private _dropdownToggleElemenet!: HTMLDivElement;
	private _dropdownToggleElement!: HTMLDivElement;

	this.internalFilters.push(newFilter);
	this.internalFilters = [...this.internalFilters, newFilter];

Filter Bar - new component #3386

Are you sure you want to change the base?

Filter Bar - new component #3386

Uh oh!

Conversation

dchyun commented Nov 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📌 Summary

🛠️ Detailed description

FilterBar

AdvancedTable

📸 Screenshots

🔗 External links

👀 Component checklist

Uh oh!

vercel bot commented Nov 24, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

github-actions bot commented Nov 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

📦 RC Packages Published

@hashicorp/design-system-components@5.1.0-rc-20251125211530

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull request overview

Key Changes

Reviewed changes

Uh oh!

Copilot AI Dec 8, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Dec 8, 2025

Choose a reason for hiding this comment

Uh oh!

zamoore left a comment

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

3 participants

dchyun commented Nov 24, 2025 •

edited

Loading

vercel bot commented Nov 24, 2025 •

edited

Loading

github-actions bot commented Nov 25, 2025 •

edited

Loading