[Docs] Filter Bar component #3396

dchyun · 2025-12-02T17:13:15Z

📌 Summary

Adds documentation for the new FilterBar component from #3386

Preview pages

🔗 External links

Jira ticket: HDS-4592

👀 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-12-02T17:13:19Z

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

Project	Deployment	Review	Updated (UTC)
hds-showcase	Ready	Preview	Dec 19, 2025 8:32pm
hds-website	Ready	Preview	Dec 19, 2025 8:32pm

LilithJames-HDS

Looking great, I left some comments and some nitpicky little things

website/docs/components/filter-bar/partials/guidelines/guidelines.md

LilithJames-HDS · 2025-12-10T19:43:59Z

website/docs/components/filter-bar/partials/guidelines/guidelines.md

+
+- For complex query builder features.
+
+## Overlap with the Filter pattern guidance <!--Consider a different headline -->


I conjunction with this, should we have a revision to the Filter Patterns page that leads to this component? Maybe a banner on that page to alert anyone who is looking around and not aware that this is a newly available component

Yes, that's exactly what I was thinking is adding a banner to the Filter Patterns page kind of directing consumers to the component, I just have yet to get that added in

Added this as well

LilithJames-HDS · 2025-12-10T19:57:51Z

website/docs/components/filter-bar/partials/guidelines/guidelines.md

+
+<!-- Should something be included about truncation? -->
+
+## Filter dropdown


It would be helpful to have an image of the entire menu here so consumers can see the left and right panels

Added a basic example

website/docs/components/filter-bar/partials/guidelines/guidelines.md

dchyun · 2025-12-11T18:20:21Z

website/docs/components/filter-bar/partials/guidelines/guidelines.md

@@ -0,0 +1,183 @@
+The Filter Bar is used to apply and display filters to a data set. It is most often used in conjunction with the [Advanced Table](/components/table/advanced-table), but is flexible enough to support different data sets and rendering methods such as in a list or grid of cards.


[todo] We could link this directly to the filter bar examples in the adv table docs once I create those.

Suggested change

The Filter Bar is used to apply and display filters to a data set. It is most often used in conjunction with the [Advanced Table](/components/table/advanced-table), but is flexible enough to support different data sets and rendering methods such as in a list or grid of cards.

The Filter Bar is used to apply and display filters to a data set. It is most often used in conjunction with the [Advanced Table](/components/table/advanced-table?tab=code#filtering), but is flexible enough to support different data sets and rendering methods such as in a list or grid of cards.

This can be linked directly now that I have added the adv table filtering docs

website/docs/components/filter-bar/partials/guidelines/guidelines.md

dchyun · 2025-12-11T18:36:28Z

website/docs/components/filter-bar/partials/guidelines/guidelines.md

+
+If necessary, the default formatting within the Tag can be overidden with custom text. This can be useful if the label of the parameter is an irregular plural, if the parameter reads more naturally with certain punctuation or grammar, or for product-specific reasons.
+
+<!-- @dylan could you help me out a bit with this? -->


[todo] Once I implement this on the dev side to not just be for custom filters we can add in some more specifics if we need to, but I think you covered a lot of it.

Do we want to talk about custom filters at all?

website/docs/components/filter-bar/partials/guidelines/guidelines.md

website/docs/components/filter-bar/partials/specifications/anatomy.md

… more clear

Co-authored-by: Lilith James <[email protected]>

…nes.md Co-authored-by: Dylan Hyun <[email protected]>

dchyun · 2025-12-19T20:35:34Z

website/docs/components/filter-bar/partials/code/component-api.md

+  </C.Property>
+</Doc::ComponentApi>
+
+### Filter Types


[Note] We haven't really documented something like the @filters object where its shape can changed based on the type. I tried laying things out here, but open to other ideas of how to document it.

dchyun · 2025-12-19T20:36:31Z

website/docs/components/filter-bar/partials/accessibility/accessibility.md

@@ -0,0 +1,64 @@
+## Conformance Rating
+
+<Doc::Badge @type="success">Conformant</Doc::Badge>


[Question] @shleewhite is this a correct statement? Also when you have a moment could you review this page?

dchyun · 2025-12-19T20:38:24Z

website/docs/components/table/advanced-table/partials/code/how-to-use.md

@jorytindall do we want to add anything to the AdvTable guidelines on the filtering? Or add anything the filter bar or empty state to the specifications?

dchyun · 2025-12-19T20:43:18Z

website/docs/components/filter-bar/partials/guidelines/guidelines.md

@@ -0,0 +1,183 @@
+The Filter Bar is used to apply and display filters to a data set. It is most often used in conjunction with the [Advanced Table](/components/table/advanced-table), but is flexible enough to support different data sets and rendering methods such as in a list or grid of cards.


Suggested change

The Filter Bar is used to apply and display filters to a data set. It is most often used in conjunction with the [Advanced Table](/components/table/advanced-table), but is flexible enough to support different data sets and rendering methods such as in a list or grid of cards.

The Filter Bar is used to apply and display filters to a data set. It is most often used in conjunction with the [Advanced Table](/components/table/advanced-table?tab=code#filtering), but is flexible enough to support different data sets and rendering methods such as in a list or grid of cards.

This can be linked directly now that I have added the adv table filtering docs

dchyun · 2025-12-19T20:44:05Z

website/docs/components/filter-bar/partials/guidelines/guidelines.md

+
+!!! Callout
+
+The `type` property is available in Figma only. The Ember component can be passed to the [Advanced Table](#add-a-link-when-ready) as a contextual component, or used on it's own in which case the styling will adjust accordingly.


Suggested change

The `type` property is available in Figma only. The Ember component can be passed to the [Advanced Table](#add-a-link-when-ready) as a contextual component, or used on it's own in which case the styling will adjust accordingly.

The `type` property is available in Figma only. The Ember component can be passed to the [Advanced Table](/components/table/advanced-table?tab=code#filtering) as a contextual component, or used on it's own in which case the styling will adjust accordingly.

[todo] Update link to adv table filtering

hashibot-hds added the docs-website Content updates to the documentation website label Dec 2, 2025

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

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

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

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

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

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

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

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

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

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

hashibot-hds added packages/components showcase labels Dec 9, 2025

vercel bot deployed to Preview – hds-showcase December 9, 2025 21:11 View deployment

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

LilithJames-HDS requested changes Dec 10, 2025

View reviewed changes

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

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

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

vercel bot deployed to Preview – hds-website December 10, 2025 22:12 View deployment

dchyun commented Dec 11, 2025

View reviewed changes

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

vercel bot deployed to Preview – hds-website December 12, 2025 01:18 View deployment

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

vercel bot deployed to Preview – hds-website December 12, 2025 22:38 View deployment

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

vercel bot deployed to Preview – hds-website December 12, 2025 23:04 View deployment

dchyun force-pushed the dchyun/filter-bar-component branch from 5515833 to 6d5f0b7 Compare December 17, 2025 15:26

HDS-4592 Filter Bar component docs scaffolding

e3f41f3

jorytindall and others added 19 commits December 17, 2025 09:09

Migrate overview

ad2b057

Migrate usage and guidelines framwork

967ffb5

Further scaffolding outline of guidelines

9bfe9dc

Working through initial guideline docs

362e4a8

Fix typos

6fb1b7b

Add specs and anatomy

d02ef57

Cleanup of the specifications and breakdown of anatomy sections to be…

c339274

… more clear

Fix typo

fdf00d1

Cleaning up and adding to the guidelines

8322651

Fix type

bd7cbed

Continuing work on guidelines

61d6ac0

Cleaning up and refining guidelines

92bad51

Cleaning up anatomy

10c9dfd

Apply suggestions from code review

7c734b1

Co-authored-by: Lilith James <[email protected]>

Add Dropdown image and banner to Filter patterns

9ab4fa1

Update website/docs/components/filter-bar/partials/guidelines/guideli…

2d57a74

…nes.md Co-authored-by: Dylan Hyun <[email protected]>

Starting changes based on feedback.

3f5c3c3

Feedback from initial review

3d7a4de

Further follow-up on cleanup tasks

64d27e1

dchyun force-pushed the dchyun/docs-filter-bar-component branch from e103253 to 64d27e1 Compare December 17, 2025 17:15

hashibot-hds removed packages/components showcase labels Dec 17, 2025

vercel bot deployed to Preview – hds-showcase December 17, 2025 17:17 View deployment

vercel bot deployed to Preview – hds-website December 17, 2025 17:19 View deployment

Feat: FilterBar docs, AdvancedTable filtering & emptyState docs

a93d8b0

vercel bot deployed to Preview – hds-showcase December 19, 2025 20:30 View deployment

vercel bot deployed to Preview – hds-website December 19, 2025 20:32 View deployment

dchyun commented Dec 19, 2025

View reviewed changes


		- For complex query builder features.

		## Overlap with the Filter pattern guidance <!--Consider a different headline -->


		<!-- Should something be included about truncation? -->

		## Filter dropdown

		@@ -0,0 +1,183 @@
		The Filter Bar is used to apply and display filters to a data set. It is most often used in conjunction with the [Advanced Table](/components/table/advanced-table), but is flexible enough to support different data sets and rendering methods such as in a list or grid of cards.


		If necessary, the default formatting within the Tag can be overidden with custom text. This can be useful if the label of the parameter is an irregular plural, if the parameter reads more naturally with certain punctuation or grammar, or for product-specific reasons.

		<!-- @dylan could you help me out a bit with this? -->

		@@ -0,0 +1,64 @@
		## Conformance Rating

		<Doc::Badge @type="success">Conformant</Doc::Badge>


		!!! Callout

		The `type` property is available in Figma only. The Ember component can be passed to the [Advanced Table](#add-a-link-when-ready) as a contextual component, or used on it's own in which case the styling will adjust accordingly.

[Docs] Filter Bar component #3396

Are you sure you want to change the base?

[Docs] Filter Bar component #3396

Uh oh!

Conversation

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

Uh oh!

📌 Summary

🔗 External links

👀 Component checklist

Uh oh!

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

Uh oh!

Uh oh!

LilithJames-HDS left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

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!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

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

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!

4 participants

dchyun commented Dec 2, 2025 •

edited

Loading

vercel bot commented Dec 2, 2025 •

edited

Loading

dchyun Dec 19, 2025 •

edited

Loading