fix: FlowItem - Filter out menu actions defined in the calcite-pick-l…

…ist and calcite-value-list. #497 fix: FlowItem - Filter out menu actions defined in the calcite-pick-list and calcite-value-list.
Esri · Nov 5, 2019 · 6764d6c · 6764d6c
2 parents eb177cb + 9482eb6
commit 6764d6c
Show file tree

Hide file tree

Showing 3 changed files with 52 additions and 15 deletions.
diff --git a/src/components/calcite-flow-item/calcite-flow-item.e2e.ts b/src/components/calcite-flow-item/calcite-flow-item.e2e.ts
@@ -21,28 +21,59 @@ describe("calcite-flow-item", () => {
     expect(singleActionContainer).toBeNull();
   });
 
-  it("should not render containers when there are no menu actions in parent element", async () => {
+  it("should not show menu button when actions are inside blacklisted component", async () => {
     const page = await newE2EPage();
 
-    await page.setContent(`
+    const pageContent = `
     <calcite-flow-item>
-      <div slot="footer-actions">
+      <calcite-pick-list>
+        <calcite-action slot="menu-actions" indicator text="Cool">
+          <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+            <path d="M14 4H2V3h12zm0 4H2v1h12zm0 5H2v1h12z" />
+          </svg>
+        </calcite-action>
+        <calcite-action slot="menu-actions" indicator text="Cool">
+          <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+            <path d="M14 4H2V3h12zm0 4H2v1h12zm0 5H2v1h12z" />
+          </svg>
+        </calcite-action>
+      </calcite-pick-list>
+    </calcite-flow-item>
+  `;
+
+    await page.setContent(pageContent);
+
+    await page.waitForChanges();
+
+    const menuButtonNode = await page.find(`calcite-flow-item >>> .${CSS.menuButton}`);
+
+    expect(menuButtonNode).toBeNull();
+  });
+
+  it("should not show single action when actions are inside blacklisted component", async () => {
+    const page = await newE2EPage();
+
+    const pageContent = `
+    <calcite-flow-item>
+      <calcite-pick-list>
         <div slot="menu-actions">
-          <button>Save</button>
-          <button>Cancel</button>
+          <calcite-action indicator text="Cool">
+            <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg">
+              <path d="M14 4H2V3h12zm0 4H2v1h12zm0 5H2v1h12z" />
+            </svg>
+          </calcite-action>
         </div>
-        <button>Save</button>
-        <button>Cancel</button>
-      </div>
+      </calcite-pick-list>
     </calcite-flow-item>
-  `);
+  `;
 
-    const menuContainer = await page.find(`calcite-flow-item >>> .${CSS.menuContainer}`);
+    await page.setContent(pageContent);
 
-    const singleActionContainer = await page.find(`calcite-flow-item >>> .${CSS.singleActionContainer}`);
+    await page.waitForChanges();
 
-    expect(menuContainer).toBeNull();
-    expect(singleActionContainer).toBeNull();
+    const singleActionContainerNode = await page.find(`calcite-flow-item >>> .${CSS.singleActionContainer}`);
+
+    expect(singleActionContainerNode).toBeNull();
   });
 
   it("should show single action container when one action exists", async () => {

diff --git a/src/components/calcite-flow-item/calcite-flow-item.tsx b/src/components/calcite-flow-item/calcite-flow-item.tsx
@@ -6,7 +6,7 @@ import { getElementDir } from "../utils/dom";
 
 import classnames from "classnames";
 
-import { CSS, TEXT } from "./resources";
+import { BLACKLISTED_MENU_ACTIONS_COMPONENTS, CSS, TEXT } from "./resources";
 import CalciteIcon from "../utils/CalciteIcon";
 
 import { CalciteTheme } from "../interfaces";
@@ -187,7 +187,11 @@ export class CalciteFlowItem {
 
   renderHeaderActions() {
     const menuActionsNode = this.el.querySelector("[slot=menu-actions]");
-    const hasMenuActions = !!menuActionsNode && menuActionsNode.parentElement === this.el;
+
+    const hasMenuActionsInBlacklisted =
+      menuActionsNode && menuActionsNode.closest(BLACKLISTED_MENU_ACTIONS_COMPONENTS.join(","));
+
+    const hasMenuActions = !!menuActionsNode && !hasMenuActionsInBlacklisted;
     const actionCount = hasMenuActions ? menuActionsNode.childElementCount : 0;
 
     const menuActionsNodes =

diff --git a/src/components/calcite-flow-item/resources.ts b/src/components/calcite-flow-item/resources.ts
@@ -1,3 +1,5 @@
+export const BLACKLISTED_MENU_ACTIONS_COMPONENTS = ["calcite-pick-list", "calcite-value-list"];
+
 export const CSS = {
   heading: "heading",
   backButton: "back-button",