feat(list-item, list): add expanded property and deprecate open property

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

@@ -45,6 +45,18 @@ describe("calcite-list-item", () => {
         propertyName: "open",
         defaultValue: false,
       },
+      {
+        propertyName: "expanded",
+        defaultValue: false,
+      },
+      {
+        propertyName: "closed",
+        defaultValue: false,
+      },
+      {
+        propertyName: "closable",
+        defaultValue: false,
+      },
       {
         propertyName: "dragHandle",
         defaultValue: false,
@@ -370,7 +382,7 @@ describe("calcite-list-item", () => {
     expect(calciteListItemClose).toHaveReceivedEventTimes(1);
   });
 
-  it("should fire calciteListItemToggle event when opened and closed", async () => {
+  it("should fire calciteListItemToggle event when expanded and collapsed", async () => {
     const page = await newE2EPage({
       html: html`<calcite-list-item id="test" display-mode="nested"
         ><calcite-list display-mode="nested"><calcite-list-item></calcite-list-item></calcite-list
@@ -380,16 +392,16 @@ describe("calcite-list-item", () => {
     const listItem = await page.find("#test");
     const calciteListItemToggle = await page.spyOnEvent("calciteListItemToggle", "window");
 
-    expect(await listItem.getProperty("open")).toBe(false);
+    expect(await listItem.getProperty("expanded")).toBe(false);
 
-    const openButton = await page.find(`#test >>> .${CSS.openContainer}`);
+    const expandedButton = await page.find(`#test >>> .${CSS.expandedContainer}`);
 
-    await openButton.click();
-    expect(await listItem.getProperty("open")).toBe(true);
+    await expandedButton.click();
+    expect(await listItem.getProperty("expanded")).toBe(true);
     expect(calciteListItemToggle).toHaveReceivedEventTimes(1);
 
-    await openButton.click();
-    expect(await listItem.getProperty("open")).toBe(false);
+    await expandedButton.click();
+    expect(await listItem.getProperty("expanded")).toBe(false);
     expect(calciteListItemToggle).toHaveReceivedEventTimes(2);
   });
 
@@ -401,18 +413,18 @@ describe("calcite-list-item", () => {
     const listItem = await page.find("calcite-list-item");
     const calciteListItemToggle = await page.spyOnEvent("calciteListItemToggle", "window");
 
-    expect(await listItem.getProperty("open")).toBe(false);
+    expect(await listItem.getProperty("expanded")).toBe(false);
 
-    const openButton = await page.find(`calcite-list-item >>> .${CSS.openContainer}`);
+    const expandedButton = await page.find(`calcite-list-item >>> .${CSS.expandedContainer}`);
 
-    expect(openButton.getAttribute("title")).toBe(null);
+    expect(expandedButton.getAttribute("title")).toBe(null);
 
-    await openButton.click();
-    expect(await listItem.getProperty("open")).toBe(false);
+    await expandedButton.click();
+    expect(await listItem.getProperty("expanded")).toBe(false);
     expect(calciteListItemToggle).toHaveReceivedEventTimes(0);
 
-    await openButton.click();
-    expect(await listItem.getProperty("open")).toBe(false);
+    await expandedButton.click();
+    expect(await listItem.getProperty("expanded")).toBe(false);
     expect(calciteListItemToggle).toHaveReceivedEventTimes(0);
   });
 
@@ -438,16 +450,16 @@ describe("calcite-list-item", () => {
     expect(await list.getProperty("displayMode")).toBe("flat");
   });
 
-  it("flat list should not render open container", async () => {
+  it("flat list should not render expanded container", async () => {
     const page = await newE2EPage({
       html: html`<calcite-list-item display-mode="flat"
         ><calcite-list><calcite-list-item></calcite-list-item></calcite-list
       ></calcite-list-item>`,
     });
 
-    const openButton = await page.find(`calcite-list-item >>> .${CSS.openContainer}`);
+    const expandedButton = await page.find(`calcite-list-item >>> .${CSS.expandedContainer}`);
 
-    expect(openButton).toBe(null);
+    expect(expandedButton).toBe(null);
   });
 
   it("renders with iconStart", async () => {

packages/calcite-components/src/components/list-item/list-item.scss

@@ -84,7 +84,7 @@
   margin-inline-start: var(--calcite-list-spacing-indent, theme("spacing.6"));
 }
 
-.nested-container--open {
+.nested-container--expanded {
   @apply flex;
 }
 
@@ -373,12 +373,12 @@
   @apply flex-initial;
 }
 
-.open-container {
+.expanded-container {
   color: var(--calcite-list-icon-color, var(--calcite-color-text-3));
   padding-inline: var(--calcite-spacing-xxs);
 }
 
-:host(:not([disabled])) .container:hover .open-container {
+:host(:not([disabled])) .container:hover .expanded-container {
   color: var(--calcite-list-icon-color, var(--calcite-color-text-1));
 }
 
@@ -388,7 +388,7 @@
 .content-end,
 .selection-container,
 .drag-container,
-.open-container {
+.expanded-container {
   @apply flex items-center;
 
   calcite-action,
@@ -397,7 +397,7 @@
   }
 }
 
-.open-container,
+.expanded-container,
 .selection-container {
   @apply cursor-pointer;
 }

packages/calcite-components/src/components/list-item/list-item.tsx

@@ -81,7 +81,7 @@ export class ListItem extends LitElement implements InteractiveComponent, Sortab
 
   @state() level: number = null;
 
-  @state() openable = false;
+  @state() expandable = false;
 
   @state() parentListEl: List["el"];
 
@@ -169,8 +169,22 @@ export class ListItem extends LitElement implements InteractiveComponent, Sortab
    */
   @property() moveToItems: MoveTo[] = [];
 
-  /** When `true`, the item is open to show child components. */
-  @property({ reflect: true }) open = false;
+  /**
+   * When `true`, the item is open to show child components.
+   *
+   * @deprecated Use `expanded` prop instead.
+   */
+  @property({ reflect: true })
+  get open(): boolean {
+    return this.expanded;
+  }
+
+  set open(value: boolean) {
+    this.expanded = value;
+  }
+
+  /** When `true`, the item is expanded to show child components. */
+  @property({ reflect: true }) expanded = false;
 
   /**
    * Specifies the size of the component.
@@ -366,8 +380,8 @@ export class ListItem extends LitElement implements InteractiveComponent, Sortab
       this.handleDisabledChange();
     }
 
-    if (changes.has("open") && (this.hasUpdated || this.open !== false)) {
-      this.handleOpenChange();
+    if (changes.has("expanded") && (this.hasUpdated || this.expanded !== false)) {
+      this.handleExpandedChange();
     }
 
     if (changes.has("selected") && (this.hasUpdated || this.selected !== false)) {
@@ -379,7 +393,7 @@ export class ListItem extends LitElement implements InteractiveComponent, Sortab
     }
 
     if (changes.has("displayMode") && this.hasUpdated) {
-      this.handleOpenableChange(this.defaultSlotEl.value);
+      this.handleExpandableChange(this.defaultSlotEl.value);
     }
   }
 
@@ -405,7 +419,7 @@ export class ListItem extends LitElement implements InteractiveComponent, Sortab
     this.emitCalciteInternalListItemChange();
   }
 
-  private handleOpenChange(): void {
+  private handleExpandedChange(): void {
     this.emitCalciteInternalListItemToggle();
   }
 
@@ -424,7 +438,7 @@ export class ListItem extends LitElement implements InteractiveComponent, Sortab
 
   private handleCalciteInternalListDefaultSlotChanges(event: CustomEvent<void>): void {
     event.stopPropagation();
-    this.handleOpenableChange(this.defaultSlotEl.value);
+    this.handleExpandableChange(this.defaultSlotEl.value);
   }
 
   private setSortHandleEl(el: SortHandle["el"]): void {
@@ -511,7 +525,7 @@ export class ListItem extends LitElement implements InteractiveComponent, Sortab
     }
   }
 
-  private handleOpenableChange(slotEl: HTMLSlotElement): void {
+  private handleExpandableChange(slotEl: HTMLSlotElement): void {
     if (!slotEl) {
       return;
     }
@@ -522,20 +536,20 @@ export class ListItem extends LitElement implements InteractiveComponent, Sortab
       list.displayMode = this.displayMode;
     });
 
-    this.openable =
+    this.expandable =
       this.displayMode === "nested" && (children.lists.length > 0 || children.items.length > 0);
   }
 
   private handleDefaultSlotChange(event: Event): void {
-    this.handleOpenableChange(event.target as HTMLSlotElement);
+    this.handleExpandableChange(event.target as HTMLSlotElement);
   }
 
   private handleToggleClick(): void {
     this.toggle();
   }
 
-  private toggle(value = !this.open): void {
-    this.open = value;
+  private toggle(value = !this.expanded): void {
+    this.expanded = value;
     this.calciteListItemToggle.emit();
   }
 
@@ -588,8 +602,8 @@ export class ListItem extends LitElement implements InteractiveComponent, Sortab
       containerEl: { value: containerEl },
       actionsStartEl: { value: actionsStartEl },
       actionsEndEl: { value: actionsEndEl },
-      open,
-      openable,
+      expanded,
+      expandable,
     } = this;
 
     const cells = this.getGridCells();
@@ -606,7 +620,7 @@ export class ListItem extends LitElement implements InteractiveComponent, Sortab
       event.preventDefault();
       const nextIndex = currentIndex + 1;
       if (currentIndex === -1) {
-        if (!open && openable) {
+        if (!expanded && expandable) {
           this.toggle(true);
           this.focusCell(null);
         } else if (cells[0]) {
@@ -620,7 +634,7 @@ export class ListItem extends LitElement implements InteractiveComponent, Sortab
       const prevIndex = currentIndex - 1;
       if (currentIndex === -1) {
         this.focusCell(null);
-        if (open && openable) {
+        if (expanded && expandable) {
           this.toggle(false);
         } else {
           this.calciteInternalFocusPreviousItem.emit();
@@ -745,34 +759,34 @@ export class ListItem extends LitElement implements InteractiveComponent, Sortab
     ) : null;
   }
 
-  private renderOpen(): JsxNode {
-    const { el, open, openable, messages, displayMode, scale } = this;
+  private renderExpanded(): JsxNode {
+    const { el, expanded, expandable, messages, displayMode, scale } = this;
 
     if (displayMode !== "nested") {
       return null;
     }
 
     const dir = getElementDir(el);
 
-    const icon = openable
-      ? open
+    const icon = expandable
+      ? expanded
         ? ICONS.open
         : dir === "rtl"
-          ? ICONS.closedRTL
-          : ICONS.closedLTR
+          ? ICONS.collapsedRTL
+          : ICONS.collapsedLTR
       : ICONS.blank;
 
     const iconScale = getIconScale(scale);
 
-    const tooltip = openable ? (open ? messages.collapse : messages.expand) : undefined;
+    const tooltip = expandable ? (expanded ? messages.collapse : messages.expand) : undefined;
 
-    const openClickHandler = openable ? this.handleToggleClick : undefined;
+    const expandedClickHandler = expandable ? this.handleToggleClick : undefined;
 
     return (
       <div
-        class={CSS.openContainer}
-        key="open-container"
-        onClick={openClickHandler}
+        class={CSS.expandedContainer}
+        key="expanded-container"
+        onClick={expandedClickHandler}
         title={tooltip}
       >
         <calcite-icon icon={icon} key={icon} scale={iconScale} />
@@ -893,7 +907,7 @@ export class ListItem extends LitElement implements InteractiveComponent, Sortab
       <div
         class={{
           [CSS.nestedContainer]: true,
-          [CSS.nestedContainerOpen]: this.openable && this.open,
+          [CSS.nestedContainerExpanded]: this.expandable && this.expanded,
         }}
       >
         <slot onSlotChange={this.handleDefaultSlotChange} ref={this.defaultSlotEl} />
@@ -954,8 +968,8 @@ export class ListItem extends LitElement implements InteractiveComponent, Sortab
 
   override render(): JsxNode {
     const {
-      openable,
-      open,
+      expandable,
+      expanded,
       level,
       active,
       label,
@@ -987,7 +1001,7 @@ export class ListItem extends LitElement implements InteractiveComponent, Sortab
       <InteractiveContainer disabled={disabled}>
         <div class={{ [CSS.wrapper]: true, [CSS.wrapperBordered]: wrapperBordered }}>
           <div
-            ariaExpanded={openable ? open : null}
+            ariaExpanded={expandable ? expanded : null}
             ariaLabel={label}
             ariaLevel={level}
             ariaSelected={selected}
@@ -1009,7 +1023,7 @@ export class ListItem extends LitElement implements InteractiveComponent, Sortab
           >
             {this.renderDragHandle()}
             {this.renderSelected()}
-            {this.renderOpen()}
+            {this.renderExpanded()}
             <div
               class={{
                 [CSS.contentContainerWrapper]: true,