Flight Finder Advanced Search Figma: expander-flight finder-advanced search domain control

Updated: 2026-07-02 13:37 ET

Audited: 2026-07-02 13:37 ET

The specific "Advanced Search" instance of the Expander primitive — binds JSFF flight-search advanced-filter fields.

Figma: node 4361:5537 · live file owEYzHf7FrHRvWC2u82UOl ("ALPA mobile app") · captured 2026-07-02 · decision D44

Layered on top of the generic Expander primitive. Expander (trigger + slot) stays domain-free. This page documents the confirmed content that fills that slot for the Flight Finder "Advanced Search" instance: Avoid Connection, Connect Via, two range sliders (Min Connection Time, Length of Travel), 3 checklist rows, and a "Save Search to Favorites" button. This is the layer that was previously flagged as an open gap on the Expander page — resolved 2026-07-02 via live-file capture (D44).

Live CSS Preview — Open State

Advanced Search ⌃

Avoid Connection

Add Airport Code

Connect Via

Add Airport Code

Min Connection Time1h 15m

0h05h

Length of Travel42h 11m

0h72h

Search by Arrival Date

Include Cargo Carriers

Show Codeshare

Save Search to Favorites

Collapsed state = the generic Expander trigger row only; see Expander — Live CSS Preview.

Field Map

Field	Composes	Type	Notes
Avoid Connection	`Master Form Field` (Form Field)	Airport-code text input	Placeholder "Add Airport Code"
Connect Via	`Master Form Field`	Airport-code text input	Placeholder "Add Airport Code"
Min Connection Time	`slider` (existing master, node `4317:5239`, already in `figma-component-specs.json`)	Range slider	Range 0h–05h, current value shown (e.g. "1h 15m")
Length of Travel	`slider` (same master, reused)	Range slider	Range 0h–72h, current value shown (e.g. "42h 11m")
Search by Arrival Date	`checklist`	Checkbox	—
Include Cargo Carriers	`checklist`	Checkbox	—
Show Codeshare	`checklist`	Checkbox	—
Save action	`Secondary button`	Button	Label "Save Search to Favorites" (Default state) / "Save Search" (Open state) — the same field, label differs slightly between the two Expander states in Figma.

Layer Tree

└── FlightFinderAdvancedSearch (domain-control layer)
    └── Expander · primitive (trigger "Advanced Search" + slot)
        ├── Master Form Field × 2 (Avoid Connection, Connect Via)
        ├── slider × 2 (Min Connection Time, Length of Travel) — reuses master 4317:5239
        ├── checklist × 3 (Arrival Date, Cargo Carriers, Codeshare)
        └── Secondary button (Save Search to Favorites)

ViewModel

Composes the ExpanderViewModel primitive (see Expander — ViewModel) plus a domain-control ViewModel for the field values. Spec-only.

└── FlightFinderAdvancedSearchViewModel (spec-only, standalone — D40 pattern)
    ├── AvoidConnectionAirport : string?
    ├── ConnectViaAirport : string?
    ├── MinConnectionTime / MaxConnectionTime : TimeSpan
    ├── MinTravelLength / MaxTravelLength : TimeSpan
    ├── SearchByArrivalDate / IncludeCargoCarriers / ShowCodeshare : bool
    └── SaveSearchCommand : ICommand

Developer Notes

Reuses the existing slider master: both range sliders reuse the same Figma master (node 4317:5239) already catalogued in figma-component-specs.json — do not create a second slider spec.
Domain source TBD: field values bind to JSFF flight-search filter state — same domain as Flight Finder Filters (D22); the exact API/state source is not confirmed this pass.
Save label differs by state: Figma shows "Save Search to Favorites" in the Default (collapsed-trigger) capture and "Save Search" in the Open (expanded) capture — likely the same button with responsive label length; confirm with design.
Implementation gated: no Razor/C# work until Epic AB#2087 (Presentation Extraction).