Update Fundamental Styles library from v0.14.0 to v0.17.0 (SAP#1996)

y-kkamil · May 19, 2021 · 23a8e2f · 23a8e2f
1 parent 03aae1a
commit 23a8e2f
Show file tree

Hide file tree

Showing 11 changed files with 90 additions and 107 deletions.
diff --git a/core/package-lock.json b/core/package-lock.json
diff --git a/core/package.json b/core/package.json
@@ -10,7 +10,7 @@
     "@babel/polyfill": "^7.6.0",
     "@babel/preset-env": "^7.6.2",
     "@babel/register": "^7.6.2",
-    "@sap-theming/theming-base-content": "~11.1.24",
+    "@sap-theming/theming-base-content": "~11.1.28",
     "@webcomponents/webcomponentsjs": "^2.3.0",
     "acorn": "^6.4.1",
     "axios": ">=0.21.1",
@@ -24,7 +24,7 @@
     "esm": "^3.2.25",
     "file-loader": "^2.0.0",
     "fs-extra": "9.0.0",
-    "fundamental-styles": "^0.14.0",
+    "fundamental-styles": "^0.17.0",
     "jsdom": "15.0.0",
     "jsdom-global": "3.0.2",
     "live-server": "^1.2.1",
@@ -77,7 +77,7 @@
     },
     {
       "path": "./public/luigi.css",
-      "maxSize": "529 kB",
+      "maxSize": "565 kB",
       "compression": "none"
     },
     {
@@ -87,7 +87,7 @@
     },
     {
       "path": "./public-ie11/luigi-ie11.css",
-      "maxSize": "550 kB",
+      "maxSize": "565 kB",
       "compression": "none"
     }
   ],

diff --git a/core/src/App.html b/core/src/App.html
@@ -1887,7 +1887,7 @@
 
   //Add z-index for dialogs
   :global(.fd-dialog, .fd-message-box) {
-    z-index: 1000;
+    z-index: $zindex-dialog-box;
   }
 
   :global(.fd-dialog__content--mobile),

diff --git a/core/src/Modal.html b/core/src/Modal.html
@@ -6,14 +6,19 @@
   <div
     class="fd-dialog__content {isDrawer? (settings.backdrop?'drawer drawer-dialog__content drawer__backdrop':'drawer drawer-dialog__content'):'lui-modal-mf'}"
     data-testid="modal-mf"
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="dialog-title-1"
   >
     {#if isModal || (isDrawer && settings.header)}
     <div class="fd-dialog__header fd-bar fd-bar--header">
       <Backdrop on:stateChanged="{backdropStateChanged}"></Backdrop>
       <div class="fd-bar__left">
         <div class="fd-bar__element">
           {#if settings.title}
-          <h3 class="fd-dialog__title">{settings.title}</h3>
+          <h2 class="fd-title fd-title--h5" id="dialog-title-1">
+            {settings.title}
+          </h2>
           {/if}
         </div>
       </div>

diff --git a/core/src/UserSettingsDialog.html b/core/src/UserSettingsDialog.html
@@ -376,6 +376,11 @@
     background-color: var(--sapBackgroundColor, #f7f7f7);
   }
 
+  .lui-us-sidenav-image {
+    width: 3rem;
+    height: 3rem;
+  }
+
   .iframeUserSettingsCtn {
     position: relative;
     width: 100%;
@@ -463,78 +468,66 @@
       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 {
-    cursor: pointer;
-  }
-
-  .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);
-  }
-
-  .fd-list__item.is-hover,
-  .fd-list__item:hover {
-    background: #f5f5f5;
-    background: var(--sapList_Hover_Background, #f5f5f5);
-  }
-
-  .fd-list__item.is-selected:hover {
-    background: var(--sapList_Hover_SelectionBackground, #d8e9f8);
-  }
 </style>
 <svelte:window on:keydown="{handleKeydown}" on:resize="{onResize}" />
 <div class="fd-dialog fd-dialog--active lui-usersettings-dialog">
-  <div class="fd-dialog__content lui-usersettings-dialog-size">
+  <div
+    class="fd-dialog__content lui-usersettings-dialog-size"
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="dialog-title-2"
+  >
     <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">
-            <h2 class="fd-title fd-title--h5">
+            <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 lui-us-list" role="list">
+            <ul
+              class="fd-list fd-list--byline fd-list--navigation lui-us-list"
+              role="list"
+            >
               {#each Object.entries(userSettingGroups) as [key, userSettingGroup], index}
               {#each Object.entries(userSettingGroup) as userSettingsGroupProperty}
               <li
-                tabindex="0"
                 role="listitem"
-                class="fd-list__item lui-us-navlist__item"
+                tabindex="-1"
+                class="fd-list__item fd-list__item--link 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">
+                <a tabindex="0" class="fd-list__link" href="#">
                   {#if userSettingsGroupProperty[1].icon} {#if
                   hasOpenUIicon(userSettingsGroupProperty[1])}
-                  <i
-                    role="presentation"
-                    class="sap-icon--{userSettingsGroupProperty[1].icon}"
-                  ></i>
+                  <span class="fd-list__thumbnail">
+                    <i
+                      role="presentation"
+                      class="sap-icon--{userSettingsGroupProperty[1].icon}"
+                    ></i>
+                  </span>
                   {:else}
-                  <img
-                    src="{userSettingsGroupProperty[1].icon}"
-                    alt="{userSettingsGroupProperty[1].altText ? userSettingsGroupProperty[1].altText : ''}"
-                  />
+                  <span
+                    class="fd-image--s fd-list__thumbnail"
+                    aria-label="{userSettingsGroupProperty[1].altText ? userSettingsGroupProperty[1].altText : ''}"
+                    style="background-image:url('{userSettingsGroupProperty[1].icon}'); background-size:cover;"
+                  ></span>
                   {/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 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>
                   </div>
-                </div>
+                </a>
               </li>
               {/each} {/each}
             </ul>

diff --git a/core/src/navigation/BadgeCounter.html b/core/src/navigation/BadgeCounter.html
@@ -1,6 +1,8 @@
 {#if node && node.badgeCounter} {#await node.badgeCounter.count()} {:then count} {#if
 count > 0}
-<span class="fd-counter fd-counter--notification" aria-label="{node.badgeCounter.label}"
+<span
+  class="fd-counter fd-counter--notification fd-shellbar__counter--notification"
+  aria-label="{node.badgeCounter.label}"
   >{count}</span
 >
 {/if} {:catch error} {/await} {/if}
@@ -9,11 +11,11 @@
 </script>
 
 <style type="text/scss">
-  .fd-counter--notification {
-    transform: translate(-20%, -30%);
-  }
-
   :global(.fd-shellbar__action) {
+    .fd-shellbar__counter--notification {
+      top: 0;
+    }
+
     .fd-menu .fd-top-nav__icon {
       position: relative;
       margin-right: 8px;
@@ -22,29 +24,18 @@
       display: inline-block;
       vertical-align: middle;
 
-      .fd-counter--notification {
-        transform: none;
-        position: absolute;
-        top: -6px;
-        left: 6px;
-        border-radius: 8px;
-        font-size: 10px;
-        line-height: 6px;
-        display: block;
-        height: 14px;
+      .fd-shellbar__counter--notification {
+        top: -8px;
       }
     }
 
     .fd-product-switch__body--mobile {
       .lui-product-switch__icon {
         position: relative;
 
-        .fd-counter--notification {
-          transform: none;
-          position: absolute;
-          top: 0;
-          right: 0;
-          display: block;
+        .fd-shellbar__counter--notification {
+          top: -8px;
+          right: 6px;
         }
       }
     }

diff --git a/core/src/navigation/ContextSwitcher.html b/core/src/navigation/ContextSwitcher.html
@@ -48,14 +48,19 @@
 <!-- MOBILE VERSION (fullscreen dialog): -->
 {#if isMobile && dropDownStates.contextSwitcherPopover && renderAsDropdown}
 <div class="fd-dialog fd-dialog--active" on:click|stopPropagation="{()=>{}}">
-  <div class="fd-dialog__content fd-dialog__content--mobile">
+  <div
+    class="fd-dialog__content fd-dialog__content--mobile"
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="dialog-title-3"
+  >
     <div class="fd-dialog__header fd-bar fd-bar--header">
       <div class="fd-bar__left">
         <div class="fd-bar__element">
-          <h3 class="fd-dialog__title">
+          <h2 class="fd-title fd-title--h5" id="dialog-title-3">
             {#if !selectedLabel} {$getTranslation(config.defaultLabel)} {/if} {#if
             selectedLabel} {selectedLabel} {/if}
-          </h3>
+          </h2>
         </div>
       </div>
     </div>

diff --git a/core/src/navigation/LeftNav.html b/core/src/navigation/LeftNav.html
@@ -671,7 +671,7 @@
     }
   }
 
-  //temporary fix of FD Styles 0.11.0 please review with new version
+  /*TODO: check if FD Styles >v.0.17 included it*/
   .lui-category {
     border-top: var(--sapList_BorderWidth, 0.0625rem) solid
       var(--sapList_GroupHeaderBorderColor, #d8d8d8);
@@ -684,13 +684,6 @@
     -webkit-overflow-scrolling: touch;
     background-color: transparent;
     @include transition(width 0.1s linear);
-    //remove dotted outline from anchor in left side nav
-    .fd-nested-list__content .fd-nested-list {
-      &__link:focus,
-      &__button:focus {
-        outline: none;
-      }
-    }
   }
 
   .lui-side-nav__footer {

diff --git a/core/src/navigation/MobileTopNavDropDown.html b/core/src/navigation/MobileTopNavDropDown.html
@@ -1,9 +1,16 @@
 <div class="fd-dialog fd-dialog--active" on:click|stopPropagation="{()=>{}}">
-  <div class="fd-dialog__content fd-dialog__content--mobile">
+  <div
+    class="fd-dialog__content fd-dialog__content--mobile"
+    role="dialog"
+    aria-modal="true"
+    aria-labelledby="dialog-title-4"
+  >
     <div class="fd-dialog__header fd-bar fd-bar--header">
       <div class="fd-bar__left">
         <div class="fd-bar__element">
-          <h3 class="fd-dialog__title">{label}</h3>
+          <h2 class="fd-title fd-title--h5" id="dialog-title-4">
+            {label}
+          </h2>
         </div>
       </div>
     </div>

diff --git a/core/src/navigation/TopNav.html b/core/src/navigation/TopNav.html
@@ -117,7 +117,7 @@
     <!-- Sample Markup for Notifications
             <div class="fd-shellbar__action fd-shellbar__action--desktop">
               <button class="fd-shellbar__button fd-button sap-icon--bell" aria-label="Notifications">
-                <span class="fd-counter fd-counter--notification" aria-label="Unread count">25</span>
+                <span class="fd-counter fd-counter--notification fd-shellbar__counter--notification" aria-label="Unread count">25</span>
               </button>
             </div>
     -->
@@ -131,7 +131,6 @@
           <div class="fd-popover__control" on:click|stopPropagation="{() => {}}">
             <div
               class="fd-shellbar-collapse--control"
-              aria-controls="eYVEJ960"
               aria-expanded="false"
               aria-haspopup="true"
               role="button"
@@ -317,6 +316,7 @@
                 on:click="{() => toggleDropdownState('profilePopover')}"
                 title="{userInfo.name ? userInfo.name : userInfo.email}"
                 role="button"
+                tabindex="0"
                 data-testid="luigi-topnav-profile-btn"
               >
                 {#if userInfo.picture}
@@ -624,7 +624,7 @@
 
 <style type="text/scss">
   @import 'styles/variables';
-  //remove default outline of all dropdowns in shellbar
+  /*Remove Safari bug with blue outlines of dropdowns in the shellbar*/
   .fd-shellbar:focus {
     outline: none;
   }
@@ -633,18 +633,6 @@
     padding: 0 0.5rem;
   }
 
-  // Fix FD Styles for icons in Shellbar 0.11.2
-  .fd-shellbar__button {
-    .fd-top-nav__icon {
-      color: var(--sapShell_TextColor, #fff);
-    }
-
-    //Override from FD Styles to remove borders around the profile image
-    .fd-shellbar__avatar--circle {
-      border: none;
-    }
-  }
-
   .hideNavComponent {
     display: none;
   }