fix(telekom-profile-menu): stories and flyout menu fixes (#2273)

telekom · Feb 21, 2024 · aa0e237 · aa0e237
1 parent 034aebc
commit aa0e237
Show file tree

Hide file tree

Showing 28 changed files with 1,247 additions and 53 deletions.
diff --git a/packages/components/src/components/badge/badge.tsx b/packages/components/src/components/badge/badge.tsx
@@ -49,6 +49,7 @@ export class Badge {
           aria-label={this.count ? this.getAriaLabel() : this.label}
         >
           <slot />
+          <slot name="dot" />
           <span
             aria-hidden="true"
             part={cx(`circle`, this.count ? `has-count` : 'no-count')}

diff --git a/packages/components/src/components/badge/readme.md b/packages/components/src/components/badge/readme.md
@@ -28,11 +28,13 @@
 ### Used by
 
  - [scale-telekom-header-data-back-compat](../telekom/telekom-header-data-back-compat)
+ - [scale-telekom-profile-menu](../telekom/telekom-profile-menu)
 
 ### Graph
 ```mermaid
 graph TD;
   scale-telekom-header-data-back-compat --> scale-badge
+  scale-telekom-profile-menu --> scale-badge
   style scale-badge fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

diff --git a/packages/components/src/components/button/readme.md b/packages/components/src/components/button/readme.md
@@ -45,13 +45,15 @@ Type: `Promise<void>`
  - [app-navigation-user-menu](../telekom/app-navigation-user-menu)
  - [scale-data-grid](../data-grid)
  - [scale-notification](../notification)
+ - [scale-telekom-profile-menu](../telekom/telekom-profile-menu)
 
 ### Graph
 ```mermaid
 graph TD;
   app-navigation-user-menu --> scale-button
   scale-data-grid --> scale-button
   scale-notification --> scale-button
+  scale-telekom-profile-menu --> scale-button
   style scale-button fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

diff --git a/packages/components/src/components/link/readme.md b/packages/components/src/components/link/readme.md
@@ -108,13 +108,15 @@ Type: `Promise<void>`
  - [scale-data-grid](../data-grid)
  - [scale-notification-banner](../notification-banner)
  - [scale-notification-toast](../notification-toast)
+ - [scale-telekom-profile-menu](../telekom/telekom-profile-menu)
 
 ### Graph
 ```mermaid
 graph TD;
   scale-data-grid --> scale-link
   scale-notification-banner --> scale-link
   scale-notification-toast --> scale-link
+  scale-telekom-profile-menu --> scale-link
   style scale-link fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

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
@@ -59,6 +59,8 @@ export class MenuFlyoutList {
   @Prop() brandHeaderDropdown: boolean = false;
   /** (optional) Injected styles */
   @Prop() styles?: string;
+  /** (optional) set to true to prevent flipping orientation when off the screen vertically  */
+  @Prop() preventFlipVertical: boolean = false;
 
   /** Event triggered when menu list opened */
   @Event({ eventName: 'scale-open' }) scaleOpen: EventEmitter<{
@@ -102,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();
@@ -282,7 +290,10 @@ export class MenuFlyoutList {
 
   updateTriggerAttributes() {
     const trigger = this.trigger();
-    if (trigger && trigger.getAttribute('aria-haspopup') === 'true') {
+    if (
+      (trigger && trigger.getAttribute('aria-haspopup') === 'true') ||
+      trigger.classList.contains('scale-menu-trigger')
+    ) {
       trigger.setAttribute('aria-expanded', String(this.opened));
     }
   }
@@ -341,14 +352,14 @@ export class MenuFlyoutList {
     if (rect.top < PAD) {
       // console.log('off top edge');
       isOutOfBounds = true;
-      if (this.direction.includes('top')) {
+      if (this.direction.includes('top') && !this.preventFlipVertical) {
         this.flipVertical = true;
       }
     }
     if (rect.bottom > this.windowHeight - PAD) {
       // console.log('off bottom edge');
       isOutOfBounds = true;
-      if (this.direction.includes('bottom')) {
+      if (this.direction.includes('bottom') && !this.preventFlipVertical) {
         this.flipVertical = true;
       }
     }
@@ -467,7 +478,7 @@ export class MenuFlyoutList {
 
   render() {
     return (
-      <Host role="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-list/readme.md b/packages/components/src/components/menu-flyout-list/readme.md
@@ -7,15 +7,16 @@
 
 ## Properties
 
-| Property              | Attribute               | Description                                                                        | Type                                                                                | Default          |
-| --------------------- | ----------------------- | ---------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ---------------- |
-| `active`              | `active`                |                                                                                    | `boolean`                                                                           | `false`          |
-| `brandHeaderDropdown` | `brand-header-dropdown` | (optional) set to true when using in telekom-brand-header                          | `boolean`                                                                           | `false`          |
-| `closeOnSelect`       | `close-on-select`       | (optional) Determines whether the flyout should close when a menu item is selected | `boolean`                                                                           | `true`           |
-| `direction`           | `direction`             | (optional) Set preference for where the menu appears, space permitting             | `"bottom-left" \| "bottom-right" \| "left" \| "right" \| "top-left" \| "top-right"` | `'bottom-right'` |
-| `opened`              | `opened`                |                                                                                    | `boolean`                                                                           | `false`          |
-| `styles`              | `styles`                | (optional) Injected styles                                                         | `string`                                                                            | `undefined`      |
-| `trigger`             | --                      |                                                                                    | `() => HTMLElement`                                                                 | `undefined`      |
+| Property              | Attribute               | Description                                                                           | Type                                                                                | Default          |
+| --------------------- | ----------------------- | ------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ---------------- |
+| `active`              | `active`                |                                                                                       | `boolean`                                                                           | `false`          |
+| `brandHeaderDropdown` | `brand-header-dropdown` | (optional) set to true when using in telekom-brand-header                             | `boolean`                                                                           | `false`          |
+| `closeOnSelect`       | `close-on-select`       | (optional) Determines whether the flyout should close when a menu item is selected    | `boolean`                                                                           | `true`           |
+| `direction`           | `direction`             | (optional) Set preference for where the menu appears, space permitting                | `"bottom-left" \| "bottom-right" \| "left" \| "right" \| "top-left" \| "top-right"` | `'bottom-right'` |
+| `opened`              | `opened`                |                                                                                       | `boolean`                                                                           | `false`          |
+| `preventFlipVertical` | `prevent-flip-vertical` | (optional) set to true to prevent flipping orientation when off the screen vertically | `boolean`                                                                           | `false`          |
+| `styles`              | `styles`                | (optional) Injected styles                                                            | `string`                                                                            | `undefined`      |
+| `trigger`             | --                      |                                                                                       | `() => HTMLElement`                                                                 | `undefined`      |
 
 
 ## Events
@@ -75,13 +76,15 @@ Type: `Promise<void>`
  - [scale-app-header](../telekom/app-header)
  - [scale-data-grid](../data-grid)
  - [scale-telekom-header-data-back-compat](../telekom/telekom-header-data-back-compat)
+ - [scale-telekom-profile-menu](../telekom/telekom-profile-menu)
 
 ### Graph
 ```mermaid
 graph TD;
   scale-app-header --> scale-menu-flyout-list
   scale-data-grid --> scale-menu-flyout-list
   scale-telekom-header-data-back-compat --> scale-menu-flyout-list
+  scale-telekom-profile-menu --> scale-menu-flyout-list
   style scale-menu-flyout-list fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

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 = '[role="menu"]';
+const MENU_SELECTOR = '.scale-menu-flyout-list';
 
 const isButtonOrLink = (el: HTMLElement) => {
   if (
@@ -34,6 +34,8 @@ 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() triggerHasPopup = true;
   /** (optional) Set preference for where the menu appears, space permitting */
   @Prop() direction:
     | 'bottom-right'
@@ -152,7 +154,10 @@ export class MenuFlyout {
       .concat([isButtonOrLink(this.trigger)])
       .filter((x) => x != null);
     triggers.forEach((el) => {
-      el.setAttribute('aria-haspopup', 'true');
+      if (this.triggerHasPopup) {
+        el.setAttribute('aria-haspopup', 'true');
+      }
+      el.classList.add('scale-menu-trigger');
       el.setAttribute('aria-expanded', 'false');
     });
   }

diff --git a/packages/components/src/components/menu-flyout/readme.md b/packages/components/src/components/menu-flyout/readme.md
@@ -7,11 +7,12 @@
 
 ## Properties
 
-| Property        | Attribute         | Description                                                                        | Type                                                                                | Default          |
-| --------------- | ----------------- | ---------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ---------------- |
-| `closeOnSelect` | `close-on-select` | (optional) Determines whether the flyout should close when a menu item is selected | `boolean`                                                                           | `true`           |
-| `direction`     | `direction`       | (optional) Set preference for where the menu appears, space permitting             | `"bottom-left" \| "bottom-right" \| "left" \| "right" \| "top-left" \| "top-right"` | `'bottom-right'` |
-| `styles`        | `styles`          | (optional) Injected styles                                                         | `string`                                                                            | `undefined`      |
+| Property          | Attribute           | Description                                                                             | Type                                                                                | Default          |
+| ----------------- | ------------------- | --------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------- | ---------------- |
+| `closeOnSelect`   | `close-on-select`   | (optional) Determines whether the flyout should close when a menu item is selected      | `boolean`                                                                           | `true`           |
+| `direction`       | `direction`         | (optional) Set preference for where the menu appears, space permitting                  | `"bottom-left" \| "bottom-right" \| "left" \| "right" \| "top-left" \| "top-right"` | `'bottom-right'` |
+| `styles`          | `styles`            | (optional) Injected styles                                                              | `string`                                                                            | `undefined`      |
+| `triggerHasPopup` | `trigger-has-popup` | (optional) Determines whether the flyout trigger should get the aria-haspopup attribute | `boolean`                                                                           | `true`           |
 
 
 ## Shadow Parts
@@ -28,13 +29,15 @@
  - [scale-app-header](../telekom/app-header)
  - [scale-data-grid](../data-grid)
  - [scale-telekom-header-data-back-compat](../telekom/telekom-header-data-back-compat)
+ - [scale-telekom-profile-menu](../telekom/telekom-profile-menu)
 
 ### Graph
 ```mermaid
 graph TD;
   scale-app-header --> scale-menu-flyout
   scale-data-grid --> scale-menu-flyout
   scale-telekom-header-data-back-compat --> scale-menu-flyout
+  scale-telekom-profile-menu --> scale-menu-flyout
   style scale-menu-flyout fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

diff --git a/...s/components/src/components/telekom/app-navigation-user-menu/app-navigation-user-menu.tsx b/...s/components/src/components/telekom/app-navigation-user-menu/app-navigation-user-menu.tsx
@@ -29,6 +29,7 @@ export class AppNavigationUserMenu {
   @Element() hostElement: HTMLElement;
   @Prop() hide: () => void;
   @Prop() navigation: any;
+  @Prop() styles: string;
   @Event({
     eventName: 'closeMenu',
     composed: true,
@@ -40,7 +41,10 @@ export class AppNavigationUserMenu {
   render() {
     return (
       <Host>
+        {this.styles && <style>{this.styles}</style>}
         <div class="app-navigation-user-menu">
+          <slot />
+
           {this.navigation.map((item) => {
             if (item.type === 'divider') {
               return (
@@ -53,7 +57,10 @@ export class AppNavigationUserMenu {
 
             if (item.type === 'userInfo') {
               return (
-                <div class="app-navigation-user-menu__user-info">
+                <div
+                  class="app-navigation-user-menu__user-info"
+                  part="userInfo"
+                >
                   <div class="app-navigation-user-menu__user-info--name scl-font-variant-heading-4">
                     {item.name}
                   </div>
@@ -71,6 +78,7 @@ export class AppNavigationUserMenu {
                   target={item.target || '_self'}
                   tabindex={0}
                   class="app-navigation-user-menu__item"
+                  part="item"
                   onClick={(e) => {
                     e.stopImmediatePropagation();
                     if (item.onClick) {
@@ -117,6 +125,7 @@ export class AppNavigationUserMenu {
               return (
                 <scale-button
                   class="app-navigation-user-menu__button"
+                  part="button"
                   onClick={(e) => {
                     if (item.onClick) {
                       item.onClick(e);

diff --git a/packages/components/src/components/telekom/app-navigation-user-menu/readme.md b/packages/components/src/components/telekom/app-navigation-user-menu/readme.md
@@ -11,6 +11,7 @@
 | ------------ | ------------ | ----------- | ------------ | ----------- |
 | `hide`       | --           |             | `() => void` | `undefined` |
 | `navigation` | `navigation` |             | `any`        | `undefined` |
+| `styles`     | `styles`     |             | `string`     | `undefined` |
 
 
 ## Events
@@ -24,7 +25,10 @@
 
 | Part                | Description |
 | ------------------- | ----------- |
+| `"button"`          |             |
+| `"item"`            |             |
 | `"rule-horizontal"` |             |
+| `"userinfo"`        |             |
 
 
 ## Dependencies
@@ -33,6 +37,7 @@
 
  - [scale-app-header](../app-header)
  - [scale-telekom-header-data-back-compat](../telekom-header-data-back-compat)
+ - [scale-telekom-profile-menu](../telekom-profile-menu)
 
 ### Depends on
 
@@ -46,6 +51,7 @@ graph TD;
   app-navigation-user-menu --> scale-icon
   scale-app-header --> app-navigation-user-menu
   scale-telekom-header-data-back-compat --> app-navigation-user-menu
+  scale-telekom-profile-menu --> app-navigation-user-menu
   style app-navigation-user-menu fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

diff --git a/packages/components/src/components/telekom/telekom-header/telekom-header.css b/packages/components/src/components/telekom/telekom-header/telekom-header.css
@@ -262,7 +262,7 @@ slot[name='logo'] {
   display: var(--_display-meta-nav-external);
   flex: 1;
 }
-[part~='meta-nav-external'] {
+[part~='meta-nav'] {
   display: var(--_display-meta-nav);
   /* TODO inline margin */
 }
@@ -301,6 +301,10 @@ slot[name='functions'] {
   slot[name='functions'] {
     padding-top: var(--telekom-spacing-composition-space-10);
   }
+  :host([scrolled]) slot[name='functions'],
+  :host([scrolled]) slot[name='main-nav'] {
+    padding-top: var(--telekom-spacing-composition-space-02);
+  }
 }
 
 [part~='base'] {

diff --git a/packages/components/src/components/telekom/telekom-mobile-flyout-canvas/readme.md b/packages/components/src/components/telekom/telekom-mobile-flyout-canvas/readme.md
@@ -40,6 +40,7 @@
 ### Used by
 
  - [scale-telekom-header-data-back-compat](../telekom-header-data-back-compat)
+ - [scale-telekom-profile-menu](../telekom-profile-menu)
 
 ### Depends on
 
@@ -50,6 +51,7 @@
 graph TD;
   scale-telekom-mobile-flyout-canvas --> scale-icon-action-close
   scale-telekom-header-data-back-compat --> scale-telekom-mobile-flyout-canvas
+  scale-telekom-profile-menu --> scale-telekom-mobile-flyout-canvas
   style scale-telekom-mobile-flyout-canvas fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

diff --git a/packages/components/src/components/telekom/telekom-nav-flyout/readme.md b/packages/components/src/components/telekom/telekom-nav-flyout/readme.md
@@ -50,11 +50,13 @@ Type: `Promise<void>`
 ### Used by
 
  - [scale-telekom-header-data-back-compat](../telekom-header-data-back-compat)
+ - [scale-telekom-profile-menu](../telekom-profile-menu)
 
 ### Graph
 ```mermaid
 graph TD;
   scale-telekom-header-data-back-compat --> scale-telekom-nav-flyout
+  scale-telekom-profile-menu --> scale-telekom-nav-flyout
   style scale-telekom-nav-flyout fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

diff --git a/packages/components/src/components/telekom/telekom-nav-item/readme.md b/packages/components/src/components/telekom/telekom-nav-item/readme.md
@@ -21,11 +21,13 @@
 ### Used by
 
  - [scale-telekom-header-data-back-compat](../telekom-header-data-back-compat)
+ - [scale-telekom-profile-menu](../telekom-profile-menu)
 
 ### Graph
 ```mermaid
 graph TD;
   scale-telekom-header-data-back-compat --> scale-telekom-nav-item
+  scale-telekom-profile-menu --> scale-telekom-nav-item
   style scale-telekom-nav-item fill:#f9f,stroke:#333,stroke-width:4px
 ```