feat(#1979) table with global filters examples

[BumbleB2na]

New example: Filter data in a table

2025-04-11-filter-table-example.mp4

Filters: When there are no active filters then it will show all table rows. This follows a "global filters" pattern that reduces complexity/cognitive load for users by allowing them to filter a data table on any column they want. Filters are each applied using AND conditions, filtering out table rows that do not match all filter criteria.

Updated example: Create a chip through typing

2025-04-21-typed-chip-example.mp4

[netlify]

✅ Deploy Preview for abgov-ui-component-docs ready!

Name	Link
🔨 Latest commit	f0f4c0d
🔍 Latest deploy log	https://app.netlify.com/sites/abgov-ui-component-docs/deploys/68096a44c1d1bb0008b0efdf
😎 Deploy Preview	https://deploy-preview-340--abgov-ui-component-docs.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.
Lighthouse	1 paths audited Performance: 39 Accessibility: 92 Best Practices: 100 SEO: 83 PWA: - View the detailed breakdown and full score reports

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[twjeffery]

@BumbleB2na

The examples look good, just a couple things to change:

• adjust the spacing between the filter input, filters, and the table - reference Figma design here
• don't disable the button, it goes against out design guidelines for accessibility reasons we avoid disabled buttons, and instead validate to guide the user when needed

Additional to consider: if this example is a best practice solution for wrapping layout when more filters are added than the parent container width

[twjeffery]

@BumbleB2na the changes look good to me. Now that we have adjusted the example Filter data in a table, the example above it should be updated as well for layout consistency.

• Update the Typed Chips Example example as shown here in Figma: https://www.figma.com/design/aeIJGExcpx9ecqnIVwImi1/Component-examples?node-id=95-402226&t=aP3xvoJDaX3GrL9W-4

• change example title to: Create a chip through typing

• make input full width

• add input label

• have chips stack underneath the input instead of beside, like filter example

• horizontal and vertical gap between chips should be 8px/space-XS

[twjeffery]

@BumbleB2na All looks great! Thanks for making those changes.

One more small thing I noticed that might be worth changing while we're on it: I appreciate the error message on duplicate filter, that's a really good touch. Can we change the error message itself to be: "Enter a unique filter"? We have a lot of guidelines on content design for error messages, it's a good opportunity to show that as well through this example.

[BumbleB2na]

@vanessatran-ddi ready for review

[vanessatran-ddi]

@BumbleB2na I have the following feedbacks:
(2nd one if it is a bug on Angular, then we can create an issue and consider the 2nd feedback solved)

testing feedback:

• Create a chip through typing example, old angular code
  onChange should be _change, onClick should be _click

• Create a chip through typing example, new angular code
  I tried to press Enter but it doesn't add any chip. I don't know if it is an issue with goab onKeyPress or the code itself

Stackblitz link: https://stackblitz.com/~/github.com/vanessatran-ddi/ui-components-angular-sandbox/tree/alpha?file=src/app/filter-chip/filter-chip-typing-example.component.html

[BumbleB2na]

• Create a chip through typing example, new angular code
  I tried to press Enter but it doesn't add any chip. I don't know if it is an issue with goab onKeyPress or the code itself

@vanessatran-ddi in your stackblitz package.json update to "@abgov/angular-components": "4.3.0-alpha.1" and it should work. This was recently fixed in angular and is in pre-release

[vanessatran-ddi]

QA Passed. Tag @chrisolsen for his review. 😌