feat(#2302): popover - add table/filter contextual example

[mxsoco]

Awaiting confirmation on Figma link

Added an informational callout:

Filter data in a table:

[netlify]

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

Built without sensitive environment variables

Name	Link
🔨 Latest commit	342c7ad
🔍 Latest deploy log	https://app.netlify.com/projects/abgov-ui-component-docs/deploys/68cc5ca0024dc50008418109
😎 Deploy Preview	https://deploy-preview-391--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: 35 Accessibility: 93 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 project configuration.

[bdfranck]

I looked in the preview deployment...

• ✅ I can see the callout about the popover

- ✅ I can see the table filter example - ✅ When I select the Figma link, I can see the relevant example in Figma

Looks good to me! There's just that one minor comment about the comma to address. 👍

[bdfranck]

I looked at the changes again...

• ✅ I can see the callout on the popover page

• ✅ I see the badge in the "Examples" tab has the correct number of examples.

• ✅ I see the table filter example

Looks good to me! 👍

[twjeffery]

@mxsoco Can we extend the filter example to work with the table? (Filter the table to open and closed results when selected, and show a visual indication of the filter applied and clear action)

We did a similar filter example in code here to reference as helpful: https://design.alberta.ca/components/filter-chip#tab-1#filter-data-in-a-table

For the design and interaction, a filter chip could show up in the same way like this:

Design in Figma for the above design

[mxsoco]

@mxsoco Can we extend the filter example to work with the table? (Filter the table to open and closed results when selected, and show a visual indication of the filter applied and clear action)

We did a similar filter example in code here to reference as helpful: https://design.alberta.ca/components/filter-chip#tab-1#filter-data-in-a-table

For the design and interaction, a filter chip could show up in the same way like this:

Design in Figma for the above design

@twjeffery I can try looking into it. Is there an example anywhere where filtering happens through radio buttons rather than text inputs?

[twjeffery]

@mxsoco Can we extend the filter example to work with the table? (Filter the table to open and closed results when selected, and show a visual indication of the filter applied and clear action)
We did a similar filter example in code here to reference as helpful: design.alberta.ca/components/filter-chip#tab-1#filter-data-in-a-table
For the design and interaction, a filter chip could show up in the same way like this:

Design in Figma for the above design

@twjeffery I can try looking into it. Is there an example anywhere where filtering happens through radio buttons rather than text inputs?

We don't have on in code yet unfortunately, but that's why I was thinking that it would be useful to have. Would you be able to use the same logic in the filter example with the text input and apply it to the radio control?

[twjeffery]

Thanks for putting that together @mxsoco

Right now I see the filter working, and then you kind of get stuck there. It would be nice to also add the ability for the filter chip to clear when clicked, and for the clear button to remove the filters. Really just want to get the basics of that interaction fleshed out for a team to see.

Screen.Recording.2025-08-05.at.9.23.34.AM.mov

Also, let's add these examples to the table and filter chip component pages as well as the popover.

[twjeffery]

Thanks for making those changes @mxsoco, looks good to me now