Filter Bar - new component

[dchyun]

📌 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

• AdvancedTable demo
• FilterBar showcase
• AdvancedTable showcase

🛠️ 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.

[github-actions]

📦 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