fix(core/menu-category): allow empty icon as menu-category-item (#1110)

siemens · Feb 26, 2024 · 03790e0 · 03790e0
1 parent 4d3f895
commit 03790e0
Show file tree

Hide file tree

Showing 17 changed files with 243 additions and 68 deletions.
diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -10507,7 +10507,7 @@
             "resolved": "string",
             "references": {}
           },
-          "mutable": false,
+          "mutable": true,
           "attr": "icon",
           "reflectToAttr": false,
           "docs": "Name of the icon you want to display. Icon names can be resolved from the documentation",
@@ -10554,7 +10554,7 @@
             "resolved": "string",
             "references": {}
           },
-          "mutable": false,
+          "mutable": true,
           "attr": "tab-icon",
           "reflectToAttr": false,
           "docs": "Name of the icon you want to display. Icon names can be resolved from the documentation",
@@ -10568,7 +10568,6 @@
               "text": "since 2.0.0 use `icon` property. Will be removed in 3.0.0"
             }
           ],
-          "default": "'document'",
           "deprecation": "since 2.0.0 use `icon` property. Will be removed in 3.0.0",
           "values": [
             {

diff --git a/packages/core/src/components/menu-category/menu-category.scss b/packages/core/src/components/menu-category/menu-category.scss
@@ -8,6 +8,7 @@
  */
 
 @import 'mixins/shadow-dom/component';
+@import 'mixins/text-truncation';
 
 :host {
   @include ix-component;
@@ -23,6 +24,12 @@
     height: 100%;
   }
 
+  .category-text {
+    width: 100%;
+    padding-right: 0.25rem;
+    @include ellipsis;
+  }
+
   .category-chevron {
     margin-left: auto;
     margin-right: 0px;
@@ -44,6 +51,10 @@
     max-height: 999999999px;
   }
 
+  .menu-items--collapsed {
+    display: none;
+  }
+
   .category-dropdown {
     ::slotted(ix-menu-item) {
       --ix-menu-item-height: 2.5rem;
@@ -52,6 +63,7 @@
 
   .category-dropdown-header {
     pointer-events: none;
+    padding-left: 0.125rem;
     min-width: 256px;
   }
 

diff --git a/packages/core/src/components/menu-category/menu-category.tsx b/packages/core/src/components/menu-category/menu-category.tsx
@@ -171,7 +171,7 @@ export class MenuCategory {
           onClick={(e) => this.onCategoryClicked(e)}
         >
           <div class="category">
-            {this.label}
+            <div class="category-text">{this.label}</div>
             <ix-icon
               name={'chevron-down-small'}
               class={{
@@ -186,6 +186,7 @@ export class MenuCategory {
           class={{
             'menu-items': true,
             'menu-items--expanded': this.showItems,
+            'menu-items--collapsed': !this.showItems,
           }}
         >
           {this.showItems ? <slot></slot> : null}

diff --git a/packages/core/src/components/menu-category/test/menu-category.ct.ts b/packages/core/src/components/menu-category/test/menu-category.ct.ts
@@ -118,7 +118,9 @@ test('should show items as dropdown', async ({ mount, page }) => {
 
   const dropdown = menuCategory.locator('ix-dropdown');
   await expect(dropdown).toBeVisible();
-  await expect(menuCategory.locator('.menu-items')).toHaveClass('menu-items');
+  await expect(menuCategory.locator('.menu-items')).toHaveClass(
+    'menu-items menu-items--collapsed'
+  );
 
   const dropdownHeader = dropdown.locator('ix-dropdown-item');
   await expect(dropdownHeader).toHaveText('Category label');
@@ -164,5 +166,38 @@ test('should collapse category after collapse menu', async ({
   );
 
   await menuButton.click();
-  await expect(menuCategory.locator('.menu-items')).toHaveClass('menu-items');
+  await expect(menuCategory.locator('.menu-items')).toHaveClass(
+    'menu-items menu-items--collapsed'
+  );
+});
+
+test('should hide menu-items when collapsed', async ({ mount, page }) => {
+  await mount(`
+    <ix-basic-navigation>
+      <ix-menu>
+        <ix-menu-category label="Category label">
+          <ix-menu-item>Test Item 1</ix-menu-item>
+          <ix-menu-item>Test Item 2</ix-menu-item>
+        </ix-menu-category>
+      </ix-menu>
+    </ix-basic-navigation>
+  `);
+
+  await page.waitForSelector('ix-menu');
+  const menu = page.locator('ix-menu');
+  await page
+    .locator('ix-basic-navigation')
+    .evaluate(
+      (menu: HTMLIxBasicNavigationElement) => (menu.breakpoints = ['md'])
+    );
+
+  const menuButton = menu.locator('ix-burger-menu');
+  await menuButton.click();
+
+  const menuCategory = page.locator('ix-menu-category');
+
+  await expect(menuCategory.locator('.menu-items')).toHaveClass(
+    'menu-items menu-items--collapsed'
+  );
+  await expect(menuCategory.locator('.menu-items')).toBeHidden();
 });
diff --git a/packages/core/src/components/menu-item/menu-item.scss b/packages/core/src/components/menu-item/menu-item.scss
@@ -56,7 +56,7 @@ $menuItemPadding: 0.875rem;
     display: inline-flex;
     position: absolute;
     top: 0.25rem;
-    left: 1.75rem;
+    left: 1.5rem;
 
     .pill {
       display: inline-flex;
@@ -159,7 +159,28 @@ $menuItemPadding: 0.875rem;
 }
 
 :host(.tab-nested) {
-  .tab::before {
-    display: none;
+  .tab {
+    flex-direction: row;
+    padding-left: calc(0.5rem + $menuItemPadding);
+
+    .notification {
+      position: relative;
+      top: 0;
+      left: 0;
+      padding-left: 0.5rem;
+    }
+
+    .tab-icon {
+      padding-left: 0.5rem;
+      padding-right: 0.5rem;
+    }
+
+    .tab-text {
+      margin-left: 0.5rem;
+    }
+
+    &::before {
+      display: none;
+    }
   }
 }
diff --git a/packages/core/src/components/menu-item/menu-item.tsx b/packages/core/src/components/menu-item/menu-item.tsx
@@ -7,7 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { Component, Element, h, Host, Prop, State } from '@stencil/core';
+import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';
 import { createMutationObserver } from '../utils/mutation-observer';
 
 /**
@@ -36,12 +36,12 @@ export class MenuItem {
    *
    * @deprecated since 2.0.0 use `icon` property. Will be removed in 3.0.0
    */
-  @Prop() tabIcon = 'document';
+  @Prop({ mutable: true }) tabIcon: string;
 
   /**
    * Name of the icon you want to display. Icon names can be resolved from the documentation @link https://ix.siemens.io/docs/icon-library/icons
    */
-  @Prop() icon: string;
+  @Prop({ mutable: true }) icon: string;
 
   /**
    * Show notification count on tab
@@ -68,6 +68,9 @@ export class MenuItem {
   componentWillLoad() {
     this.isHostedInsideCategory =
       !!this.hostElement.closest('ix-menu-category');
+
+    this.onIconChange();
+    this.onTabIconChange();
   }
 
   componentWillRender() {
@@ -92,6 +95,28 @@ export class MenuItem {
     }
   }
 
+  @Watch('icon')
+  onIconChange() {
+    if (
+      !this.isHostedInsideCategory &&
+      !this.hostElement.icon &&
+      !this.hostElement.tabIcon
+    ) {
+      this.icon = 'document';
+    }
+  }
+
+  @Watch('tabIcon')
+  onTabIconChange() {
+    if (
+      !this.isHostedInsideCategory &&
+      !this.hostElement.icon &&
+      !this.hostElement.tabIcon
+    ) {
+      this.tabIcon = 'document';
+    }
+  }
+
   render() {
     let extendedAttributes = {};
     if (this.home) {
@@ -122,15 +147,17 @@ export class MenuItem {
           tabIndex={this.disabled ? -1 : 0}
           role="listitem"
         >
-          <ix-icon
-            class={'tab-icon'}
-            name={this.icon ?? this.tabIcon}
-          ></ix-icon>
-          <div class="notification">
-            {this.notifications ? (
+          {(this.icon || this.tabIcon) && (
+            <ix-icon
+              class={'tab-icon'}
+              name={this.icon ?? this.tabIcon}
+            ></ix-icon>
+          )}
+          {this.notifications ? (
+            <div class="notification">
               <div class="pill">{this.notifications}</div>
-            ) : null}
-          </div>
+            </div>
+          ) : null}
           <span class="tab-text text-default">
             <slot></slot>
           </span>

diff --git a/packages/core/src/tests/menu/basic/index.html b/packages/core/src/tests/menu/basic/index.html
@@ -0,0 +1,31 @@
+<!--
+SPDX-FileCopyrightText: 2023 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+      name="viewport"
+    />
+    <title>Stencil Component Starter</title>
+  </head>
+  <body style="width: 100vw; height: 100vh">
+    <ix-basic-navigation>
+      <ix-menu>
+        <ix-menu-item>Item 1</ix-menu-item>
+        <ix-menu-category label="Category with a long name">
+            <ix-menu-item icon="home" notifications="10">Sub 1</ix-menu-item>
+            <ix-menu-item notifications="7">Sub 2</ix-menu-item>
+            <ix-menu-item icon="star">Sub 3</ix-menu-item>
+            <ix-menu-item>Sub 4</ix-menu-item>
+        </ix-menu-category>
+      </ix-menu>
+    </ix-basic-navigation>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>
diff --git a/packages/core/src/tests/menu/link/index.html b/packages/core/src/tests/menu/link/index.html
@@ -0,0 +1,41 @@
+<!--
+SPDX-FileCopyrightText: 2023 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<!DOCTYPE html>
+<html lang="en">
+  <head>
+    <meta charset="utf-8"/>
+    <meta
+      content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+      name="viewport"
+    />
+    <title>Stencil Component Starter</title>
+  </head>
+  <body style="width: 100vw; height: 100vh">
+    <ix-basic-navigation>
+      <ix-menu>
+        <a href="#link1">
+          <ix-menu-item>Link 1</ix-menu-item>
+        </a>
+        <ix-menu-category label="Category">
+          <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>
+    <script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+  </body>
+</html>