feat(list-item): deprecate open/close props in favor of expanded/coll…

…apsed

packages/calcite-components/src/components/list-item/list-item.e2e.ts

@@ -45,6 +45,10 @@ describe("calcite-list-item", () => {
         propertyName: "open",
         defaultValue: false,
       },
+      {
+        propertyName: "expanded",
+        defaultValue: false,
+      },
       {
         propertyName: "dragHandle",
         defaultValue: false,
@@ -362,7 +366,7 @@ describe("calcite-list-item", () => {
 
     expect(await listItem.getProperty("open")).toBe(false);
 
-    const openButton = await page.find(`calcite-list-item >>> .${CSS.openContainer}`);
+    const openButton = await page.find(`calcite-list-item >>> .${CSS.expandedContainer}`);
 
     await openButton.click();
     expect(await listItem.getProperty("open")).toBe(true);
@@ -373,6 +377,29 @@ describe("calcite-list-item", () => {
     expect(calciteListItemToggle).toHaveReceivedEventTimes(2);
   });
 
+  it("should fire calciteListItemToggle event when expanded and collapsed", async () => {
+    const page = await newE2EPage({
+      html: html`<calcite-list-item display-mode="nested"
+        ><calcite-list><calcite-list-item></calcite-list-item></calcite-list
+      ></calcite-list-item>`,
+    });
+
+    const listItem = await page.find("calcite-list-item");
+    const calciteListItemToggle = await page.spyOnEvent("calciteListItemToggle", "window");
+
+    expect(await listItem.getProperty("expanded")).toBe(false);
+
+    const openButton = await page.find(`calcite-list-item >>> .${CSS.expandedContainer}`);
+
+    await openButton.click();
+    expect(await listItem.getProperty("expanded")).toBe(true);
+    expect(calciteListItemToggle).toHaveReceivedEventTimes(1);
+
+    await openButton.click();
+    expect(await listItem.getProperty("expanded")).toBe(false);
+    expect(calciteListItemToggle).toHaveReceivedEventTimes(2);
+  });
+
   it("should not fire calciteListItemToggle event without nested items", async () => {
     const page = await newE2EPage({
       html: html`<calcite-list-item display-mode="nested"></calcite-list-item>`,
@@ -383,7 +410,7 @@ describe("calcite-list-item", () => {
 
     expect(await listItem.getProperty("open")).toBe(false);
 
-    const openButton = await page.find(`calcite-list-item >>> .${CSS.openContainer}`);
+    const openButton = await page.find(`calcite-list-item >>> .${CSS.expandedContainer}`);
 
     expect(openButton.getAttribute("title")).toBe(null);
 
@@ -403,7 +430,7 @@ describe("calcite-list-item", () => {
       ></calcite-list-item>`,
     });
 
-    const openButton = await page.find(`calcite-list-item >>> .${CSS.openContainer}`);
+    const openButton = await page.find(`calcite-list-item >>> .${CSS.expandedContainer}`);
 
     expect(openButton).toBe(null);
   });