list: add matchFields property to specify which fields should be filtered against

[driskull]

Check existing issues

• I have checked for existing issues to avoid duplicates

Description

Add a matchFields property to specify which properties on list to use as matching values.

Acceptance Criteria

new property matchFields

Relevant Info

#5063

Which Component

list

Example Use Case

const list = document.querySelector("calcite-list");
list.matchFields = ["label", "description"];

Priority impact

impact - p2 - want for an upcoming milestone

Calcite package

• @esri/calcite-components
• @esri/calcite-components-angular
• @esri/calcite-components-react
• @esri/calcite-design-tokens
• @esri/eslint-plugin-calcite-components

Esri team

ArcGIS Maps SDK for JavaScript

[github-actions]

Installed and assigned for verification.

[geospatialem]

Verified in 2.10.0-next.7 with the following:

<!-- HTML -->
<calcite-list filter-enabled filter-placeholder="Filter waypoints">
  <calcite-list-item label="Hiking trails" description="Designated routes for hikers to use." value="hiking-trails">
  </calcite-list-item>
  <calcite-list-item label="Waterfalls" description="Vertical drops from a river." value="waterfalls">
  </calcite-list-item>
  <calcite-list-item label="Rivers" description="Large naturally flowing watercourses." value="rivers">
  </calcite-list-item>
  <calcite-list-item label="Estuaries" description="Where the river meets the sea." value="estuaries">
  </calcite-list-item>
</calcite-list>

// JavaScript
const listEl = document.querySelector("calcite-list")
listEl.filterProps = ["label"];