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

packages/calcite-components/readme.md

@@ -4,25 +4,25 @@
 [![downloads per month](https://img.shields.io/npm/dm/@esri/calcite-components?style=flat-square&color=35AC46)](https://www.npmjs.com/package/@esri/calcite-components)
 [![commits per month](https://img.shields.io/github/commit-activity/m/esri/calcite-components?style=flat-square&color=EDD317)](https://github.com/Esri/calcite-design-system/graphs/contributors)
 
-# Calcite Components
+# Calcite components
 
-Calcite Components, part of Esri's Calcite Design System, is a rich library of flexible, framework-agnostic web components for building applications. View the [documentation](https://developers.arcgis.com/calcite-design-system/components/) for component descriptions, examples, and API reference, which includes properties, slots, styles, and theming.
+Calcite components, part of Esri's Calcite Design System, is a rich library of flexible, framework-agnostic web components for building applications. View the [documentation](https://developers.arcgis.com/calcite-design-system/components/) for component descriptions, examples, and API reference, which includes properties, slots, styles, and theming.
 
 ## Use the CDN
 
-The most common approach for loading Calcite Components is to use the version hosted on the CDN. The components can be loaded via `<script>` and `<link>` tags in the head of your HTML document:
+The most common approach for loading Calcite components is to use the version hosted on the CDN. The components can be loaded via `<script>` and `<link>` tags in the head of your HTML document:
 
 <!-- x-release-please-start-version -->
 
 ```html
 <script
   type="module"
-  src="https://cdn.jsdelivr.net/npm/@esri/[email protected].0/dist/calcite/calcite.esm.js"
+  src="https://cdn.jsdelivr.net/npm/@esri/[email protected].3/dist/calcite/calcite.esm.js"
 ></script>
 <link
   rel="stylesheet"
   type="text/css"
-  href="https://cdn.jsdelivr.net/npm/@esri/[email protected].0/dist/calcite/calcite.css"
+  href="https://cdn.jsdelivr.net/npm/@esri/[email protected].3/dist/calcite/calcite.css"
 />
 ```
 
@@ -32,41 +32,13 @@ Once these tags are added, components can be used like any other HTML element. O
 
 ## Use the NPM package
 
-Calcite Components is also provided as an [NPM package](https://www.npmjs.com/package/@esri/calcite-components). To get started, first install the package, then follow the steps below. Alternatively, you can find examples using different frameworks and build tools [here](https://github.com/Esri/calcite-components-examples).
-
-```sh
-npm install @esri/calcite-components
-```
-
-### 1. Build
-
-Refer to the [Get started](https://developers.arcgis.com/calcite-design-system/get-started/) page for details on setting up a build.
-
-### 2. Assets
-
-Some components, such as `calcite-icon` and `calcite-date-picker`, rely on assets being available at a particular path. As mentioned, with the NPM package you have the option to provide a local path or the URL to the assets hosted on the CDN. Using the CDN hosted assets can help decrease on disk build size.
-
-To use the assets locally, they need to be copied using a build tool or NPM script. The directory for the local assets must be named `assets`, which eases the copying process. For example, `/public/calcite/assets` will work, however `/public/calcite-assets` will not.
-
-The Calcite Components [examples repo](https://github.com/Esri/calcite-components-examples) demonstrates using local assets in a variety of JavaScript frameworks and build tools. Each example has a README with a framework or build tool specific explanation.
-
-```sh
-cp -r node_modules/@esri/calcite-components/dist/calcite/assets/* ./public/assets/
-```
-
-### 3. Styles
-
-Finally, load the Cascading Style Sheet (CSS). This is also dependent on your framework or build tool, however in many cases it can be imported in JavaScript:
-
-```js
-import "@esri/calcite-components/dist/calcite/calcite.css";
-```
+Refer to the [Get started](https://developers.arcgis.com/calcite-design-system/get-started/#use-the-npm-package) page for details on setting up the [NPM package](https://www.npmjs.com/package/@esri/calcite-components).
 
 ## TypeScript
 
-Refer to the [TypeScript section of the Framework integration](https://developers.arcgis.com/calcite-design-system/resources/frameworks/#typescript) resource page for guidance on setting up TypeScript.
+Refer to the [Framework integration](https://developers.arcgis.com/calcite-design-system/resources/frameworks/#typescript) resource page for guidance on setting up TypeScript.
 
-## Browser Support
+## Browser support
 
 <table>
   <thead>
@@ -86,7 +58,7 @@ Refer to the [TypeScript section of the Framework integration](https://developer
 
 ## Contributing
 
-We welcome contributions to this project. See [CONTRIBUTING.md](./CONTRIBUTING.md) for an overview of contribution guidelines.
+We welcome contributions to this project. See [CONTRIBUTING.md](https://github.com/Esri/calcite-design-system/blob/dev/CONTRIBUTING.md) for an overview of contribution guidelines.
 
 ## License
 

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,
@@ -90,6 +102,22 @@ describe("calcite-list-item", () => {
         propertyName: "sortHandleOpen",
         value: true,
       },
+      {
+        propertyName: "open",
+        value: true,
+      },
+      {
+        propertyName: "expanded",
+        value: true,
+      },
+      {
+        propertyName: "closed",
+        value: true,
+      },
+      {
+        propertyName: "closable",
+        value: true,
+      },
     ]);
   });
 
@@ -370,50 +398,68 @@ describe("calcite-list-item", () => {
     expect(calciteListItemClose).toHaveReceivedEventTimes(1);
   });
 
-  it("should fire calciteListItemToggle event when opened and closed", 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
-      ></calcite-list-item>`,
+  describe("calciteListItemToggle event", () => {
+    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
+        ></calcite-list-item>`,
+      });
+
+      const listItem = await page.find("#test");
+      const calciteListItemToggle = await page.spyOnEvent("calciteListItemToggle", "window");
+
+      expect(await listItem.getProperty("expanded")).toBe(false);
+
+      const expandedButton = await page.find(`#test >>> .${CSS.expandedContainer}`);
+
+      await expandedButton.click();
+      expect(await listItem.getProperty("expanded")).toBe(true);
+      expect(calciteListItemToggle).toHaveReceivedEventTimes(1);
+
+      await expandedButton.click();
+      expect(await listItem.getProperty("expanded")).toBe(false);
+      expect(calciteListItemToggle).toHaveReceivedEventTimes(2);
     });
 
-    const listItem = await page.find("#test");
-    const calciteListItemToggle = await page.spyOnEvent("calciteListItemToggle", "window");
+    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>`,
+      });
 
-    expect(await listItem.getProperty("open")).toBe(false);
+      const listItem = await page.find("calcite-list-item");
+      const calciteListItemToggle = await page.spyOnEvent("calciteListItemToggle", "window");
 
-    const openButton = await page.find(`#test >>> .${CSS.openContainer}`);
+      expect(await listItem.getProperty("expanded")).toBe(false);
 
-    await openButton.click();
-    expect(await listItem.getProperty("open")).toBe(true);
-    expect(calciteListItemToggle).toHaveReceivedEventTimes(1);
+      const expandedButton = await page.find(`calcite-list-item >>> .${CSS.expandedContainer}`);
 
-    await openButton.click();
-    expect(await listItem.getProperty("open")).toBe(false);
-    expect(calciteListItemToggle).toHaveReceivedEventTimes(2);
+      expect(expandedButton.getAttribute("title")).toBe(null);
+
+      await expandedButton.click();
+      expect(await listItem.getProperty("expanded")).toBe(false);
+      expect(calciteListItemToggle).toHaveReceivedEventTimes(0);
+
+      await expandedButton.click();
+      expect(await listItem.getProperty("expanded")).toBe(false);
+      expect(calciteListItemToggle).toHaveReceivedEventTimes(0);
+    });
   });
 
-  it("should not fire calciteListItemToggle event without nested items", async () => {
+  it("should set expanded when open is set", async () => {
     const page = await newE2EPage({
-      html: html`<calcite-list-item display-mode="nested"></calcite-list-item>`,
+      html: html`<calcite-list-item></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}`);
-
-    expect(openButton.getAttribute("title")).toBe(null);
-
-    await openButton.click();
-    expect(await listItem.getProperty("open")).toBe(false);
-    expect(calciteListItemToggle).toHaveReceivedEventTimes(0);
+    listItem.setProperty("open", true);
+    await page.waitForChanges();
+    expect(await listItem.getProperty("expanded")).toBe(true);
 
-    await openButton.click();
-    expect(await listItem.getProperty("open")).toBe(false);
-    expect(calciteListItemToggle).toHaveReceivedEventTimes(0);
+    listItem.setProperty("open", false);
+    await page.waitForChanges();
+    expect(await listItem.getProperty("expanded")).toBe(false);
   });
 
   it("should set displayMode on slotted list", async () => {
@@ -438,16 +484,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 () => {
@@ -526,6 +572,7 @@ describe("calcite-list-item", () => {
         },
       );
     });
+
     describe(`selection-appearance="border"`, () => {
       themed(
         html`<calcite-list-item

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;
 }