Add tooltipText param to TopNav and LeftNav (#2242)

core/src/AuthorizationSimpleProfileMenu.html

@@ -37,13 +37,18 @@
     </li>
     {/each} {#if hasUserSettings}
     <li
-      tabindex="-1" 
+      tabindex="-1"
       class="fd-menu__item lui-anchor-node"
       on:click|preventDefault="{onUserSettingsClick}"
       on:keyup="{(event) => handleKeyUp(event)}"
       data-testid="{getTestId(profileNav.settings)}"
     >
-      <a tabindex="0" title="User Settings" class="fd-menu__link" data-testid="settings-link">
+      <a
+        tabindex="0"
+        title="User Settings"
+        class="fd-menu__link"
+        data-testid="settings-link"
+      >
         {#if profileNav.settings.icon} {#if hasOpenUIicon(profileNav.settings)}
         <i class="fd-top-nav__icon sap-icon--{profileNav.settings.icon}"></i>
         {:else}
@@ -296,10 +301,10 @@
   }
 
   li > button.fd-menu__link {
-    background-color: var(--sapList_Background,#fff);
+    background-color: var(--sapList_Background, #fff);
 
     &:hover {
-      background-color: var(--sapList_Hover_Background,#f5f5f5);
+      background-color: var(--sapList_Hover_Background, #f5f5f5);
     }
   }
 </style>

core/src/UserSettingsEditor.html

@@ -117,11 +117,14 @@
 
   export function handleKeyListItem(event, index) {
     if (event.keyCode === KEYCODE_ENTER || event.keyCode === KEYCODE_SPACE) {
-      document.querySelectorAll('.lui-usersettings-content li.fd-list__item')[index].click();
+      document
+        .querySelectorAll('.lui-usersettings-content li.fd-list__item')
+        [index].click();
     }
   }
 
-  /*to display a language on forst load of the User Settings dialog*/  
+  /*to display a language on forst load of the User Settings dialog*/
+
   getLabelForValue();
 </script>
 
@@ -192,25 +195,29 @@
                 aria-expanded="false"
                 aria-haspopup="true"
                 on:click|stopPropagation="{()=>toggleOptions(event,schemaItem.isEditable)}"
-                >
+              >
                 <div class="fd-select">
-                  <div 
+                  <div
                     tabindex="0"
-                    aria-expanded="false" 
-                    aria-haspopup="listbox" 
+                    aria-expanded="false"
+                    aria-haspopup="listbox"
                     aria-label="Language"
-                    class="fd-select__control lui-anchor-node" 
+                    class="fd-select__control lui-anchor-node"
                     on:keyup="{(event) => handleKeyUp(event)}"
-                    data-testid="lui-us-language-dropdown">
-                    <span 
+                    data-testid="lui-us-language-dropdown"
+                  >
+                    <span
                       class="fd-select__text-content"
                       data-testid="lui-us-input{i}"
                       disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}"
-                      >{getLabelForValue(storedUserSettingData[userSettingGroup[0]][key], schemaItem.options)}
+                      >{getLabelForValue(storedUserSettingData[userSettingGroup[0]][key],
+                      schemaItem.options)}
+                    </span>
+                    <span
+                      class="fd-button fd-button--transparent fd-select__button lui-activate-language-dropdown"
+                    >
+                      <i class="sap-icon--slim-arrow-down"></i>
                     </span>
-                    <span class="fd-button fd-button--transparent fd-select__button lui-activate-language-dropdown">
-                          <i class="sap-icon--slim-arrow-down"></i>
-                      </span>
                   </div>
                 </div>
               </div>

core/src/navigation/LeftNav.html

@@ -10,7 +10,10 @@
   <div class="lui-nav-title">
     <ul class="fd-nested-list">
       <li class="fd-nested-list__item">
-        <a class="fd-nested-list__link" title="{$getTranslation(navHeader.label)}">
+        <a
+          class="fd-nested-list__link"
+          title="{resolveTooltipText(navHeader, $getTranslation(navHeader.label))}"
+        >
           {#if navHeader.icon} {#if isOpenUIiconName(navHeader.icon)}
           <i
             class="lui-header-icon fd-nested-list__icon sap-icon sap-icon--{navHeader.icon}"
@@ -56,7 +59,7 @@
           <li class="fd-nested-list__item">
             <a
               href="{getRouteLink(node)}"
-              title="{$getTranslation(node.label)}"
+              title="{resolveTooltipText(node, $getTranslation(node.label))}"
               class="fd-nested-list__link {node === selectedNode ? 'is-selected' : ''}"
               on:click|preventDefault="{() => handleClick(node)}"
               data-testid="{getTestId(node)}"
@@ -98,7 +101,7 @@
             <div class="fd-nested-list__content has-child">
               <a
                 href="javascript:void(null)"
-                title="{$getTranslation(key)}"
+                title="{resolveTooltipText(nodes, $getTranslation(key))}"
                 class="fd-nested-list__link {isExpanded(nodes, expandedCategories) ? 'is-expanded' : ''}"
                 tabindex="-1"
                 id="collapsible_listnode_{index}"
@@ -150,7 +153,7 @@
                   class="fd-nested-list__link {node === selectedNode ? 'is-selected' : ''}"
                   on:click|preventDefault="{() => handleClick(node)}"
                   data-testid="{getTestId(node)}"
-                  title="{$getTranslation(node.label)}"
+                  title="{resolveTooltipText(node, $getTranslation(node.label))}"
                 >
                   <span class="fd-nested-list__title">{$getTranslation(node.label)}</span>
                   {#if node.externalLink && node.externalLink.url}
@@ -179,7 +182,7 @@
                       class="fd-nested-list__link {node === selectedNode ? 'is-selected' : ''}"
                       on:click|preventDefault="{() => handleClick(node)}"
                       data-testid="{getTestId(node)}"
-                      title="{$getTranslation(node.label)}"
+                      title="{resolveTooltipText(node, $getTranslation(node.label))}"
                     >
                       <span class="fd-nested-list__title"
                         >{$getTranslation(node.label)}</span
@@ -201,7 +204,7 @@
           <!-- Category nodes -->
           <li
             class="fd-nested-list__group-header lui-category"
-            title="{$getTranslation(key)}"
+            title="{resolveTooltipText(nodes, $getTranslation(key))}"
             data-testid="{getTestIdForCat(nodes.metaInfo, key)}"
             id="category_list_level1_{index}"
           >
@@ -223,7 +226,7 @@
           {#each nodes as node} {#if !node.hideFromNav} {#if node.label}
           <li
             class="fd-nested-list__item"
-            title="{$getTranslation(node.label)}"
+            title="{resolveTooltipText(node, $getTranslation(node.label))}"
             aria-labelledby="category_list_level1_{index}"
           >
             <a
@@ -552,6 +555,10 @@
       : NavigationHelpers.prepareForTests(key || metaInfo.label);
   }
 
+  function resolveTooltipText(node, translation) {
+    return NavigationHelpers.generateTooltipText(node, translation);
+  }
+
   // [svelte-upgrade suggestion]
   // review these functions and remove unnecessary 'export' keywords
   export function handleClick(node) {

core/src/navigation/TopNav.html

@@ -49,7 +49,7 @@
       <div class="fd-popover fd-popover--right">
         <div class="fd-popover__control" on:click|stopPropagation="{() => {}}">
           <button
-            title="{getNodeLabel(node)}"
+            title="{resolveTooltipText(node, getNodeLabel(node))}"
             class="fd-shellbar__button fd-button {node === selectedNode ? 'is-selected' : ''}"
             aria-controls="dropDownPopover-{i}"
             aria-expanded="{dropDownStates[`dropDownPopover-${i}`] || false}"
@@ -78,6 +78,7 @@
       <a
         href="{addNavHrefForAnchor ? getRouteLink(node) : undefined}"
         class="fd-shellbar__button fd-button {node === selectedNode ? 'is-selected' : ''}"
+        title="{resolveTooltipText(node, getNodeLabel(node))}"
         aria-expanded="false"
         aria-haspopup="true"
         on:click|preventDefault="{() => handleClick(node)}"
@@ -88,7 +89,7 @@
       </a>
       {:else}
       <button
-        title="{getNodeLabel(node)}"
+        title="{resolveTooltipText(node, getNodeLabel(node))}"
         class="fd-shellbar__button fd-button {node === selectedNode ? 'is-selected' : ''}"
         aria-expanded="false"
         aria-haspopup="true"
@@ -191,7 +192,7 @@
                 <li class="fd-menu__item">
                   <a
                     href="{getRouteLink(node)}"
-                    title="{getNodeLabel(node)}"
+                    title="{resolveTooltipText(node, getNodeLabel(node))}"
                     class="fd-menu__link"
                     on:click|preventDefault="{() => openMobileTopNavDropDown(node)}"
                     data-e2e="mobile-topnav-dropdown-category"
@@ -529,6 +530,10 @@
     return RoutingHelpers.getNodeHref(node, pathParams);
   }
 
+  function resolveTooltipText(node, translation) {
+    return NavigationHelpers.generateTooltipText(node, translation);
+  }
+
   export function openMobileProductSwitcher() {
     toggleDropdownState('productSwitcherPopover');
   }

core/src/utilities/helpers/navigation-helpers.js

@@ -319,7 +319,7 @@ class NavigationHelpersClass {
     }
     return false;
   }
-  
+
   /**
    * Returns a nested property value defined by a chain string
    * @param {*} obj the object
@@ -416,6 +416,21 @@ class NavigationHelpersClass {
       reject(error);
     });
   }
+
+  generateTooltipText(node, translation) {
+    let ttText = node.tooltipText;
+    if (ttText === undefined) {
+      ttText = LuigiConfig.getConfigValue('navigation.defaults.tooltipText');
+    }
+
+    if (ttText === undefined) {
+      return translation;
+    } else if (ttText === false) {
+      return '';
+    } else {
+      return LuigiI18N.getTranslation(ttText);
+    }
+  }
 }
 
 export const NavigationHelpers = new NavigationHelpersClass();

core/test/services/web-components.spec.js

@@ -37,7 +37,7 @@ describe('WebComponentService', function() {
       window.Luigi = {
         navigation: 'mock1',
         ux: 'mock2',
-        i18n: ()=> LuigiI18N
+        i18n: () => LuigiI18N
       };
     });
 

docs/navigation-parameters-reference.md

@@ -94,13 +94,20 @@ The navigation parameters allow you to configure **global** navigation settings
 
 ### nodeChangeHook
 - **type**: function
-- **description**: allows you to invoke and execute a specific function on the global level when a request to navigate to the node occurs. The function receives two node objects as input parameters: the previous node and current node, as described in the configuration. 
+- **description**: allows you to invoke and execute a specific function on the global level when a request to navigate to the node occurs. The function receives two node objects as input parameters: the previous node and current node, as described in the configuration.
 
 ### defaults.isolateView
 - **type**: boolean
 - **description**: renders all views in new frames. This setting overrides the same-domain frame reuse.
 - **default**: the parameter **defaults.isolateView** is `false` by default, and you can overwrite it using the **isolateView** value on a single node level.
 
+
+### defaults.tooltipText
+- **type**: boolean | string 
+- **description**: applies the [tooltipText](navigation-parameters-reference.md#tooltiptext) property to all navigation nodes where it is not set explicitly. If it is `false` all tooltips will hide. If it is `Some string text` all tooltips will have value `Some string text`. 
+- **default**: the parameter **defaults.tooltipText** is `undefined` by default.
+
+
 ### defaults.pageErrorHandler
 <!-- add-attribute:class:warning -->
 > **NOTE**: The **pageErrorHandler** only works if the [loading indicator](#loadingindicatorenabled) is not disabled.
@@ -157,6 +164,15 @@ Node parameters are all the parameters that can be added to an individual naviga
   - A static **pathSegment** of value `settings` results in `example.com/settings`.
   - A dynamic **pathSegment** is prefixed with a colon and can load any value. Find out more about dynamic paths in Luigi [here](navigation-advanced.md#dynamically-changeable-paths).
 
+### tooltipText
+- **type**: string
+- **description**: Allows to set a custom tooltip text for this node or to disable the tooltip by setting the value to `false`.
+- **default**: it is `undefined` by default, and it can be overwrite by using the **tooltipText** value on a single node level.
+- **example**:
+```javascript
+tooltipText: 'Useful links'
+```
+
 ### link
 - **type**: string
 - **description**: refers to an absolute path in the navigation structure or a relative path to a grandchild of the current path. If this parameter is defined, **pathSegment** is ignored.

test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js

@@ -622,7 +622,7 @@ describe('Fiddle', () => {
 
       cy.get('[data-testid="lui-us-language-dropdown"]')
         .eq(0)
-       .click();
+        .click();
       cy.get('[data-testid="lui-us-option0_0"]').click();
       cy.get('[data-testid="lui-us-input0"]')
         .should('exist')