From c488529b970b3668b412d38968e4ac6342c2691e Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Tue, 2 Jan 2024 15:22:03 -0800 Subject: [PATCH 1/6] fix(list, list-item, list-item-group): honor hidden attribute on list-item and list-item-group. #8539 --- .../calcite-components/src/components.d.ts | 50 ++++++++++++------- .../list-item-group/list-item-group.scss | 4 ++ .../list-item-group/list-item-group.tsx | 7 +++ .../src/components/list-item/list-item.scss | 4 ++ .../src/components/list-item/list-item.tsx | 7 +++ .../src/components/list/list.stories.ts | 13 +++++ .../src/components/list/list.tsx | 6 +-- 7 files changed, 71 insertions(+), 20 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index ab283c4d42d..c3076e34eeb 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -2845,6 +2845,10 @@ export namespace Components { * When `true`, the component's drag handle is selected. */ "dragSelected": boolean; + /** + * Hides the component when filtered. + */ + "filterHidden": boolean; /** * The label text of the component. Displays above the description text. */ @@ -2902,6 +2906,10 @@ export namespace Components { * When `true`, interaction is prevented and the component is displayed with lower opacity. */ "disabled": boolean; + /** + * Hides the component when filtered. + */ + "filterHidden": boolean; /** * The header text for all nested `calcite-list-item` rows. */ @@ -4526,7 +4534,7 @@ export namespace Components { */ "scale": Scale; /** - * Specifies the component's selected tab-title. + * Specifies the component's selected `calcite-tab-title`. * @readonly */ "selectedTitle": HTMLCalciteTabTitleElement; @@ -4635,7 +4643,7 @@ export namespace Components { */ "numberingSystem"?: NumberingSystem; /** - * Specifies the page size of the component. When `true`, renders `calcite-pagination` + * Specifies the page size of the component. When `true`, renders `calcite-pagination`. */ "pageSize": number; /** @@ -4648,7 +4656,7 @@ export namespace Components { */ "selectedItems": HTMLCalciteTableRowElement[]; /** - * Specifies the selection mode of the component. + * Specifies the selection mode - `"none"` (no `calcite-table-row` selections), `"single"` (allow one `calcite-table-row` selection), or `"multiple"` (allow any number of `calcite-table-row` selections). */ "selectionMode": Extract<"none" | "multiple" | "single", SelectionMode>; /** @@ -4779,11 +4787,11 @@ export namespace Components { */ "layout": TabLayout; /** - * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to the `calcite-tabs`, defaults to `top`. + * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to the `calcite-tabs`. */ "position": TabPosition; /** - * Specifies the size of the component, defaults to `m`. + * Specifies the size of the component. */ "scale": Scale; } @@ -4984,7 +4992,7 @@ export namespace Components { */ "setFocus": () => Promise; /** - * The selection mode of the component. Use radio for single selection, and checkbox for multiple selections. + * The selection mode of the component. Use `"radio"` for single selection, and `"checkbox"` for multiple selections. */ "type": TileSelectType; /** @@ -5142,7 +5150,7 @@ export namespace Components { interface CalciteTree { "child": boolean; /** - * Displays indentation guide lines. + * When `true`, displays indentation guide lines. */ "lines": boolean; /** @@ -5197,7 +5205,7 @@ export namespace Components { */ interface CalciteValueList { /** - * When provided, the method will be called to determine whether the element can move from the list. + * When provided, the method will be called to determine whether the element can move from the list. */ "canPull": (detail: DragDetail) => boolean; /** @@ -5235,7 +5243,7 @@ export namespace Components { */ "filteredItems": HTMLCalciteValueListItemElement[]; /** - * Returns the currently selected items + * Returns the component's selected items. */ "getSelectedItems": () => Promise>; /** @@ -10218,6 +10226,10 @@ declare namespace LocalJSX { * When `true`, the component's drag handle is selected. */ "dragSelected"?: boolean; + /** + * Hides the component when filtered. + */ + "filterHidden"?: boolean; /** * The label text of the component. Displays above the description text. */ @@ -10294,6 +10306,10 @@ declare namespace LocalJSX { * When `true`, interaction is prevented and the component is displayed with lower opacity. */ "disabled"?: boolean; + /** + * Hides the component when filtered. + */ + "filterHidden"?: boolean; /** * The header text for all nested `calcite-list-item` rows. */ @@ -11958,7 +11974,7 @@ declare namespace LocalJSX { */ "scale"?: Scale; /** - * Specifies the component's selected tab-title. + * Specifies the component's selected `calcite-tab-title`. * @readonly */ "selectedTitle"?: HTMLCalciteTabTitleElement; @@ -12090,7 +12106,7 @@ declare namespace LocalJSX { */ "onCalciteTableSelect"?: (event: CalciteTableCustomEvent) => void; /** - * Specifies the page size of the component. When `true`, renders `calcite-pagination` + * Specifies the page size of the component. When `true`, renders `calcite-pagination`. */ "pageSize"?: number; /** @@ -12103,7 +12119,7 @@ declare namespace LocalJSX { */ "selectedItems"?: HTMLCalciteTableRowElement[]; /** - * Specifies the selection mode of the component. + * Specifies the selection mode - `"none"` (no `calcite-table-row` selections), `"single"` (allow one `calcite-table-row` selection), or `"multiple"` (allow any number of `calcite-table-row` selections). */ "selectionMode"?: Extract<"none" | "multiple" | "single", SelectionMode>; /** @@ -12231,11 +12247,11 @@ declare namespace LocalJSX { */ "layout"?: TabLayout; /** - * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to the `calcite-tabs`, defaults to `top`. + * Specifies the position of `calcite-tab-nav` and `calcite-tab-title` components in relation to the `calcite-tabs`. */ "position"?: TabPosition; /** - * Specifies the size of the component, defaults to `m`. + * Specifies the size of the component. */ "scale"?: Scale; } @@ -12436,7 +12452,7 @@ declare namespace LocalJSX { */ "onCalciteTileSelectChange"?: (event: CalciteTileSelectCustomEvent) => void; /** - * The selection mode of the component. Use radio for single selection, and checkbox for multiple selections. + * The selection mode of the component. Use `"radio"` for single selection, and `"checkbox"` for multiple selections. */ "type"?: TileSelectType; /** @@ -12604,7 +12620,7 @@ declare namespace LocalJSX { interface CalciteTree { "child"?: boolean; /** - * Displays indentation guide lines. + * When `true`, displays indentation guide lines. */ "lines"?: boolean; /** @@ -12664,7 +12680,7 @@ declare namespace LocalJSX { */ interface CalciteValueList { /** - * When provided, the method will be called to determine whether the element can move from the list. + * When provided, the method will be called to determine whether the element can move from the list. */ "canPull"?: (detail: DragDetail) => boolean; /** diff --git a/packages/calcite-components/src/components/list-item-group/list-item-group.scss b/packages/calcite-components/src/components/list-item-group/list-item-group.scss index 6412b93b577..6765b8b06c5 100644 --- a/packages/calcite-components/src/components/list-item-group/list-item-group.scss +++ b/packages/calcite-components/src/components/list-item-group/list-item-group.scss @@ -3,6 +3,10 @@ --calcite-list-item-spacing-indent: theme("spacing.4"); } +:host([filter-hidden]) { + @apply hidden; +} + @include disabled(); .container { diff --git a/packages/calcite-components/src/components/list-item-group/list-item-group.tsx b/packages/calcite-components/src/components/list-item-group/list-item-group.tsx index ed464630cfe..5497ffea0b6 100644 --- a/packages/calcite-components/src/components/list-item-group/list-item-group.tsx +++ b/packages/calcite-components/src/components/list-item-group/list-item-group.tsx @@ -39,6 +39,13 @@ export class ListItemGroup implements InteractiveComponent { */ @Prop({ reflect: true }) disabled = false; + /** + * Hides the component when filtered. + * + * @internal + */ + @Prop({ reflect: true }) filterHidden = false; + /** * The header text for all nested `calcite-list-item` rows. * diff --git a/packages/calcite-components/src/components/list-item/list-item.scss b/packages/calcite-components/src/components/list-item/list-item.scss index 68a6a2a33a6..aee5b7569e0 100755 --- a/packages/calcite-components/src/components/list-item/list-item.scss +++ b/packages/calcite-components/src/components/list-item/list-item.scss @@ -4,6 +4,10 @@ --calcite-list-item-spacing-indent: theme("spacing.4"); } +:host([filter-hidden]) { + @apply hidden; +} + @include disabled(); .container { diff --git a/packages/calcite-components/src/components/list-item/list-item.tsx b/packages/calcite-components/src/components/list-item/list-item.tsx index 31b49d51dca..3daef795b05 100644 --- a/packages/calcite-components/src/components/list-item/list-item.tsx +++ b/packages/calcite-components/src/components/list-item/list-item.tsx @@ -142,6 +142,13 @@ export class ListItem */ @Prop({ mutable: true, reflect: true }) dragSelected = false; + /** + * Hides the component when filtered. + * + * @internal + */ + @Prop({ reflect: true }) filterHidden = false; + /** * The label text of the component. Displays above the description text. */ diff --git a/packages/calcite-components/src/components/list/list.stories.ts b/packages/calcite-components/src/components/list/list.stories.ts index 2ff923d2f8f..de11db9d44f 100644 --- a/packages/calcite-components/src/components/list/list.stories.ts +++ b/packages/calcite-components/src/components/list/list.stories.ts @@ -346,6 +346,18 @@ export const richContentFilterEnabled = (): string => html` `; +export const filterEnabledWithHiddenItems = (): string => html` + + + + + + + +`; + export const darkModeRTL_TestOnly = (): string => html` @@ -505,6 +517,7 @@ export const filteredChildListItems_TestOnly = (): string => selection-appearance="border" selection-mode="single" > + diff --git a/packages/calcite-components/src/components/list/list.tsx b/packages/calcite-components/src/components/list/list.tsx index 88166c77141..05c1aa4e7dd 100755 --- a/packages/calcite-components/src/components/list/list.tsx +++ b/packages/calcite-components/src/components/list/list.tsx @@ -681,10 +681,10 @@ export class List filteredItems: HTMLCalciteListItemElement[]; visibleParents: WeakSet; }): void { - const hidden = + const filterHidden = !visibleParents.has(el) && !filteredItems.includes(el as HTMLCalciteListItemElement); - el.hidden = hidden; + el.filterHidden = filterHidden; const closestParent = el.parentElement.closest(parentSelector) as | HTMLCalciteListItemElement @@ -694,7 +694,7 @@ export class List return; } - if (!hidden) { + if (!filterHidden) { visibleParents.add(closestParent); } From a607c8c0a805de7739e8ea38a9b6c3600994cfc5 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Tue, 2 Jan 2024 15:30:04 -0800 Subject: [PATCH 2/6] cleanup --- .../list-item-group/list-item-group.e2e.ts | 4 ++++ .../src/components/list-item/list-item.e2e.ts | 4 ++++ .../src/components/list/list.e2e.ts | 2 +- .../src/components/list/list.tsx | 14 +++++++------- 4 files changed, 16 insertions(+), 8 deletions(-) diff --git a/packages/calcite-components/src/components/list-item-group/list-item-group.e2e.ts b/packages/calcite-components/src/components/list-item-group/list-item-group.e2e.ts index 0f60c7212e8..8a9cb3773d8 100644 --- a/packages/calcite-components/src/components/list-item-group/list-item-group.e2e.ts +++ b/packages/calcite-components/src/components/list-item-group/list-item-group.e2e.ts @@ -27,6 +27,10 @@ describe("calcite-list-item-group", () => { propertyName: "disabled", defaultValue: false, }, + { + propertyName: "filterHidden", + defaultValue: false, + }, ]); }); }); diff --git a/packages/calcite-components/src/components/list-item/list-item.e2e.ts b/packages/calcite-components/src/components/list-item/list-item.e2e.ts index 19807bb05bd..d86ff8299d0 100755 --- a/packages/calcite-components/src/components/list-item/list-item.e2e.ts +++ b/packages/calcite-components/src/components/list-item/list-item.e2e.ts @@ -52,6 +52,10 @@ describe("calcite-list-item", () => { propertyName: "dragSelected", defaultValue: false, }, + { + propertyName: "filterHidden", + defaultValue: false, + }, ]); }); diff --git a/packages/calcite-components/src/components/list/list.e2e.ts b/packages/calcite-components/src/components/list/list.e2e.ts index 767783ea07d..2f369635118 100755 --- a/packages/calcite-components/src/components/list/list.e2e.ts +++ b/packages/calcite-components/src/components/list/list.e2e.ts @@ -306,7 +306,7 @@ describe("calcite-list", () => { expect(await list.getProperty("filteredItems")).toHaveLength(3); expect(await list.getProperty("filteredData")).toHaveLength(3); - const visibleItems = await page.findAll("calcite-list-item:not([hidden])"); + const visibleItems = await page.findAll("calcite-list-item:not([filter-hidden])"); expect(visibleItems.map((item) => item.id)).toEqual(["label-match", "description-match", "value-match"]); }); diff --git a/packages/calcite-components/src/components/list/list.tsx b/packages/calcite-components/src/components/list/list.tsx index 05c1aa4e7dd..c542e38b874 100755 --- a/packages/calcite-components/src/components/list/list.tsx +++ b/packages/calcite-components/src/components/list/list.tsx @@ -444,7 +444,7 @@ export class List mutationObserver = createObserver("mutation", () => this.updateListItems()); - openItems: HTMLCalciteListItemElement[] = []; + visibleItems: HTMLCalciteListItemElement[] = []; parentListEl: HTMLCalciteListElement; @@ -666,7 +666,7 @@ export class List }; private updateSelectedItems = (emit = false): void => { - this.selectedItems = this.openItems.filter((item) => item.selected); + this.selectedItems = this.visibleItems.filter((item) => item.selected); if (emit) { this.calciteListChange.emit(); } @@ -706,16 +706,16 @@ export class List } private updateFilteredItems = (emit = false): void => { - const { openItems, filteredData, filterText } = this; + const { visibleItems, filteredData, filterText } = this; const values = filteredData.map((item) => item.value); - const lastDescendantItems = openItems?.filter((listItem) => - openItems.every((li) => li === listItem || !listItem.contains(li)), + const lastDescendantItems = visibleItems?.filter((listItem) => + visibleItems.every((li) => li === listItem || !listItem.contains(li)), ); const filteredItems = - openItems.filter((item) => !filterText || values.includes(item.value)) || []; + visibleItems.filter((item) => !filterText || values.includes(item.value)) || []; const visibleParents = new WeakSet(); @@ -811,7 +811,7 @@ export class List this.filterEl.items = this.dataForFilter; } } - this.openItems = this.listItems.filter((item) => !item.closed); + this.visibleItems = this.listItems.filter((item) => !item.closed && !item.hidden); this.updateFilteredItems(emit); this.focusableItems = this.filteredItems.filter((item) => !item.disabled); this.setActiveListItem(); From e04f386c8d4fead41da63b90244eec6e639e5b94 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Mon, 8 Jan 2024 11:42:43 -0800 Subject: [PATCH 3/6] feat(list): Add slot to display content when no filtered items are shown. #8564 --- .../src/components/list/list.e2e.ts | 51 +++++++++++++++---- .../src/components/list/list.stories.ts | 11 ++++ .../src/components/list/list.tsx | 17 +++++++ .../src/components/list/resources.ts | 2 + .../calcite-components/src/demos/list.html | 4 ++ 5 files changed, 75 insertions(+), 10 deletions(-) diff --git a/packages/calcite-components/src/components/list/list.e2e.ts b/packages/calcite-components/src/components/list/list.e2e.ts index 2f369635118..541a5de27e3 100755 --- a/packages/calcite-components/src/components/list/list.e2e.ts +++ b/packages/calcite-components/src/components/list/list.e2e.ts @@ -2,8 +2,8 @@ import { accessible, hidden, renders, focusable, disabled, defaults, t9n } from import { placeholderImage } from "../../../.storybook/placeholderImage"; import { html } from "../../../support/formatting"; import { E2EPage, newE2EPage } from "@stencil/core/testing"; -import { debounceTimeout } from "./resources"; -import { CSS, activeCellTestAttribute } from "../list-item/resources"; +import { debounceTimeout, CSS } from "./resources"; +import { CSS as ListItemCSS, activeCellTestAttribute } from "../list-item/resources"; import { DEBOUNCE_TIMEOUT as FILTER_DEBOUNCE_TIMEOUT } from "../filter/resources"; import { GlobalTestProps, dragAndDrop, isElementFocused, getFocusedElementProp } from "../../tests/utils"; import { ListDragDetail } from "./interfaces"; @@ -350,7 +350,7 @@ describe("calcite-list", () => { expect(await items[2].getProperty("selected")).toBe(false); expect(await items[3].getProperty("selected")).toBe(false); - await page.$eval("#item-4", clickItemContent, `.${CSS.contentContainer}`); + await page.$eval("#item-4", clickItemContent, `.${ListItemCSS.contentContainer}`); await page.waitForChanges(); await page.waitForTimeout(listDebounceTimeout); expect(eventSpy).toHaveReceivedEventTimes(2); @@ -373,7 +373,7 @@ describe("calcite-list", () => { expect(await items[2].getProperty("selected")).toBe(true); expect(await items[3].getProperty("selected")).toBe(false); - await page.$eval("#item-1", clickItemContent, `.${CSS.contentContainer}`); + await page.$eval("#item-1", clickItemContent, `.${ListItemCSS.contentContainer}`); await page.waitForChanges(); await page.waitForTimeout(listDebounceTimeout); expect(eventSpy).toHaveReceivedEventTimes(4); @@ -502,7 +502,9 @@ describe("calcite-list", () => { await page.waitForChanges(); const list = await page.find("calcite-list"); const listItemOne = await page.find(`calcite-list-item[value=one]`); - const listItemOneContentContainer = await page.find(`calcite-list-item[value=one] >>> .${CSS.contentContainer}`); + const listItemOneContentContainer = await page.find( + `calcite-list-item[value=one] >>> .${ListItemCSS.contentContainer}`, + ); const calciteListChangeEvent = list.waitForEvent("calciteListChange"); await listItemOneContentContainer.click(); @@ -530,6 +532,35 @@ describe("calcite-list", () => { expect(await list.getProperty("selectedItems")).toHaveLength(0); }); + it("should show noFilterResults", async () => { + const page = await newE2EPage(); + await page.setContent( + html` + + + + +
No fruits found
+
Try a different fruit?
+ + `, + ); + await page.waitForChanges(); + + const noResultsContainer = await page.find(`calcite-list >>> .${CSS.noResultsContainer}`); + + expect(await noResultsContainer.isVisible()).toBe(false); + + const list = await page.find("calcite-list"); + list.setProperty("filterText", "Bananas"); + await page.waitForChanges(); + expect(await noResultsContainer.isVisible()).toBe(false); + + list.setProperty("filterEnabled", true); + await page.waitForChanges(); + expect(await noResultsContainer.isVisible()).toBe(true); + }); + describe("keyboard navigation", () => { it("should navigate via ArrowUp, ArrowDown, Home, and End", async () => { const page = await newE2EPage(); @@ -687,7 +718,7 @@ describe("calcite-list", () => { await list.press("ArrowRight"); - expect(await isElementFocused(page, `.${CSS.contentContainer}`, { shadowed: true })).toBe(true); + expect(await isElementFocused(page, `.${ListItemCSS.contentContainer}`, { shadowed: true })).toBe(true); await list.press("ArrowRight"); @@ -695,7 +726,7 @@ describe("calcite-list", () => { await list.press("ArrowLeft"); - expect(await isElementFocused(page, `.${CSS.contentContainer}`, { shadowed: true })).toBe(true); + expect(await isElementFocused(page, `.${ListItemCSS.contentContainer}`, { shadowed: true })).toBe(true); await list.press("ArrowLeft"); @@ -755,7 +786,7 @@ describe("calcite-list", () => { await list.press("ArrowRight"); - expect(await isElementFocused(page, `.${CSS.contentContainer}`, { shadowed: true })).toBe(true); + expect(await isElementFocused(page, `.${ListItemCSS.contentContainer}`, { shadowed: true })).toBe(true); await list.press("ArrowRight"); @@ -763,7 +794,7 @@ describe("calcite-list", () => { await list.press("ArrowLeft"); - expect(await isElementFocused(page, `.${CSS.contentContainer}`, { shadowed: true })).toBe(true); + expect(await isElementFocused(page, `.${ListItemCSS.contentContainer}`, { shadowed: true })).toBe(true); await list.press("ArrowLeft"); @@ -791,7 +822,7 @@ describe("calcite-list", () => { `); await page.waitForChanges(); const items = await page.findAll("calcite-list-item"); - const secondHandleCell = await page.find(`#two >>> .${CSS.dragContainer}`); + const secondHandleCell = await page.find(`#two >>> .${ListItemCSS.dragContainer}`); expect(await items[0].getProperty("active")).toBe(true); expect(await items[1].getProperty("active")).toBe(false); diff --git a/packages/calcite-components/src/components/list/list.stories.ts b/packages/calcite-components/src/components/list/list.stories.ts index de11db9d44f..5e4458ea756 100644 --- a/packages/calcite-components/src/components/list/list.stories.ts +++ b/packages/calcite-components/src/components/list/list.stories.ts @@ -923,3 +923,14 @@ export const listWithGroupedAndSlottedItems_TestOnly = (): string => `; + +export const filteredListItemsNoResults_TestOnly = (): string => + html` + + + + +
No fruits found
+
Try a different fruit?
+ + `; diff --git a/packages/calcite-components/src/components/list/list.tsx b/packages/calcite-components/src/components/list/list.tsx index c542e38b874..1bcd3393ae5 100755 --- a/packages/calcite-components/src/components/list/list.tsx +++ b/packages/calcite-components/src/components/list/list.tsx @@ -440,6 +440,8 @@ export class List @State() hasFilterActionsStart = false; + @State() hasFilterNoResults = false; + listItems: HTMLCalciteListItemElement[] = []; mutationObserver = createObserver("mutation", () => this.updateListItems()); @@ -491,8 +493,10 @@ export class List filterEnabled, filterPlaceholder, filterText, + filteredItems, hasFilterActionsStart, hasFilterActionsEnd, + hasFilterNoResults, } = this; return ( @@ -545,6 +549,15 @@ export class List + ); @@ -655,6 +668,10 @@ export class List this.hasFilterActionsEnd = slotChangeHasAssignedElement(event); }; + private handleFilterNoResultsSlotChange = (event: Event): void => { + this.hasFilterNoResults = slotChangeHasAssignedElement(event); + }; + private setActiveListItem = (): void => { const { focusableItems } = this; diff --git a/packages/calcite-components/src/components/list/resources.ts b/packages/calcite-components/src/components/list/resources.ts index 38640166296..bd86eb540a6 100644 --- a/packages/calcite-components/src/components/list/resources.ts +++ b/packages/calcite-components/src/components/list/resources.ts @@ -6,6 +6,7 @@ export const CSS = { tableContainer: "table-container", sticky: "sticky-pos", assistiveText: "assistive-text", + noResultsContainer: "no-results-container", }; export const debounceTimeout = 0; @@ -13,6 +14,7 @@ export const debounceTimeout = 0; export type SelectionAppearance = "border" | "icon"; export const SLOTS = { + filterNoResults: "filter-no-results", filterActionsStart: "filter-actions-start", filterActionsEnd: "filter-actions-end", }; diff --git a/packages/calcite-components/src/demos/list.html b/packages/calcite-components/src/demos/list.html index 2600655e661..d4e244e713c 100644 --- a/packages/calcite-components/src/demos/list.html +++ b/packages/calcite-components/src/demos/list.html @@ -97,6 +97,10 @@

List

style="color: var(--calcite-color-status-success)" > + +
No Results
+
Try a different filter
+ From 603b32c9f6b785d6fc1ae6f5050ad246055ba300 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Mon, 8 Jan 2024 11:59:16 -0800 Subject: [PATCH 4/6] a11y test --- .../calcite-components/src/components.d.ts | 118 +++++++++--------- .../src/components/list/list.e2e.ts | 11 ++ 2 files changed, 70 insertions(+), 59 deletions(-) diff --git a/packages/calcite-components/src/components.d.ts b/packages/calcite-components/src/components.d.ts index 18760cd0c33..0e68a60d63e 100644 --- a/packages/calcite-components/src/components.d.ts +++ b/packages/calcite-components/src/components.d.ts @@ -196,7 +196,7 @@ export namespace Components { */ "scale": Scale; /** - * Specifies the selection mode - `"multiple"` (allow any number of open items), `"single"` (allow one open item), or `"single-persist"` (allow and require one open item). + * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, and `"single-persist"` allows one selection and prevents de-selection. */ "selectionMode": Extract< "single" | "single-persist" | "multiple", @@ -905,7 +905,7 @@ export namespace Components { */ "selectedItems": HTMLCalciteChipElement[]; /** - * Specifies the selection mode of the component: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allow and require one selected item, `"none"` does not allow any selections. + * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"none"` does not allow any selections. */ "selectionMode": Extract< "multiple" | "single" | "single-persist" | "none", @@ -1137,7 +1137,7 @@ export namespace Components { */ "selectionDisplay": SelectionDisplay; /** - * Specifies the selection mode: `"multiple"` allows any number of selected items, `"single"` allows only one selection, `"single-persist"` allow and require one open item, `"ancestors"` is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips. + * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"ancestors"` allows multiple selections, but shows ancestors of selected items as selected, with only deepest children shown in chips. */ "selectionMode": Extract< "single" | "single-persist" | "ancestors" | "multiple", @@ -1202,7 +1202,7 @@ export namespace Components { */ "selected": boolean; /** - * Specifies the selection mode: - "multiple" allows any number of selected items (default), - "single" allows only one selection, - "single-persist" allow and require one open item, - "ancestors" is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips. + * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"ancestors"` allows multiple selections, but shows ancestors of selected items as selected, with only deepest children shown in chips. */ "selectionMode": Extract< "single" | "single-persist" | "ancestors" | "multiple", @@ -1507,7 +1507,7 @@ export namespace Components { */ "scale": Scale; /** - * Specifies the selection mode for `calcite-dropdown-item` children: `"multiple"` allows any number of selected items, `"single"` allows only one selection, `"none"` doesn't allow for any selection. + * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, and `"none"` does not allow any selections. */ "selectionMode": Extract<"none" | "single" | "multiple", SelectionMode>; } @@ -2174,7 +2174,7 @@ export namespace Components { */ "validationMessage": string; /** - * Selected date as a string in ISO format (YYYY-MM-DD) + * Selected date as a string in ISO format (`"yyyy-mm-dd"`). */ "value": string | string[]; /** @@ -2616,7 +2616,7 @@ export namespace Components { */ "messages": InputTimeZoneMessages; /** - * This specifies the type of `value` and the associated options presented to the user: Using `"offset"` will provide options related + * This specifies the type of `value` and the associated options presented to the user: Using `"offset"` will provide options that show timezone offsets. Using `"name"` will provide options that show the IANA time zone names. * @default "offset" */ "mode": TimeZoneMode; @@ -2800,7 +2800,7 @@ export namespace Components { */ "selectionAppearance": SelectionAppearance; /** - * Specifies the selection mode - `"multiple"` (allow any number of selected items), `"single"` (allow one selected item), `"single-persist"` (allow one selected item and prevent de-selection), or `"none"` (no selected items). + * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"none"` does not allow any selections. */ "selectionMode": Extract< "none" | "multiple" | "single" | "single-persist", @@ -3076,7 +3076,7 @@ export namespace Components { */ "numberingSystem": NumberingSystem; /** - * When either `rangeLabels` is `true`, specifies the format of displayed labels. + * When `rangeLabels` is `true`, specifies the format of displayed labels. */ "rangeLabelType": MeterLabelType; /** @@ -3088,7 +3088,7 @@ export namespace Components { */ "scale": Scale; /** - * When `labelType` is `"units"` and either `valueLabel` or `rangeLabels` are `true`, displays beside the `value` and/or `min` values. + * When `rangeLabelType` is `"units"` and either `valueLabel` or `rangeLabels` are `true`, displays beside the `value` and/or `min` values. */ "unitLabel": string; /** @@ -3100,7 +3100,7 @@ export namespace Components { */ "valueLabel": boolean; /** - * When either `valueLabel` is `true`, specifies the format of displayed label. + * When `valueLabel` is `true`, specifies the format of displayed label. */ "valueLabelType": MeterLabelType; } @@ -3126,11 +3126,11 @@ export namespace Components { */ "focusTrapDisabled": boolean; /** - * Sets the component to always be fullscreen (overrides `widthScale` and `--calcite-modal-width` / `--calcite-modal-height`). + * Sets the component to always be fullscreen. Overrides `widthScale` and `--calcite-modal-width` / `--calcite-modal-height`. */ "fullscreen": boolean; /** - * Specifies the kind of the component (will apply to top border). + * Specifies the kind of the component, which will apply to top border. */ "kind": Extract<"brand" | "danger" | "info" | "success" | "warning", Kind>; /** @@ -3190,13 +3190,13 @@ export namespace Components { */ "navigationAction": boolean; /** - * When `navigation-action` is `true`, sets focus on the component's action element. + * When `navigationAction` is `true`, sets focus on the component's action element. */ "setFocus": () => Promise; } interface CalciteNavigationLogo { /** - * When true, the component is highlighted. + * When `true`, the component is highlighted. */ "active": boolean; /** @@ -3244,7 +3244,7 @@ export namespace Components { } interface CalciteNavigationUser { /** - * When true, the component is highlighted. + * When `true`, the component is highlighted. */ "active": boolean; /** @@ -3290,7 +3290,7 @@ export namespace Components { */ "iconFlipRtl": boolean; /** - * Specifies the kind of the component (will apply to top border and icon). + * Specifies the kind of the component, which will apply to top border and icon. */ "kind": Extract< "brand" | "danger" | "info" | "success" | "warning", @@ -3481,12 +3481,12 @@ export namespace Components { */ "filterText": string; /** - * The currently filtered data. + * The component's filtered data. * @readonly */ "filteredData": ItemData1; /** - * The currently filtered items. + * The component's filtered items. * @readonly */ "filteredItems": HTMLCalcitePickListItemElement[]; @@ -3599,7 +3599,7 @@ export namespace Components { */ "autoClose": boolean; /** - * When `true`, display a close button within the component. + * When `true`, displays a close button within the component. */ "closable": boolean; /** @@ -4044,7 +4044,7 @@ export namespace Components { */ "position": LogicalFlowPosition; /** - * Sets focus on the component's "close" button (the first focusable item). + * Sets focus on the component's "close" button - the first focusable item. */ "setFocus": () => Promise; /** @@ -4087,12 +4087,12 @@ export namespace Components { "collapsed": boolean; /** * When `true`, the content area displays like a floating panel. - * @deprecated use `displayMode` instead. + * @deprecated Use `displayMode` instead. */ "detached": boolean; /** * When `displayMode` is `float`, specifies the maximum height of the component. - * @deprecated use `heightScale` instead. + * @deprecated Use `heightScale` instead. */ "detachedHeightScale": Scale; /** @@ -4294,7 +4294,7 @@ export namespace Components { */ "dropdownLabel": string; /** - * Specifies the kind of the component (will apply to border and background if applicable). + * Specifies the kind of the component, which will apply to border and background, if applicable. */ "kind": Extract<"brand" | "danger" | "inverse" | "neutral", Kind>; /** @@ -4656,7 +4656,7 @@ export namespace Components { */ "selectedItems": HTMLCalciteTableRowElement[]; /** - * Specifies the selection mode - `"none"` (no `calcite-table-row` selections), `"single"` (allow one `calcite-table-row` selection), or `"multiple"` (allow any number of `calcite-table-row` selections). + * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, and `"none"` does not allow any selections. */ "selectionMode": Extract<"none" | "multiple" | "single", SelectionMode>; /** @@ -7419,7 +7419,7 @@ declare namespace LocalJSX { */ "scale"?: Scale; /** - * Specifies the selection mode - `"multiple"` (allow any number of open items), `"single"` (allow one open item), or `"single-persist"` (allow and require one open item). + * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, and `"single-persist"` allows one selection and prevents de-selection. */ "selectionMode"?: Extract< "single" | "single-persist" | "multiple", @@ -8172,7 +8172,7 @@ declare namespace LocalJSX { */ "selectedItems"?: HTMLCalciteChipElement[]; /** - * Specifies the selection mode of the component: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allow and require one selected item, `"none"` does not allow any selections. + * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"none"` does not allow any selections. */ "selectionMode"?: Extract< "multiple" | "single" | "single-persist" | "none", @@ -8426,7 +8426,7 @@ declare namespace LocalJSX { */ "selectionDisplay"?: SelectionDisplay; /** - * Specifies the selection mode: `"multiple"` allows any number of selected items, `"single"` allows only one selection, `"single-persist"` allow and require one open item, `"ancestors"` is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips. + * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"ancestors"` allows multiple selections, but shows ancestors of selected items as selected, with only deepest children shown in chips. */ "selectionMode"?: Extract< "single" | "single-persist" | "ancestors" | "multiple", @@ -8491,7 +8491,7 @@ declare namespace LocalJSX { */ "selected"?: boolean; /** - * Specifies the selection mode: - "multiple" allows any number of selected items (default), - "single" allows only one selection, - "single-persist" allow and require one open item, - "ancestors" is like multiple, but shows ancestors of selected items as selected, with only deepest children shown in chips. + * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"ancestors"` allows multiple selections, but shows ancestors of selected items as selected, with only deepest children shown in chips. */ "selectionMode"?: Extract< "single" | "single-persist" | "ancestors" | "multiple", @@ -8833,7 +8833,7 @@ declare namespace LocalJSX { */ "scale"?: Scale; /** - * Specifies the selection mode for `calcite-dropdown-item` children: `"multiple"` allows any number of selected items, `"single"` allows only one selection, `"none"` doesn't allow for any selection. + * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, and `"none"` does not allow any selections. */ "selectionMode"?: Extract<"none" | "single" | "multiple", SelectionMode>; } @@ -9515,7 +9515,7 @@ declare namespace LocalJSX { */ "validationMessage"?: string; /** - * Selected date as a string in ISO format (YYYY-MM-DD) + * Selected date as a string in ISO format (`"yyyy-mm-dd"`). */ "value"?: string | string[]; /** @@ -9975,7 +9975,7 @@ declare namespace LocalJSX { */ "messages"?: InputTimeZoneMessages; /** - * This specifies the type of `value` and the associated options presented to the user: Using `"offset"` will provide options related + * This specifies the type of `value` and the associated options presented to the user: Using `"offset"` will provide options that show timezone offsets. Using `"name"` will provide options that show the IANA time zone names. * @default "offset" */ "mode"?: TimeZoneMode; @@ -10149,27 +10149,27 @@ declare namespace LocalJSX { */ "numberingSystem"?: NumberingSystem; /** - * Emitted when the default slot has changes in order to notify parent lists. + * Fires when the default slot has changes in order to notify parent lists. */ "onCalciteInternalListDefaultSlotChange"?: (event: CalciteListCustomEvent) => void; /** - * Emits when any of the list item selections have changed. + * Fires when the component's selected items have changed. */ "onCalciteListChange"?: (event: CalciteListCustomEvent) => void; /** - * Emits when the component's dragging has ended. + * Fires when the component's dragging has ended. */ "onCalciteListDragEnd"?: (event: CalciteListCustomEvent) => void; /** - * Emits when the component's dragging has started. + * Fires when the component's dragging has started. */ "onCalciteListDragStart"?: (event: CalciteListCustomEvent) => void; /** - * Emits when the component's filter has changed. + * Fires when the component's filter has changed. */ "onCalciteListFilter"?: (event: CalciteListCustomEvent) => void; /** - * Emitted when the order of the list has changed. + * Fires when the component's item order changes. */ "onCalciteListOrderChange"?: (event: CalciteListCustomEvent) => void; /** @@ -10186,7 +10186,7 @@ declare namespace LocalJSX { */ "selectionAppearance"?: SelectionAppearance; /** - * Specifies the selection mode - `"multiple"` (allow any number of selected items), `"single"` (allow one selected item), `"single-persist"` (allow one selected item and prevent de-selection), or `"none"` (no selected items). + * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, `"single-persist"` allows one selection and prevents de-selection, and `"none"` does not allow any selections. */ "selectionMode"?: Extract< "none" | "multiple" | "single" | "single-persist", @@ -10262,7 +10262,7 @@ declare namespace LocalJSX { */ "onCalciteListItemDragHandleChange"?: (event: CalciteListItemCustomEvent) => void; /** - * Emits when the item's content is selected. + * Fires when the component is selected. */ "onCalciteListItemSelect"?: (event: CalciteListItemCustomEvent) => void; /** @@ -10315,7 +10315,7 @@ declare namespace LocalJSX { */ "heading"?: string; /** - * Emitted when the default slot has changes in order to notify parent lists. + * Fires when changes occur in the default slot, notifying parent lists of the changes. */ "onCalciteInternalListItemGroupDefaultSlotChange"?: (event: CalciteListItemGroupCustomEvent) => void; } @@ -10477,7 +10477,7 @@ declare namespace LocalJSX { */ "numberingSystem"?: NumberingSystem; /** - * When either `rangeLabels` is `true`, specifies the format of displayed labels. + * When `rangeLabels` is `true`, specifies the format of displayed labels. */ "rangeLabelType"?: MeterLabelType; /** @@ -10489,7 +10489,7 @@ declare namespace LocalJSX { */ "scale"?: Scale; /** - * When `labelType` is `"units"` and either `valueLabel` or `rangeLabels` are `true`, displays beside the `value` and/or `min` values. + * When `rangeLabelType` is `"units"` and either `valueLabel` or `rangeLabels` are `true`, displays beside the `value` and/or `min` values. */ "unitLabel"?: string; /** @@ -10501,7 +10501,7 @@ declare namespace LocalJSX { */ "valueLabel"?: boolean; /** - * When either `valueLabel` is `true`, specifies the format of displayed label. + * When `valueLabel` is `true`, specifies the format of displayed label. */ "valueLabelType"?: MeterLabelType; } @@ -10527,11 +10527,11 @@ declare namespace LocalJSX { */ "focusTrapDisabled"?: boolean; /** - * Sets the component to always be fullscreen (overrides `widthScale` and `--calcite-modal-width` / `--calcite-modal-height`). + * Sets the component to always be fullscreen. Overrides `widthScale` and `--calcite-modal-width` / `--calcite-modal-height`. */ "fullscreen"?: boolean; /** - * Specifies the kind of the component (will apply to top border). + * Specifies the kind of the component, which will apply to top border. */ "kind"?: Extract<"brand" | "danger" | "info" | "success" | "warning", Kind>; /** @@ -10593,13 +10593,13 @@ declare namespace LocalJSX { */ "navigationAction"?: boolean; /** - * When `navigationAction` is true, emits when the displayed action selection changes. + * When `navigationAction` is `true`, emits when the displayed action selection changes. */ "onCalciteNavigationActionSelect"?: (event: CalciteNavigationCustomEvent) => void; } interface CalciteNavigationLogo { /** - * When true, the component is highlighted. + * When `true`, the component is highlighted. */ "active"?: boolean; /** @@ -10643,7 +10643,7 @@ declare namespace LocalJSX { } interface CalciteNavigationUser { /** - * When true, the component is highlighted. + * When `true`, the component is highlighted. */ "active"?: boolean; /** @@ -10685,7 +10685,7 @@ declare namespace LocalJSX { */ "iconFlipRtl"?: boolean; /** - * Specifies the kind of the component (will apply to top border and icon). + * Specifies the kind of the component, which will apply to top border and icon. */ "kind"?: Extract< "brand" | "danger" | "info" | "success" | "warning", @@ -10883,12 +10883,12 @@ declare namespace LocalJSX { */ "filterText"?: string; /** - * The currently filtered data. + * The component's filtered data. * @readonly */ "filteredData"?: ItemData1; /** - * The currently filtered items. + * The component's filtered items. * @readonly */ "filteredItems"?: HTMLCalcitePickListItemElement[]; @@ -11015,7 +11015,7 @@ declare namespace LocalJSX { */ "autoClose"?: boolean; /** - * When `true`, display a close button within the component. + * When `true`, displays a close button within the component. */ "closable"?: boolean; /** @@ -11529,12 +11529,12 @@ declare namespace LocalJSX { "collapsed"?: boolean; /** * When `true`, the content area displays like a floating panel. - * @deprecated use `displayMode` instead. + * @deprecated Use `displayMode` instead. */ "detached"?: boolean; /** * When `displayMode` is `float`, specifies the maximum height of the component. - * @deprecated use `heightScale` instead. + * @deprecated Use `heightScale` instead. */ "detachedHeightScale"?: Scale; /** @@ -11643,11 +11643,11 @@ declare namespace LocalJSX { */ "numberingSystem"?: NumberingSystem; /** - * Fires when the thumb is released on the component. **Note:** If you need to constantly listen to the drag event, use `calciteSliderInput` instead. + * Fires when the thumb is released on the component. Note: To constantly listen to the drag event, use `calciteSliderInput` instead. */ "onCalciteSliderChange"?: (event: CalciteSliderCustomEvent) => void; /** - * Fires on all updates to the component. **Note:** Will be fired frequently during drag. If you are performing any expensive operations consider using a debounce or throttle to avoid locking up the main thread. + * Fires on all updates to the component. Note: Fires frequently during drag. To perform expensive operations consider using a debounce or throttle to avoid locking up the main thread. */ "onCalciteSliderInput"?: (event: CalciteSliderCustomEvent) => void; /** @@ -11746,7 +11746,7 @@ declare namespace LocalJSX { */ "dropdownLabel"?: string; /** - * Specifies the kind of the component (will apply to border and background if applicable). + * Specifies the kind of the component, which will apply to border and background, if applicable. */ "kind"?: Extract<"brand" | "danger" | "inverse" | "neutral", Kind>; /** @@ -12119,7 +12119,7 @@ declare namespace LocalJSX { */ "selectedItems"?: HTMLCalciteTableRowElement[]; /** - * Specifies the selection mode - `"none"` (no `calcite-table-row` selections), `"single"` (allow one `calcite-table-row` selection), or `"multiple"` (allow any number of `calcite-table-row` selections). + * Specifies the selection mode of the component, where: `"multiple"` allows any number of selections, `"single"` allows only one selection, and `"none"` does not allow any selections. */ "selectionMode"?: Extract<"none" | "multiple" | "single", SelectionMode>; /** diff --git a/packages/calcite-components/src/components/list/list.e2e.ts b/packages/calcite-components/src/components/list/list.e2e.ts index 541a5de27e3..9a4ce240e96 100755 --- a/packages/calcite-components/src/components/list/list.e2e.ts +++ b/packages/calcite-components/src/components/list/list.e2e.ts @@ -106,6 +106,17 @@ describe("calcite-list", () => { `, ); + accessible( + html` + + + + +
No fruits found
+
Try a different fruit?
+ + `, + ); }); describe("disabled", () => { From e9d7aa276e9b57f1a829280e7cb6a04c781fcee6 Mon Sep 17 00:00:00 2001 From: Matt Driscoll Date: Mon, 8 Jan 2024 12:04:37 -0800 Subject: [PATCH 5/6] add aria-live polite --- packages/calcite-components/src/components/list/list.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/packages/calcite-components/src/components/list/list.tsx b/packages/calcite-components/src/components/list/list.tsx index 013424c6443..7d92332c6d7 100755 --- a/packages/calcite-components/src/components/list/list.tsx +++ b/packages/calcite-components/src/components/list/list.tsx @@ -558,6 +558,7 @@ export class List