From 1a5f2d8e67734bfda20272ae6a77d13b3837416d Mon Sep 17 00:00:00 2001
From: Eric Liu <ericyl.us@gmail.com>
Date: Sun, 23 Mar 2025 11:28:06 -0700
Subject: [PATCH] fix(list-box): correct button/description translations based
 on selection count (#2139)

The `ListBoxSelection` component now properly handles
translations for the clear button based on the selected items:

- Fix `buttonLabel` and `description` to use the same translation logic
- Add tests for custom translations in both `ComboBox` and `MultiSelect`
---
 src/ListBox/ListBoxSelection.svelte   | 11 ++++----
 tests/ComboBox/ComboBox.test.svelte   | 15 +++++++----
 tests/ComboBox/ComboBox.test.ts       | 24 ++++++++++++++++-
 tests/MultiSelect/MultiSelect.test.ts | 38 ++++++++++++++++++++++++++-
 4 files changed, 75 insertions(+), 13 deletions(-)

diff --git a/src/ListBox/ListBoxSelection.svelte b/src/ListBox/ListBoxSelection.svelte
index f4192015..53074c44 100644
--- a/src/ListBox/ListBoxSelection.svelte
+++ b/src/ListBox/ListBoxSelection.svelte
@@ -44,13 +44,12 @@
   $: if (ctx && ref) {
     ctx.declareRef({ key: "selection", ref });
   }
-
-  $: translationId = selectionCount
-    ? translationIds.clearAll
-    : translationIds.clearSelection;
+  $: translationId =
+    selectionCount === undefined
+      ? translationIds.clearSelection
+      : translationIds.clearAll;
   $: buttonLabel =
-    translateWithId?.(translationIds.clearAll) ??
-    defaultTranslations[translationIds.clearAll];
+    translateWithId?.(translationId) ?? defaultTranslations[translationId];
   $: description =
     translateWithId?.(translationId) ?? defaultTranslations[translationId];
 </script>
diff --git a/tests/ComboBox/ComboBox.test.svelte b/tests/ComboBox/ComboBox.test.svelte
index 249f0dd5..0e5077fa 100644
--- a/tests/ComboBox/ComboBox.test.svelte
+++ b/tests/ComboBox/ComboBox.test.svelte
@@ -1,13 +1,13 @@
 <script lang="ts">
   import { ComboBox } from "carbon-components-svelte";
-  import type { ComboBoxItem } from "carbon-components-svelte/ComboBox/ComboBox.svelte";
+  import type { ComponentProps } from "svelte";
 
-  export let items: ComboBoxItem[] = [
+  export let items: ComponentProps<ComboBox>["items"] = [
     { id: "0", text: "Slack" },
     { id: "1", text: "Email" },
     { id: "2", text: "Fax" },
   ];
-  export let selectedId: string | undefined = undefined;
+  export let selectedId: ComponentProps<ComboBox>["selectedId"] = undefined;
   export let value = "";
   export let disabled = false;
   export let invalid = false;
@@ -20,8 +20,12 @@
   export let warnText = "";
   export let helperText = "";
   export let size: "sm" | "xl" | undefined = undefined;
-  export let shouldFilterItem = (item: ComboBoxItem, value: string) =>
-    item.text.toLowerCase().includes(value.toLowerCase());
+  export let shouldFilterItem: ComponentProps<ComboBox>["shouldFilterItem"] = (
+    item,
+    value,
+  ) => item.text.toLowerCase().includes(value.toLowerCase());
+  export let translateWithIdSelection: ComponentProps<ComboBox>["translateWithIdSelection"] =
+    undefined;
 </script>
 
 <ComboBox
@@ -40,6 +44,7 @@
   {warn}
   {warnText}
   {shouldFilterItem}
+  {translateWithIdSelection}
   on:select={(e) => {
     console.log("select", e.detail);
   }}
diff --git a/tests/ComboBox/ComboBox.test.ts b/tests/ComboBox/ComboBox.test.ts
index c7bb0c48..1dbbffe2 100644
--- a/tests/ComboBox/ComboBox.test.ts
+++ b/tests/ComboBox/ComboBox.test.ts
@@ -60,13 +60,35 @@ describe("ComboBox", () => {
       },
     });
 
-    const clearButton = screen.getByRole("button", { name: /clear/i });
+    const clearButton = screen.getByRole("button", {
+      name: "Clear selected item",
+    });
     await user.click(clearButton);
 
     expect(consoleLog).toHaveBeenCalledWith("clear", expect.any(String));
     expect(screen.getByRole("textbox")).toHaveValue("");
   });
 
+  it("should use custom translations when translateWithId is provided", () => {
+    const customTranslations = {
+      clearSelection: "Remove selected item",
+      clearAll: "Remove all items",
+    } as const;
+
+    render(ComboBox, {
+      props: {
+        selectedId: "1",
+        value: "Email",
+        translateWithIdSelection: (id) => customTranslations[id],
+      },
+    });
+
+    const clearButton = screen.getByRole("button", {
+      name: "Remove selected item",
+    });
+    expect(clearButton).toBeInTheDocument();
+  });
+
   it("should handle disabled state", () => {
     render(ComboBox, { props: { disabled: true } });
 
diff --git a/tests/MultiSelect/MultiSelect.test.ts b/tests/MultiSelect/MultiSelect.test.ts
index cfd668e6..64315f10 100644
--- a/tests/MultiSelect/MultiSelect.test.ts
+++ b/tests/MultiSelect/MultiSelect.test.ts
@@ -124,7 +124,7 @@ describe("MultiSelect", () => {
       await toggleOption("C");
       expect(nthRenderedOptionText(0)).toBe("A");
 
-      // The newly-selected item also shouldn’t move after the dropdown is closed
+      // The newly-selected item also shouldn't move after the dropdown is closed
       // and reopened.
       await closeMenu();
       await openMenu();
@@ -179,6 +179,42 @@ describe("MultiSelect", () => {
       const input = screen.getByRole("combobox");
       expect(input).toHaveValue("");
     });
+
+    it("should show correct clear button label regardless of selection count", async () => {
+      render(MultiSelect, {
+        items,
+        selectedIds: ["0"],
+      });
+
+      expect(
+        screen.getByLabelText("Clear all selected items"),
+      ).toBeInTheDocument();
+
+      await openMenu();
+      await toggleOption("Email");
+      expect(
+        screen.getByLabelText("Clear all selected items"),
+      ).toBeInTheDocument();
+    });
+
+    it("should use custom translations when translateWithId is provided", async () => {
+      const customTranslations = {
+        clearSelection: "Remove selected item",
+        clearAll: "Remove all items",
+      } as const;
+
+      render(MultiSelect, {
+        items,
+        selectedIds: ["0"],
+        translateWithIdSelection: (id) => customTranslations[id],
+      });
+
+      expect(screen.getByLabelText("Remove all items")).toBeInTheDocument();
+
+      await openMenu();
+      await toggleOption("Email");
+      expect(screen.getByLabelText("Remove all items")).toBeInTheDocument();
+    });
   });
 
   describe("keyboard navigation", () => {