SAP · JohannesDoberer · Jan 22, 2025 · Jan 22, 2025 · Jan 30, 2025 · Feb 17, 2025
@@ -1,4 +1,4 @@
-<!DOCTYPE html>
+<!doctype html>
 <html>
   <head>
     <title>Luigi</title>

@@ -10,8 +10,8 @@
     "chai": "^4.3.6",
     "css-tree": "^2.3.1",
     "esbuild": "^0.25.1",
-    "fs-extra": "^11.3.0",
-    "fundamental-styles": "0.37.0",
+    "fs-extra":"^11.3.0",
+    "fundamental-styles": "0.39.1",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jsdom": "^25.0.1",

@@ -22,6 +22,7 @@
 
   const dispatch = createEventDispatcher();
   let nodeObject;
+  let btpToolLayout;
   let pathData;
   let nodeParams;
   let iframeCreated = false;
@@ -253,6 +254,9 @@
         settings.title = getNodeLabel(nodeObject);
       }
     }, ['navigation.viewgroupdata']);
+    btpToolLayout =
+      LuigiConfig.getConfigValue('settings.btpToolLayout') &&
+      GenericHelpers.requestExperimentalFeature('btpToolLayout', false);
     EventListenerHelpers.addEventListener('message', onMessage);
     // only disable accessibility for all cases other than a drawer without backdrop
     !(settings.isDrawer && !settings.backdrop)
@@ -297,13 +301,15 @@
 </script>
 
 <div
-  class={isModal || (isDrawer && settings.backdrop) ? 'fd-dialog fd-dialog--active' : 'drawer-dialog'}
+  class={isModal || (isDrawer && settings.backdrop)
+    ? 'fd-dialog fd-dialog--active'
+    : `drawer-dialog ${btpToolLayout ? 'btp-drawer-dialog' : 'drawer-dialog'}`}
   style={isModal ? 'z-index:1001' : ''}
 >
   <div
     class="fd-dialog__content {isDrawer
       ? settings.backdrop
-        ? 'drawer drawer-dialog__content drawer__backdrop'
+        ? `drawer drawer-dialog__content ${btpToolLayout ? 'btp-drawer__backdrop' : 'drawer__backdrop'}`
         : 'drawer drawer-dialog__content'
       : 'lui-modal-mf lui-modal-index-' + modalIndex}"
     data-testid={isModal ? 'modal-mf' : 'drawer-mf'}
@@ -364,13 +370,9 @@
 </div>
 
 <style lang="scss">
-  :global(.lui-breadcrumb) .drawer-dialog {
-    top: calc(#{$combinedLayoutGap} + #{$topNavHeight} + var(--luigi__breadcrumb--height));
-  }
-
   .drawer-dialog {
     position: absolute;
-    top: calc(#{$combinedLayoutGap} + #{$topNavHeight});
+    top: calc(#{$topNavHeight} + var(--luigi__breadcrumb--height));
     bottom: 0;
     width: 25%;
     z-index: 3;
@@ -381,6 +383,10 @@
     }
   }
 
+  .drawer-dialog.btp-drawer-dialog {
+    top: calc(#{$combinedLayoutGap} + #{$topNavHeight} + var(--luigi__breadcrumb--height));
+  }
+
   .drawer {
     bottom: 0;
     width: 25vw;
@@ -397,6 +403,14 @@
     top: $topNavHeight;
   }
 
+  .btp-drawer__backdrop {
+    top: calc($topNavHeight + $combinedLayoutGap);
+  }
+
+  :global(.lui-breadcrumb) .btp-drawer__backdrop {
+    top: calc(#{$topNavHeight} + var(--luigi__breadcrumb--height) + $combinedLayoutGap);
+  }
+
   .iframeModalCtn {
     position: absolute;
     height: 100%;

@@ -352,13 +352,14 @@
     <div class="fd-dialog__body lui-usersettings-body">
       <div class="lui-usersettings-left-nav">
         <div class="fd-side-nav">
-          <div class="fd-side-nav__group-header">
+          <div class="fd-side-nav__group-header lui-us-group-header">
             <h2 class="fd-title fd-title--h5" id="dialog-title-2">{$getTranslation(dialogHeader)}</h2>
           </div>
           <div class="fd-side-nav__main-navigation lui-fd-side-nav__main-navigation">
             <ul class="fd-list fd-list--byline fd-list--navigation lui-us-list">
               {#each Object.entries(userSettingGroups) as [key, userSettingGroup], index}
                 {#each Object.entries(userSettingGroup) as userSettingsGroupProperty}
+                  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
                   <li
                     class="fd-list__item fd-list__item--link lui-us-navlist__item"
                     data-testid="us-navigation-item"
@@ -570,6 +571,8 @@
     left: var(--left-fd-side-nav-width);
     max-width: 55rem;
     font-size: var(--sapFontHeader3Size, 20px);
+    padding: 0.6rem 1rem;
+    border-bottom: 1px solid var(--sapList_GroupHeaderBorderColor, #d9d9d9);
   }
 
   /*customization of FD Styles to align with Fiori 3*/
@@ -599,6 +602,12 @@
     background-color: var(--fdAvatar_BackgroundColor, var(--sapAccentColor6, #286eb4));
   }
 
+  .lui-us-group-header {
+    padding: 0.6rem 1rem;
+    border-right: 0.0625rem solid var(--sapPageFooter_BorderColor);
+    border-bottom: 1px solid var(--sapList_GroupHeaderBorderColor, #d9d9d9);
+  }
+
   /*Fiori 3 guidlines*/
   @media (min-width: 1024px) {
     .lui-usersettings-dialog-size {
@@ -640,6 +649,7 @@
 
     .lui-usersettings-dialog-sub-header {
       left: 0;
+      display: flex;
     }
 
     .lui-usersettings-content-header__back-btn {

@@ -213,6 +213,7 @@
                   <div class="fd-form-item">
                     <div class="fd-popover">
                       <!-- svelte-ignore a11y-click-events-have-key-events -->
+                      <!-- svelte-ignore a11y-no-static-element-interactions -->
                       <div
                         class="fd-popover__control"
                         aria-expanded="false"

@@ -35,16 +35,43 @@
 }
 
 @font-face {
-  font-family: '72';
-  src: url('@sap-theming/theming-base-content/content/Base/baseLib/baseTheme/fonts/72-Regular-full.woff2') format('woff2');
+  font-family: '72black';
+  src: url('@sap-theming/theming-base-content/content/Base/baseLib/baseTheme/fonts/72-Black-full.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
 }
 
 @font-face {
   font-family: '72black';
-  src: url('@sap-theming/theming-base-content/content/Base/baseLib/baseTheme/fonts/72-Black-full.woff2') format('woff2');
+  src: url('@sap-theming/theming-base-content/content/Base/baseLib/baseTheme/fonts/72-Black-full.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: '72-Semibold';
+  src: url('@sap-theming/theming-base-content/content/Base/baseLib/baseTheme/fonts/72-Semibold.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
 }
 
+@font-face {
+  font-family: '72-Semibold';
+  src: url('@sap-theming/theming-base-content/content/Base/baseLib/baseTheme/fonts/72-Semibold.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: '72-SemiboldDuplex';
+  src: url('@sap-theming/theming-base-content/content/Base/baseLib/baseTheme/fonts/72-SemiboldDuplex.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: '72-SemiboldDuplex';
+  src: url('@sap-theming/theming-base-content/content/Base/baseLib/baseTheme/fonts/72-SemiboldDuplex.woff') format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
@@ -91,6 +91,7 @@
               <ul class="fd-menu__list fd-menu__list--top" bind:this={customSearchItemRendererSlotContainer}>
                 {#each searchResult as result, index}
                   <!-- svelte-ignore a11y-no-noninteractive-tabindex -->
+                  <!-- svelte-ignore a11y-no-noninteractive-element-interactions -->
                   <li
                     class="fd-menu__item luigi-search-result-item__{index}"
                     on:click={(event) => globalSearchHelper.onSearchResultItemSelected(result, event)}
@@ -99,6 +100,7 @@
                   >
                     {#if !globalSearchHelper.isCustomSearchResultItemRenderer}
                       <!-- svelte-ignore a11y-click-events-have-key-events -->
+                      <!-- svelte-ignore a11y-no-static-element-interactions -->
                       <!-- svelte-ignore a11y-missing-attribute -->
                       <a class="fd-menu__link" on:click|preventDefault={() => {}}>
                         <div class="fd-product-switch__text">
@@ -127,6 +129,7 @@
 </div>
 <div class="fd-shellbar__action fd-shellbar__action--desktop">
   <!-- svelte-ignore a11y-click-events-have-key-events -->
+  <!-- svelte-ignore a11y-no-static-element-interactions -->
   <div on:click|stopPropagation={() => {}}>
     <button
       class="fd-button fd-button--transparent fd-shellbar__button"
@@ -184,6 +187,10 @@
 
   //remove arrow from the search popover
   @media screen and (max-width: 1024px) {
+    :global(.lui-shellbar_group--actions .fd-shellbar__input-group.fd-shellbar__search-field) {
+      margin-bottom: 0;
+    }
+
     .luigi-search-shell__mobile {
       position: relative;
       height: calc(2.25rem + 2px);
@@ -200,9 +207,17 @@
         background: var(--sapShellColor);
         z-index: 2;
       }
+
       .fd-menu {
         max-width: 12rem;
       }
     }
   }
+
+  @media (max-width: 599px) {
+    :global(.lui-shellbar_group--actions .fd-shellbar__input-group.fd-shellbar__search-field) {
+      max-width: 11rem;
+      min-width: 0;
+    }
+  }
 </style>
@@ -166,8 +166,12 @@
                       <!-- svelte-ignore a11y-missing-attribute -->
                       <a class="fd-menu__link" on:click|preventDefault={() => {}}>
                         <div class="fd-product-switch__text">
-                          <div class="fd-product-switch__title">{result.label}</div>
-                          <div class="fd-product-switch__subtitle">{result.description}</div>
+                          <div class="fd-product-switch__title">
+                            {result.label}
+                          </div>
+                          <div class="fd-product-switch__subtitle">
+                            {result.description}
+                          </div>
                         </div>
                       </a>
                     {:else}
@@ -294,13 +298,10 @@
       width: calc(100% - 90px);
       left: 0;
       top: 0;
-      height: 100%;
       z-index: 2;
       padding-left: 1rem;
       padding-right: 0.25rem;
-      .fd-shellbar__input-group {
-        margin-top: 6px;
-      }
+      height: 40px;
     }
 
     .lui-global-search-cancel-btn.lui-global-search-cancel-btn--active {
@@ -313,7 +314,8 @@
       top: 0;
       z-index: 2;
       width: 90px;
-      height: 100%;
+      height: 40px;
+
       .fd-shellbar__button {
         margin-top: 4px;
       }
@@ -338,10 +340,30 @@
   :global(.fd-shellbar__group) {
     flex-grow: 1;
   }
-
   @media (max-width: 599px) {
     :global(.fd-shellbar__logo) {
       display: none;
     }
+
+    :global(.fd-input-group.fd-shellbar__input-group.luigi-search-input-ctn.fd-shellbar__search-field) {
+      min-width: 0;
+    }
+  }
+
+  :global(.fd-input-group.fd-shellbar__input-group.luigi-search-input-ctn.fd-shellbar__search-field) {
+    max-width: none;
+  }
+
+  :global(
+      .fd-input-group__addon.fd-shellbar__search-field-addon.fd-shellbar__search-cancel.fd-input-group__addon--button,
+      .fd-input-group__addon.fd-shellbar__search-field-addon.fd-shellbar__search-submit.fd-input-group__addon--button
+    ) {
+    display: inherit;
+  }
+
+  @media (min-width: 600px) {
+    :global(.fd-shellbar__group.lui-global-search-cancel-btn.lui-global-search-cancel-btn--active) {
+      display: none;
+    }
   }
 </style>