fix(core/menu): a-tag styling (#689)

packages/core/src/components/menu-category/menu-category.scss

@@ -62,3 +62,9 @@
 :host(.expanded) {
   background-color: var(--theme-color-ghost--active);
 }
+
+:host {
+  ::slotted(a[href]) {
+    text-decoration: none !important;
+  }
+}

packages/core/src/components/menu-category/menu-category.tsx

@@ -55,7 +55,7 @@ export class MenuCategory {
 
   private getNestedItems() {
     return Array.from(
-      this.hostElement.querySelectorAll(':scope > ix-menu-item')
+      this.hostElement.querySelectorAll(':scope ix-menu-item')
     ) as HTMLIxMenuItemElement[];
   }
 

packages/core/src/components/menu-item/menu-item.scss

@@ -37,7 +37,7 @@ $menuItemPadding: 0.875rem;
     @include ghost-hover-pressed;
   }
 
-  i.glyph {
+  .tab-icon {
     color: var(--theme-nav-item-primary-icon--color);
     position: relative;
   }

packages/core/src/components/menu-item/menu-item.tsx

@@ -110,7 +110,10 @@ export class MenuItem {
         {...extendedAttributes}
       >
         <button class="tab" title={this.title} tabIndex={0} role="listitem">
-          <ix-icon name={this.icon ?? this.tabIcon}></ix-icon>
+          <ix-icon
+            class={'tab-icon'}
+            name={this.icon ?? this.tabIcon}
+          ></ix-icon>
           <div class="notification">
             {this.notifications ? (
               <div class="pill">{this.notifications}</div>

packages/core/src/tests/menu/menu.e2e.ts

@@ -0,0 +1,55 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
+import { expect } from '@playwright/test';
+import { test } from '@utils/test';
+
+test('should render menu items with a[href]', async ({ mount, page }) => {
+  await mount(`
+  <ix-basic-navigation>
+    <ix-menu>
+      <a href="#link1">
+        <ix-menu-item>Link 1</ix-menu-item>
+      </a>
+      <ix-menu-category label="Sub">
+        <a href="#link2">
+          <ix-menu-item>Link 2</ix-menu-item>
+        </a>
+        <a href="#link3">
+          <ix-menu-item active>Link 3</ix-menu-item>
+        </a>
+        <a href="#link4">
+          <ix-menu-item>Link 4</ix-menu-item>
+        </a>
+        <a href="#link5">
+          <ix-menu-item>Link 5</ix-menu-item>
+        </a>
+      </ix-menu-category>
+    </ix-menu>
+  </ix-basic-navigation>`);
+
+  const basicNavigationElement = page.locator('ix-basic-navigation');
+
+  const category = page.locator('ix-menu-category');
+  await category.click();
+
+  const link1 = page.getByText('Link 1', { exact: true });
+  await expect(link1).toBeVisible();
+
+  const link2 = page.getByText('Link 1', { exact: true });
+  await expect(link2).toBeVisible();
+
+  await page.waitForTimeout(1000);
+
+  expect(
+    await basicNavigationElement.screenshot({
+      animations: 'disabled',
+    })
+  ).toMatchSnapshot();
+});