feat(core/menu): make behavior at breakpoint 'lg' configurable and ch…

…ange 'md' breakpoint menu icons (#1156) Co-authored-by: Daniel Leroux <[email protected]>
siemens · Mar 27, 2024 · 1d27804 · 1d27804
1 parent 4a8303f
commit 1d27804
Show file tree

Hide file tree

Showing 77 changed files with 157 additions and 59 deletions.
diff --git a/.changeset/bright-cheetahs-thank.md b/.changeset/bright-cheetahs-thank.md
@@ -0,0 +1,5 @@
+---
+"@siemens/ix": minor
+---
+
+feat(core/menu): make behavior at breakpoint 'lg' configurable and change 'md' breakpoint menu icons
diff --git a/packages/angular/src/components.ts b/packages/angular/src/components.ts
@@ -1303,15 +1303,15 @@ export declare interface IxMapNavigationOverlay extends Components.IxMapNavigati
 
 
 @ProxyCmp({
-  inputs: ['applicationDescription', 'applicationName', 'enableMapExpand', 'enableSettings', 'enableToggleTheme', 'expand', 'i18nCollapse', 'i18nExpand', 'i18nExpandSidebar', 'i18nLegal', 'i18nSettings', 'i18nToggleTheme', 'maxVisibleMenuItems', 'pinned', 'showAbout', 'showSettings'],
+  inputs: ['applicationDescription', 'applicationName', 'enableMapExpand', 'enableSettings', 'enableToggleTheme', 'expand', 'i18nCollapse', 'i18nExpand', 'i18nExpandSidebar', 'i18nLegal', 'i18nSettings', 'i18nToggleTheme', 'maxVisibleMenuItems', 'pinned', 'showAbout', 'showSettings', 'startExpanded'],
   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', 'i18nExpandSidebar', 'i18nLegal', 'i18nSettings', 'i18nToggleTheme', 'maxVisibleMenuItems', 'pinned', 'showAbout', 'showSettings'],
+  inputs: ['applicationDescription', 'applicationName', 'enableMapExpand', 'enableSettings', 'enableToggleTheme', 'expand', 'i18nCollapse', 'i18nExpand', 'i18nExpandSidebar', 'i18nLegal', 'i18nSettings', 'i18nToggleTheme', 'maxVisibleMenuItems', 'pinned', 'showAbout', 'showSettings', 'startExpanded'],
 })
 export class IxMenu {
   protected el: HTMLElement;

diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -9142,7 +9142,7 @@
           "mutable": true,
           "attr": "expand",
           "reflectToAttr": true,
-          "docs": "",
+          "docs": "Toggle the expand state of the menu",
           "docsTags": [],
           "default": "false",
           "values": [
@@ -9378,6 +9378,28 @@
           ],
           "optional": false,
           "required": false
+        },
+        {
+          "name": "startExpanded",
+          "type": "boolean",
+          "complexType": {
+            "original": "boolean",
+            "resolved": "boolean",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "start-expanded",
+          "reflectToAttr": false,
+          "docs": "If set the menu will be expanded initially. This will only take effect at the breakpoint 'lg'.",
+          "docsTags": [],
+          "default": "false",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
         }
       ],
       "methods": [

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -1345,6 +1345,9 @@ export namespace Components {
           * Show toggle between light and dark variant. Only if the provided theme have implemented both!
          */
         "enableToggleTheme": boolean;
+        /**
+          * Toggle the expand state of the menu
+         */
         "expand": boolean;
         "i18nCollapse": string;
         "i18nExpand": string;
@@ -1372,6 +1375,10 @@ export namespace Components {
           * Is settings tab visible
          */
         "showSettings": boolean;
+        /**
+          * If set the menu will be expanded initially. This will only take effect at the breakpoint 'lg'.
+         */
+        "startExpanded": boolean;
         /**
           * Toggle About tabs
           * @param show
@@ -5421,6 +5428,9 @@ declare namespace LocalJSX {
           * Show toggle between light and dark variant. Only if the provided theme have implemented both!
          */
         "enableToggleTheme"?: boolean;
+        /**
+          * Toggle the expand state of the menu
+         */
         "expand"?: boolean;
         "i18nCollapse"?: string;
         "i18nExpand"?: string;
@@ -5456,6 +5466,10 @@ declare namespace LocalJSX {
           * Is settings tab visible
          */
         "showSettings"?: boolean;
+        /**
+          * If set the menu will be expanded initially. This will only take effect at the breakpoint 'lg'.
+         */
+        "startExpanded"?: boolean;
     }
     interface IxMenuAbout {
         /**

diff --git a/packages/core/src/components/menu/menu.tsx b/packages/core/src/components/menu/menu.tsx
@@ -88,9 +88,15 @@ export class Menu {
   @Prop() i18nExpandSidebar = 'Expand sidebar';
 
   /**
+   *  Toggle the expand state of the menu
    */
   @Prop({ mutable: true, reflect: true }) expand = false;
 
+  /**
+   *  If set the menu will be expanded initially. This will only take effect at the breakpoint 'lg'.
+   */
+  @Prop() startExpanded = false;
+
   /**
    * Menu stays pinned to the left
    */
@@ -293,7 +299,7 @@ export class Menu {
     applicationLayoutService.onChange.on((breakpoint) =>
       this.onBreakpointChange(breakpoint)
     );
-    this.onBreakpointChange(applicationLayoutService.breakpoint);
+    this.onBreakpointChange(applicationLayoutService.breakpoint, true);
   }
 
   componentWillRender() {
@@ -309,7 +315,7 @@ export class Menu {
     menuController.setIsPinned(pinned);
   }
 
-  private onBreakpointChange(mode: Breakpoint) {
+  private onBreakpointChange(mode: Breakpoint, initial = false) {
     if (!this.applicationLayoutContext && mode === 'sm') {
       return;
     }
@@ -325,16 +331,11 @@ export class Menu {
       return;
     }
 
-    this.breakpoint = mode;
-
-    if (this.breakpoint === 'lg') {
-      this.setPinned(true);
-      this.toggleMenu(true);
-      return;
-    }
+    this.setPinned(mode === 'lg');
+    if (initial || mode !== this.breakpoint)
+      this.toggleMenu(mode === 'lg' && this.startExpanded);
 
-    this.setPinned(false);
-    this.toggleMenu(false);
+    this.breakpoint = mode;
   }
 
   private appendFragments() {
@@ -609,7 +610,7 @@ export class Menu {
               onClick={async () => this.toggleMenu()}
               expanded={this.expand}
               ixAriaLabel={this.i18nExpandSidebar}
-              pinned={this.showPinned}
+              pinned={true}
               class={{
                 'burger-menu': true,
               }}

diff --git a/packages/core/src/components/menu/test/menu.ct.ts b/packages/core/src/components/menu/test/menu.ct.ts
@@ -23,23 +23,62 @@ test('renders', async ({ mount, page }) => {
   await expect(element).toHaveClass(/breakpoint-lg/);
 });
 
-test('should stay close after menu click when NOT pinned', async ({
+test('should be open when start-expanded ist set', async ({ mount, page }) => {
+  await mount(`
+      <ix-application>
+        <ix-menu start-expanded>
+          <ix-menu-item>Item</ix-menu-item>
+        </ix-menu>
+      </ix-application>
+    `);
+  await page
+    .locator('ix-application')
+    .evaluate(
+      (menu: HTMLIxBasicNavigationElement) => (menu.breakpoints = ['lg'])
+    );
+  const menu = page.locator('ix-menu');
+
+  await expect(menu).toHaveClass(/expanded/);
+});
+
+test('should be closed when start-expanded ist NOT set', async ({
   mount,
   page,
 }) => {
   await mount(`
-      <ix-basic-navigation>
+      <ix-application>
         <ix-menu>
           <ix-menu-item>Item</ix-menu-item>
         </ix-menu>
-      </ix-basic-navigation>
+      </ix-application>
     `);
+  await page
+    .locator('ix-application')
+    .evaluate(
+      (menu: HTMLIxBasicNavigationElement) => (menu.breakpoints = ['lg'])
+    );
   const menu = page.locator('ix-menu');
+
+  await expect(menu).not.toHaveClass(/expanded/);
+});
+
+test('should be closed after menu click when NOT pinned', async ({
+  mount,
+  page,
+}) => {
+  await mount(`
+      <ix-application>
+        <ix-menu>
+          <ix-menu-item>Item</ix-menu-item>
+        </ix-menu>
+      </ix-application>
+    `);
   await page
-    .locator('ix-basic-navigation')
+    .locator('ix-application')
     .evaluate(
       (menu: HTMLIxBasicNavigationElement) => (menu.breakpoints = ['md'])
     );
+  const menu = page.locator('ix-menu');
   const menuButton = menu.locator('ix-burger-menu');
   await menuButton.click();
 
@@ -53,21 +92,24 @@ test('should stay open after menu click when pinned', async ({
   page,
 }) => {
   await mount(`
-      <ix-basic-navigation>
+      <ix-application>
         <ix-menu pinned>
           <ix-menu-item>Item</ix-menu-item>
         </ix-menu>
-      </ix-basic-navigation>
+      </ix-application>
     `);
+  await page
+    .locator('ix-application')
+    .evaluate(
+      (menu: HTMLIxBasicNavigationElement) => (menu.breakpoints = ['md'])
+    );
   const menu = page.locator('ix-menu');
   const menuButton = menu.locator('ix-burger-menu');
   await menuButton.click();
 
-  await expect(menu).not.toHaveClass(/expanded/);
-
+  await expect(menu).toHaveClass(/expanded/);
   await page.locator('ix-menu-item').click();
-
-  await expect(menu).not.toHaveClass(/expanded/);
+  await expect(menu).toHaveClass(/expanded/);
 });
 
 test('should open and close settings', async ({ mount, page }) => {
@@ -195,7 +237,10 @@ test('should close menu by bottom icon click', async ({ mount, page }) => {
   `);
 
   const element = page.locator('ix-menu');
-  await element.getByRole('button', { name: 'Expand sidebar' }).click();
+
+  await page.locator('ix-menu ix-burger-menu').click();
+  await page.waitForSelector('ix-menu ix-burger-menu.expanded');
+
   const innerMenu = element.locator('.menu');
   await expect(innerMenu).toHaveClass(/expanded/);
 

diff --git a/packages/core/src/tests/application/application.e2e.ts b/packages/core/src/tests/application/application.e2e.ts
@@ -16,6 +16,9 @@ regressionTest.describe('basic navigation large', () => {
     await page.setViewportSize(viewPorts.lg);
     await page.waitForTimeout(500);
 
+    await page.locator('ix-menu ix-burger-menu').click();
+    await page.waitForSelector('ix-menu ix-burger-menu.expanded');
+
     await page.waitForTimeout(1000);
 
     await expect(page).toHaveScreenshot({
@@ -29,6 +32,9 @@ regressionTest.describe('basic navigation large', () => {
     await page.setViewportSize(viewPorts.lg);
     await page.waitForTimeout(500);
 
+    await page.locator('ix-menu ix-burger-menu').click();
+    await page.waitForSelector('ix-menu ix-burger-menu.expanded');
+
     await expect(page.getByText('Example content')).toBeVisible();
 
     await page.waitForTimeout(1000);
@@ -44,7 +50,6 @@ regressionTest.describe('basic navigation', () => {
   regressionTest('basic', async ({ page }) => {
     await page.goto('application/basic');
     await page.setViewportSize(viewPorts.md);
-    await page.waitForTimeout(500);
 
     await page.waitForTimeout(1000);
 
@@ -58,6 +63,7 @@ regressionTest.describe('basic navigation', () => {
     await page.goto('application/content-width');
     await page.setViewportSize(viewPorts.md);
     await page.waitForTimeout(500);
+
     await expect(page.getByText('Example content')).toBeVisible();
 
     await page.waitForTimeout(1000);
@@ -94,8 +100,6 @@ regressionTest.describe('basic navigation mobile', () => {
     await page.goto('application/mobile');
     await page.setViewportSize(viewPorts.sm);
 
-    await page.waitForTimeout(500);
-
     await page.waitForTimeout(1000);
 
     await expect(page).toHaveScreenshot({

diff --git a/...e.ts-snapshots/basic-navigation-basic-1-chromium---theme-classic-dark-linux.png b/...e.ts-snapshots/basic-navigation-basic-1-chromium---theme-classic-dark-linux.png
diff --git a/....ts-snapshots/basic-navigation-basic-1-chromium---theme-classic-light-linux.png b/....ts-snapshots/basic-navigation-basic-1-chromium---theme-classic-light-linux.png
diff --git a/...pshots/basic-navigation-content-width-1-chromium---theme-classic-dark-linux.png b/...pshots/basic-navigation-content-width-1-chromium---theme-classic-dark-linux.png
diff --git a/...shots/basic-navigation-content-width-1-chromium---theme-classic-light-linux.png b/...shots/basic-navigation-content-width-1-chromium---theme-classic-light-linux.png
diff --git a/...s-snapshots/basic-navigation-expanded-1-chromium---theme-classic-dark-linux.png b/...s-snapshots/basic-navigation-expanded-1-chromium---theme-classic-dark-linux.png
diff --git a/...-snapshots/basic-navigation-expanded-1-chromium---theme-classic-light-linux.png b/...-snapshots/basic-navigation-expanded-1-chromium---theme-classic-light-linux.png
diff --git a/...napshots/basic-navigation-large-basic-1-chromium---theme-classic-dark-linux.png b/...napshots/basic-navigation-large-basic-1-chromium---theme-classic-dark-linux.png
diff --git a/...apshots/basic-navigation-large-basic-1-chromium---theme-classic-light-linux.png b/...apshots/basic-navigation-large-basic-1-chromium---theme-classic-light-linux.png
diff --git a/.../basic-navigation-large-content-width-1-chromium---theme-classic-dark-linux.png b/.../basic-navigation-large-content-width-1-chromium---theme-classic-dark-linux.png
diff --git a/...basic-navigation-large-content-width-1-chromium---theme-classic-light-linux.png b/...basic-navigation-large-content-width-1-chromium---theme-classic-light-linux.png
diff --git a/...pshots/basic-navigation-mobile-mobile-1-chromium---theme-classic-dark-linux.png b/...pshots/basic-navigation-mobile-mobile-1-chromium---theme-classic-dark-linux.png
diff --git a/...shots/basic-navigation-mobile-mobile-1-chromium---theme-classic-light-linux.png b/...shots/basic-navigation-mobile-mobile-1-chromium---theme-classic-light-linux.png
diff --git a/...sic-navigation-mobile-mobile-expanded-1-chromium---theme-classic-dark-linux.png b/...sic-navigation-mobile-mobile-expanded-1-chromium---theme-classic-dark-linux.png
diff --git a/...ic-navigation-mobile-mobile-expanded-1-chromium---theme-classic-light-linux.png b/...ic-navigation-mobile-mobile-expanded-1-chromium---theme-classic-light-linux.png
diff --git a/packages/core/src/tests/application/mobile/index.html b/packages/core/src/tests/application/mobile/index.html
@@ -25,7 +25,7 @@
       justify-content: center;
       align-items: center;
       position: absolute;
-      content: '🚧';
+      content: 'TEST';
       border: 2px dashed #ff0000aa;
       padding: 2rem;
       font-size: 55px;
@@ -47,26 +47,28 @@
         <ix-menu-item>Test 1</ix-menu-item>
         <ix-menu-item>Test 1</ix-menu-item>
         <ix-menu-item>Test 1</ix-menu-item>
-        <ix-menu-item>Test 1</ix-menu-item>
-        <ix-menu-item>Test 1</ix-menu-item>
-        <ix-menu-item>Test 1</ix-menu-item>
-        <ix-menu-item>Test 1</ix-menu-item>
-        <ix-menu-item>Test 1</ix-menu-item>
-        <ix-menu-item>Test 1</ix-menu-item>
-        <ix-menu-item>Test 1</ix-menu-item>
-        <ix-menu-item>Test 1</ix-menu-item>
-        <ix-menu-item>Test 1</ix-menu-item>
-        <ix-menu-item>Test 1</ix-menu-item>
-        <ix-menu-item>Test 1</ix-menu-item>
-        <ix-menu-item>Test 1</ix-menu-item>
-        <ix-menu-item>Test 1</ix-menu-item>
-        <ix-menu-item>Test 1</ix-menu-item>
-        <ix-menu-item>Test 1</ix-menu-item>
-        <ix-menu-item>Test 1</ix-menu-item>
-        <ix-menu-item>Test 1</ix-menu-item>
-        <ix-menu-item>Test 1</ix-menu-item>
-        <ix-menu-item>Test 1</ix-menu-item>
-        <ix-menu-item>Test 1</ix-menu-item>
+        <ix-menu-item>Test 2</ix-menu-item>
+        <ix-menu-item>Test 3</ix-menu-item>
+        <ix-menu-item>Test 4</ix-menu-item>
+        <ix-menu-item>Test 5</ix-menu-item>
+        <ix-menu-item>Test 6</ix-menu-item>
+        <ix-menu-item>Test 7</ix-menu-item>
+        <ix-menu-item>Test 8</ix-menu-item>
+        <ix-menu-item>Test 9</ix-menu-item>
+        <ix-menu-item>Test 10</ix-menu-item>
+        <ix-menu-item>Test 11</ix-menu-item>
+        <ix-menu-item>Test 12</ix-menu-item>
+        <ix-menu-item>Test 13</ix-menu-item>
+        <ix-menu-item>Test 14</ix-menu-item>
+        <ix-menu-item>Test 15</ix-menu-item>
+        <ix-menu-item>Test 16</ix-menu-item>
+        <ix-menu-item>Test 17</ix-menu-item>
+        <ix-menu-item>Test 18</ix-menu-item>
+        <ix-menu-item>Test 19</ix-menu-item>
+        <ix-menu-item>Test 20</ix-menu-item>
+        <ix-menu-item>Test 21</ix-menu-item>
+        <ix-menu-item>Test 22</ix-menu-item>
+        <ix-menu-item>Test 23</ix-menu-item>
         <ix-menu-about>
           <ix-menu-about-item>Item 1</ix-menu-about-item>
           <ix-menu-about-item>Item 1</ix-menu-about-item>