Skip to content

refactor(combobox): Select All toggle logic #12150

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
Elijbet merged 13 commits into from
May 27, 2025
Merged

refactor(combobox): Select All toggle logic #12150

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
607d464
refactor(combobox): clean up logic for select-all-enabled
Elijbet May 14, 2025
5c80b3b
replace guid id with data-test-id, remove filtering for toggleSelectA…
Elijbet May 14, 2025
5b89dd1
--calcite-combobox-border-color
Elijbet May 20, 2025
614e81d
DRY up with a function for screen-reader item
Elijbet May 20, 2025
676341a
remove disable eslint comments
Elijbet May 21, 2025
61d1c92
filteredItems should exclude selectAll, since it's a public prop, key…
Elijbet May 21, 2025
04c6111
use Ref instead of state for this.selectAllComboboxItemReferenceEl
Elijbet May 21, 2025
5e0d9d0
pull class from the CSS const, deprecate prop
Elijbet May 21, 2025
fa3c944
--calcite-combobox-divider-color
Elijbet May 22, 2025
1f582a4
cleanup
Elijbet May 22, 2025
a70a1e0
themed select-all-enabled
Elijbet May 22, 2025
1a8f4a1
revert token changes - to be added in a separate PR
Elijbet May 22, 2025
57f865e
make id optional, and guid guaranteed
Elijbet May 22, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 13 additions & 24 deletions packages/calcite-components/src/components/combobox/combobox.e2e.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -752,12 +752,6 @@ describe("calcite-combobox", () => {
</calcite-combobox>`,
);

await page.waitForChanges();

const combobox = await page.find("calcite-combobox");
await combobox.callMethod("componentOnReady");
expect(combobox).not.toBeNull();

const item = await page.find("calcite-combobox-item#item-0");
let a11yItem = await page.find(`calcite-combobox >>> ul.${CSS.screenReadersOnly} li`);

Expand Down Expand Up @@ -800,7 +794,7 @@ describe("calcite-combobox", () => {
item.setProperty("disabled", true);
await page.waitForChanges();
await page.waitForTimeout(DEBOUNCE.nextTick);
a11yItem = await page.find(`calcite-combobox >>> ul.${CSS.screenReadersOnly} li:nth-of-type(2)`);
a11yItem = await page.find(`calcite-combobox >>> ul.${CSS.screenReadersOnly} li`);

expect(a11yItem).toBeNull();
});
Expand Down Expand Up @@ -3000,7 +2994,6 @@ describe("calcite-combobox", () => {
</calcite-combobox-item>
</calcite-combobox>`,
);
await page.waitForChanges();
});

async function testToggleAllItems(
Expand Down Expand Up @@ -3032,15 +3025,13 @@ describe("calcite-combobox", () => {
}

it("should toggle all items on and off with a click", async () => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
await testToggleAllItems(page, async ([selectAll, _combobox]) => {
await testToggleAllItems(page, async ([selectAll]) => {
await selectAll.click();
});
});

it("should toggle all items on and off with KeyDown press `enter`", async () => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
await testToggleAllItems(page, async ([_selectAll, combobox]) => {
await testToggleAllItems(page, async ([, combobox]) => {
await combobox.press("Enter");
});
});
Expand Down Expand Up @@ -3082,7 +3073,6 @@ describe("calcite-combobox", () => {
page: E2EPage,
toggleAction: ([listItem, combobox]: [E2EElement, E2EElement]) => Promise<void>,
): Promise<void> {
const messages = await import("./assets/t9n/messages.json");
const combobox = await page.find("calcite-combobox");
await combobox.click();
expect(await combobox.getProperty("open")).toBe(true);
Expand All @@ -3092,7 +3082,9 @@ describe("calcite-combobox", () => {
item.setProperty("selected", true);
}
await page.waitForChanges();
expect(await page.find(`calcite-combobox >>> calcite-chip[value="${messages.allSelected}"]`)).toBeDefined();
expect(
await page.find(`calcite-combobox >>> calcite-chip[data-test-id="all-selected-indicator-chip"]`),
).toBeDefined();

const listItem = await combobox.find("calcite-combobox-item[value=Sequoia]");
await toggleAction([listItem, combobox]);
Expand All @@ -3114,15 +3106,13 @@ describe("calcite-combobox", () => {
}

it("should toggle indeterminate state to `All Selected` when list items are toggled with a click", async () => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
await testToggleListItems(page, async ([listItem, _combobox]) => {
await testToggleListItems(page, async ([listItem]) => {
await listItem.click();
});
});

it("should toggle indeterminate state to `All Selected` when list items are toggled with a keydown `Enter`", async () => {
// eslint-disable-next-line @typescript-eslint/no-unused-vars
await testToggleAllItems(page, async ([_listItem, combobox]) => {
await testToggleAllItems(page, async ([, combobox]) => {
await combobox.press("Enter");
});
});
Expand All @@ -3136,7 +3126,6 @@ describe("calcite-combobox", () => {
</calcite-combobox-item>
</calcite-combobox>`,
);
await page.waitForChanges();
const selectAll = await page.find(`calcite-combobox >>> calcite-combobox-item.${CSS.selectAll}`);
expect(await selectAll.getProperty("indeterminate")).toBe(true);
});
Expand All @@ -3150,7 +3139,7 @@ describe("calcite-combobox", () => {
</calcite-combobox-item>
</calcite-combobox>`,
);
await page.waitForChanges();

const selectAll = await page.find(`calcite-combobox >>> calcite-combobox-item.${CSS.selectAll}`);
expect(await selectAll.getProperty("selected")).toBe(true);
});
Expand All @@ -3165,8 +3154,6 @@ describe("calcite-combobox", () => {
</calcite-combobox-item>
</calcite-combobox>`,
);
await page.waitForChanges();
const messages = await import("./assets/t9n/messages.json");

const combobox = await page.find("calcite-combobox");
await combobox.click();
Expand All @@ -3177,7 +3164,9 @@ describe("calcite-combobox", () => {

expect(await page.find(`calcite-combobox >>> calcite-chip[value="Trees"]`)).toBeDefined();
expect(await page.find(`calcite-combobox >>> calcite-chip[value="Maple"]`)).toBeDefined();
expect(await page.find(`calcite-combobox >>> calcite-chip[value="${messages.allSelected}"]`)).toBeNull();
expect(
await page.find(`calcite-combobox >>> calcite-chip[data-test-id="all-selected-indicator-chip"]`),
).toHaveClass(CSS.chipInvisible);
});

it("should update aria-selected on items when toggling 'Select All'", async () => {
Expand All @@ -3197,7 +3186,7 @@ describe("calcite-combobox", () => {
await selectAll.click();
await page.waitForChanges();

a11yItem = await page.find(`calcite-combobox >>> ul.${CSS.screenReadersOnly} li:nth-of-type(2)`);
a11yItem = await page.find(`calcite-combobox >>> ul.${CSS.screenReadersOnly} li`);
expect(await a11yItem.getProperty("ariaSelected")).toBe("false");
});
});
Expand Down
28 changes: 11 additions & 17 deletions packages/calcite-components/src/components/combobox/combobox.stories.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -965,22 +965,18 @@ export const withDescriptionIconsAndContentSlots = (): string => html`
</calcite-combobox>
`;

export const selectAllEnabledAndAllSelectedWithPlaceholder = (): string => html`
<div style="width:400px;max-width:100%;background-color:white;padding:100px">
<calcite-combobox selection-mode="multiple" placeholder="placeholder" select-all-enabled open scale="l">
<calcite-combobox-item value="Trees" text-label="Trees" selected>
<calcite-combobox-item value="Pine" text-label="Pine" selected>
<calcite-combobox-item value="Pine Nested" text-label="Pine Nested" selected></calcite-combobox-item>
</calcite-combobox-item>
<calcite-combobox-item value="Sequoia" text-label="Sequoia" selected></calcite-combobox-item>
<calcite-combobox-item value="Douglas Fir" text-label="Douglas Fir" selected></calcite-combobox-item>
export const selectAllEnabled = (): string => html`
<calcite-combobox selection-mode="multiple" placeholder="placeholder" select-all-enabled open scale="l">
<calcite-combobox-item value="Trees" text-label="Trees" selected>
<calcite-combobox-item value="Pine" text-label="Pine" selected>
<calcite-combobox-item value="Pine Nested" text-label="Pine Nested" selected></calcite-combobox-item>
</calcite-combobox-item>
</calcite-combobox>
</div>
`;
<calcite-combobox-item value="Sequoia" text-label="Sequoia" selected></calcite-combobox-item>
<calcite-combobox-item value="Douglas Fir" text-label="Douglas Fir" selected></calcite-combobox-item>
</calcite-combobox-item>
</calcite-combobox>

export const selectAllEnabledAndAllSelected = (): string => html`
<calcite-combobox selection-mode="multiple" select-all-enabled open>
<calcite-combobox style="margin-top:280px; margin-bottom:350px;" selection-mode="multiple" select-all-enabled open>
<calcite-combobox-item value="Trees" text-label="Trees" selected>
<calcite-combobox-item value="Pine" text-label="Pine" selected>
<calcite-combobox-item value="Pine Nested" text-label="Pine Nested" selected></calcite-combobox-item>
Expand All @@ -989,10 +985,8 @@ export const selectAllEnabledAndAllSelected = (): string => html`
<calcite-combobox-item value="Douglas Fir" text-label="Douglas Fir" selected></calcite-combobox-item>
</calcite-combobox-item>
</calcite-combobox>
`;

export const selectAllEnabledIndeterminate = (): string => html`
<calcite-combobox selection-mode="multiple" select-all-enabled open>
<calcite-combobox style="margin-top:450px; margin-bottom:30px;" selection-mode="multiple" select-all-enabled open>
<calcite-combobox-item value="Trees" text-label="Trees">
<calcite-combobox-item value="Pine" text-label="Pine" selected>
<calcite-combobox-item value="Pine Nested" text-label="Pine Nested"></calcite-combobox-item>
Expand Down
Loading
Loading