Sort / Filter Bar Figma: btn-sort&filter nav chrome

Updated: 2026-07-02 13:37 ET

Audited: 2026-07-02 13:37 ET

Results-header strip — a summary line on the left, Sort + Filter control buttons on the right.

ViewModel: SortFilterBarViewModel (spec-only) · scaffold classes: alpa-jsff-results-header, alpa-jsff-control-btn

Composes shared tokens, standalone control (D40). The bar is its own control; its two buttons are outline/active toggles that reuse the shared interactive/blue colour and spacing tokens. Sort cycles through ordered options (label reflects current); Filter toggles a filter sheet. Active state = filled blue. Per D36, server-side pre-sort and comms position locks still apply — this control is the user-facing re-sort/filter affordance, not the sort authority.

Design tokens sourced from the scaffold (.alpa-jsff-results-header, .alpa-jsff-control-btn in ALPAMobile/wwwroot/css/alpa-components.css) and the Jumpseat Results page. Figma: a btn-sort&filter instance appears in the interior nav-controls slot (e.g. node 0:281 within Saved Searches frame 4713:25253, hidden there; shown on the Flight Finder results frame). Assumption: the canonical results-header frame node was not isolated this pass; the layout is reconciled from the scaffold under D40. Figma file key R6hPjBdjSIn6946qTJasUC. Captured 2026-06-29.

Live CSS Preview

Default — Sort & Filter inactive

DEN to MIA · Nonstop · Mon Apr 20

Sort active (non-default order) · Filter active (✓)

DEN to MIA · Nonstop · Mon Apr 20

Design Tokens

Bar Layout

Display

flex · space-between · center

Padding

10px 16px

Background

white

Border-bottom

1px rgba(0,0,0,0.08)

Summary Line

Font

Body · 13px · weight 600

Colour

navy #05273e

Control Button — inactive

Padding

6px 14px

Border

1.5px blue · radius 4px

Text / border

blue #007bc2 · bg transparent

Font

Eyebrow · 12px · weight 600

Controls gap

8 px

Control Button — active

Background

blue #007bc2 (filled)

Text

white

Transition

background/color 0.15s

Layer Tree

└── sort-filter-bar · flex · space-between · padding:10px 16px · border-bottom
    ├── summary · TEXT · Body 13px/600 · navy (e.g. "DEN to MIA · Nonstop · Mon Apr 20")
    └── controls · flex · gap:8px
        ├── btn [Sort: label] · outline / active
        └── btn [Filter] · outline / active (✓)

ViewModel

Tier: nav chrome / results header. Spec-only — not in ComponentViewModels.cs until implementation (gated on Epic AB#2087).

└── SortFilterBarViewModel (spec-only)
    ├── Summary : string — left-hand results summary
    ├── SortLabel : string — current sort option label
    ├── IsSortActive : bool — true when not default order (filled)
    ├── IsFilterActive : bool — true when a filter is applied (filled, ✓)
    ├── OnSort : EventCallback — advance/cycle sort
    └── OnFilter : EventCallback — open filter sheet / toggle

Blazor Component API

Target home: ALPAMobile.HybridUi — SortFilterBar.razor.

Parameter	Type	Required	Description
`Summary`	`string`	Yes	Left-hand results summary line.
`SortLabel`	`string`	Yes	Text shown on the Sort button (e.g. "Sort: Best").
`IsSortActive`	`bool`	No	Applies `--active` (blue fill) when not default order.
`IsFilterActive`	`bool`	No	Applies `--active` (blue fill + ✓) when a filter is applied.
`OnSort`	`EventCallback`	Yes	Cycle/advance the sort order.
`OnFilter`	`EventCallback`	Yes	Open filter sheet / toggle filter.

Razor Usage (target)

<SortFilterBar Summary="@Vm.ResultsSummary"
               SortLabel="@Vm.SortLabel"
               IsSortActive="@Vm.IsSortActive"
               IsFilterActive="@Vm.IsFilterActive"
               OnSort="@Vm.CycleSort"
               OnFilter="@Vm.ToggleFilter" />

CSS Class Reference (target)

Classes will live in ALPAMobile.HybridUi/wwwroot/css/alpa-components.css under the alpa-sort-filter-bar BEM block (generalised from the scaffold's Jumpseat-specific alpa-jsff-results-* names).

Class	Scope	Key rules
`.alpa-sort-filter-bar`	Bar	`display:flex; align-items:center; justify-content:space-between; padding:10px 16px; background:white; border-bottom:1px solid rgba(0,0,0,0.08)`
`.alpa-sort-filter-bar__summary`	Summary	`font-family:var(--font-family/body); font-size:13px; font-weight:600; color:var(--navy)`
`.alpa-sort-filter-bar__controls`	Controls row	`display:flex; gap:8px`
`.alpa-sort-filter-bar__btn`	Control button	`padding:6px 14px; border:1.5px solid var(--blue); border-radius:4px; background:transparent; color:var(--blue); font-size:12px; font-weight:600`
`.alpa-sort-filter-bar__btn--active`	Active modifier	`background:var(--blue); color:white`

Usage Context

Screen	Summary	Sort options	Filter
Flight Finder Results	"DEN to MIA · Nonstop · Mon Apr 20"	Best / Earliest / Shortest (cycle)	Toggle filter sheet (KCM-eligible, stops, etc.)

Developer Notes

Sort authority (D36): the server pre-sorts and comms can lock positions; this bar is the user-facing re-sort affordance only.
Distinct from Button Pill: the pill segmented control (Nonstop/One Stop/Multileg) is a separate primitive that may sit above the results list — do not conflate it with the Sort/Filter outline buttons here.
Opens the Filter/Sort modal (2026-07-02, D41): tapping either button is expected to open Flight Finder Filter Sort — a full-screen modal panel with Sort/Filter tab pills, the actual filter fields (composing flight finder filters) or sort radio options, and Apply/Clear actions. This bar is the trigger/summary strip; the modal is where the sort/filter state is actually edited. Not yet confirmed which button opens which initial tab.
Active is meaningful: per the project's interactive-control rule, both buttons require backing C# state and an @onclick; the filled state is not decorative.
Implementation gated: no Razor/C# work until Epic AB#2087 (Presentation Extraction).