Use Byline component for user settings dialog

core/src/UserSettingsDialog.html

@@ -19,7 +19,12 @@
   import { CSS_BREAKPOINTS } from './utilities/constants';
   import { LuigiConfig } from './core-api';
   import { TOP_NAV_DEFAULTS } from './utilities/luigi-config-defaults';
-  import { KEYCODE_ESC } from './utilities/keycode.js';
+  import {
+    KEYCODE_ESC,
+    KEYCODE_ENTER,
+    KEYCODE_SPACE,
+    KEYCODE_TAB
+  } from './utilities/keycode.js';
   export let schemaObj;
   export let userSettingGroups;
 
@@ -153,17 +158,17 @@
     let selectedUserSettingGroupData = selectedUserSettingGroup[1];
     errorHandling(selectedUserSettingGroupData);
     if (event) {
-      document.querySelectorAll('.lui-us-list .fd-nested-list__link').forEach(elem => {
+      document.querySelectorAll('.lui-us-list .lui-us-navlist__item').forEach(elem => {
         elem.classList.remove('is-selected');
       });
-      const link = closest(event.target, '.fd-nested-list__link', 20);
+      const link = closest(event.target, '.lui-us-navlist__item', 20);
       link.classList.add('is-selected');
       if (window.innerWidth < CSS_BREAKPOINTS.desktopMinWidth) {
         closeNavOnCategoryClickMobile();
       }
     } else {
       document
-        .querySelectorAll('.lui-us-list .fd-nested-list__link')[0]
+        .querySelectorAll('.lui-us-list .lui-us-navlist__item')[0]
         .classList.add('is-selected');
       if (
         window.innerWidth !== 0 &&
@@ -303,6 +308,15 @@
       dispatch('close');
     }
   }
+
+  export function handleKeyUp(event, index) {
+    if (
+      event.keyCode === (KEYCODE_ENTER || KEYCODE_SPACE) &&
+      event.keyCode !== KEYCODE_TAB
+    ) {
+      document.querySelectorAll('.lui-us-list .lui-us-navlist__item')[index].click();
+    }
+  }
 </script>
 
 <style>
@@ -370,86 +384,6 @@
     background-color: var(--sapBackgroundColor, #f7f7f7);
   }
 
-  .lui-usersettings-burger {
-    margin-right: 16px;
-    cursor: pointer;
-    display: none;
-  }
-
-  .fd-nested-list__item {
-    display: flex;
-    -webkit-box-align: center;
-    align-items: center;
-    position: relative;
-    -webkit-box-flex: 1;
-    flex: 1 1 auto;
-    max-width: 100%;
-    border-bottom-color: var(--sapList_GroupHeaderBorderColor, #d9d9d9);
-  }
-
-  .lui-usersettings-list-item__info-container {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: flex;
-    align-items: center;
-  }
-
-  .fd-nested-list__link {
-    height: 5rem;
-    padding: 1rem;
-  }
-
-  .lui-usersettings-list-item__info-container .sap-icon {
-    font-size: 2rem;
-    color: var(--sapContent_NonInteractiveIconColor);
-    margin-right: 0.75rem;
-  }
-
-  .fd-nested-list__icon img {
-    max-width: 2rem;
-    max-height: 2rem;
-    border-radius: 0.25rem;
-    margin-right: 0.75rem;
-  }
-
-  .lui-usersettings-list-item__title-container {
-    display: flex;
-    flex-direction: column;
-    flex: auto;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .lui-usersettings-list-item__title {
-    color: var(--sapList_TextColor);
-    font-size: var(--sapFontSize, 14px);
-    font-weight: normal;
-    padding-top: 0.125rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    flex: 1 1 auto;
-  }
-
-  .fd-nested-list__link:active .lui-usersettings-list-item__title,
-  .fd-nested-list__link:active .lui-usersettings-list-item__subtitle,
-  .fd-nested-list__link:active .fd-nested-list__icon {
-    color: var(--sapList_Active_TextColor, #fff);
-  }
-
-  .lui-usersettings-list-item__subtitle {
-    font-size: var(--sapFontSize, 14px);
-    font-weight: normal;
-    color: var(--sapContent_LabelColor);
-    padding-top: 0.5rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    flex: 1 1 auto;
-  }
-
   .iframeUserSettingsCtn {
     position: relative;
     width: 100%;
@@ -537,6 +471,16 @@
       z-index: 1;
     }
   }
+
+  /* TODO: need to be removed after updating FD Styles to 0.16.0, selected state for left side nav */
+  .fd-list__item.is-selected,
+  .fd-list__item[aria-selected='true'] {
+    background: #e5f0fa;
+    background: var(--sapList_SelectionBackgroundColor, #e5f0fa);
+    border-bottom: 0.0625rem solid #0854a0;
+    border-bottom: var(--sapList_BorderWidth, 0.0625rem) solid
+      var(--sapList_SelectionBorderColor, #0854a0);
+  }
 </style>
 <svelte:window on:keydown="{handleKeydown}" on:resize="{onResize}" />
 <div class="fd-dialog fd-dialog--active lui-usersettings-dialog">
@@ -550,40 +494,41 @@ <h2 class="fd-title fd-title--h5">
             </h2>
           </div>
           <div class="fd-side-nav__main-navigation lui-fd-side-nav__main-navigation">
-            <ul class="fd-nested-list lui-us-list">
+            <ul class="fd-list fd-list--byline lui-us-list" role="list">
               {#each Object.entries(userSettingGroups) as [key, userSettingGroup], index}
               {#each Object.entries(userSettingGroup) as userSettingsGroupProperty}
-              <li class="fd-nested-list__item">
-                <a
-                  class="fd-nested-list__link"
-                  on:click|preventDefault="{() => openEditor(userSettingsGroupProperty, event)}"
-                >
-                  <div class="lui-usersettings-list-item__info-container">
-                    {#if userSettingsGroupProperty[1].icon} {#if
-                    hasOpenUIicon(userSettingsGroupProperty[1])}
-                    <i
-                      class="fd-nested-list__icon sap-icon sap-icon--{userSettingsGroupProperty[1].icon}"
-                    ></i>
-                    {:else}
-                    <span class="fd-nested-list__icon sap-icon">
-                      <img
-                        src="{userSettingsGroupProperty[1].icon}"
-                        alt="{userSettingsGroupProperty[1].altText ? userSettingsGroupProperty[1].altText : ''}"
-                      />
-                    </span>
-                    {/if} {:else}
-                    <i class="fd-nested-list__icon sap-icon"></i>
-                    {/if}
-                    <div class="lui-usersettings-list-item__title-container">
-                      <span class="lui-usersettings-list-item__title"
-                        >{$getTranslation(userSettingsGroupProperty[1].label?userSettingsGroupProperty[1].label:'')}</span
-                      >
-                      <span class="lui-usersettings-list-item__subtitle"
-                        >{$getTranslation(userSettingsGroupProperty[1].sublabel?userSettingsGroupProperty[1].sublabel:'')}</span
-                      >
-                    </div>
+              <li
+                tabindex="0"
+                role="listitem"
+                class="fd-list__item lui-us-navlist__item"
+                data-testid="us-navigation-item"
+                on:click|preventDefault="{() => openEditor(userSettingsGroupProperty, event)}"
+                on:keyup="{(event) => handleKeyUp(event,[index])}"
+              >
+                <span class="fd-list__thumbnail">
+                  {#if userSettingsGroupProperty[1].icon} {#if
+                  hasOpenUIicon(userSettingsGroupProperty[1])}
+                  <i
+                    role="presentation"
+                    class="sap-icon--{userSettingsGroupProperty[1].icon}"
+                  ></i>
+                  {:else}
+                  <img
+                    src="{userSettingsGroupProperty[1].icon}"
+                    alt="{userSettingsGroupProperty[1].altText ? userSettingsGroupProperty[1].altText : ''}"
+                  />
+                  {/if} {:else}
+                  <i role="presentation" class="sap-icon"></i>
+                  {/if}
+                </span>
+                <div class="fd-list__content">
+                  <div class="fd-list__title">
+                    {$getTranslation(userSettingsGroupProperty[1].label?userSettingsGroupProperty[1].label:'')}
+                  </div>
+                  <div class="fd-list__byline">
+                    {$getTranslation(userSettingsGroupProperty[1].sublabel?userSettingsGroupProperty[1].sublabel:'')}
                   </div>
-                </a>
+                </div>
               </li>
               {/each} {/each}
             </ul>