feat(data-table): allow custom expand icon

Closes #2696

Author: metonym

src/DataTable/DataTable.svelte

@@ -26,6 +26,7 @@
    * @property {DataTableKey<Row> | (string & {})} key
    * @property {DataTableValue} value
    * @property {(item: DataTableValue, row: DataTableRow) => DataTableValue} [display]
+   * @slot {{ expanded: boolean; row: Row | undefined; props: { "aria-hidden": "true" | "false"; class: string; }; }} expandIcon
    * @slot {{ row: Row; rowSelected: boolean; }} expanded-row
    * @slot {{ header: DataTableNonEmptyHeader; }} cellHeader
    * @slot {{ row: Row; cell: DataTableCell<Row>; rowIndex: number; cellIndex: number; rowSelected: boolean; rowExpanded: boolean; }} cell
@@ -278,6 +279,11 @@
     tall: 64,
   };
 
+  const expandIconProps = {
+    "aria-hidden": "true",
+    class: "bx--table-expand__svg",
+  };
+
   let tableBodyScrollTop = 0;
   let prevExpandedRowIds = [];
   let tableRef = null;
@@ -610,10 +616,9 @@
                     dispatch("click:header--expand", { expanded });
                   }}
                 >
-                  <ChevronRight
-                    aria-hidden="true"
-                    class="bx--table-expand__svg"
-                  />
+                  <slot name="expandIcon" {expanded} row={undefined} props={expandIconProps}>
+                    <ChevronRight {...expandIconProps} />
+                  </slot>
                 </button>
               {/if}
             </th>
@@ -772,10 +777,9 @@
                         });
                       }}
                     >
-                      <ChevronRight
-                        aria-hidden="true"
-                        class="bx--table-expand__svg"
-                      />
+                      <slot name="expandIcon" expanded={!!expandedRows[row.id]} {row} props={expandIconProps}>
+                        <ChevronRight {...expandIconProps} />
+                      </slot>
                     </button>
                   {/if}
                 </TableCell>
@@ -986,10 +990,9 @@
                         });
                       }}
                     >
-                      <ChevronRight
-                        aria-hidden="true"
-                        class="bx--table-expand__svg"
-                      />
+                      <slot name="expandIcon" expanded={isExpanded} {row} props={expandIconProps}>
+                        <ChevronRight {...expandIconProps} />
+                      </slot>
                     </button>
                   {/if}
                 </TableCell>

tests-svelte5/svelte5/snippets/Snippets.test.svelte

@@ -1,13 +1,47 @@
 <script lang="ts">
-  import { Button, ComboBox, Dropdown, Theme } from "carbon-components-svelte";
+  import {
+    Button,
+    ComboBox,
+    DataTable,
+    Dropdown,
+    Theme,
+  } from "carbon-components-svelte";
 
   const items = [
     { id: "1", text: "Option 1" },
     { id: "2", text: "Option 2" },
     { id: "3", text: "Option 3" },
   ] as const;
+
+  const dataTableHeaders = [
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+  ] as const;
+
+  const dataTableRows = [
+    { id: "a", name: "Load Balancer 1", protocol: "HTTP" },
+    { id: "b", name: "Load Balancer 2", protocol: "HTTPS" },
+  ];
 </script>
 
+<DataTable
+  data-testid="datatable-expand-icon-snippet-container"
+  expandable
+  headers={dataTableHeaders}
+  rows={dataTableRows}
+>
+  {#snippet expandIcon({ expanded, row, props })}
+    <span
+      data-testid="datatable-expand-icon-snippet"
+      {...props}
+      data-expanded={expanded}
+    ></span>
+  {/snippet}
+  <svelte:fragment slot="expanded-row" let:row>
+    <pre>{JSON.stringify(row, null, 2)}</pre>
+  </svelte:fragment>
+</DataTable>
+
 <Dropdown data-testid="dropdown-snippet" {items} selectedId="1">
   {#snippet children({ item, index })}
     <span data-testid="dropdown-item-{index}">{item.text} (#{index})</span>

tests-svelte5/svelte5/snippets/Snippets.test.ts

@@ -1,8 +1,41 @@
-import { render, screen } from "@testing-library/svelte";
+import { render, screen, within } from "@testing-library/svelte";
 import { user } from "../../setup-tests";
 import Snippets from "./Snippets.test.svelte";
 
 describe("Svelte 5 Snippets", () => {
+  describe("DataTable expandIcon", () => {
+    it("should render custom expand icon via expandIcon snippet with expanded, row, and props", async () => {
+      const { container } = render(Snippets);
+
+      const datatable = screen.getByTestId(
+        "datatable-expand-icon-snippet-container",
+      );
+      expect(datatable).toBeInTheDocument();
+
+      const customIcons = screen.getAllByTestId(
+        "datatable-expand-icon-snippet",
+      );
+      expect(customIcons.length).toBeGreaterThanOrEqual(2);
+
+      const firstExpandButton = screen.getAllByRole("button", {
+        name: /expand/i,
+      })[0];
+      const iconInButton = within(firstExpandButton).getByTestId(
+        "datatable-expand-icon-snippet",
+      );
+      expect(iconInButton).toHaveAttribute("data-expanded", "false");
+
+      await user.click(firstExpandButton);
+
+      expect(iconInButton).toHaveAttribute("data-expanded", "true");
+
+      const expandedContent = container.querySelector(
+        ".bx--child-row-inner-container",
+      );
+      expect(expandedContent).toBeInTheDocument();
+    });
+  });
+
   describe("Dropdown", () => {
     it("should render snippet with item and index arguments", async () => {
       render(Snippets);

tests/DataTable/DataTable.test.ts

@@ -12,6 +12,7 @@ import DataTable from "./DataTable.test.svelte";
 import DataTableCustomBoth from "./DataTableCustomBoth.test.svelte";
 import DataTableCustomDescription from "./DataTableCustomDescription.test.svelte";
 import DataTableCustomSlots from "./DataTableCustomSlots.test.svelte";
+import DataTableExpandIcon from "./DataTableExpandIcon.test.svelte";
 
 describe("DataTable", () => {
   beforeEach(() => {
@@ -563,6 +564,31 @@ describe("DataTable", () => {
     ).toHaveLength(0);
   });
 
+  it("renders custom expand icon via expandIcon slot", async () => {
+    const { container } = render(DataTableExpandIcon);
+
+    const customIcons = screen.getAllByTestId("custom-expand-icon");
+    expect(customIcons.length).toBeGreaterThanOrEqual(2);
+
+    const firstExpandButton = screen.getAllByRole("button", {
+      name: /expand/i,
+    })[0];
+    expect(
+      within(firstExpandButton).getByTestId("custom-expand-icon"),
+    ).toHaveAttribute("data-expanded", "false");
+
+    await user.click(firstExpandButton);
+
+    expect(
+      within(firstExpandButton).getByTestId("custom-expand-icon"),
+    ).toHaveAttribute("data-expanded", "true");
+
+    const expandedContent = container.querySelector(
+      ".bx--child-row-inner-container",
+    );
+    expect(expandedContent).toBeInTheDocument();
+  });
+
   // Styling and layout tests
   it("applies zebra stripe styling", () => {
     render(DataTable, {

tests/DataTable/DataTableExpandIcon.test.svelte

@@ -0,0 +1,27 @@
+<script lang="ts">
+  import { DataTable } from "carbon-components-svelte";
+  import ChevronRight from "carbon-icons-svelte/lib/ChevronRight.svelte";
+
+  const headers = [
+    { key: "name", value: "Name" },
+    { key: "protocol", value: "Protocol" },
+  ] as const;
+
+  const rows = [
+    { id: "a", name: "Load Balancer 1", protocol: "HTTP" },
+    { id: "b", name: "Load Balancer 2", protocol: "HTTPS" },
+  ];
+</script>
+
+<DataTable expandable {headers} {rows}>
+  <svelte:fragment slot="expandIcon" let:expanded let:props>
+    <ChevronRight
+      {...props}
+      data-testid="custom-expand-icon"
+      data-expanded={expanded}
+    />
+  </svelte:fragment>
+  <svelte:fragment slot="expanded-row" let:row>
+    <pre>{JSON.stringify(row, null, 2)}</pre>
+  </svelte:fragment>
+</DataTable>