restore panel support

Esri · Aug 15, 2022 · a5b4dfb · a5b4dfb
1 parent 86c93c7
commit a5b4dfb
Show file tree

Hide file tree

Showing 6 changed files with 280 additions and 345 deletions.
diff --git a/src/components/flow/flow.e2e.ts b/src/components/flow/flow.e2e.ts
@@ -21,214 +21,232 @@ describe("calcite-flow", () => {
     expect(element).not.toHaveClass(CSS.frameRetreating);
   });
 
-  it("back() method should remove item", async () => {
-    const page = await newE2EPage();
+  describe("works with flow-items and panels (deprecated)", () => {
+    testItemBehavior("flow-item");
 
-    await page.setContent("<calcite-flow><calcite-flow-item></calcite-flow-item></calcite-flow>");
+    testItemBehavior("panel");
 
-    const flow = await page.find("calcite-flow");
+    function testItemBehavior(itemType: "flow-item" | "panel"): void {
+      const itemTag = `calcite-${itemType}`;
 
-    await flow.callMethod("back");
+      it("back() method should remove item", async () => {
+        const page = await newE2EPage();
 
-    await page.waitForChanges();
+        await page.setContent(`<calcite-flow><${itemTag}></${itemTag}></calcite-flow>`);
 
-    const flowItem = await page.find("calcite-flow-item");
+        const flow = await page.find("calcite-flow");
 
-    expect(flowItem).toBeNull();
-  });
+        await flow.callMethod("back");
 
-  it("setting 'beforeBack' should be called in 'back()'", async () => {
-    const page = await newE2EPage();
+        await page.waitForChanges();
 
-    const mockCallBack = jest.fn().mockReturnValue(Promise.resolve());
-    await page.exposeFunction("beforeBack", mockCallBack);
+        const flowItem = await page.find(itemTag);
 
-    await page.setContent("<calcite-flow><calcite-flow-item></calcite-flow-item></calcite-flow>");
+        expect(flowItem).toBeNull();
+      });
 
-    await page.$eval(
-      "calcite-flow-item",
-      (elm: HTMLCalcitePanelElement) =>
-        (elm.beforeBack = (window as typeof window & Pick<typeof elm, "beforeBack">).beforeBack)
-    );
+      it("setting 'beforeBack' should be called in 'back()'", async () => {
+        const page = await newE2EPage();
 
-    const flow = await page.find("calcite-flow");
+        const mockCallBack = jest.fn().mockReturnValue(Promise.resolve());
+        await page.exposeFunction("beforeBack", mockCallBack);
 
-    const backValue = await flow.callMethod("back");
+        await page.setContent(`<calcite-flow><${itemTag}></${itemTag}></calcite-flow>`);
 
-    expect(backValue).toBeDefined();
-    expect(mockCallBack).toBeCalledTimes(1);
-  });
+        await page.$eval(
+          itemTag,
+          (elm: HTMLCalcitePanelElement) =>
+            (elm.beforeBack = (window as typeof window & Pick<typeof elm, "beforeBack">).beforeBack)
+        );
 
-  it("frame advancing should add animation class", async () => {
-    const page = await newE2EPage();
+        const flow = await page.find("calcite-flow");
 
-    await page.setContent("<calcite-flow><calcite-flow-item></calcite-flow-item></calcite-flow>");
+        const backValue = await flow.callMethod("back");
 
-    const items = await page.findAll("calcite-flow-item");
+        expect(backValue).toBeDefined();
+        expect(mockCallBack).toBeCalledTimes(1);
+      });
 
-    expect(items).toHaveLength(1);
+      it("frame advancing should add animation class", async () => {
+        const page = await newE2EPage();
 
-    const element = await page.find("calcite-flow");
+        await page.setContent(`<calcite-flow><${itemTag}></${itemTag}></calcite-flow>`);
 
-    element.innerHTML = "<calcite-flow-item>test</calcite-flow-item><calcite-flow-item>test</calcite-flow-item>";
+        const items = await page.findAll(itemTag);
 
-    await page.waitForChanges();
+        expect(items).toHaveLength(1);
 
-    const items2 = await page.findAll("calcite-flow-item");
+        const element = await page.find("calcite-flow");
 
-    expect(items2).toHaveLength(2);
+        element.innerHTML = `<${itemTag}>test</${itemTag}><${itemTag}>test</${itemTag}>`;
 
-    const frame = await page.find(`calcite-flow >>> .${CSS.frame}`);
+        await page.waitForChanges();
 
-    expect(frame).toHaveClass(CSS.frameAdvancing);
-  });
+        const items2 = await page.findAll(itemTag);
 
-  it("frame advancing should add animation class when subtree is modified", async () => {
-    const page = await newE2EPage();
+        expect(items2).toHaveLength(2);
 
-    await page.setContent("<calcite-flow><calcite-flow-item>flow1</calcite-flow-item></calcite-flow>");
+        const frame = await page.find(`calcite-flow >>> .${CSS.frame}`);
 
-    const element = await page.find("calcite-flow");
+        expect(frame).toHaveClass(CSS.frameAdvancing);
+      });
 
-    element.innerHTML = `<calcite-flow-item>flow1</calcite-flow-item><calcite-flow-item id="flow2">flow2</calcite-flow-item>`;
+      it("frame advancing should add animation class when subtree is modified", async () => {
+        const page = await newE2EPage();
 
-    await page.waitForChanges();
+        await page.setContent(`<calcite-flow><${itemTag}>flow1</${itemTag}></calcite-flow>`);
 
-    const item2 = await page.find(`calcite-flow-item[id=flow2]`);
+        const element = await page.find("calcite-flow");
 
-    item2.innerHTML = "new flow2 subtree content";
+        element.innerHTML = `<${itemTag}>flow1</${itemTag}><${itemTag} id="flow2">flow2</${itemTag}>`;
 
-    await page.waitForChanges();
+        await page.waitForChanges();
 
-    const frame = await page.find(`calcite-flow >>> .${CSS.frame}`);
+        const item2 = await page.find(`${itemTag}[id=flow2]`);
 
-    expect(frame).toHaveClass(CSS.frameAdvancing);
-  });
+        item2.innerHTML = "new flow2 subtree content";
 
-  it("frame retreating should add animation class", async () => {
-    const page = await newE2EPage();
+        await page.waitForChanges();
 
-    await page.setContent("<calcite-flow></calcite-flow>");
+        const frame = await page.find(`calcite-flow >>> .${CSS.frame}`);
 
-    await page.$eval("calcite-flow", (elm: HTMLElement) => {
-      elm.innerHTML = `
-      <calcite-flow-item></calcite-flow-item>
-      <calcite-flow-item></calcite-flow-item>
-      <calcite-flow-item></calcite-flow-item>
+        expect(frame).toHaveClass(CSS.frameAdvancing);
+      });
+
+      it("frame retreating should add animation class", async () => {
+        const page = await newE2EPage();
+
+        await page.setContent("<calcite-flow></calcite-flow>");
+
+        await page.$eval(
+          "calcite-flow",
+          (elm: HTMLElement, itemTag: string): void => {
+            elm.innerHTML = `
+      <${itemTag}></${itemTag}>
+      <${itemTag}></${itemTag}>
+      <${itemTag}></${itemTag}>
       `;
-    });
+          },
+          itemTag
+        );
 
-    await page.waitForChanges();
+        await page.waitForChanges();
 
-    const items = await page.findAll("calcite-flow-item");
+        const items = await page.findAll(itemTag);
 
-    expect(items).toHaveLength(3);
+        expect(items).toHaveLength(3);
 
-    const frame = await page.find(`calcite-flow >>> .${CSS.frame}`);
+        const frame = await page.find(`calcite-flow >>> .${CSS.frame}`);
 
-    expect(frame).not.toHaveClass(CSS.frameRetreating);
-    expect(frame).not.toHaveClass(CSS.frameAdvancing);
+        expect(frame).not.toHaveClass(CSS.frameRetreating);
+        expect(frame).not.toHaveClass(CSS.frameAdvancing);
 
-    await page.$eval("calcite-flow", (elm: HTMLCalciteFlowElement) => elm.back());
+        await page.$eval("calcite-flow", (elm: HTMLCalciteFlowElement) => elm.back());
 
-    await page.waitForChanges();
+        await page.waitForChanges();
 
-    const items2 = await page.findAll("calcite-flow-item");
+        const items2 = await page.findAll(itemTag);
 
-    expect(items2).toHaveLength(2);
+        expect(items2).toHaveLength(2);
 
-    const frame2 = await page.find(`calcite-flow >>> .${CSS.frame}`);
+        const frame2 = await page.find(`calcite-flow >>> .${CSS.frame}`);
 
-    expect(frame2).toHaveClass(CSS.frameRetreating);
-    expect(frame2).not.toHaveClass(CSS.frameAdvancing);
-  });
+        expect(frame2).toHaveClass(CSS.frameRetreating);
+        expect(frame2).not.toHaveClass(CSS.frameAdvancing);
+      });
 
-  it("frame animation class should not exist if frame count remains the same", async () => {
-    const page = await newE2EPage();
+      it("frame animation class should not exist if frame count remains the same", async () => {
+        const page = await newE2EPage();
 
-    await page.setContent(
-      "<calcite-flow><calcite-flow-item>test</calcite-flow-item><calcite-flow-item>test</calcite-flow-item></calcite-flow>"
-    );
+        await page.setContent(
+          `<calcite-flow><${itemTag}>test</${itemTag}><${itemTag}>test</${itemTag}></calcite-flow>`
+        );
 
-    const frame = await page.find(`calcite-flow >>> .${CSS.frame}`);
+        const frame = await page.find(`calcite-flow >>> .${CSS.frame}`);
 
-    expect(frame).not.toHaveClass(CSS.frameRetreating);
-    expect(frame).not.toHaveClass(CSS.frameAdvancing);
+        expect(frame).not.toHaveClass(CSS.frameRetreating);
+        expect(frame).not.toHaveClass(CSS.frameAdvancing);
 
-    const element = await page.find("calcite-flow");
+        const element = await page.find("calcite-flow");
 
-    element.innerHTML = "<calcite-flow-item>test</calcite-flow-item><calcite-flow-item>test</calcite-flow-item>";
+        element.innerHTML = `<${itemTag}>test</${itemTag}><${itemTag}>test</${itemTag}>`;
 
-    await page.waitForChanges();
+        await page.waitForChanges();
 
-    expect(frame).not.toHaveClass(CSS.frameRetreating);
-    expect(frame).not.toHaveClass(CSS.frameAdvancing);
-  });
+        expect(frame).not.toHaveClass(CSS.frameRetreating);
+        expect(frame).not.toHaveClass(CSS.frameAdvancing);
+      });
 
-  it("panel properties should be set", async () => {
-    const page = await newE2EPage();
+      it("panel properties should be set", async () => {
+        const page = await newE2EPage();
 
-    await page.setContent("<calcite-flow></calcite-flow>");
+        await page.setContent("<calcite-flow></calcite-flow>");
 
-    await page.$eval("calcite-flow", (elm: HTMLElement) => {
-      elm.innerHTML = `
-      <calcite-flow-item></calcite-flow-item>
-      <calcite-flow-item></calcite-flow-item>
-      <calcite-flow-item></calcite-flow-item>
+        await page.$eval(
+          "calcite-flow",
+          (elm: HTMLElement, itemTag: string): void => {
+            elm.innerHTML = `
+      <${itemTag}></${itemTag}>
+      <${itemTag}></${itemTag}>
+      <${itemTag}></${itemTag}>
       `;
-    });
+          },
+          itemTag
+        );
 
-    const items = await page.findAll("calcite-flow-item");
+        const items = await page.findAll(itemTag);
 
-    expect(items).toHaveLength(3);
+        expect(items).toHaveLength(3);
 
-    const showBackButton0 = await items[0].getProperty("showBackButton");
-    const showBackButton2 = await items[2].getProperty("showBackButton");
+        const showBackButton0 = await items[0].getProperty("showBackButton");
+        const showBackButton2 = await items[2].getProperty("showBackButton");
 
-    expect(items[0].getAttribute("hidden")).not.toBe(null);
-    expect(showBackButton0).not.toBe(null);
+        expect(items[0].getAttribute("hidden")).not.toBe(null);
+        expect(showBackButton0).not.toBe(null);
 
-    expect(items[2].getAttribute("hidden")).toBe(null);
-    expect(showBackButton2).not.toBe(null);
-  });
+        expect(items[2].getAttribute("hidden")).toBe(null);
+        expect(showBackButton2).not.toBe(null);
+      });
 
-  it("should be accessible", async () =>
-    accessible(`
+      it("should be accessible", async () =>
+        accessible(html`
     <calcite-flow>
-      <calcite-flow-item>
-      </calcite-flow-item>
-      <calcite-flow-item>
-      </calcite-flow-item>
-      <calcite-flow-item>
-      </calcite-flow-item>
+      <${itemTag}>
+      </${itemTag}>
+      <${itemTag}>
+      </${itemTag}>
+      <${itemTag}>
+      </${itemTag}>
     </calcite-flow>
     `));
 
-  it("should also work with descendant slotted panels", async () => {
-    const page = await newE2EPage();
+      it("should also work with descendant slotted panels", async () => {
+        const page = await newE2EPage();
 
-    await page.setContent(html`<calcite-flow>
-      <calcite-flow-item>Valid panel</calcite-flow-item>
-      <calcite-flow-item>Valid panel</calcite-flow-item>
+        await page.setContent(html`<calcite-flow>
+      <${itemTag}>Valid panel</${itemTag}>
+      <${itemTag}>Valid panel</${itemTag}>
       <div>
-        <calcite-flow-item>Allowed panel <calcite-flow-item>Disallowed panel</calcite-flow-item></calcite-flow-item>
+        <${itemTag}>Allowed panel <${itemTag}>Disallowed panel</${itemTag}></${itemTag}>
       </div>
     </calcite-flow>`);
 
-    const items = await page.findAll("calcite-flow-item");
+        const items = await page.findAll(itemTag);
 
-    expect(items).toHaveLength(4);
+        expect(items).toHaveLength(4);
 
-    expect(items[0].getAttribute("hidden")).toBe("");
-    expect(await items[0].getProperty("showBackButton")).toBe(false);
+        expect(items[0].getAttribute("hidden")).toBe("");
+        expect(await items[0].getProperty("showBackButton")).toBe(false);
 
-    expect(items[1].getAttribute("hidden")).toBe("");
-    expect(await items[1].getProperty("showBackButton")).toBe(false);
+        expect(items[1].getAttribute("hidden")).toBe("");
+        expect(await items[1].getProperty("showBackButton")).toBe(false);
 
-    expect(items[2].getAttribute("hidden")).toBe(null);
-    expect(await items[2].getProperty("showBackButton")).toBe(true);
+        expect(items[2].getAttribute("hidden")).toBe(null);
+        expect(await items[2].getProperty("showBackButton")).toBe(true);
 
-    expect(items[3].getAttribute("hidden")).toBe(null);
-    expect(await items[3].getProperty("showBackButton")).toBe(false);
+        expect(items[3].getAttribute("hidden")).toBe(null);
+        expect(await items[3].getProperty("showBackButton")).toBe(false);
+      });
+    }
   });
 });
diff --git a/src/components/flow/flow.scss b/src/components/flow/flow.scss
@@ -19,7 +19,8 @@
       p-0;
   }
 
-  ::slotted(calcite-flow-item) {
+  ::slotted(calcite-flow-item),
+  ::slotted(calcite-panel) {
     @apply h-full;
   }