Merge remote-tracking branch 'main-origin/main'

siemens · Feb 26, 2024 · f382f90 · f382f90
2 parents 524bc2a + 1fd1637
commit f382f90
Show file tree

Hide file tree

Showing 62 changed files with 1,245 additions and 288 deletions.
diff --git a/packages/angular-test-app/src/preview-examples/message-bar.ts b/packages/angular-test-app/src/preview-examples/message-bar.ts
@@ -12,13 +12,15 @@ import { Component } from '@angular/core';
 @Component({
   selector: 'app-example',
   template: `
-    <ix-message-bar>Message text</ix-message-bar>
-    <ix-message-bar type="warning">Message text</ix-message-bar>
-    <ix-message-bar type="danger">
-      <div class="d-flex align-items-center justify-content-between">
-        Message text <ix-button>Action</ix-button>
-      </div>
-    </ix-message-bar>
+    <div style='margin: 0.5rem'>
+      <ix-message-bar style="margin-bottom: 0.5rem; display: block">Message text</ix-message-bar>
+      <ix-message-bar style="margin-bottom: 0.5rem; display: block" type="warning">Message text</ix-message-bar>
+      <ix-message-bar style="display: block" type="danger">
+        <div class="d-flex align-items-center justify-content-between">
+          Message text <ix-button>Action</ix-button>
+        </div>
+      </ix-message-bar>
+    </div>
   `,
 })
 export default class MessageBar {}
diff --git a/packages/angular-test-app/src/preview-examples/tooltip.html b/packages/angular-test-app/src/preview-examples/tooltip.html
@@ -1,9 +1,9 @@
 <div style="padding: 4rem">
-  <ix-button class="any-class" style="margin-right: 4rem">Hover me</ix-button>
-  <ix-tooltip for=".any-class">Simple selector</ix-tooltip>
+  <ix-button class="any-class" aria-describedby="tooltip-1">Hover me</ix-button>
+  <ix-tooltip id="tooltip-1" for=".any-class">Simple selector</ix-tooltip>
 
-  <ix-button my-custom-special-selector="any-value">Also hover me</ix-button>
-  <ix-tooltip for="[my-custom-special-selector='any-value']">
+  <ix-button my-custom-special-selector="any-value" aria-describedby="tooltip-2">Also hover me</ix-button>
+  <ix-tooltip id="tooltip-2" for="[my-custom-special-selector='any-value']">
     Custom selector
   </ix-tooltip>
 </div>
diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -2,7 +2,7 @@
   "timestamp": "",
   "compiler": {
     "name": "@stencil/core",
-    "version": "4.12.2",
+    "version": "4.12.3",
     "typescriptVersion": "5.3.3"
   },
   "components": [
@@ -10507,7 +10507,7 @@
             "resolved": "string",
             "references": {}
           },
-          "mutable": false,
+          "mutable": true,
           "attr": "icon",
           "reflectToAttr": false,
           "docs": "Name of the icon you want to display. Icon names can be resolved from the documentation",
@@ -10554,7 +10554,7 @@
             "resolved": "string",
             "references": {}
           },
-          "mutable": false,
+          "mutable": true,
           "attr": "tab-icon",
           "reflectToAttr": false,
           "docs": "Name of the icon you want to display. Icon names can be resolved from the documentation",
@@ -10568,7 +10568,6 @@
               "text": "since 2.0.0 use `icon` property. Will be removed in 3.0.0"
             }
           ],
-          "default": "'document'",
           "deprecation": "since 2.0.0 use `icon` property. Will be removed in 3.0.0",
           "values": [
             {
@@ -17547,4 +17546,4 @@
       "path": "src/components/dropdown/placement.ts"
     }
   }
-}
+}
diff --git a/packages/core/package.json b/packages/core/package.json
@@ -42,7 +42,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.5.1",
-    "@stencil/core": "^4.12.0",
+    "@stencil/core": "^4.12.3",
     "@types/luxon": "^3.3.7",
     "animejs": "~3.2.1",
     "hyperlist": "^1.0.0",

diff --git a/packages/core/scss/theme/classic-dark/_borderRadius.scss b/packages/core/scss/theme/classic-dark/_borderRadius.scss
@@ -21,4 +21,4 @@
       --theme-upload--border-radius: var(--theme-default-border-radius);
       --theme-workflow--border-radius: var(--theme-default-border-radius);
   }
-}
+}
diff --git a/packages/core/scss/theme/classic-dark/_borderWidth.scss b/packages/core/scss/theme/classic-dark/_borderWidth.scss
@@ -15,4 +15,4 @@
       --theme-modal--border-thickness: 0.0625rem;
       --theme-toast--border-thickness: 0rem;
   }
-}
+}
diff --git a/packages/core/scss/theme/classic-light/_borderRadius.scss b/packages/core/scss/theme/classic-light/_borderRadius.scss
@@ -21,4 +21,4 @@
       --theme-upload--border-radius: var(--theme-default-border-radius);
       --theme-workflow--border-radius: var(--theme-default-border-radius);
   }
-}
+}
diff --git a/packages/core/scss/theme/classic-light/_borderWidth.scss b/packages/core/scss/theme/classic-light/_borderWidth.scss
@@ -15,4 +15,4 @@
       --theme-modal--border-thickness: 0.0625rem;
       --theme-toast--border-thickness: 0rem;
   }
-}
+}
diff --git a/packages/core/src/components/dropdown/dropdown-controller.ts b/packages/core/src/components/dropdown/dropdown-controller.ts
@@ -96,10 +96,10 @@ class DropdownController {
     }
   }
 
-  dismissAll(includeUids?: string[]) {
+  dismissAll(ignoreBehaviorForIds: string[] = []) {
     this.dropdowns.forEach((dropdown) => {
       if (
-        !includeUids?.includes(dropdown.getId()) &&
+        !ignoreBehaviorForIds.includes(dropdown.getId()) &&
         (dropdown.closeBehavior === 'inside' ||
           dropdown.closeBehavior === false)
       ) {
@@ -115,7 +115,6 @@ class DropdownController {
 
     this.dropdowns.forEach((dropdown) => {
       if (
-        dropdown.isPresent() &&
         dropdown.closeBehavior !== 'inside' &&
         dropdown.closeBehavior !== false &&
         !path.has(dropdown.getId())
@@ -126,10 +125,15 @@ class DropdownController {
   }
 
   pathIncludesTrigger(eventTargets: EventTarget[]) {
-    return !!eventTargets.find(
-      (element: HTMLElement) =>
-        !!element.hasAttribute?.('data-ix-dropdown-trigger')
-    );
+    for (let eventTarget of eventTargets) {
+      if (eventTarget instanceof HTMLElement) {
+        if (eventTarget.hasAttribute('data-ix-dropdown-trigger')) {
+          return true;
+        }
+      }
+    }
+
+    return false;
   }
 
   private pathIncludesDropdown(eventTargets: EventTarget[]) {

diff --git a/packages/core/src/components/dropdown/dropdown.tsx b/packages/core/src/components/dropdown/dropdown.tsx
@@ -213,10 +213,16 @@ export class Dropdown implements ComponentInterface, DropdownInterface {
       this.triggerElement,
       'click',
       (event: PointerEvent) => {
-        if (!event.defaultPrevented) toggleController();
+        if (!event.defaultPrevented) {
+          toggleController();
+        }
       }
     );
-    this.triggerElement.setAttribute('data-ix-dropdown-trigger', this.localUId);
+
+    this.triggerElement?.setAttribute(
+      'data-ix-dropdown-trigger',
+      this.localUId
+    );
   }
 
   /** @internal */
@@ -255,8 +261,6 @@ export class Dropdown implements ComponentInterface, DropdownInterface {
       const dropdownItem = await element.getDropdownItemElement();
       dropdownItem.isSubMenu = true;
       this.hostElement.style.zIndex = `var(--theme-z-index-dropdown)`;
-
-      return dropdownItem;
     }
 
     if (element.tagName === 'IX-DROPDOWN-ITEM') {
@@ -419,7 +423,9 @@ export class Dropdown implements ComponentInterface, DropdownInterface {
     if (dropdownController.pathIncludesTrigger(event.composedPath())) {
       event.preventDefault();
 
-      if (this.isTriggerElement(event.target as HTMLElement)) return;
+      if (this.isTriggerElement(event.target as HTMLElement)) {
+        return;
+      }
     }
 
     if (this.closeBehavior === 'inside' || this.closeBehavior === 'both') {

diff --git a/packages/core/src/components/menu-avatar-item/test/menu-avatar-item.ct.ts b/packages/core/src/components/menu-avatar-item/test/menu-avatar-item.ct.ts
@@ -0,0 +1,55 @@
+/*
+ * SPDX-FileCopyrightText: 2023 Siemens AG
+ *
+ * SPDX-License-Identifier: MIT
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { expect } from '@playwright/test';
+import { test } from '@utils/test';
+
+const html = String.raw;
+
+test('Nested dropdowns', async ({ mount, page }) => {
+  await mount(html`
+    <ix-menu>
+      <ix-menu-avatar>
+        <ix-menu-avatar-item label="test" id="submenu-01"></ix-menu-avatar-item>
+      </ix-menu-avatar>
+    </ix-menu>
+    <ix-dropdown trigger="submenu-01" id="d1">
+      <ix-dropdown-item>SubMenuItem 1</ix-dropdown-item>
+      <ix-dropdown-item>SubMenuItem 2</ix-dropdown-item>
+      <ix-dropdown-item>SubMenuItem 3</ix-dropdown-item>
+      <ix-dropdown-item id="submenu-02">SubMenuItem 4</ix-dropdown-item>
+    </ix-dropdown>
+    <ix-dropdown trigger="submenu-02" id="d2">
+      <ix-dropdown-item>SubMenuItem 1</ix-dropdown-item>
+      <ix-dropdown-item>SubMenuItem 2</ix-dropdown-item>
+      <ix-dropdown-item>SubMenuItem 3</ix-dropdown-item>
+      <ix-dropdown-item>SubMenuItem 4</ix-dropdown-item>
+    </ix-dropdown>
+  `);
+
+  const menuAvatar = page.locator('ix-menu-avatar');
+  await expect(menuAvatar).toBeVisible();
+  await menuAvatar.click();
+
+  await expect(menuAvatar.locator('ix-dropdown')).toBeVisible();
+
+  const menuAvatarItem = menuAvatar.locator('ix-menu-avatar-item').nth(0);
+  await menuAvatarItem.click();
+
+  const dropdown1 = page.locator('#d1');
+  const dropdown2 = page.locator('#d2');
+
+  await expect(dropdown1).toBeVisible();
+
+  const dropdown2Trigger = dropdown1
+    .locator('ix-dropdown-item')
+    .filter({ hasText: 'SubMenuItem 4' });
+  await dropdown2Trigger.click();
+
+  await expect(dropdown2).toBeVisible();
+});
diff --git a/packages/core/src/components/menu-category/menu-category.scss b/packages/core/src/components/menu-category/menu-category.scss
@@ -8,6 +8,7 @@
  */
 
 @import 'mixins/shadow-dom/component';
+@import 'mixins/text-truncation';
 
 :host {
   @include ix-component;
@@ -23,9 +24,15 @@
     height: 100%;
   }
 
+  .category-text {
+    width: 100%;
+    padding-right: 0.25rem;
+    @include ellipsis;
+  }
+
   .category-chevron {
     margin-left: auto;
-    margin-right: 0px;
+    margin-right: 0;
     transition: var(--theme-default-time) transform ease-in-out;
   }
 
@@ -35,13 +42,17 @@
 
   .menu-items {
     overflow: hidden;
-    max-height: 0px;
+    max-height: 0;
     transition: var(--theme-default-time) max-height ease-in-out;
-    padding: 0.25rem 0 0.25rem 1.625rem;
   }
 
   .menu-items--expanded {
     max-height: 999999999px;
+    padding: 0.25rem 0 0.25rem 1.625rem;
+  }
+
+  .menu-items--collapsed {
+    display: none;
   }
 
   .category-dropdown {
@@ -52,6 +63,7 @@
 
   .category-dropdown-header {
     pointer-events: none;
+    padding-left: 0.125rem;
     min-width: 256px;
   }
 

diff --git a/packages/core/src/components/menu-category/menu-category.tsx b/packages/core/src/components/menu-category/menu-category.tsx
@@ -122,13 +122,18 @@ export class MenuCategory {
     return this.menuExpand && (this.showItems || this.isNestedItemActive());
   }
 
-  componentDidLoad() {
+  componentWillLoad() {
     const closestMenu = closestIxMenu(this.hostElement);
     if (!closestMenu) {
       throw Error('ix-menu-category can only be used as a child of ix-menu');
     }
     this.ixMenu = closestMenu;
 
+    this.menuExpand = this.ixMenu.expand;
+    this.showItems = this.isCategoryItemListVisible();
+  }
+
+  componentDidLoad() {
     this.observer = createMutationObserver(() => this.onNestedItemsChanged());
     this.observer.observe(this.hostElement, {
       attributes: true,
@@ -144,12 +149,19 @@ export class MenuCategory {
       'expandChange',
       ({ detail: menuExpand }: CustomEvent<boolean>) => {
         this.menuExpand = menuExpand;
-
+        if (!menuExpand) {
+          this.clearMenuItemStyles();
+        }
         this.showItems = this.isCategoryItemListVisible();
       }
     );
   }
 
+  clearMenuItemStyles() {
+    this.menuItemsContainer.style.removeProperty('max-height');
+    this.menuItemsContainer.style.removeProperty('opacity');
+  }
+
   disconnectedCallback() {
     if (this.observer) {
       this.observer.disconnect();
@@ -171,7 +183,7 @@ export class MenuCategory {
           onClick={(e) => this.onCategoryClicked(e)}
         >
           <div class="category">
-            {this.label}
+            <div class="category-text">{this.label}</div>
             <ix-icon
               name={'chevron-down-small'}
               class={{
@@ -186,6 +198,7 @@ export class MenuCategory {
           class={{
             'menu-items': true,
             'menu-items--expanded': this.showItems,
+            'menu-items--collapsed': !this.showItems,
           }}
         >
           {this.showItems ? <slot></slot> : null}
-Original file line number
+Diff line change
@@ Expand Up / @@ -21,4 +21,4 @@ @@
           --theme-upload--border-radius: var(--theme-default-border-radius);
           --theme-workflow--border-radius: var(--theme-default-border-radius);
       }
-    }
+    }