feat(FilterSummaryBar): active-filter summary bar for data grids

[ebellamy-bh]

Ports the bar that anchors every filtered waggleline grid into the design system: "1,204 of 8,911 records — 3 filters active · Clear all".

What it does

• Summarizes filteredCount / totalCount / activeFilterCount with correct pluralization, plus search-only and filters-plus-search states
• Hidden while idle unless showWhenIdle (then reads "all records visible" with no clear action)
• Tinted with the primary accent whenever the view is narrowed; role="status" announces changes to assistive tech
• Every visible string overridable for i18n (recordsLabel, filterLabel/filtersLabel, clearLabel, …)
• Framework-agnostic: filter state lives in the host — pairs with AG Grid, DataVis, or any list

Screenshots

Light	Dark

Provenance

Port of waggleline/app/imports/ui/components/filters/FilterSummaryBar.tsx (used across its AG Grid pages); teal hardcodes → primary tokens, FontAwesome → lucide Filter/X, ml-auto → logical ms-auto.

Testing

• 7 unit tests (idle hide/show, count formatting + pluralization, search states, clear action, i18n overrides)
• 5 stories incl. an interactive add-a-filter demo
• typecheck / lint / format / rtl:scan clean; combined batch suite 651/651

[Copilot]

Pull request overview

Adds a new FilterSummaryBar component to the design system to display an always-on “filtered results” summary for grids/lists (filtered/total counts, active filter count, and search state), with an optional idle display mode.

Changes:

• Introduces FilterSummaryBar React component with styling, accessibility semantics (role="status"), and configurable labels.
• Adds unit tests and Storybook stories (including an interactive demo) for the new component.
• Exposes the component via package exports (src/index.ts) and build entrypoints (tsup.config.ts).

Reviewed changes

Copilot reviewed 6 out of 6 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
tsup.config.ts	Adds build entrypoint for FilterSummaryBar.
src/index.ts	Re-exports FilterSummaryBar from the public package API.
src/components/FilterSummaryBar/index.ts	Barrel export for component + props.
src/components/FilterSummaryBar/FilterSummaryBar.tsx	New summary bar component implementation and public props.
src/components/FilterSummaryBar/FilterSummaryBar.test.tsx	Unit tests covering idle/active states, pluralization, clear action, and label overrides.
src/components/FilterSummaryBar/FilterSummaryBar.stories.tsx	Storybook stories including interactive “add a filter” example.

Suppressed comments (1)

src/components/FilterSummaryBar/FilterSummaryBar.tsx:125

• The combined state renders a hardcoded "+ search" suffix, which is user-visible and not overridable for i18n (and it also differs from the searchActiveLabel text used in the search-only state).

        {hasSearchText && activeFilterCount === 0 && (
          <> &mdash; {searchActiveLabel}</>
        )}
        {hasSearchText && activeFilterCount > 0 && <> + search</>}
        {!isFiltering && showWhenIdle && <> &mdash; {allVisibleLabel}</>}

---

💡 Add a code-review agent skill or configure MCP servers for context-aware, tailored reviews. Learn more in the docs.

[cloudflare-workers-and-pages]

Deploying ui with    Cloudflare Pages

Latest commit:	6b05cd1
Status:	✅  Deploy successful!
Preview URL:	https://0300958e.ui-6d0.pages.dev
Branch Preview URL:	https://feat-filter-summary-bar.ui-6d0.pages.dev

View logs

[Copilot]

Pull request overview

Copilot reviewed 6 out of 6 changed files in this pull request and generated no new comments.

Suppressed comments (3)

Previously missed (3) — in code that hasn't changed since the last review.

src/components/FilterSummaryBar/FilterSummaryBar.tsx:84

• The live region is missing explicit aria-live configuration. Elsewhere in the codebase, status regions typically specify aria-live (and often aria-atomic) to ensure consistent announcements (e.g. DropzoneOverlay.tsx:97-99, ConnectionStatus.tsx:386-389). Adding these here makes the announcement behavior more predictable across screen readers.

    <div
      ref={ref}
      role="status"
      className={cn(

src/components/FilterSummaryBar/FilterSummaryBar.tsx:148

• Add a displayName for the forwarded-ref component. Many components in this repo set it for better DevTools output (e.g. Avatar.tsx:122, Alert.tsx:106).

});

src/components/FilterSummaryBar/FilterSummaryBar.tsx:140

• The "Clear all" button doesn’t include the project’s standard focus-visible ring styles, which can make keyboard focus hard to see. Other inline icon buttons include these classes (e.g. Alert.tsx:91-95, CountBadge.tsx:43-44).

          className={cn(
            'ms-auto flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium transition-colors',
            'text-primary-700 hover:bg-primary-500/15 dark:text-primary-300'
          )}