MOTIR-330Done
6.1.3 Design — the filter builder (`design/work-items/filter-builder.mock.html`: rows, combinator, operator menus, per-type editors, applied state)
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/issuestoolbar; 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 shippedDatePickerfor 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.mdnames 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
MultiSelectPickerdesign (the enum editor); the shippedDatePicker/Combobox - The verified Jira basic/JQL split + date-picker forms in the Story 6.1 description
- Findings #35/#54; the design-mockup render checklist