Revert "feat(telekom-profile-menu): WIP (#2208)"

This reverts commit 41374f0. Only temporarily to fix a few issues in the Flyout Menu
telekom · Feb 8, 2024 · 8a5e883 · 8a5e883
1 parent 41374f0
commit 8a5e883
Show file tree

Hide file tree

Showing 34 changed files with 43 additions and 1,604 deletions.
diff --git a/packages/components/src/components/badge/badge.tsx b/packages/components/src/components/badge/badge.tsx
@@ -49,7 +49,6 @@ 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,13 +28,11 @@
 ### Used by
 
  - [scale-telekom-header-data-back-compat](../telekom/telekom-header-data-back-compat)
- - [telekom-profile-menu](../telekom/telekom-profile-menu)
 
 ### Graph
 ```mermaid
 graph TD;
   scale-telekom-header-data-back-compat --> scale-badge
-  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,15 +45,13 @@ Type: `Promise<void>`
  - [app-navigation-user-menu](../telekom/app-navigation-user-menu)
  - [scale-data-grid](../data-grid)
  - [scale-notification](../notification)
- - [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
-  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,15 +108,13 @@ Type: `Promise<void>`
  - [scale-data-grid](../data-grid)
  - [scale-notification-banner](../notification-banner)
  - [scale-notification-toast](../notification-toast)
- - [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
-  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,11 +59,6 @@ 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;
-
-  /** (optional) override to set a custom role */
-  @Prop() role? = "menu";
 
   /** Event triggered when menu list opened */
   @Event({ eventName: 'scale-open' }) scaleOpen: EventEmitter<{
@@ -287,7 +282,7 @@ export class MenuFlyoutList {
 
   updateTriggerAttributes() {
     const trigger = this.trigger();
-    if (trigger && trigger.getAttribute('aria-haspopup') === 'true' || trigger.getAttribute('class') === 'scale-menu-trigger') {
+    if (trigger && trigger.getAttribute('aria-haspopup') === 'true') {
       trigger.setAttribute('aria-expanded', String(this.opened));
     }
   }
@@ -346,14 +341,14 @@ export class MenuFlyoutList {
     if (rect.top < PAD) {
       // console.log('off top edge');
       isOutOfBounds = true;
-      if (this.direction.includes('top') && !this.preventFlipVertical) {
+      if (this.direction.includes('top')) {
         this.flipVertical = true;
       }
     }
     if (rect.bottom > this.windowHeight - PAD) {
       // console.log('off bottom edge');
       isOutOfBounds = true;
-      if (this.direction.includes('bottom') && !this.preventFlipVertical) {
+      if (this.direction.includes('bottom')) {
         this.flipVertical = true;
       }
     }
@@ -472,7 +467,7 @@ export class MenuFlyoutList {
 
   render() {
     return (
-      <Host role={this.role} class="scale-menu">
+      <Host role="menu">
         {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,16 +7,15 @@
 
 ## 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`          |
-| `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`      |
+| 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`      |
 
 
 ## Events
@@ -76,15 +75,13 @@ 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)
- - [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
-  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 = '.scale-menu';
+const MENU_SELECTOR = '[role="menu"]';
 
 const isButtonOrLink = (el: HTMLElement) => {
   if (
@@ -34,8 +34,6 @@ 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;
   /** (optional) Set preference for where the menu appears, space permitting */
   @Prop() direction:
     | 'bottom-right'
@@ -154,14 +152,7 @@ export class MenuFlyout {
       .concat([isButtonOrLink(this.trigger)])
       .filter((x) => x != null);
     triggers.forEach((el) => {
-
-      if(this.hasPopup) {
-        el.setAttribute('aria-haspopup', 'true');
-      }
-
-      el.setAttribute('class', 'scale-menu-trigger');
-
-
+      el.setAttribute('aria-haspopup', 'true');
       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
@@ -28,15 +28,13 @@
  - [scale-app-header](../telekom/app-header)
  - [scale-data-grid](../data-grid)
  - [scale-telekom-header-data-back-compat](../telekom/telekom-header-data-back-compat)
- - [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
-  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,7 +29,6 @@ export class AppNavigationUserMenu {
   @Element() hostElement: HTMLElement;
   @Prop() hide: () => void;
   @Prop() navigation: any;
-  @Prop() styles: string;
   @Event({
     eventName: 'closeMenu',
     composed: true,
@@ -41,10 +40,7 @@ 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 (
@@ -57,10 +53,7 @@ export class AppNavigationUserMenu {
 
             if (item.type === 'userInfo') {
               return (
-                <div
-                  class="app-navigation-user-menu__user-info"
-                  part="userInfo"
-                >
+                <div class="app-navigation-user-menu__user-info">
                   <div class="app-navigation-user-menu__user-info--name scl-font-variant-heading-4">
                     {item.name}
                   </div>
@@ -78,7 +71,6 @@ export class AppNavigationUserMenu {
                   target={item.target || '_self'}
                   tabindex={0}
                   class="app-navigation-user-menu__item"
-                  part="item"
                   onClick={(e) => {
                     e.stopImmediatePropagation();
                     if (item.onClick) {
@@ -125,7 +117,6 @@ 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,7 +11,6 @@
 | ------------ | ------------ | ----------- | ------------ | ----------- |
 | `hide`       | --           |             | `() => void` | `undefined` |
 | `navigation` | `navigation` |             | `any`        | `undefined` |
-| `styles`     | `styles`     |             | `string`     | `undefined` |
 
 
 ## Events
@@ -25,10 +24,7 @@
 
 | Part                | Description |
 | ------------------- | ----------- |
-| `"button"`          |             |
-| `"item"`            |             |
 | `"rule-horizontal"` |             |
-| `"userinfo"`        |             |
 
 
 ## Dependencies
@@ -37,7 +33,6 @@
 
  - [scale-app-header](../app-header)
  - [scale-telekom-header-data-back-compat](../telekom-header-data-back-compat)
- - [telekom-profile-menu](../telekom-profile-menu)
 
 ### Depends on
 
@@ -51,7 +46,6 @@ 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
-  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/logo/readme.md b/packages/components/src/components/telekom/logo/readme.md
@@ -1,7 +1,7 @@
-# scale-logo
-
-
-
+# scale-logo
+
+
+
 <!-- Auto Generated Below -->
 
 

diff --git a/.../components/src/components/telekom/telekom-footer-extended-navigation/readme.md b/.../components/src/components/telekom/telekom-footer-extended-navigation/readme.md
@@ -1,7 +1,7 @@
-# scale-telekom-footer-extended-navigation-column
-
-
-
+# scale-telekom-footer-extended-navigation-column
+
+
+
 <!-- Auto Generated Below -->
 
 

diff --git a/packages/components/src/components/telekom/telekom-footer/readme.md b/packages/components/src/components/telekom/telekom-footer/readme.md
@@ -1,7 +1,7 @@
-# scale-telekom-footer
-
-
-
+# scale-telekom-footer
+
+
+
 <!-- Auto Generated Below -->
 
 

diff --git a/packages/components/src/components/telekom/telekom-mega-menu/readme.md b/packages/components/src/components/telekom/telekom-mega-menu/readme.md
@@ -1,7 +1,7 @@
-# scale-telekom-mega-menu-column
-
-
-
+# scale-telekom-mega-menu-column
+
+
+
 <!-- Auto Generated Below -->
 
 

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,7 +40,6 @@
 ### Used by
 
  - [scale-telekom-header-data-back-compat](../telekom-header-data-back-compat)
- - [telekom-profile-menu](../telekom-profile-menu)
 
 ### Depends on
 
@@ -51,7 +50,6 @@
 graph TD;
   scale-telekom-mobile-flyout-canvas --> scale-icon-action-close
   scale-telekom-header-data-back-compat --> scale-telekom-mobile-flyout-canvas
-  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,13 +50,11 @@ Type: `Promise<void>`
 ### Used by
 
  - [scale-telekom-header-data-back-compat](../telekom-header-data-back-compat)
- - [telekom-profile-menu](../telekom-profile-menu)
 
 ### Graph
 ```mermaid
 graph TD;
   scale-telekom-header-data-back-compat --> scale-telekom-nav-flyout
-  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,13 +21,11 @@
 ### Used by
 
  - [scale-telekom-header-data-back-compat](../telekom-header-data-back-compat)
- - [telekom-profile-menu](../telekom-profile-menu)
 
 ### Graph
 ```mermaid
 graph TD;
   scale-telekom-header-data-back-compat --> scale-telekom-nav-item
-  telekom-profile-menu --> scale-telekom-nav-item
   style scale-telekom-nav-item fill:#f9f,stroke:#333,stroke-width:4px
 ```
 

diff --git a/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.css b/packages/components/src/components/telekom/telekom-nav-item/telekom-nav-item.css
@@ -356,11 +356,6 @@
   width: 20px;
 }
 
-.scale-telekom-nav-list[variant='functions'] [slot='dot'] .scale-icon {
-  height: 12px;
-  width: 12px;
-}
-
 @media screen and (--2xl) {
   .scale-telekom-nav-list[variant='functions'] .scale-icon {
     height: 24px;