MotirBuilding in public
MOTIR · moooon
onMotir
You’re viewing a public project. Anyone can view it — no account needed. Sign in to submit, upvote, or comment on requests.View-only — you can’t edit work items
MOTIR-330

6.1.3 Design — the filter builder (`design/work-items/filter-builder.mock.html`: rows, combinator, operator menus, per-type editors, applied state)

Done
Description

Estimate: 38m

The design asset for the advanced surface. filter.mock.html (2.5.9) designs ONLY the basic facet popover — the builder is undesigned (the design-gate NONE-exists case). Output: design/work-items/filter-builder.mock.html + PNG + a design-notes section. Render checklist + AA + dark parity. Mirrors: Jira basic's field/value vocabulary for the editors; the flat-rows builder shape (Linear's filter editor is the closest structured-builder reference) for what Jira only offers as JQL.

Specify, panel by panel:

  • Entry + coexistence — the "Advanced" affordance beside the shipped [Filter] facet button in the /issues toolbar; the rule drawn explicitly: facets upgrade INTO the builder ("Edit in Advanced" carries them as rows); an advanced state beyond facet expressiveness shows the facet button as superseded (badge + tooltip), never silently down-converts (the verified one-way mirror rule).
  • The builder surface — an anchored panel (the popover/card chrome): the combinator control ("Match all / Match any" — a segmented control reading as a sentence: "Match ALL of the following"), the condition rows (field picker → operator picker → value editor, each a Combobox-vocabulary control; row remove ×; the 20-row cap state), Add condition, Clear all, and live-apply (no Apply button — the 2.5.4 precedent; the URL updates as rows complete).
  • Per-type value editors — enum fields: the 5.4.6 MultiSelectPicker (members with avatars, statuses with dots, kinds with type icons, labels, components, CF options incl. the archived mark); text: input; number: numeric input (+ the comparison operator already chosen in the row); date: the shipped DatePicker for absolute/between + a small stepper for the relative "in the last/next N days" forms; empty/not-empty operators collapse the value editor.
  • Incomplete-row behaviour — a row missing its value is drawn pending (muted, excluded from the applied filter + count) — the live-apply rule needs this state pinned.
  • Applied state — the toolbar summary (the active-filter ring + count badge extending the 2.5.4 grammar; a compact row-chip readout), the result count line, zero-results (the empty state + "Clear all"), and the stale/unknown-value row (the deleted-referent notice on a shared URL) + the invalid-param recovery state.
  • Both views — the builder applied over the List (the navigator result) and the Tree (muted ancestor retention — reference the shipped behaviour, don't redraw it).

Acceptance criteria

  • The mockup + PNG + notes exist, composed from shipped primitives (Combobox, MultiSelectPicker, DatePicker, the 2.5.4 toolbar grammar) + token tiers; render checklist + AA + dark parity pass.
  • Panels cover: entry/coexistence + the upgrade + superseded states, the builder (combinator, rows for EVERY editor kind, add/remove/clear, cap, pending rows), the applied summary + count + zero-results, stale-referent + invalid-param states, and the List/Tree applied views.
  • design-notes.md names the editor-kind ↔ registry mapping (the 6.1.1 UI contract), the live-apply + pending-row rules, and records the one-way facet→builder conversion + the no-nested-groups extension slot.
  • No improvised primitive; token needs recorded.

Context refs

  • design/work-items/filter.mock.html + notes (2.5.9) — the facet grammar this extends; list.mock.html (the toolbar + result surface)
  • The 5.4.6 MultiSelectPicker design (the enum editor); the shipped DatePicker/Combobox
  • The verified Jira basic/JQL split + date-picker forms in the Story 6.1 description
  • Findings #35/#54; the design-mockup render checklist