Change sap-icon-- to icon function (SAP#2432)

y-kkamil · Dec 23, 2021 · d8ae581 · d8ae581
1 parent febae84
commit d8ae581
Show file tree

Hide file tree

Showing 14 changed files with 110 additions and 26 deletions.
diff --git a/core/src/Authorization.html b/core/src/Authorization.html
@@ -53,7 +53,10 @@
         href="{addNavHrefForAnchor ? getRouteLink(profileItem) : undefined}"
       >
         {#if profileItem.icon} {#if hasOpenUIicon(profileItem)}
-        <i role="presentation" class="fd-list__icon sap-icon--{profileItem.icon}"></i>
+        <i
+          role="presentation"
+          class="fd-list__icon {getSapIconStr(profileItem.icon)}"
+        ></i>
         {:else}
         <img
           class="fd-top-nav__icon nav-icon"
@@ -81,7 +84,7 @@
         {#if profileNav.settings.icon} {#if hasOpenUIicon(profileNav.settings)}
         <i
           role="presentation"
-          class="fd-list__icon sap-icon--{profileNav.settings.icon}"
+          class="fd-list__icon {getSapIconStr(profileNav.settings.icon)}"
         ></i>
         {:else}
         <img
@@ -193,6 +196,10 @@
     AuthLayerSvc.startAuthorization();
   }
 
+  function getSapIconStr(iconString) {
+    return NavigationHelpers.renderIconClassName(iconString);
+  }
+
   function hasOpenUIicon(node) {
     return NavigationHelpers.isOpenUIiconName(node.icon);
   }

diff --git a/core/src/AuthorizationSimpleProfileMenu.html b/core/src/AuthorizationSimpleProfileMenu.html
@@ -24,7 +24,7 @@
         on:click|preventDefault="{() => {}}"
       >
         {#if profileItem.icon} {#if hasOpenUIicon(profileItem)}
-        <span class="fd-top-nav__icon sap-icon--{profileItem.icon}"></span>
+        <span class="fd-top-nav__icon {getSapIconStr(profileItem.icon)}"></span>
         {:else}
         <img
           class="fd-top-nav__icon nav-icon"
@@ -50,7 +50,7 @@
         data-testid="settings-link"
       >
         {#if profileNav.settings.icon} {#if hasOpenUIicon(profileNav.settings)}
-        <i class="fd-top-nav__icon sap-icon--{profileNav.settings.icon}"></i>
+        <i class="fd-top-nav__icon {getSapIconStr(profileNav.settings.icon)}"></i>
         {:else}
         <img
           class="fd-top-nav__icon nav-icon"
@@ -70,7 +70,7 @@
     >
       <button title="Logout" class="fd-menu__link" data-testid="logout-btn">
         {#if profileNav.logout.icon} {#if hasOpenUIicon(profileNav.logout)}
-        <i class="fd-top-nav__icon sap-icon--{profileNav.logout.icon}"></i>
+        <i class="fd-top-nav__icon {getSapIconStr(profileNav.logout.icon)}"></i>
         {:else}
         <img
           class="fd-top-nav__icon nav-icon"
@@ -148,6 +148,10 @@
     AuthLayerSvc.startAuthorization();
   }
 
+  function getSapIconStr(iconString) {
+    return NavigationHelpers.renderIconClassName(iconString);
+  }
+
   function hasOpenUIicon(node) {
     return NavigationHelpers.isOpenUIiconName(node.icon);
   }

diff --git a/core/src/ConfirmationModal.html b/core/src/ConfirmationModal.html
@@ -8,7 +8,7 @@
       <div class="fd-bar__left">
         <div class="fd-bar__element">
           {#if settings.type}
-          <i class="sap-icon--{settings.icon}"></i>
+          <i class="{getSapIconStr(settings.icon)}"></i>
           {/if}
           <h2 class="fd-title fd-title--h5">{settings.header}</h2>
         </div>
@@ -46,7 +46,7 @@ <h2 class="fd-title fd-title--h5">{settings.header}</h2>
   import { createEventDispatcher, onMount } from 'svelte';
   import { LuigiI18N } from './core-api';
   import { KEYCODE_ESC } from './utilities/keycode.js';
-  import { EscapingHelpers } from './utilities/helpers';
+  import { EscapingHelpers, NavigationHelpers } from './utilities/helpers';
 
   const dispatch = createEventDispatcher();
 
@@ -82,6 +82,10 @@ <h2 class="fd-title fd-title--h5">{settings.header}</h2>
     }
   });
 
+  function getSapIconStr(iconString) {
+    return NavigationHelpers.renderIconClassName(iconString);
+  }
+
   // [svelte-upgrade suggestion]
   // review these functions and remove unnecessary 'export' keywords
   export function handleKeydown(event) {

diff --git a/core/src/TopNavDropDown.html b/core/src/TopNavDropDown.html
@@ -15,7 +15,7 @@
       >
         <span class="fd-top-nav__icon">
           {#if node.icon && hasOpenUIicon(node)}
-          <i class="sap-icon sap-icon--{node.icon}"></i>
+          <i class="sap-icon {getSapIconStr(node.icon)}"></i>
           {:else}
           <img
             class="sap-icon"
@@ -125,6 +125,10 @@
     return NavigationHelpers.isOpenUIiconName(node.icon);
   }
 
+  function getSapIconStr(iconString) {
+    return NavigationHelpers.renderIconClassName(iconString);
+  }
+
   function getNodeLabel(node) {
     return LuigiI18N.getTranslation(node.label);
   }

diff --git a/core/src/UserSettingsDialog.html b/core/src/UserSettingsDialog.html
@@ -262,6 +262,11 @@
       handleSaveBtnVisibility();
     }
   }
+
+  function getSapIconStr(iconString) {
+    return NavigationHelpers.renderIconClassName(iconString);
+  }
+
   function hasOpenUIicon(node) {
     return NavigationHelpers.isOpenUIiconName(node.icon);
   }
@@ -510,7 +515,7 @@ <h2 class="fd-title fd-title--h5" id="dialog-title-2">
                   <span class="fd-list__thumbnail">
                     <i
                       role="presentation"
-                      class="sap-icon--{userSettingsGroupProperty[1].icon}"
+                      class="{getSapIconStr(userSettingsGroupProperty[1].icon)}"
                     ></i>
                   </span>
                   {:else}

diff --git a/core/src/navigation/GlobalNav.html b/core/src/navigation/GlobalNav.html
@@ -18,7 +18,7 @@
           >
             <div class="lui-fd-nested-list__content">
               {#if node.icon} {#if hasOpenUIicon(node)}
-              <span class="lui-text fd-top-nav__icon sap-icon--{node.icon}"></span>
+              <span class="lui-text fd-top-nav__icon {getSapIconStr(node.icon)}"></span>
               {:else}
               <img
                 class="fd-top-nav__icon nav-icon"
@@ -55,7 +55,7 @@
               on:click|preventDefault="{() => handleClick(node)}"
             >
               {#if node.icon} {#if hasOpenUIicon(node)}
-              <span class="lui-text fd-top-nav__icon sap-icon--{node.icon}"></span>
+              <span class="lui-text fd-top-nav__icon {getSapIconStr(node.icon)}"></span>
               {:else}
               <img
                 class="fd-top-nav__icon nav-icon"
@@ -138,6 +138,10 @@
     addNavHrefForAnchor = LuigiConfig.getConfigBooleanValue('navigation.addNavHrefs');
   });
 
+  function getSapIconStr(iconString) {
+    return NavigationHelpers.renderIconClassName(iconString);
+  }
+
   function hasOpenUIicon(node) {
     return NavigationHelpers.isOpenUIiconName(node.icon);
   }

diff --git a/core/src/navigation/LeftNav.html b/core/src/navigation/LeftNav.html
@@ -16,7 +16,7 @@
         >
           {#if navHeader.icon} {#if isOpenUIiconName(navHeader.icon)}
           <i
-            class="lui-header-icon fd-nested-list__icon sap-icon sap-icon--{navHeader.icon}"
+            class="lui-header-icon fd-nested-list__icon sap-icon {getSapIconStr(navHeader.icon)}"
             role="presentation"
           ></i>
           {:else}
@@ -68,7 +68,7 @@
             >
               {#if node.icon} {#if isOpenUIiconName(node.icon)}
               <i
-                class="fd-nested-list__icon sap-icon sap-icon--{node.icon}"
+                class="fd-nested-list__icon sap-icon {getSapIconStr(node.icon)}"
                 role="presentation"
               ></i>
               {:else}
@@ -114,7 +114,7 @@
               >
                 {#if isOpenUIiconName(nodes.metaInfo.icon)}
                 <i
-                  class="fd-nested-list__icon sap-icon {'sap-icon--' + nodes.metaInfo.icon} {isSemiCollapsed && !nodes.metaInfo.icon ? 'sap-icon--rhombus-milestone-2' : ''}"
+                  class="fd-nested-list__icon sap-icon {getSapIconStr(nodes.metaInfo.icon)} {isSemiCollapsed && !nodes.metaInfo.icon ? 'sap-icon--rhombus-milestone-2' : ''}"
                   role="presentation"
                 ></i>
                 {:else}
@@ -214,7 +214,7 @@
             {#if hasCategoriesWithIcon && nodes.metaInfo.icon} {#if
             isOpenUIiconName(nodes.metaInfo.icon)}
             <i
-              class="fd-nested-list__icon sap-icon {nodes.metaInfo.icon ? 'sap-icon--' + nodes.metaInfo.icon : ''}"
+              class="fd-nested-list__icon sap-icon {nodes.metaInfo.icon ? getSapIconStr(nodes.metaInfo.icon) : ''}"
               role="presentation"
             ></i>
             {:else}
@@ -239,7 +239,7 @@
               data-testid="{getTestId(node)}"
             >
               {#if node.icon} {#if isOpenUIiconName(node.icon)}
-              <i class="fd-nested-list__icon sap-icon sap-icon--{node.icon}"></i>
+              <i class="fd-nested-list__icon sap-icon getSapIconStr({node.icon})"></i>
               {:else}
               <span class="fd-nested-list__icon sap-icon">
                 <img src="{node.icon}" alt="{node.altText ? node.altText : ''}" />
@@ -530,6 +530,10 @@
     }
   }
 
+  function getSapIconStr(iconString) {
+    return NavigationHelpers.renderIconClassName(iconString);
+  }
+
   function isOpenUIiconName(name) {
     return NavigationHelpers.isOpenUIiconName(name);
   }

diff --git a/core/src/navigation/MobileTopNavDropDown.html b/core/src/navigation/MobileTopNavDropDown.html
@@ -27,7 +27,7 @@ <h2 class="fd-title fd-title--h5" id="dialog-title-4">
             <div class="lui-product-switch__icon">
               {#if hasOpenUIicon(node)}
               <i
-                class="sap-icon {node.icon && hasOpenUIicon(node) ? 'sap-icon--' + node.icon : '' }"
+                class="sap-icon {node.icon && hasOpenUIicon(node) ? getSapIconStr(node.icon) : '' }"
               ></i>
               {:else}
               <img src="{node.icon}" alt="{node.altText ? node.altText : ''}" />
@@ -77,6 +77,10 @@ <h2 class="fd-title fd-title--h5" id="dialog-title-4">
   export let getNodeSubtitle;
   export let noSubTitle;
 
+  function getSapIconStr(iconString) {
+    return NavigationHelpers.renderIconClassName(iconString);
+  }
+
   // [svelte-upgrade suggestion]
   // review these functions and remove unnecessary 'export' keywords
   export function onActionClick(value) {

diff --git a/core/src/navigation/ProductSwitcher.html b/core/src/navigation/ProductSwitcher.html
@@ -18,7 +18,7 @@
           <div class="lui-product-switch__icon">
             {#if hasOpenUIicon(config)}
             <!-- default: sap-icon--grid -->
-            <i class="sap-icon sap-icon--{config.icon}"></i>
+            <i class="sap-icon {getSapIconStr(config.icon)}"></i>
             {:else}
             <img src="{config.icon}" alt="{config.altText ? config.altText : ''}" />
             {/if}
@@ -48,7 +48,7 @@
                 <div class="lui-product-switch__icon">
                   {#if hasOpenUIicon(productSwitcherItem)}
                   <i
-                    class="sap-icon {productSwitcherItem.icon && hasOpenUIicon(productSwitcherItem) ? 'sap-icon--' + productSwitcherItem.icon : '' }"
+                    class="sap-icon {productSwitcherItem.icon && hasOpenUIicon(productSwitcherItem) ? getSapIconStr(productSwitcherItem.icon) : '' }"
                   ></i>
                   {:else}
                   <img
@@ -72,7 +72,7 @@
               <div class="lui-product-switch__icon">
                 {#if hasOpenUIicon(productSwitcherItem)}
                 <i
-                  class="sap-icon {productSwitcherItem.icon && hasOpenUIicon(productSwitcherItem) ? 'sap-icon--' + productSwitcherItem.icon : '' }"
+                  class="sap-icon {productSwitcherItem.icon && hasOpenUIicon(productSwitcherItem) ? getSapIconStr(productSwitcherItem.icon) : '' }"
                 ></i>
                 {:else}
                 <img
@@ -174,6 +174,10 @@
     document.documentElement.style.setProperty('--vh', `${vh}px`);
   }
 
+  function getSapIconStr(iconString) {
+    return NavigationHelpers.renderIconClassName(iconString);
+  }
+
   function hasOpenUIicon(node) {
     return NavigationHelpers.isOpenUIiconName(node.icon);
   }

diff --git a/core/src/navigation/TopNav.html b/core/src/navigation/TopNav.html
@@ -186,7 +186,7 @@
                     on:click|stopPropagation="{openMobileContextSwitcher}"
                   >
                     <i
-                      class="sap-icon fd-top-nav__icon {contextSwitcherConfig.icon && hasOpenUIicon(contextSwitcherConfig) ? 'sap-icon--' + contextSwitcherConfig.icon : 'sap-icon--switch-views'}"
+                      class="sap-icon fd-top-nav__icon {contextSwitcherConfig.icon && hasOpenUIicon(contextSwitcherConfig) ? getSapIconStr(contextSwitcherConfig.icon) : 'sap-icon--switch-views'}"
                     ></i>
                     <span class="fd-menu__title"
                       >{selectedLabel ? selectedLabel : defaultLabelContextSwitcher}</span
@@ -203,7 +203,7 @@
                     data-testid="{getTestId(node)}-mobile"
                   >
                     <span
-                      class="fd-top-nav__icon sap-icon {node.icon && hasOpenUIicon(node) ? 'sap-icon--' + node.icon : '' }"
+                      class="fd-top-nav__icon sap-icon {node.icon && hasOpenUIicon(node) ? getSapIconStr(node.icon) : '' }"
                     >
                       {#if !hasOpenUIicon(node)}
                       <img src="{node.icon}" alt="{node.altText ? node.altText : ''}" />
@@ -225,7 +225,7 @@
                     <span class="fd-top-nav__icon">
                       {#if hasOpenUIicon(node)}
                       <i
-                        class="sap-icon {node.icon && hasOpenUIicon(node) ? 'sap-icon--' + node.icon : '' }"
+                        class="sap-icon {node.icon && hasOpenUIicon(node) ? getSapIconStr(node.icon) : '' }"
                       ></i>
                       {:else}
                       <img src="{node.icon}" alt="{node.altText ? node.altText : ''}" />
@@ -246,7 +246,7 @@
                   >
                     {#if node.icon} {#if hasOpenUIicon(node)}
                     <span
-                      class="fd-top-nav__icon sap-icon sap-icon--{node.icon}"
+                      class="fd-top-nav__icon sap-icon {getSapIconStr(node.icon)}"
                     ></span>
                     {:else}
                     <img
@@ -268,7 +268,7 @@
                     {#if hasOpenUIicon(productSwitcherConfig) ||
                     !productSwitcherConfig.icon}
                     <i
-                      class="fd-top-nav__icon sap-icon sap-icon--{productSwitcherConfig.icon || 'grid'}"
+                      class="fd-top-nav__icon sap-icon {getSapIconStr(productSwitcherConfig.icon || 'grid')}"
                     ></i>
                     {:else}
                     <span class="fd-top-nav__icon sap-icon">
@@ -550,6 +550,10 @@
   $: showTopNav =
     (authorizationEnabled && (!autologinEnabled || isLoggedIn)) || !authorizationEnabled;
 
+  function getSapIconStr(iconString) {
+    return NavigationHelpers.renderIconClassName(iconString);
+  }
+
   function hasOpenUIicon(node) {
     return NavigationHelpers.isOpenUIiconName(node.icon);
   }

diff --git a/core/src/navigation/TopNavNode.html b/core/src/navigation/TopNavNode.html
@@ -1,5 +1,5 @@
 {#if node.icon} {#if hasOpenUIicon(node)}
-<span class="fd-top-nav__icon sap-icon sap-icon--{node.icon}"></span>
+<span class="fd-top-nav__icon sap-icon {getSapIconStr(node.icon)}"></span>
 {:else}
 <img
   class="fd-top-nav__icon sap-icon"
@@ -24,6 +24,10 @@
     return NavigationHelpers.isOpenUIiconName(node.icon);
   }
 
+  function getSapIconStr(iconString) {
+    return NavigationHelpers.renderIconClassName(iconString);
+  }
+
   function getNodeLabel(node) {
     return LuigiI18N.getTranslation(node.label);
   }

diff --git a/core/src/utilities/helpers/navigation-helpers.js b/core/src/utilities/helpers/navigation-helpers.js
@@ -310,6 +310,23 @@ class NavigationHelpersClass {
     return /^[a-z0-9\-]+$/i.test(string);
   }
 
+  /**
+   * Checks, if icon class is businessSuiteInAppSymbols or TNT suite and renders the icon name accordingly
+   * I.e. will return sap-icon--home or sap-icon-TNT--systemjava or sap-icon-businessSuiteInAppSymbols--birthday
+   * @param {*} iconString icon name
+   * @returns properly formatted icon name.
+   */
+  renderIconClassName(iconString) {
+    if (!iconString) return '';
+    let iconClass = 'sap-icon-';
+    if (iconString.startsWith('businessSuiteInAppSymbols') || iconString.startsWith('TNT')) {
+      iconClass += iconString;
+    } else {
+      iconClass += '-' + iconString;
+    }
+    return iconClass;
+  }
+
   handleUnresponsiveClient(node) {
     if (node.errorFn) {
       node.errorFn();