feat(navigation): remove prefix nav for menu and menu-item

src/components/menu-item/interfaces.ts

@@ -0,0 +1,4 @@
+export interface MenuItemEvent {
+  event: KeyboardEvent;
+  children: HTMLCalciteMenuItemElement[];
+}

src/components/menu-item/menu-item.e2e.ts

@@ -0,0 +1,110 @@
+import { newE2EPage } from "@stencil/core/testing";
+import { html } from "../../../support/formatting";
+import { accessible, focusable, hidden, reflects, renders } from "../../tests/commonTests";
+
+describe("calcite-menu-item", () => {
+  it("renders", async () => renders("calcite-menu-item", { display: "flex" }));
+
+  it("reflects", async () =>
+    reflects("calcite-menu-item", [
+      {
+        propertyName: "active",
+        value: "true"
+      },
+      {
+        propertyName: "editable",
+        value: "true"
+      },
+      {
+        propertyName: "iconStart",
+        value: "layers"
+      },
+      {
+        propertyName: "iconEnd",
+        value: "layers"
+      },
+      {
+        propertyName: "href",
+        value: "www.esri.com"
+      },
+      {
+        propertyName: "target",
+        value: "_blank"
+      },
+      {
+        propertyName: "text",
+        value: "Calcite"
+      }
+    ]));
+
+  it("honors hidden attribute", async () => hidden("calcite-menu-item"));
+
+  it("is accessible", async () => {
+    const page = await newE2EPage();
+    await page.setContent(html`<calcite-menu> <calcite-menu-item text="calcite"> </calcite-menu-item> </calcite-menu>`);
+    await accessible("calcite-menu-item", page);
+  });
+
+  it("is focusable", () => focusable("calcite-menu-item"));
+
+  describe("mouse support", () => {
+    it("should open the submenu on click", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html`<calcite-menu>
+        <calcite-menu-item id="ArcGISOnline" text="ArcGISOnline">
+          <calcite-menu-item id="ArcGISJS" text="ArcGISJS" slot="menu-item-dropdown">
+            <calcite-menu-item text="API" id="API" slot="menu-item-dropdown"></calcite-menu-item>
+            <calcite-menu-item text="Widgets" id="Widgets" slot="menu-item-dropdown"> </calcite-menu-item>
+          </calcite-menu-item>
+          <calcite-menu-item text="Calcite" id="Calcite" slot="menu-item-dropdown"> </calcite-menu-item>
+        </calcite-menu-item>
+      </calcite-menu>`);
+
+      const menuItem = await page.find("calcite-menu-item[id='ArcGISOnline']");
+      const menuItemMenu = await page.find("calcite-menu-item[id='ArcGISOnline'] >>> calcite-menu");
+
+      expect(await menuItemMenu.isVisible()).toBe(false);
+
+      await menuItem.click();
+      await page.waitForChanges();
+      expect(await menuItemMenu.isVisible()).toBe(true);
+      expect(await page.evaluate(() => document.activeElement.id)).toBe("ArcGISOnline");
+
+      const subMenuItem = await page.find("calcite-menu-item[text='ArcGISJS']");
+      const subMenuItemMenu = await page.find("calcite-menu-item[text='ArcGISJS'] >>> calcite-menu");
+      expect(await subMenuItemMenu.isVisible()).toBe(false);
+      await subMenuItem.click();
+      await page.waitForChanges();
+      expect(await subMenuItemMenu.isVisible()).toBe(true);
+      expect(await page.evaluate(() => document.activeElement.id)).toBe("ArcGISJS");
+    });
+
+    it("should close any opened submenu when clicked outside", async () => {
+      const page = await newE2EPage();
+      await page.setContent(html`<calcite-menu>
+        <calcite-menu-item id="ArcGISOnline" text="ArcGISOnline">
+          <calcite-menu-item text="ArcGISJS" slot="menu-item-dropdown"> </calcite-menu-item>
+          <calcite-menu-item text="Calcite" slot="menu-item-dropdown"> </calcite-menu-item>
+        </calcite-menu-item>
+      </calcite-menu>`);
+
+      const menuItem = await page.find("calcite-menu-item[id='ArcGISOnline']");
+      const menuItemMenu = await page.find("calcite-menu-item[id='ArcGISOnline'] >>> calcite-menu");
+
+      expect(await menuItemMenu.isVisible()).toBe(false);
+
+      await menuItem.click();
+      await page.waitForChanges();
+      expect(await menuItemMenu.isVisible()).toBe(true);
+      expect(await page.evaluate(() => document.activeElement.id)).toBe("ArcGISOnline");
+
+      const menuElement = await page.$("calcite-menu");
+      const { x, y, width, height } = await menuElement.boundingBox();
+
+      await page.mouse.click(x + width + 50, y + height + 50);
+      await page.waitForChanges();
+      expect(await menuItemMenu.isVisible()).toBe(false);
+      expect(await page.evaluate(() => document.activeElement.id)).not.toBe("ArcGISOnline");
+    });
+  });
+});

src/components/nav-menu-item/nav-menu-item.scss → src/components/menu-item/menu-item.scss

@@ -13,7 +13,7 @@
   &:hover > calcite-action {
     border-inline-start-color: var(-calcite-ui-border-3);
   }
-  --calcite-nav-menu-item-font-weight: 400;
+  --calcite-menu-item-font-weight: 400;
 }
 
 .container,
@@ -56,7 +56,7 @@ a:hover ~ calcite-action {
   text-0
   text-color-2 box-border;
   text-decoration: none;
-  font-weight: var(--calcite-nav-menu-item-font-weight);
+  font-weight: var(--calcite-menu-item-font-weight);
   border-block-end: 2px solid transparent;
 
   & span {
@@ -213,7 +213,7 @@ a:active {
 
     box-shadow: none;
     border: none;
-    & ::slotted(calcite-nav-menu-item) {
+    & ::slotted(calcite-menu-item) {
       padding-inline-start: 28px;
       inline-size: 100%;
     }

src/components/nav-menu-item/nav-menu-item.stories.ts → src/components/menu-item/menu-item.stories.ts

@@ -12,8 +12,8 @@ export default {
 };
 
 export const simple = (): string => html`<calcite-nav
-  ><calcite-nav-menu slot="primary-content-center">
-    <calcite-nav-menu-item
+  ><calcite-menu slot="primary-content-center">
+    <calcite-menu-item
       text="${text("text", "My nav item")}"
       src="${text("src", "")}"
       href="${text("href", "")}"
@@ -23,12 +23,12 @@ export const simple = (): string => html`<calcite-nav
       ${boolean("breadcrumb", false)}
       ${boolean("editable", false)}
       ${boolean("text-enabled", true)}
-    /> </calcite-nav-menu
+    /> </calcite-menu
 ></calcite-nav>`;
 
 export const iconStart = (): string => html`<calcite-nav
-  ><calcite-nav-menu slot="primary-content-center">
-    <calcite-nav-menu-item
+  ><calcite-menu slot="primary-content-center">
+    <calcite-menu-item
       text="${text("text", "My nav item")}"
       src="${text("src", "")}"
       href="${text("href", "")}"
@@ -39,12 +39,12 @@ export const iconStart = (): string => html`<calcite-nav
       ${boolean("breadcrumb", false)}
       ${boolean("editable", false)}
       ${boolean("text-enabled", true)}
-    /> </calcite-nav-menu
+    /> </calcite-menu
 ></calcite-nav>`;
 
 export const iconEnd = (): string => html`<calcite-nav
-  ><calcite-nav-menu slot="primary-content-center">
-    <calcite-nav-menu-item
+  ><calcite-menu slot="primary-content-center">
+    <calcite-menu-item
       text="${text("text", "My nav item")}"
       src="${text("src", "")}"
       href="${text("href", "")}"
@@ -55,12 +55,12 @@ export const iconEnd = (): string => html`<calcite-nav
       ${boolean("breadcrumb", false)}
       ${boolean("editable", false)}
       ${boolean("text-enabled", true)}
-    /> </calcite-nav-menu
+    /> </calcite-menu
 ></calcite-nav>`;
 
 export const iconsBoth = (): string => html`<calcite-nav
-  ><calcite-nav-menu slot="primary-content-center">
-    <calcite-nav-menu-item
+  ><calcite-menu slot="primary-content-center">
+    <calcite-menu-item
       text="${text("text", "My nav item")}"
       src="${text("src", "")}"
       href="${text("href", "")}"
@@ -72,5 +72,5 @@ export const iconsBoth = (): string => html`<calcite-nav
       ${boolean("breadcrumb", false)}
       ${boolean("editable", false)}
       ${boolean("text-enabled", true)}
-    /> </calcite-nav-menu
+    /> </calcite-menu
 ></calcite-nav>`;