fix(menu-flyout): broken styles

telekom · Feb 8, 2024 · 698197a · 698197a
1 parent f41adf2
commit 698197a
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 13 deletions.
diff --git a/packages/components/src/components/menu-flyout-list/menu-flyout-list.tsx b/packages/components/src/components/menu-flyout-list/menu-flyout-list.tsx
@@ -62,9 +62,6 @@ export class MenuFlyoutList {
   /** (optional) set to true to prevent flipping orientation when off the screen vertically  */
   @Prop() preventFlipVertical: boolean = false;
 
-  /** (optional) override to set a custom role */
-  @Prop() role? = 'menu';
-
   /** Event triggered when menu list opened */
   @Event({ eventName: 'scale-open' }) scaleOpen: EventEmitter<{
     list: HTMLElement;
@@ -107,6 +104,12 @@ export class MenuFlyoutList {
     return this.trigger().getBoundingClientRect();
   }
 
+  componentDidLoad() {
+    if (!this.hostElement.hasAttribute('role')) {
+      this.hostElement.setAttribute('role', 'menu');
+    }
+  }
+
   componentDidRender() {
     if (this.opened && this.needsCheckPlacement) {
       this.setSize();
@@ -475,7 +478,7 @@ export class MenuFlyoutList {
 
   render() {
     return (
-      <Host role={this.role} class="scale-menu">
+      <Host class="scale-menu-flyout-list">
         {this.styles && <style>{this.styles}</style>}
         <div
           class={this.getCssClassMap()}

diff --git a/packages/components/src/components/menu-flyout/menu-flyout.tsx b/packages/components/src/components/menu-flyout/menu-flyout.tsx
@@ -12,7 +12,7 @@
 import { Component, Prop, h, Host, Element, Listen } from '@stencil/core';
 import { isClickOutside } from '../../utils/utils';
 
-const MENU_SELECTOR = '.scale-menu';
+const MENU_SELECTOR = '.scale-menu-flyout-list';
 
 const isButtonOrLink = (el: HTMLElement) => {
   if (
@@ -35,7 +35,7 @@ export class MenuFlyout {
   /** (optional) Determines whether the flyout should close when a menu item is selected */
   @Prop() closeOnSelect = true;
   /** (optional) Determines whether the flyout trigger should get the aria-haspopup attribute */
-  @Prop() hasPopup = true;
+  @Prop() triggerHasPopup = true;
   /** (optional) Set preference for where the menu appears, space permitting */
   @Prop() direction:
     | 'bottom-right'
@@ -154,12 +154,10 @@ export class MenuFlyout {
       .concat([isButtonOrLink(this.trigger)])
       .filter((x) => x != null);
     triggers.forEach((el) => {
-      if (this.hasPopup) {
+      if (this.triggerHasPopup) {
         el.setAttribute('aria-haspopup', 'true');
       }
-
-      el.setAttribute('class', 'scale-menu-trigger');
-
+      el.classList.add('scale-menu-trigger');
       el.setAttribute('aria-expanded', 'false');
     });
   }

diff --git a/packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.css b/packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.css
@@ -9,6 +9,9 @@
  * file, You can obtain one at https://mozilla.org/MPL/2.0/.
 
  */
+
+@import url('../../../global/custom-media.css');
+
 scale-menu-flyout {
   display: flex;
   height: 100%;
@@ -55,8 +58,6 @@ scale-menu-flyout {
   }
 }
 
-@import url('../../../global/custom-media.css');
-
 .user-menu-mobile {
   display: flex;
   height: 100%;

diff --git a/packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.tsx b/packages/components/src/components/telekom/telekom-profile-menu/telekom-profile-menu.tsx
@@ -266,7 +266,7 @@ export class TelekomProfileMenu {
             direction="bottom-left"
             onScale-open={(event: any) => this.openMenu(event)}
             onScale-close={(event: any) => this.closeMenu(event)}
-            hasPopup={false}
+            triggerHasPopup={false}
           >
             <a
               href="javascript:void(0);"