piotr/innercontext
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

refactor(frontend): align lab results filters with products style

Browse source
This commit is contained in:
Piotr Oleszczyk 2026-03-05 13:14:33 +01:00
parent 7eca2391a9
commit c4be7dd1be
3 changed files with 298 additions and 342 deletions
Download patch file Download diff file Expand all files Collapse all files

5
docs/frontend-design-cookbook.md
View file

@ -102,7 +102,7 @@ These classes are already in use and should be reused:
- Health semantic pills: `health-kind-pill*`, `health-flag-pill*`
- Lab results utilities:
- metadata chips: `lab-results-meta-strip`, `lab-results-meta-pill`
- filter surfaces: `lab-results-filter-panel`, `lab-results-filter-banner`, `lab-results-pager`
- filter/paging surfaces: `editorial-filter-row`, `lab-results-filter-banner`, `lab-results-pager`
- row/link rhythm: `lab-results-row`, `lab-results-code-link`, `lab-results-value-cell`
- mobile density: `lab-results-mobile-grid`, `lab-results-mobile-card`, `lab-results-mobile-value`
@ -112,12 +112,13 @@ These classes are already in use and should be reused:
- Validation/error states should be explicit and never color-only.
- Tables and dense lists should prioritize scanning: spacing, row separators, concise metadata.
- Filter toolbars for data-heavy routes should use `GET` forms with URL params so state is shareable and pagination links preserve active filters.
- Use the products filter pattern as the shared baseline: compact search input, chip-style toggle rows (`editorial-filter-row` + small `Button` variants), and apply/reset actions aligned at the end of the toolbar.
- For high-volume medical data lists, default the primary view to condensed/latest mode and offer full-history as an explicit secondary option.
- In condensed/latest mode, group rows by collection date using lightweight section headers (`products-section-title`) to preserve report context without introducing heavy card nesting.
- Change/highlight pills in dense tables should stay compact (`text-[10px]`), semantic (new/flag change/abnormal), and avoid overwhelming color blocks.
- For lab results, keep ordering fixed to newest collection date (`collected_at DESC`) and remove non-essential controls (no lab filter and no manual sort selector).
- For lab results, keep code links visibly interactive (`lab-results-code-link`) because they are a primary in-context drill-down interaction.
- For lab results, use compact metadata chips in hero sections (`lab-results-meta-pill`) for active view/filter context instead of introducing a second heavy summary card.
- For lab results, use compact metadata chips in hero sections (`lab-results-meta-pill`) for active view/filter context instead of introducing a second heavy summary card; keep this strip terse (one context chip + one stats chip, with optional alert chip).
- In dense row-based lists, prefer `ghost` action controls; use icon-only buttons on desktop tables and short text+icon `ghost` actions on mobile cards to keep row actions subordinate to data.
- For editable data tables, open a dedicated inline edit panel above the list (instead of per-row expanded forms) and prefill it from row actions; keep users on the same filtered/paginated context after save.
- When a list is narrowed to a single entity key (for example `test_code`), display an explicit "filtered by" banner with a one-click clear action and avoid extra grouping wrappers that add no context.