fix(core/menu-item): occasionally empty tooltips in menu-item (#1370)

Co-authored-by: Lukas Maurer <[email protected]>
siemens · Aug 29, 2024 · 6965814 · 6965814
1 parent 00c68b5
commit 6965814
Show file tree

Hide file tree

Showing 5 changed files with 39 additions and 39 deletions.
diff --git a/.changeset/strong-impalas-flow.md b/.changeset/strong-impalas-flow.md
@@ -0,0 +1,5 @@
+---
+'@siemens/ix': patch
+---
+
+fix(core/menu-item): occasionally empty tooltips in menu-item 
diff --git a/packages/core/component-doc.json b/packages/core/component-doc.json
@@ -10633,6 +10633,7 @@
           "reflectToAttr": false,
           "docs": "State to display active",
           "docsTags": [],
+          "default": "false",
           "values": [
             {
               "type": "boolean"
@@ -10676,6 +10677,7 @@
           "reflectToAttr": false,
           "docs": "Disable tab and remove event handlers",
           "docsTags": [],
+          "default": "false",
           "values": [
             {
               "type": "boolean"
@@ -10729,7 +10731,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -10755,7 +10757,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -10776,7 +10778,7 @@
               "type": "number"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         },
         {
@@ -10807,7 +10809,7 @@
               "type": "string"
             }
           ],
-          "optional": false,
+          "optional": true,
           "required": false
         }
       ],
@@ -16128,7 +16130,7 @@
           "mutable": false,
           "attr": "placement",
           "reflectToAttr": false,
-          "docs": "Initial placement of the tooltip. If the placement don\"t have enough space,\nthe tooltip will placed on another location.",
+          "docs": "Initial placement of the tooltip.\nIf the selected placement doesn't have enough space, the tooltip will be repositioned to another location.",
           "docsTags": [
             {
               "name": "since",

diff --git a/packages/core/src/components.d.ts b/packages/core/src/components.d.ts
@@ -1550,23 +1550,23 @@ export namespace Components {
           * Name of the icon you want to display. Icon names can be resolved from the documentation
           * @link https://ix.siemens.io/docs/icon-library/icons
          */
-        "icon": string;
+        "icon"?: string;
         "isCategory": boolean;
         /**
           * Label of the menu item. Will also be used as tooltip text
           * @since 2.2.0
          */
-        "label": string;
+        "label"?: string;
         /**
           * Show notification count on tab
          */
-        "notifications": number;
+        "notifications"?: number;
         /**
           * Name of the icon you want to display. Icon names can be resolved from the documentation
           * @link https://ix.siemens.io/docs/icon-library/icons
           * @deprecated since 2.0.0 use `icon` property. Will be removed in 3.0.0
          */
-        "tabIcon": string;
+        "tabIcon"?: string;
     }
     interface IxMenuSettings {
         /**
@@ -2271,7 +2271,7 @@ export namespace Components {
          */
         "interactive": boolean;
         /**
-          * Initial placement of the tooltip. If the placement don"t have enough space, the tooltip will placed on another location.
+          * Initial placement of the tooltip. If the selected placement doesn't have enough space, the tooltip will be repositioned to another location.
           * @since 1.5.0
          */
         "placement": 'top' | 'right' | 'bottom' | 'left';
@@ -6506,7 +6506,7 @@ declare namespace LocalJSX {
          */
         "interactive"?: boolean;
         /**
-          * Initial placement of the tooltip. If the placement don"t have enough space, the tooltip will placed on another location.
+          * Initial placement of the tooltip. If the selected placement doesn't have enough space, the tooltip will be repositioned to another location.
           * @since 1.5.0
          */
         "placement"?: 'top' | 'right' | 'bottom' | 'left';

diff --git a/packages/core/src/components/menu-item/menu-item.tsx b/packages/core/src/components/menu-item/menu-item.tsx
@@ -7,16 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import {
-  Component,
-  Element,
-  h,
-  Host,
-  Prop,
-  readTask,
-  State,
-  Watch,
-} from '@stencil/core';
+import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core';
 import { createMutationObserver } from '../utils/mutation-observer';
 import { makeRef } from '../utils/make-ref';
 import { menuController } from '../utils/menu-service/menu-service';
@@ -36,7 +27,7 @@ export class MenuItem {
    *
    * @since 2.2.0
    */
-  @Prop() label: string;
+  @Prop() label?: string;
 
   /**
    * Move the Tab to a top position.
@@ -55,42 +46,42 @@ export class MenuItem {
    *
    * @deprecated since 2.0.0 use `icon` property. Will be removed in 3.0.0
    */
-  @Prop({ mutable: true }) tabIcon: string;
+  @Prop({ mutable: true }) tabIcon?: string;
 
   /**
    * Name of the icon you want to display. Icon names can be resolved from the documentation @link https://ix.siemens.io/docs/icon-library/icons
    */
-  @Prop({ mutable: true }) icon: string;
+  @Prop({ mutable: true }) icon?: string;
 
   /**
    * Show notification count on tab
    */
-  @Prop() notifications: number;
+  @Prop() notifications?: number;
 
   /**
    * State to display active
    */
-  @Prop() active: boolean;
+  @Prop() active: boolean = false;
 
   /**
    * Disable tab and remove event handlers
    */
-  @Prop() disabled: boolean;
+  @Prop() disabled: boolean = false;
 
   /** @internal */
-  @Prop() isCategory: boolean;
+  @Prop() isCategory: boolean = false;
 
-  @Element() hostElement: HTMLIxMenuItemElement;
+  @Element() hostElement!: HTMLIxMenuItemElement;
 
-  @State() tooltip: string;
-  @State() menuExpanded: boolean;
+  @State() tooltip?: string;
+  @State() menuExpanded: boolean = false;
 
   private buttonRef = makeRef<HTMLButtonElement>();
   private isHostedInsideCategory = false;
   private menuExpandedDisposer: Disposable;
 
   private observer: MutationObserver = createMutationObserver(() => {
-    this.tooltip = this.label ?? this.hostElement.innerText;
+    this.setTooltip();
   });
 
   componentWillLoad() {
@@ -107,9 +98,11 @@ export class MenuItem {
   }
 
   componentWillRender() {
-    readTask(() => {
-      this.tooltip = this.label ?? this.hostElement.innerText;
-    });
+    this.setTooltip();
+  }
+
+  setTooltip() {
+    this.tooltip = this.label ?? this.hostElement.textContent;
   }
 
   connectedCallback() {
@@ -194,7 +187,8 @@ export class MenuItem {
             </div>
           ) : null}
           <span class="tab-text text-default">
-            {this.label} <slot></slot>
+            {this.label}
+            <slot></slot>
           </span>
         </button>
         {!this.isCategory &&

diff --git a/packages/core/src/components/tooltip/tooltip.tsx b/packages/core/src/components/tooltip/tooltip.tsx
@@ -65,9 +65,8 @@ export class Tooltip implements IxOverlayComponent {
   @Prop() interactive = false;
 
   /**
-   * Initial placement of the tooltip. If the placement don"t have enough space,
-   * the tooltip will placed on another location.
-   *
+   * Initial placement of the tooltip.
+   * If the selected placement doesn't have enough space, the tooltip will be repositioned to another location.
    * @since 1.5.0
    */
   @Prop() placement: 'top' | 'right' | 'bottom' | 'left' = 'top';