feat(core/menu-avatar): optional logout button, conditional dropdown (#…

…851)

Co-authored-by: Daniel Leroux <daniel.leroux@siemens.com>

packages/angular/src/components.ts

@@ -1378,14 +1378,14 @@ export declare interface IxMenuAboutNews extends Components.IxMenuAboutNews {
 
 
 @ProxyCmp({
-  inputs: ['bottom', 'i18nLogout', 'image', 'initials', 'top']
+  inputs: ['bottom', 'i18nLogout', 'image', 'initials', 'showLogoutButton', 'top']
 })
 @Component({
   selector: 'ix-menu-avatar',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['bottom', 'i18nLogout', 'image', 'initials', 'top'],
+  inputs: ['bottom', 'i18nLogout', 'image', 'initials', 'showLogoutButton', 'top'],
 })
 export class IxMenuAvatar {
   protected el: HTMLElement;

packages/core/component-doc.json

@@ -7480,6 +7480,28 @@
           "optional": false,
           "required": false
         },
+        {
+          "name": "showLogoutButton",
+          "type": "boolean",
+          "mutable": false,
+          "attr": "show-logout-button",
+          "reflectToAttr": false,
+          "docs": "Control the visibility of the logout button",
+          "docsTags": [
+            {
+              "name": "since",
+              "text": "2.1.0"
+            }
+          ],
+          "default": "true",
+          "values": [
+            {
+              "type": "boolean"
+            }
+          ],
+          "optional": false,
+          "required": false
+        },
         {
           "name": "top",
           "type": "string",

packages/core/src/components.d.ts

@@ -1479,6 +1479,11 @@ export namespace Components {
           * @since 1.4.0
          */
         "initials": string;
+        /**
+          * Control the visibility of the logout button
+          * @since 2.1.0
+         */
+        "showLogoutButton": boolean;
         /**
           * First line of text
          */
@@ -4949,6 +4954,11 @@ declare namespace LocalJSX {
           * Logout click
          */
         "onLogoutClick"?: (event: IxMenuAvatarCustomEvent<any>) => void;
+        /**
+          * Control the visibility of the logout button
+          * @since 2.1.0
+         */
+        "showLogoutButton"?: boolean;
         /**
           * First line of text
          */

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

@@ -14,7 +14,9 @@ import {
   h,
   Host,
   Prop,
+  State,
 } from '@stencil/core';
+import { getSlottedElements } from '../utils/shadow-dom';
 
 @Component({
   tag: 'ix-menu-avatar',
@@ -51,7 +53,19 @@ export class MenuAvatar {
   /**
    * Use for translation
    */
-  @Prop() i18nLogout = 'Logout';
+  @Prop() i18nLogout: string = 'Logout';
+
+  /**
+   *  Control the visibility of the logout button
+   *  @since 2.1.0
+   */
+  @Prop() showLogoutButton: boolean = true;
+
+  /**
+   * Control the visibility of the dropdown menu
+   * @since 2.1.0
+   */
+  @State() showContextMenu: boolean = false;
 
   /**
    * Logout click
@@ -60,6 +74,15 @@ export class MenuAvatar {
 
   private avatarElementId = 'ix-menu-avatar-id';
 
+  onSlotChange() {
+    const slot = this.hostElement.shadowRoot.querySelector('slot');
+    if (!slot) {
+      return;
+    }
+    const elements = getSlottedElements(slot);
+    this.showContextMenu = elements.length !== 0;
+  }
+
   render() {
     return (
       <Host slot="ix-menu-avatar">
@@ -83,18 +106,21 @@ export class MenuAvatar {
         <ix-dropdown
           trigger={this.hostElement}
           placement={'right-start'}
+          hidden={!this.showContextMenu && !this.showLogoutButton}
           offset={{
             mainAxis: 16,
           }}
         >
-          <slot></slot>
-          <ix-menu-avatar-item
-            label={this.i18nLogout}
-            icon={'log-out'}
-            onClick={(e) => {
-              this.logoutClick.emit(e);
-            }}
-          ></ix-menu-avatar-item>
+          <slot onSlotchange={() => this.onSlotChange()}></slot>
+          {this.showLogoutButton ? (
+            <ix-menu-avatar-item
+              label={this.i18nLogout}
+              icon={'log-out'}
+              onClick={(e) => {
+                this.logoutClick.emit(e);
+              }}
+            ></ix-menu-avatar-item>
+          ) : null}
         </ix-dropdown>
       </Host>
     );

packages/core/src/tests/menu-avatar/menu-about-avatar.e2e.ts

@@ -44,4 +44,14 @@ regressionTest.describe('menu-avatar', () => {
     await page.waitForTimeout(1000);
     expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
   });
+
+  regressionTest('no dropdown', async ({ page }) => {
+    await page.goto('menu-avatar/no-dropdown');
+    await page.locator('ix-burger-menu').click();
+    await page.waitForSelector('.expanded');
+    await page.locator('ix-menu-avatar').click();
+
+    await page.waitForTimeout(1000);
+    expect(await page.screenshot({ fullPage: true })).toMatchSnapshot();
+  });
 });

packages/core/src/tests/menu-avatar/no-dropdown/index.html

@@ -0,0 +1,34 @@
+<!--
+SPDX-FileCopyrightText: 2023 Siemens AG
+
+SPDX-License-Identifier: MIT
+-->
+
+<html>
+<head>
+  <meta charset="utf-8" />
+  <meta
+    name="viewport"
+    content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0"
+  />
+  <title>Stencil Component Starter</title>
+</head>
+<body>
+<ix-basic-navigation>
+  <ix-menu>
+    <ix-menu-avatar show-logout-button="false" image="./jd.png" top="top name" bottom="bottom name">
+    </ix-menu-avatar>
+    <ix-menu-item>Item 1</ix-menu-item>
+    <ix-menu-item>Item 2</ix-menu-item>
+    <ix-menu-item>Item 3</ix-menu-item>
+  </ix-menu>
+</ix-basic-navigation>
+<script>
+  document.querySelector('ix-basic-navigation').breakpoints = [
+    'small',
+    'medium',
+  ];
+</script>
+<script src="http://127.0.0.1:8080/scripts/e2e/load-e2e-runtime.js"></script>
+</body>
+</html>

packages/vue/src/components.ts

@@ -592,6 +592,7 @@ export const IxMenuAvatar = /*@__PURE__*/ defineContainer<JSX.IxMenuAvatar>('ix-
   'image',
   'initials',
   'i18nLogout',
+  'showLogoutButton',
   'logoutClick'
 ]);