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:	66cd9e4
Status:	✅  Deploy successful!
Preview URL:	https://d2dc74ba.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'
          )}

[Copilot]

Pull request overview

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

[Copilot]

Pull request overview

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

Suppressed comments (2)

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

src/components/FilterSummaryBar/FilterSummaryBar.tsx:94

• {...props} is spread after role="status", so a consumer-provided role prop can override the status role and break the intended assistive-tech announcement behavior. If the role should always be status, spread props first (or strip role from incoming props) so it can’t be overridden.

src/components/FilterSummaryBar/FilterSummaryBar.test.tsx:67

• This assertion assumes an en-US thousands separator ("8,911"), but toLocaleString() output depends on the runtime’s default locale and the test setup doesn’t configure one. Using a regex here avoids locale-dependent failures while still verifying the content.

    expect(screen.getByRole('status')).toHaveTextContent('1 of 8,911 record —');

[Copilot]

Pull request overview

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

Suppressed comments (4)

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

src/components/FilterSummaryBar/FilterSummaryBar.tsx:94

• {...props} is spread after role="status", so a consumer-provided role will override the live-region behavior (and potentially break the accessibility guarantee implied by the component). Move the spread before role to keep the status role enforced.
  src/components/FilterSummaryBar/FilterSummaryBar.tsx:133
• PR description says the idle state (when showWhenIdle is true and no filters/search are active) “reads "all records visible"”, but the current render still includes counts/record labels and appends “— all records visible”. If the intended UX is label-only while idle, the render logic should switch to only allVisibleLabel (and tests/stories updated accordingly).
  src/components/FilterSummaryBar/FilterSummaryBar.tsx:10
• The prop doc says consumers can pass 0 when totalCount is unknown, but 0 can also be a valid known total (empty dataset). Suggest documenting undefined as the “unknown” signal and letting 0 mean an actual total of zero.

This issue also appears on line 110 of the same file.

src/components/FilterSummaryBar/FilterSummaryBar.tsx:110

• totalCount is rendered only when it’s truthy ({totalCount ? ...}), which means a valid totalCount={0} (empty dataset) will incorrectly omit the “of 0” portion. Consider checking for a finite number so 0 still renders and undefined/NaN do not.

        {totalCount ? (

[Copilot]

Pull request overview

Copilot reviewed 11 out of 12 changed files in this pull request and generated 2 comments.

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

[Copilot]

Pull request overview

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

Files not reviewed (1)

• pnpm-lock.yaml: Generated file

[Copilot]

Pull request overview

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

Files not reviewed (1)

• pnpm-lock.yaml: Generated file