Skip to content

Commit

Permalink
feat(list): add filterLabel property (#11002)
Browse files Browse the repository at this point in the history
**Related Issue:** #8076

## Summary

- add `filterLabel` property to the list
- add test
- depends on #11001
  • Loading branch information
driskull authored Dec 9, 2024
1 parent d7a7b65 commit 49c6093
Show file tree
Hide file tree
Showing 2 changed files with 14 additions and 0 deletions.
9 changes: 9 additions & 0 deletions packages/calcite-components/src/components/list/list.e2e.ts
Original file line number Diff line number Diff line change
Expand Up @@ -161,6 +161,15 @@ describe("calcite-list", () => {
);
});

it("honors filterLabel property", async () => {
const page = await newE2EPage();
const label = "hello world";
await page.setContent(`<calcite-list filter-enabled filter-label="${label}"></calcite-list>`);

const filter = await page.find(`calcite-list >>> calcite-filter`);
expect(await filter.getProperty("label")).toBe(label);
});

it("should set the displayMode property on items", async () => {
const page = await newE2EPage();
await page.setContent(
Expand Down
5 changes: 5 additions & 0 deletions packages/calcite-components/src/components/list/list.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -183,6 +183,9 @@ export class List
/** When `true`, an input appears at the top of the component that can be used by end users to filter `calcite-list-item`s. */
@property({ reflect: true }) filterEnabled = false;

/** Specifies an accessible name for the filter input field. */
@property({ reflect: true }) filterLabel: string;

/** Placeholder text for the component's filter input field. */
@property({ reflect: true }) filterPlaceholder: string;

Expand Down Expand Up @@ -979,6 +982,7 @@ export class List
filterPlaceholder,
filterText,
filteredItems,
filterLabel,
hasFilterActionsStart,
hasFilterActionsEnd,
hasFilterNoResults,
Expand Down Expand Up @@ -1016,6 +1020,7 @@ export class List
disabled={disabled}
filterProps={effectiveFilterProps}
items={dataForFilter}
label={filterLabel}
oncalciteFilterChange={this.handleFilterChange}
placeholder={filterPlaceholder}
ref={this.setFilterEl}
Expand Down

0 comments on commit 49c6093

Please sign in to comment.