@esri/calcite-components 1.0.0-next.596 → 1.0.0-next.597

package/dist/collection/components/sortable-list/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.596
+ * v1.0.0-next.597
  */
 export const CSS = {
   sortItem: "sort-item",

package/dist/collection/components/sortable-list/sortable-list.e2e.js

@@ -0,0 +1,57 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { accessible, disabled, hidden, renders } from "../../tests/commonTests";
+import { dragAndDrop } from "../../tests/utils";
+import { html } from "../../../support/formatting";
+describe("calcite-sortable-list", () => {
+    it("renders", async () => renders("calcite-sortable-list", { display: "flex" }));
+    it("honors hidden attribute", async () => hidden("calcite-sortable-list"));
+    it("is accessible", async () => accessible(`<calcite-sortable-list></calcite-sortable-list>`));
+    it("can be disabled", () => disabled(html `<calcite-sortable-list>
+        <div id="one"><calcite-handle></calcite-handle>1</div>
+        <div id="two"><calcite-handle></calcite-handle>2</div>
+        <div id="three"><calcite-handle></calcite-handle>3</div>
+      </calcite-sortable-list>`, { focusTarget: "child" }));
+    const worksUsingMouse = async (page) => {
+        await dragAndDrop(page, `#one calcite-handle`, `#two calcite-handle`);
+        const [first, second] = await page.findAll("div");
+        expect(await first.getProperty("id")).toBe("two");
+        expect(await second.getProperty("id")).toBe("one");
+    };
+    const worksUsingKeyboard = async (page) => {
+        await page.keyboard.press("Tab");
+        await page.keyboard.press("Space");
+        await page.waitForChanges();
+        await page.keyboard.press("ArrowDown");
+        const itemsAfter = await page.findAll("div");
+        expect(await itemsAfter[0].getProperty("id")).toBe("two");
+        expect(await itemsAfter[1].getProperty("id")).toBe("one");
+    };
+    describe("drag and drop", () => {
+        let page;
+        beforeEach(async () => {
+            page = await newE2EPage({
+                html: `<calcite-sortable-list>
+        <div id="one"><calcite-handle></calcite-handle>1</div>
+        <div id="two"><calcite-handle></calcite-handle>2</div>
+        <div id="three"><calcite-handle></calcite-handle>3</div>
+      </calcite-sortable-list>`
+            });
+        });
+        it("works using a mouse", () => worksUsingMouse(page));
+        it("works using a keyboard", () => worksUsingKeyboard(page));
+    });
+    describe("drag and drop with dragSelector", () => {
+        let page;
+        beforeEach(async () => {
+            page = await newE2EPage({
+                html: `<calcite-sortable-list drag-selector=".calcite-sortable">
+        <div class="calcite-sortable" id="one"><calcite-handle></calcite-handle>1</div>
+        <div class="calcite-sortable" id="two"><calcite-handle></calcite-handle>2</div>
+        <div class="calcite-sortable" id="three"><calcite-handle></calcite-handle>3</div>
+      </calcite-sortable-list>`
+            });
+        });
+        it("works using a mouse", () => worksUsingMouse(page));
+        it("works using a keyboard", () => worksUsingKeyboard(page));
+    });
+});

package/dist/collection/components/sortable-list/sortable-list.js

@@ -1,10 +1,10 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.596
+ * v1.0.0-next.597
  */
 import Sortable from "sortablejs";
-import { Component, Element, Event, Listen, Prop, State, h } from "@stencil/core";
+import { h } from "@stencil/core";
 import { createObserver } from "../../utils/observers";
 import { CSS } from "./resources";
 import { updateHostInteraction } from "../../utils/interactive";
@@ -153,155 +153,166 @@ export class SortableList {
         [CSS.container]: true,
         [CSS.containerVertical]: !horizontal,
         [CSS.containerHorizontal]: horizontal
-      } },
-      h("slot", null)));
+      } }, h("slot", null)));
   }
   static get is() { return "calcite-sortable-list"; }
   static get encapsulation() { return "shadow"; }
-  static get originalStyleUrls() { return {
-    "$": ["sortable-list.scss"]
-  }; }
-  static get styleUrls() { return {
-    "$": ["sortable-list.css"]
-  }; }
-  static get properties() { return {
-    "dragSelector": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "Specifies which items inside the element should be draggable."
-      },
-      "attribute": "drag-selector",
-      "reflect": true
-    },
-    "group": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": true,
-      "docs": {
-        "tags": [],
-        "text": "The list's group identifier.\n\nTo drag elements from one list into another, both lists must have the same group value."
+  static get originalStyleUrls() {
+    return {
+      "$": ["sortable-list.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["sortable-list.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "dragSelector": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "Specifies which items inside the element should be draggable."
+        },
+        "attribute": "drag-selector",
+        "reflect": true
       },
-      "attribute": "group",
-      "reflect": true
-    },
-    "handleSelector": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
+      "group": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": true,
+        "docs": {
+          "tags": [],
+          "text": "The list's group identifier.\n\nTo drag elements from one list into another, both lists must have the same group value."
+        },
+        "attribute": "group",
+        "reflect": true
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "The selector for the handle elements."
+      "handleSelector": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "The selector for the handle elements."
+        },
+        "attribute": "handle-selector",
+        "reflect": true,
+        "defaultValue": "\"calcite-handle\""
       },
-      "attribute": "handle-selector",
-      "reflect": true,
-      "defaultValue": "\"calcite-handle\""
-    },
-    "layout": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "Layout",
-        "resolved": "\"grid\" | \"horizontal\" | \"vertical\"",
-        "references": {
-          "Layout": {
-            "location": "import",
-            "path": "../interfaces"
+      "layout": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Layout",
+          "resolved": "\"grid\" | \"horizontal\" | \"vertical\"",
+          "references": {
+            "Layout": {
+              "location": "import",
+              "path": "../interfaces"
+            }
           }
-        }
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "Indicates the horizontal or vertical orientation of the component."
-      },
-      "attribute": "layout",
-      "reflect": true,
-      "defaultValue": "\"vertical\""
-    },
-    "disabled": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, disabled prevents interaction. This state shows items with lower opacity/grayed."
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Indicates the horizontal or vertical orientation of the component."
+        },
+        "attribute": "layout",
+        "reflect": true,
+        "defaultValue": "\"vertical\""
       },
-      "attribute": "disabled",
-      "reflect": true,
-      "defaultValue": "false"
-    },
-    "loading": {
-      "type": "boolean",
-      "mutable": false,
-      "complexType": {
-        "original": "boolean",
-        "resolved": "boolean",
-        "references": {}
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, disabled prevents interaction. This state shows items with lower opacity/grayed."
+        },
+        "attribute": "disabled",
+        "reflect": true,
+        "defaultValue": "false"
       },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "When true, content is waiting to be loaded. This state shows a busy indicator."
-      },
-      "attribute": "loading",
-      "reflect": true,
-      "defaultValue": "false"
-    }
-  }; }
-  static get states() { return {
-    "handleActivated": {}
-  }; }
-  static get events() { return [{
-      "method": "calciteListOrderChange",
-      "name": "calciteListOrderChange",
-      "bubbles": true,
-      "cancelable": false,
-      "composed": true,
-      "docs": {
-        "tags": [],
-        "text": "Emitted when the order of the list has changed."
-      },
-      "complexType": {
-        "original": "void",
-        "resolved": "void",
-        "references": {}
+      "loading": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "When true, content is waiting to be loaded. This state shows a busy indicator."
+        },
+        "attribute": "loading",
+        "reflect": true,
+        "defaultValue": "false"
       }
-    }]; }
+    };
+  }
+  static get states() {
+    return {
+      "handleActivated": {}
+    };
+  }
+  static get events() {
+    return [{
+        "method": "calciteListOrderChange",
+        "name": "calciteListOrderChange",
+        "bubbles": true,
+        "cancelable": false,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Emitted when the order of the list has changed."
+        },
+        "complexType": {
+          "original": "void",
+          "resolved": "void",
+          "references": {}
+        }
+      }];
+  }
   static get elementRef() { return "el"; }
-  static get listeners() { return [{
-      "name": "calciteHandleNudge",
-      "method": "calciteHandleNudgeHandler",
-      "target": undefined,
-      "capture": false,
-      "passive": false
-    }]; }
+  static get listeners() {
+    return [{
+        "name": "calciteHandleNudge",
+        "method": "calciteHandleNudgeHandler",
+        "target": undefined,
+        "capture": false,
+        "passive": false
+      }];
+  }
 }

package/dist/collection/components/split-button/resources.js

@@ -1,7 +1,7 @@
 /*!
  * All material copyright ESRI, All Rights Reserved, unless otherwise specified.
  * See https://github.com/Esri/calcite-components/blob/master/LICENSE.md for details.
- * v1.0.0-next.596
+ * v1.0.0-next.597
  */
 export const CSS = {
   container: "split-button__container",

package/dist/collection/components/split-button/split-button.e2e.js

@@ -0,0 +1,206 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { accessible, renders, defaults, disabled, hidden } from "../../tests/commonTests";
+import { html } from "../../../support/formatting";
+import { CSS } from "./resources";
+describe("calcite-split-button", () => {
+    it("has defaults", async () => defaults("calcite-split-button", [
+        {
+            propertyName: "overlayPositioning",
+            defaultValue: "absolute"
+        }
+    ]));
+    const content = `
+  <calcite-dropdown-group>
+    <calcite-dropdown-item id="item-1">Item</calcite-dropdown-item>
+    <calcite-dropdown-item id="item-2" active>Item2</calcite-dropdown-item>
+  </calcite-dropdown-group>`;
+    it("renders", () => renders("calcite-split-button", { display: "inline-block" }));
+    it("honors hidden attribute", async () => hidden("calcite-split-button"));
+    it("is accessible", async () => accessible(`<calcite-split-button
+    primary-text="Button Text"
+    dropdown-label="Show options">
+      ${content}
+    </calcite-split-button>`));
+    it("is accessible when disabled", async () => accessible(`<calcite-split-button
+    disabled
+    primary-text="Button Text"
+    dropdown-label="Show options">
+      ${content}
+    </calcite-split-button>`));
+    it("is accessible when loading", async () => accessible(`<calcite-split-button
+    loading
+    primary-text="Button Text"
+    dropdown-label="Show options">
+      ${content}
+    </calcite-split-button>`));
+    it("is accessible with icons and no text", async () => accessible(`<calcite-split-button
+    icon-end="plus"
+    icon-start="plus"
+    primary-label="Button label"
+    dropdown-label="Show options">
+      ${content}
+    </calcite-split-button>`));
+    it("can be disabled", () => disabled("calcite-split-button"));
+    it("renders default props when none are provided", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <calcite-split-button>
+      </calcite-split-button>`);
+        const element = await page.find("calcite-split-button");
+        expect(element).toEqualAttribute("scale", "m");
+        expect(element).toEqualAttribute("color", "blue");
+        expect(element).toEqualAttribute("dropdown-icon-type", "chevron");
+        expect(element).toEqualAttribute("width", "auto");
+    });
+    it(`should set all internal calcite-button types to 'button'`, async () => {
+        const page = await newE2EPage({
+            html: html `<calcite-split-button primary-text="primary action"></calcite-split-button>`
+        });
+        const buttons = await page.findAll("calcite-split-button >>> calcite-button");
+        expect(buttons).toHaveLength(2);
+        for (const button of buttons) {
+            expect(await button.getProperty("type")).toBe("button");
+        }
+    });
+    it("renders requested props when valid props are provided", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <calcite-split-button
+          scale="s"
+          color="red"
+          dropdown-icon-type="caret"
+          loading
+          disabled
+          width="half"
+          dropdown-label="more actions"
+          primary-label="primary action">
+      </calcite-split-button>`);
+        const element = await page.find("calcite-split-button");
+        const primaryButton = await page.find("calcite-split-button >>> calcite-button");
+        const dropdownButton = await page.find("calcite-split-button >>> calcite-dropdown calcite-button");
+        expect(element).toEqualAttribute("scale", "s");
+        expect(element).toEqualAttribute("color", "red");
+        expect(element).toEqualAttribute("dropdown-icon-type", "caret");
+        expect(element).toHaveAttribute("loading");
+        expect(element).toHaveAttribute("disabled");
+        expect(await primaryButton.getProperty("label")).toBe("primary action");
+        expect(await dropdownButton.getProperty("label")).toBe("more actions");
+        expect(element).toEqualAttribute("width", "half");
+    });
+    it("renders primaryText without icons as inner content of primary button", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <calcite-split-button primary-text="primary action">
+      </calcite-split-button>`);
+        const primaryButton = await page.find("calcite-split-button >>> calcite-button");
+        expect(primaryButton).toEqualText("primary action");
+        expect(primaryButton).not.toHaveAttribute("icon-start");
+        expect(primaryButton).not.toHaveAttribute("icon-end");
+    });
+    it("renders primaryText + primary-icon-start as inner content of primary button", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <calcite-split-button primary-text="primary action" primary-icon-start="save">
+      </calcite-split-button>`);
+        const primaryButton = await page.find("calcite-split-button >>> calcite-button");
+        expect(primaryButton).toEqualText("primary action");
+        expect(primaryButton).toEqualAttribute("icon-start", "save");
+        expect(primaryButton).not.toHaveAttribute("icon-end");
+    });
+    it("renders primaryText + primary-icon-end as inner content of primary button", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <calcite-split-button primary-text="primary action" primary-icon-end="save">
+      </calcite-split-button>`);
+        const primaryButton = await page.find("calcite-split-button >>> calcite-button");
+        expect(primaryButton).toEqualText("primary action");
+        expect(primaryButton).not.toHaveAttribute("icon-start");
+        expect(primaryButton).toEqualAttribute("icon-end", "save");
+    });
+    it("renders primaryText + primary-icon-end and primary-icon-start as inner content of primary button", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <calcite-split-button primary-text="primary action" primary-icon-start="save" primary-icon-end="save">
+      </calcite-split-button>`);
+        const primaryButton = await page.find("calcite-split-button >>> calcite-button");
+        expect(primaryButton).toEqualText("primary action");
+        expect(primaryButton).toEqualAttribute("icon-start", "save");
+        expect(primaryButton).toEqualAttribute("icon-end", "save");
+    });
+    it("changes the size and width of the dropdown + primary button based on scale", async () => {
+        const elementScaleToDropdownScale = {
+            s: "s",
+            m: "m",
+            l: "l"
+        };
+        const elementScaleToButtonScale = {
+            s: "s",
+            m: "m",
+            l: "l"
+        };
+        const page = await newE2EPage();
+        await page.setContent(`
+      <calcite-split-button>
+      </calcite-split-button>`);
+        const element = await page.find("calcite-split-button");
+        const primaryButton = await page.find("calcite-split-button >>> calcite-button");
+        const dropdown = await page.find("calcite-split-button >>> calcite-dropdown");
+        for (const elementScale of Object.keys(elementScaleToDropdownScale)) {
+            element.setProperty("scale", elementScale);
+            await page.waitForChanges();
+            const dropdownScale = elementScaleToDropdownScale[elementScale];
+            expect(dropdown).toEqualAttribute("width", dropdownScale);
+            expect(dropdown).toEqualAttribute("scale", dropdownScale);
+            expect(primaryButton).toEqualAttribute("scale", elementScaleToButtonScale[elementScale]);
+        }
+    });
+    it("adds split-child attributes to child button components", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`
+      <calcite-split-button>
+      </calcite-split-button>`);
+        const primaryButton = await page.find("calcite-split-button >>> calcite-button");
+        const dropdownButton = await page.find("calcite-split-button >>> calcite-dropdown calcite-button");
+        expect(primaryButton).toEqualAttribute("split-child", "primary");
+        expect(dropdownButton).toEqualAttribute("split-child", "secondary");
+    });
+    it("adds the relevant CSS class based on the width attribute", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-split-button width="auto"></calcite-split-button>`);
+        const element = await page.find(`calcite-split-button`);
+        const container = await page.find(`calcite-split-button >>> .${CSS.widthAuto}`);
+        expect(container).not.toBeNull();
+        expect(container).toHaveClass(CSS.widthAuto);
+        element.setAttribute("width", "half");
+        await page.waitForChanges();
+        expect(container).toHaveClass(CSS.widthHalf);
+        element.setAttribute("width", "full");
+        await page.waitForChanges();
+        expect(container).toHaveClass(CSS.widthFull);
+    });
+    it("should support dropdown item keyboard navigation", async () => {
+        const page = await newE2EPage();
+        await page.setContent(`<calcite-split-button scale="s" primary-text="Button">
+    <calcite-dropdown-group selection-mode="none">
+      <calcite-dropdown-item id="item-1">Option 2</calcite-dropdown-item>
+      <calcite-dropdown-item id="item-2">Option 3</calcite-dropdown-item>
+      <calcite-dropdown-item id="item-3">Option 4</calcite-dropdown-item>
+    </calcite-dropdown-group>
+  </calcite-split-button>`);
+        const group = await page.find("calcite-dropdown-group");
+        const secondary = await page.find(`calcite-split-button >>> calcite-button[split-child="secondary"]`);
+        const dropdownOpenEvent = page.waitForEvent("calciteDropdownOpen");
+        await secondary.click();
+        await dropdownOpenEvent;
+        expect(await group.isVisible()).toBe(true);
+        expect(await page.evaluate(() => document.activeElement.id)).toEqual("item-1");
+        await page.keyboard.press("ArrowDown");
+        expect(await page.evaluate(() => document.activeElement.id)).toEqual("item-2");
+        await page.keyboard.press("ArrowDown");
+        expect(await page.evaluate(() => document.activeElement.id)).toEqual("item-3");
+        const dropdownCloseEvent = page.waitForEvent("calciteDropdownClose");
+        await page.keyboard.press("Enter");
+        await dropdownCloseEvent;
+        expect(await group.isVisible()).toBe(false);
+    });
+});