Index filters with saved views

components specs/components/index-filters.kmd

Composite search + filter chips + saved views companion of data-table — handles full-text search, faceted filtering, multi- condition combination, URL serialization, persisted named views. Modeled after Polaris IndexFilters.

Quando esta spec se aplica

Triggers primários

Todos os triggers

Component — Index filters

Status: v0.1.0 — Draft. Sits in the toolbar above specs/components/data-table.kmd.

R1 — Layout

Single horizontal row at the top of the data-table container:

SectionWidthContent
Search boxflex 1Magnifying-glass icon + input + clear (×)
Filter chip areaflex 2Active filter chips inline, wraps on overflow
Saved-views dropdownautoCaret + view name (default: Default)
"Add filter" buttonauto+ icon + label, opens filter picker popover

R2 — Filter chip anatomy

Per active filter:

  • Label: filter name (Status)
  • Operator: optional (is, is not, contains)
  • Value: human-readable (Active, Active, Pending for multi)
  • Dismiss (×): removes filter immediately

Chip background: --kdr-surface-2; text: --kdr-text; dismiss icon: --kdr-text-muted.

R3 — Multi-condition expression

  • Multiple filters compose with AND by default.
  • Each filter MAY have OR within its own values (Status: Active OR Pending).
  • Explicit grouping (parentheses) NOT supported in v0 — covered by future advanced-query ticket if demand surfaces.

R4 — Saved views

  • "View" = name + columns + sort + filter set.
  • Each view persisted per-user + per-table-identity (same scope as data-table saved views).
  • View dropdown shows: Default (always present, locked) + user-created views + "Save current as new view" CTA.
  • Renaming, deleting, sharing per view: hover menu on each entry.
  • Sharing across users not in v0.

R5 — URL serialization

  • Active filters MUST reflect in the URL querystring as ?filter[Status]=Active,Pending&filter[Date]=>2026-01-01.
  • Refreshing the page restores the same filter state.
  • Saved-view selection appears as ?view=my-open-issues; loading a view applies its filters (overriding any explicit filter params).

R6 — Keyboard navigation

KeyAction
Cmd+F / Ctrl+FFocus the search box
Esc (in search)Clear search and blur
TabMove through search, chips, dropdown, Add Filter
Enter on chip dismissRemove chip
Enter on Add FilterOpen filter picker
Esc (in picker)Close picker without applying

R7 — Internationalization

  • All strings (placeholder, operators, button labels) translatable per specs/i18n/contract.kmd.
  • Default-view name "Default" translates per locale.
  • Date-typed filter values use locale-aware formatting (per specs/i18n/contract.kmd date-time section).

R8 — Accessibility

  • Search box: <input type="search"> with associated label.
  • Chip set: role="list" with each chip role="listitem"; dismiss is a button inside.
  • Add-filter popover: role="dialog" with focus trap; Esc closes.
  • Live-region announces filter changes ("Filter added: Status is Active").

R9 — Empty state interaction

When current filter set returns 0 rows: data-table shows empty-state (per specs/patterns/empty-state.kmd) with a Clear filters secondary action.

Não-escopo

  • Sharing saved views across users (separate ticket if pursued).
  • Advanced query expression with explicit grouping (separate ticket).
  • Server-side filter execution (transport-agnostic).
  • Pro-layer bundling (this primitive composed with data-table + density toggle + column-visibility menu + export into a single drop-in component) — evaluated in design-RFC-008 and ratified Option C (2026-05-23) — the composition pattern ships as specs/patterns/admin-data-table.kmd rather than a bundled component.

Referências