Merge branch 'main' into release

telekom · Feb 23, 2024 · 014a698 · 014a698
2 parents 9cde0c8 + 81acd22
commit 014a698
Show file tree

Hide file tree

Showing 60 changed files with 1,688 additions and 153 deletions.
diff --git a/.github/workflows/publish.yml b/.github/workflows/publish.yml
@@ -112,10 +112,6 @@ jobs:
         run: |
           npm deprecate @telekom/scale-components-vue@~3.0.0-beta.17 "Please use @telekom/scale-components directly, see the Scale docs. Vue support for web components is already great."
 
-      - name: Deprecate Scale Design Tokens Package
-        run: |
-          npm deprecate @telekom/scale-design-tokens@~3.0.0-beta.100 "Deprecated in favor of @telekom/design-tokens."
-
   publish-neutral:
     runs-on: ubuntu-20.04
     environment: RELEASE
@@ -190,6 +186,3 @@ jobs:
         run: |
           npm deprecate @telekom/scale-components-vue-neutral@~3.0.0-beta.17 "Please use @telekom/scale-components directly, see the Scale docs. Vue support for web components is already great."
 
-      - name: Deprecate Scale Design Tokens Package
-        run: |
-          npm deprecate @telekom/scale-design-tokens-neutral@~3.0.0-beta.100 "Deprecated in favor of @telekom/design-tokens."
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0-beta.149](https://github.com/telekom/scale/compare/v3.0.0-beta.148...v3.0.0-beta.149) (2024-02-23)
+
+
+### Bug Fixes
+
+* **telekom-profile-menu:** stories and flyout menu fixes ([#2273](https://github.com/telekom/scale/issues/2273)) ([aa0e237](https://github.com/telekom/scale/commit/aa0e2371305515f0e37fd06acc5d3c9c381d47ac))
+
+
+
+
+
 # [3.0.0-beta.148](https://github.com/telekom/scale/compare/v3.0.0-beta.147...v3.0.0-beta.148) (2024-02-15)
 
 

diff --git a/lerna.json b/lerna.json
@@ -7,7 +7,7 @@
     "--pure-lockfile"
   ],
   "useWorkspaces": true,
-  "version": "3.0.0-beta.148",
+  "version": "3.0.0-beta.149",
   "command": {
     "version": {
       "allowBranch": "main"

diff --git a/package.json b/package.json
@@ -15,9 +15,9 @@
     "new-version": "lerna version --conventional-commits --no-push",
     "force-version": "lerna version --conventional-commits --force-publish",
     "format": "lerna run format",
-    "publish-telekom": "lerna publish -y from-package --no-verify-access --no-git-tag-version --no-push --force-publish @telekom/scale-components,@telekom/scale-components-react,@telekom/scale-components-angular,@telekom/scale-components-vue,@telekom/scale-design-tokens --dist-tag next",
+    "publish-telekom": "lerna publish -y from-package --no-verify-access --no-git-tag-version --no-push --force-publish @telekom/scale-components,@telekom/scale-components-react,@telekom/scale-components-angular,@telekom/scale-components-vue --dist-tag next",
     "prepare-neutral": "node scripts/prepare-neutral-release.js && git commit . -m 'chore: temp commit'",
-    "publish-neutral": "lerna publish -y from-package --no-verify-access --no-git-tag-version --no-push --force-publish @telekom/scale-components-neutral,@telekom/scale-components-react-neutral,@telekom/scale-components-angular-neutral,@telekom/scale-components-vue-neutral,@telekom/scale-design-tokens-neutral --dist-tag next"
+    "publish-neutral": "lerna publish -y from-package --no-verify-access --no-git-tag-version --no-push --force-publish @telekom/scale-components-neutral,@telekom/scale-components-react-neutral,@telekom/scale-components-angular-neutral,@telekom/scale-components-vue-neutral --dist-tag next"
   },
   "devDependencies": {
     "@commitlint/cli": "^12.1.1",

diff --git a/packages/components-angular/CHANGELOG.md b/packages/components-angular/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0-beta.149](https://github.com/telekom/scale/compare/v3.0.0-beta.148...v3.0.0-beta.149) (2024-02-23)
+
+**Note:** Version bump only for package @telekom/scale-components-angular
+
+
+
+
+
 # [3.0.0-beta.148](https://github.com/telekom/scale/compare/v3.0.0-beta.147...v3.0.0-beta.148) (2024-02-15)
 
 **Note:** Version bump only for package @telekom/scale-components-angular

diff --git a/packages/components-angular/package.json b/packages/components-angular/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@telekom/scale-components-angular",
-  "version": "3.0.0-beta.148",
+  "version": "3.0.0-beta.149",
   "description": "Angular specific wrapper for @telekom/scale-components",
   "license": "MPL-2.0",
   "homepage": "https://github.com/telekom/scale",

diff --git a/packages/components-react/CHANGELOG.md b/packages/components-react/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0-beta.149](https://github.com/telekom/scale/compare/v3.0.0-beta.148...v3.0.0-beta.149) (2024-02-23)
+
+**Note:** Version bump only for package @telekom/scale-components-react
+
+
+
+
+
 # [3.0.0-beta.148](https://github.com/telekom/scale/compare/v3.0.0-beta.147...v3.0.0-beta.148) (2024-02-15)
 
 **Note:** Version bump only for package @telekom/scale-components-react

diff --git a/packages/components-react/package.json b/packages/components-react/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@telekom/scale-components-react",
   "sideEffects": false,
-  "version": "3.0.0-beta.148",
+  "version": "3.0.0-beta.149",
   "description": "React proxy for @telekom/scale-components",
   "license": "MPL-2.0",
   "homepage": "https://github.com/telekom/scale",

diff --git a/packages/components-vue/CHANGELOG.md b/packages/components-vue/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0-beta.149](https://github.com/telekom/scale/compare/v3.0.0-beta.148...v3.0.0-beta.149) (2024-02-23)
+
+**Note:** Version bump only for package @telekom/scale-components-vue
+
+
+
+
+
 # [3.0.0-beta.148](https://github.com/telekom/scale/compare/v3.0.0-beta.147...v3.0.0-beta.148) (2024-02-15)
 
 **Note:** Version bump only for package @telekom/scale-components-vue

diff --git a/packages/components-vue/package.json b/packages/components-vue/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@telekom/scale-components-vue",
   "sideEffects": false,
-  "version": "3.0.0-beta.148",
+  "version": "3.0.0-beta.149",
   "description": "Vue specific wrapper for @telekom/scale-components",
   "license": "MPL-2.0",
   "homepage": "https://github.com/telekom/scale",

diff --git a/packages/components/CHANGELOG.md b/packages/components/CHANGELOG.md
@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [3.0.0-beta.149](https://github.com/telekom/scale/compare/v3.0.0-beta.148...v3.0.0-beta.149) (2024-02-23)
+
+
+### Bug Fixes
+
+* **telekom-profile-menu:** stories and flyout menu fixes ([#2273](https://github.com/telekom/scale/issues/2273)) ([aa0e237](https://github.com/telekom/scale/commit/aa0e2371305515f0e37fd06acc5d3c9c381d47ac))
+
+
+
+
+
 # [3.0.0-beta.148](https://github.com/telekom/scale/compare/v3.0.0-beta.147...v3.0.0-beta.148) (2024-02-15)
 
 

diff --git a/packages/components/package.json b/packages/components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@telekom/scale-components",
-  "version": "3.0.0-beta.148",
+  "version": "3.0.0-beta.149",
   "description": "Scale is the digital design system for Telekom products and experiences.",
   "homepage": "https://github.com/telekom/scale",
   "repository": {
@@ -73,7 +73,6 @@
     "@floating-ui/dom": "^1.2.8",
     "@stencil/core": "^2.17.0",
     "@telekom/design-tokens": "1.0.0-beta.10",
-    "@telekom/scale-design-tokens": "^3.0.0-beta.148",
     "classnames": "^2.2.6",
     "composed-offset-position": "^0.0.4",
     "stencil-inline-svg": "^1.0.1"

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');
     });
   }