feat(core/menu): rework of menu (#592)

Co-authored-by: Lukas Maurer <lukas.maurer@siemens.com>
siemens · Jun 28, 2023 · 932b051 · 932b051
1 parent e4b0355
commit 932b051
Show file tree

Hide file tree

Showing 126 changed files with 2,735 additions and 1,166 deletions.
diff --git a/.github/workflows/build.yml b/.github/workflows/build.yml
@@ -73,7 +73,7 @@ jobs:
     timeout-minutes: 60
     runs-on: ubuntu-latest
     container:
-      image: mcr.microsoft.com/playwright:v1.24.0-focal
+      image: mcr.microsoft.com/playwright:v1.32.1-focal
       env:
         DEBIAN_FRONTEND: noninteractive
     steps:
@@ -86,12 +86,13 @@ jobs:
     runs-on: ubuntu-latest
     needs: [build]
     container:
-      image: node:18.12.1
+      image: mcr.microsoft.com/playwright:v1.32.1-focal
       env:
         DEBIAN_FRONTEND: noninteractive
     steps:
       - uses: actions/checkout@v3
       - uses: ./.github/workflows/actions/build-cache
+      - uses: ./.github/workflows/actions/install
       - uses: ./.github/workflows/actions/test
 
   lint:

diff --git a/BREAKING_CHANGES.md b/BREAKING_CHANGES.md
@@ -0,0 +1,36 @@
+# Breaking Changes
+
+## v2.0.0
+
+### `ix-menu-item`
+
+#### `tabIcon` is deprecated and gets replaced with `icon` property
+
+___Before___
+
+```tsx
+<ix-menu-item tabIcon="rocket"></ix-menu-item>
+```
+
+___Now___
+
+```tsx
+<ix-menu-item icon="rocket"></ix-menu-item>
+```
+
+## `ix-menu-about`, `ix-menu-settings`
+
+### `close` event
+
+___Before___
+```typescript
+@Event() close: EventEmitter<string>;
+```
+
+___Now___
+```typescript
+@Event() close: EventEmitter<{
+  nativeEvent: MouseEvent;
+  name: string;
+}>;
+```
diff --git a/packages/angular-test-app/src/app/app-routing.module.ts b/packages/angular-test-app/src/app/app-routing.module.ts
@@ -65,6 +65,7 @@ import KeyValueWithLabelLeft from 'src/preview-examples/key-value-with-label-lef
 import Kpi from 'src/preview-examples/kpi';
 import MapNavigation from 'src/preview-examples/map-navigation';
 import MapNavigationOverlay from 'src/preview-examples/map-navigation-overlay';
+import MenuCategory from 'src/preview-examples/menu-category';
 import MessageBar from 'src/preview-examples/message-bar';
 import ModalByInstance from 'src/preview-examples/modal-by-instance';
 import Modal from 'src/preview-examples/modal-by-template';
@@ -308,6 +309,7 @@ const routes: Routes = [
       },
       { path: 'key-value-list-with-icon', component: KeyValueListWithIcon },
       { path: 'key-value-list-striped', component: KeyValueListStriped },
+      { path: 'menu-category', component: MenuCategory },
     ],
   },
 ];

diff --git a/packages/angular-test-app/src/app/app.module.ts b/packages/angular-test-app/src/app/app.module.ts
@@ -72,6 +72,7 @@ import KeyValueWithLabelLeft from 'src/preview-examples/key-value-with-label-lef
 import Kpi from 'src/preview-examples/kpi';
 import MapNavigation from 'src/preview-examples/map-navigation';
 import MapNavigationOverlay from 'src/preview-examples/map-navigation-overlay';
+import MenuCategory from 'src/preview-examples/menu-category';
 import MessageBar from 'src/preview-examples/message-bar';
 import ModalByInstance from 'src/preview-examples/modal-by-instance';
 import ModalByInstanceExample from 'src/preview-examples/modal-by-instance-content';
@@ -214,6 +215,7 @@ import { NavigationTestComponent } from './components/navigation-test.component'
     KeyValueListStriped,
     ContentHeader,
     ContentHeaderNoBack,
+    MenuCategory,
   ],
   imports: [
     BrowserModule,

diff --git a/packages/angular-test-app/src/preview-examples/menu-category.html b/packages/angular-test-app/src/preview-examples/menu-category.html
@@ -0,0 +1,10 @@
+<ix-basic-navigation>
+  <ix-menu>
+    <ix-menu-item home icon="home">Home</ix-menu-item>
+    <ix-menu-item icon="globe">Normal Tab</ix-menu-item>
+    <ix-menu-category label="Top level Category" icon="rocket">
+      <ix-menu-item icon="globe">Nested Tab</ix-menu-item>
+      <ix-menu-item icon="globe">Nested Tab</ix-menu-item>
+    </ix-menu-category>
+  </ix-menu>
+</ix-basic-navigation>
diff --git a/packages/angular-test-app/src/preview-examples/menu-category.ts b/packages/angular-test-app/src/preview-examples/menu-category.ts
@@ -0,0 +1,16 @@
+/*
+ * 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 { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-example',
+  templateUrl: './menu-category.html',
+})
+export default class MenuCategory {}
diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts
@@ -1190,15 +1190,15 @@ export declare interface IxMapNavigationOverlay extends Components.IxMapNavigati
 
 
 @ProxyCmp({
-  inputs: ['applicationDescription', 'applicationName', 'enableMapExpand', 'enableSettings', 'enableToggleTheme', 'expand', 'i18nCollapse', 'i18nExpand', 'i18nLegal', 'i18nMore', 'i18nSettings', 'i18nToggleTheme', 'maxVisibleMenuItems', 'showAbout', 'showSettings'],
+  inputs: ['applicationDescription', 'applicationName', 'enableMapExpand', 'enableSettings', 'enableToggleTheme', 'expand', 'forceLayout', 'i18nCollapse', 'i18nExpand', 'i18nLegal', 'i18nSettings', 'i18nToggleTheme', 'maxVisibleMenuItems', 'pinned', 'showAbout', 'showSettings', 'supportedModes'],
   methods: ['toggleMapExpand', 'toggleMenu', 'toggleSettings', 'toggleAbout']
 })
 @Component({
   selector: 'ix-menu',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['applicationDescription', 'applicationName', 'enableMapExpand', 'enableSettings', 'enableToggleTheme', 'expand', 'i18nCollapse', 'i18nExpand', 'i18nLegal', 'i18nMore', 'i18nSettings', 'i18nToggleTheme', 'maxVisibleMenuItems', 'showAbout', 'showSettings'],
+  inputs: ['applicationDescription', 'applicationName', 'enableMapExpand', 'enableSettings', 'enableToggleTheme', 'expand', 'forceLayout', 'i18nCollapse', 'i18nExpand', 'i18nLegal', 'i18nSettings', 'i18nToggleTheme', 'maxVisibleMenuItems', 'pinned', 'showAbout', 'showSettings', 'supportedModes'],
 })
 export class IxMenu {
   protected el: HTMLElement;
@@ -1246,7 +1246,7 @@ export declare interface IxMenuAbout extends Components.IxMenuAbout {
   /**
    * About and Legal closed
    */
-  close: EventEmitter<CustomEvent<MouseEvent>>;
+  close: EventEmitter<CustomEvent<{ nativeEvent: MouseEvent; name: string; }>>;
 }
 
 
@@ -1361,14 +1361,36 @@ export declare interface IxMenuAvatarItem extends Components.IxMenuAvatarItem {
 
 
 @ProxyCmp({
-  inputs: ['active', 'bottom', 'disabled', 'home', 'notifications', 'tabIcon']
+  inputs: ['icon', 'label', 'notifications']
+})
+@Component({
+  selector: 'ix-menu-category',
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  template: '<ng-content></ng-content>',
+  // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
+  inputs: ['icon', 'label', 'notifications'],
+})
+export class IxMenuCategory {
+  protected el: HTMLElement;
+  constructor(c: ChangeDetectorRef, r: ElementRef, protected z: NgZone) {
+    c.detach();
+    this.el = r.nativeElement;
+  }
+}
+
+
+export declare interface IxMenuCategory extends Components.IxMenuCategory {}
+
+
+@ProxyCmp({
+  inputs: ['active', 'bottom', 'disabled', 'home', 'icon', 'notifications', 'tabIcon']
 })
 @Component({
   selector: 'ix-menu-item',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['active', 'bottom', 'disabled', 'home', 'notifications', 'tabIcon'],
+  inputs: ['active', 'bottom', 'disabled', 'home', 'icon', 'notifications', 'tabIcon'],
 })
 export class IxMenuItem {
   protected el: HTMLElement;
@@ -1406,7 +1428,7 @@ export declare interface IxMenuSettings extends Components.IxMenuSettings {
   /**
    * Popover closed
    */
-  close: EventEmitter<CustomEvent<MouseEvent>>;
+  close: EventEmitter<CustomEvent<{ nativeEvent: MouseEvent; name: string; }>>;
 }
 
 

diff --git a/packages/angular/src/declare-components.ts b/packages/angular/src/declare-components.ts
@@ -53,6 +53,7 @@ export const DIRECTIVES = [
   d.IxMenuAboutNews,
   d.IxMenuAvatar,
   d.IxMenuAvatarItem,
+  d.IxMenuCategory,
   d.IxMenuItem,
   d.IxMenuSettings,
   d.IxMenuSettingsItem,