Merge branch 'main' into release

telekom · Dec 22, 2023 · c86e777 · c86e777
2 parents 149cbd0 + 12d48df
commit c86e777
Show file tree

Hide file tree

Showing 28 changed files with 184 additions and 36 deletions.
diff --git a/CHANGELOG.md b/CHANGELOG.md
@@ -3,6 +3,21 @@
 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.146](https://github.com/telekom/scale/compare/v3.0.0-beta.145...v3.0.0-beta.146) (2023-12-22)
+
+
+### Bug Fixes
+
+* add id to nav items ([#2235](https://github.com/telekom/scale/issues/2235)) ([3349e8d](https://github.com/telekom/scale/commit/3349e8da50a896b847fa84d40274934f18206c96))
+* add min height css var ([#2233](https://github.com/telekom/scale/issues/2233)) ([84cc37b](https://github.com/telekom/scale/commit/84cc37b9ed26a13439a796b44eefc29c827d0063))
+* focus outline on header bottom-bar ([#2205](https://github.com/telekom/scale/issues/2205)) ([949c2d7](https://github.com/telekom/scale/commit/949c2d7a8696b39b768fedc7b43f350c213f000e))
+* handle setting disabled programatically ([#2240](https://github.com/telekom/scale/issues/2240)) ([6dcfdd1](https://github.com/telekom/scale/commit/6dcfdd1f3c89f85bcb73cc4cedfdc48b1cceb8fb))
+* mega menu grid ([#2237](https://github.com/telekom/scale/issues/2237)) ([1c707b8](https://github.com/telekom/scale/commit/1c707b80025b77152cc930106b8101770cdbe75f))
+
+
+
+
+
 # [3.0.0-beta.145](https://github.com/telekom/scale/compare/v3.0.0-beta.144...v3.0.0-beta.145) (2023-12-11)
 
 

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

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.146](https://github.com/telekom/scale/compare/v3.0.0-beta.145...v3.0.0-beta.146) (2023-12-22)
+
+**Note:** Version bump only for package @telekom/scale-components-angular
+
+
+
+
+
 # [3.0.0-beta.145](https://github.com/telekom/scale/compare/v3.0.0-beta.144...v3.0.0-beta.145) (2023-12-11)
 
 **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.145",
+  "version": "3.0.0-beta.146",
   "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.146](https://github.com/telekom/scale/compare/v3.0.0-beta.145...v3.0.0-beta.146) (2023-12-22)
+
+**Note:** Version bump only for package @telekom/scale-components-react
+
+
+
+
+
 # [3.0.0-beta.145](https://github.com/telekom/scale/compare/v3.0.0-beta.144...v3.0.0-beta.145) (2023-12-11)
 
 **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.145",
+  "version": "3.0.0-beta.146",
   "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.146](https://github.com/telekom/scale/compare/v3.0.0-beta.145...v3.0.0-beta.146) (2023-12-22)
+
+**Note:** Version bump only for package @telekom/scale-components-vue
+
+
+
+
+
 # [3.0.0-beta.145](https://github.com/telekom/scale/compare/v3.0.0-beta.144...v3.0.0-beta.145) (2023-12-11)
 
 **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.145",
+  "version": "3.0.0-beta.146",
   "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,21 @@
 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.146](https://github.com/telekom/scale/compare/v3.0.0-beta.145...v3.0.0-beta.146) (2023-12-22)
+
+
+### Bug Fixes
+
+* add id to nav items ([#2235](https://github.com/telekom/scale/issues/2235)) ([3349e8d](https://github.com/telekom/scale/commit/3349e8da50a896b847fa84d40274934f18206c96))
+* add min height css var ([#2233](https://github.com/telekom/scale/issues/2233)) ([84cc37b](https://github.com/telekom/scale/commit/84cc37b9ed26a13439a796b44eefc29c827d0063))
+* focus outline on header bottom-bar ([#2205](https://github.com/telekom/scale/issues/2205)) ([949c2d7](https://github.com/telekom/scale/commit/949c2d7a8696b39b768fedc7b43f350c213f000e))
+* handle setting disabled programatically ([#2240](https://github.com/telekom/scale/issues/2240)) ([6dcfdd1](https://github.com/telekom/scale/commit/6dcfdd1f3c89f85bcb73cc4cedfdc48b1cceb8fb))
+* mega menu grid ([#2237](https://github.com/telekom/scale/issues/2237)) ([1c707b8](https://github.com/telekom/scale/commit/1c707b80025b77152cc930106b8101770cdbe75f))
+
+
+
+
+
 # [3.0.0-beta.145](https://github.com/telekom/scale/compare/v3.0.0-beta.144...v3.0.0-beta.145) (2023-12-11)
 
 

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.145",
+  "version": "3.0.0-beta.146",
   "description": "Scale is the digital design system for Telekom products and experiences.",
   "homepage": "https://github.com/telekom/scale",
   "repository": {
@@ -73,7 +73,7 @@
     "@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.145",
+    "@telekom/scale-design-tokens": "^3.0.0-beta.146",
     "classnames": "^2.2.6",
     "composed-offset-position": "^0.0.4",
     "stencil-inline-svg": "^1.0.1"

diff --git a/packages/components/src/components/dropdown-select/dropdown-select.css b/packages/components/src/components/dropdown-select/dropdown-select.css
@@ -96,6 +96,11 @@
   color: var(--color);
 }
 
+[part='combobox-value'] {
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 [part~='select']:not([part~='disabled'])
   [part='combobox']:hover
   ~ [part='icon'] {

diff --git a/packages/components/src/components/tab-header/tab-header.tsx b/packages/components/src/components/tab-header/tab-header.tsx
@@ -40,7 +40,7 @@ export class TabHeader {
   @Element() hostElement: HTMLElement;
 
   /** True for a disabled Tabnavigation */
-  @Prop() disabled?: boolean = false;
+  @Prop({ reflect: true }) disabled?: boolean = false;
   /** True for smaller height and font size */
   /** @deprecated - size should replace small */
   @Prop() small?: boolean = false;
@@ -79,6 +79,13 @@ export class TabHeader {
     }
   }
 
+  @Watch('disabled')
+  disabledChanged() {
+    if (this.disabled) {
+      this.selected = false;
+    }
+  }
+
   componentDidLoad() {
     this.setChildrenIconSize();
   }

diff --git a/packages/components/src/components/tab-nav/tab-nav.tsx b/packages/components/src/components/tab-nav/tab-nav.tsx
@@ -42,7 +42,7 @@ export class TabNav {
   handleSelect(event) {
     const nextTab = event.target as HTMLScaleTabHeaderElement;
     // Act only if it's a direct child
-    if (this.getAllEnabledTabs().includes(nextTab)) {
+    if (this.getAllEnabledTabs().includes(nextTab) && !nextTab.disabled) {
       this.selectTab(nextTab);
     }
   }
@@ -143,8 +143,9 @@ export class TabNav {
   }
 
   linkPanels() {
-    const tabs = this.getAllEnabledTabs();
-    const selectedTab = tabs.find((x) => x.selected) || tabs[0];
+    const tabs = this.getAllTabs();
+    const selectedTab =
+      tabs.find((x) => x.selected) || tabs.filter((x) => !x.disabled)[0];
 
     tabs.forEach((tab) => {
       const panel = tab.nextElementSibling;
@@ -169,7 +170,6 @@ export class TabNav {
 
   selectTab(nextTab: HTMLScaleTabHeaderElement) {
     const nextPanel = this.findPanelForTab(nextTab);
-
     this.reset();
     nextPanel.hidden = false;
     nextTab.selected = true;

diff --git a/...rc/components/telekom/telekom-header-data-back-compat/telekom-header-data-back-compat.tsx b/...rc/components/telekom/telekom-header-data-back-compat/telekom-header-data-back-compat.tsx
@@ -80,6 +80,7 @@ export class TelekomHeaderDataBackCompat {
                 <scale-telekom-nav-item>
                   <a
                     href={item.href || 'javascript:void(0);'}
+                    id={item.id}
                     target={item.target || '_self'}
                     onClick={(event) => {
                       if (typeof item.onClick === 'function') {
@@ -106,6 +107,7 @@ export class TelekomHeaderDataBackCompat {
                 <scale-telekom-nav-item>
                   <a
                     href={item.href || 'javascript:void(0);'}
+                    id={item.id}
                     target={item.target || '_self'}
                     onClick={(event) => {
                       if (typeof item.onClick === 'function') {
@@ -132,11 +134,11 @@ export class TelekomHeaderDataBackCompat {
                 selected &&
                 findRootNode(readData(this.mainNavigation), selected.id);
               const isActive = (itemId) => rootNode && rootNode.id === itemId;
-
               return (
                 <scale-telekom-nav-item active={isActive(item.id)}>
                   <a
                     href={item.href || 'javascript:void(0);'}
+                    id={item.id}
                     target={item.target || '_self'}
                     onClick={(event) => {
                       if (typeof item.onClick === 'function') {
@@ -296,6 +298,7 @@ export class TelekomHeaderDataBackCompat {
                     <a
                       href={item.href || 'javascript:void(0);'}
                       target={item.target || '_self'}
+                      id={item.id}
                       onClick={(event) => {
                         if (typeof item.onClick === 'function') {
                           item.onClick(event);
@@ -452,6 +455,7 @@ export class TelekomHeaderDataBackCompat {
                           return (
                             <scale-telekom-nav-item>
                               <a
+                                id={item.id}
                                 href={item.href || 'javascript:void(0);'}
                                 target={item.target || '_self'}
                                 onClick={(event) => {
@@ -478,6 +482,7 @@ export class TelekomHeaderDataBackCompat {
                             <scale-telekom-nav-item>
                               <a
                                 href={item.href || 'javascript:void(0);'}
+                                id={item.id}
                                 target={item.target || '_self'}
                                 onClick={(event) => {
                                   if (typeof item.onClick === 'function') {

diff --git a/packages/components/src/components/telekom/telekom-header/telekom-header.css b/packages/components/src/components/telekom/telekom-header/telekom-header.css
@@ -282,6 +282,27 @@ slot[name='functions'] {
   /* TODO inline margin */
 }
 
+@media screen and (--lg) {
+  slot[name='main-nav'],
+  slot[name='functions'] {
+    padding-top: var(--telekom-spacing-composition-space-06);
+  }
+}
+
+@media screen and (--xl) {
+  slot[name='main-nav'],
+  slot[name='functions'] {
+    padding-top: var(--telekom-spacing-composition-space-07);
+  }
+}
+
+@media screen and (--2xl) {
+  slot[name='main-nav'],
+  slot[name='functions'] {
+    padding-top: var(--telekom-spacing-composition-space-10);
+  }
+}
+
 [part~='base'] {
   /* height: var(--_height); */
   height: var(--_base-height);

diff --git a/packages/components/src/components/telekom/telekom-mega-menu/telekom-mega-menu-column.css b/packages/components/src/components/telekom/telekom-mega-menu/telekom-mega-menu-column.css
@@ -21,16 +21,6 @@
   grid-column: 3 / span 3;
 }
 
-:host-context([children-too-many]):host(:first-child) {
-  grid-column: 2 / span 3;
-}
-
-@media screen and (--2xl) {
-  :host-context([children-too-many]):host(:first-child) {
-    grid-column: 1 / span 3;
-  }
-}
-
 [part~='base'] {
   display: flex;
   flex-direction: column;

diff --git a/packages/components/src/components/telekom/telekom-mega-menu/telekom-mega-menu.css b/packages/components/src/components/telekom/telekom-mega-menu/telekom-mega-menu.css
@@ -86,3 +86,17 @@
     --spacing-x: var(--telekom-spacing-composition-space-08);
   }
 }
+
+/* this is a workaround to host-context not working in FF and safari */
+
+.scale-telekom-mega-menu[children-too-many]
+  scale-telekom-mega-menu-column:first-child {
+  grid-column: 2 / span 3;
+}
+
+@media screen and (--2xl) {
+  .scale-telekom-mega-menu[children-too-many]
+    scale-telekom-mega-menu-column:first-child {
+    grid-column: 1 / span 3;
+  }
+}
diff --git a/...s/components/src/components/telekom/telekom-mobile-menu-item/telekom-mobile-menu-item.css b/...s/components/src/components/telekom/telekom-mobile-menu-item/telekom-mobile-menu-item.css
@@ -99,4 +99,5 @@
 :host::part(icon-right-container) {
   display: flex;
   align-items: center;
+  position: absolute;
 }
diff --git a/packages/components/src/components/telekom/telekom-nav-flyout/telekom-nav-flyout.css b/packages/components/src/components/telekom/telekom-nav-flyout/telekom-nav-flyout.css
@@ -14,6 +14,7 @@
   --left: 0;
   --width: 100vw;
   --height: auto;
+  --min-height: 25vh;
   --position: fixed;
   --background: var(--telekom-color-background-surface);
   --background-variant-mobile: var(--telekom-color-background-canvas);
@@ -49,7 +50,7 @@
   left: var(--left);
   width: var(--width);
   height: var(--height);
-  min-height: 25vh;
+  min-height: var(--min-height);
   background: var(--background);
   box-shadow: var(--shadow);
   animation-duration: var(--duration);

diff --git a/packages/components/src/components/telekom/telekom-nav-flyout/telekom-nav-flyout.tsx b/packages/components/src/components/telekom/telekom-nav-flyout/telekom-nav-flyout.tsx
@@ -132,7 +132,6 @@ export class TelekomNavItem {
       this.show();
     }
   };
-
   handleTriggerClick = (event: MouseEvent) => {
     if (event.ctrlKey) {
       return;

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
@@ -197,7 +197,6 @@
   > .scale-telekom-nav-item
   > :where(a, button):hover:after {
   content: '';
-  width: 100%;
   height: var(--telekom-spacing-composition-space-02);
   background: var(--telekom-color-text-and-icon-primary-hovered);
   display: block;
@@ -258,7 +257,6 @@
   > .scale-telekom-nav-item[active]
   > :where(a, button):after {
   content: '';
-  width: 100%;
   height: var(--telekom-spacing-composition-space-03);
   background: var(--telekom-color-text-and-icon-primary-standard);
   display: block;