Prototype Library

Filter

Layout wrapper that lays out filter dropdowns, pills, and the clear button in a wrapping flex row with consistent gap. A pure layout primitive — it carries no runtime logic.

Inherited .astro import EsaFilterContainer from '@esa/ecology/esa-filter-container.astro';

Preview

Compose a dropdown, the active-filter pills, and the clear button inside one container. It owns spacing and wrapping; the children own their own behavior.

Status:OpenDepartment:Water Quality
<FilterContainer>
  <esa-filter-dropdown name="status" label="Status" multiple></esa-filter-dropdown>
  <FilterPills filters={filters} />
  <FilterClearButton />
</FilterContainer>

Spacing

Tune the column and row gaps with spacing-token steps via gap and rowGap.

<FilterContainer gap="500" rowGap="300">
  <esa-filter-dropdown name="priority" label="Priority"></esa-filter-dropdown>
  <FilterClearButton label="Reset" />
</FilterContainer>

API

PropTypeDefaultDescription
gap string '300' Spacing-token step for the horizontal (column) gap between children.
rowGap string '200' Spacing-token step for the vertical (row) gap when children wrap.

Accessibility

  • A presentational <div> wrapper — it adds no roles or ARIA of its own; each child carries its own semantics.
  • Children flow left-to-right and wrap, preserving a natural reading and tab order.
  • Token-driven gaps keep targets visually separated without relying on color alone.

Tokens

Layout-only — override the gap tokens (or pass gap/rowGap) to retune spacing:

  • --filter-container-gap — column gap (falls back to --spacing-300)
  • --spacing-* — both column and row gaps resolve through the spacing scale