Update version of FD styles to the Core 0.10.0 -> 0.11.0

core/fundamentalStyleClasses.js

@@ -1,11 +1,10 @@
 module.exports = [
-  './node_modules/fundamental-styles/dist/root.css',
   './node_modules/fundamental-styles/dist/variables.css',
   './node_modules/fundamental-styles/dist/icon.css',
   './node_modules/fundamental-styles/dist/layout.css',
   './node_modules/fundamental-styles/dist/action-bar.css',
   // './node_modules/fundamental-styles/dist/alert.css',
-  //'./node_modules/fundamental-styles/dist/asset-upload.css',
+  //'./node_modules/fundamental-styles/dist/file-uploader.css',
   //'./node_modules/fundamental-styles/dist/avatar.css',
   //'./node_modules/fundamental-styles/dist/badge.css',
   './node_modules/fundamental-styles/dist/bar.css',
@@ -26,7 +25,7 @@ module.exports = [
   //'./node_modules/fundamental-styles/dist/inline-help.css',
   './node_modules/fundamental-styles/dist/input.css',
   './node_modules/fundamental-styles/dist/input-group.css',
-  //'./node_modules/fundamental-styles/dist/label.css',
+  //'./node_modules/fundamental-styles/dist/info-label.css',
   //'./node_modules/fundamental-styles/dist/layout-grid.css',
   //'./node_modules/fundamental-styles/dist/layout-panel.css',
   './node_modules/fundamental-styles/dist/link.css',
@@ -36,7 +35,6 @@ module.exports = [
   //'./node_modules/fundamental-styles/dist/message-box.css',
   './node_modules/fundamental-styles/dist/message-strip.css',
   //'./node_modules/fundamental-styles/dist/message-toast.css',
-  //'./node_modules/fundamental-styles/dist/nav.css',
   //'./node_modules/fundamental-styles/dist/notification.css',
   //'./node_modules/fundamental-styles/dist/numeric-content.css',
   //'./node_modules/fundamental-styles/dist/object-status.css',
@@ -52,16 +50,16 @@ module.exports = [
   './node_modules/fundamental-styles/dist/shellbar.css',
   './node_modules/fundamental-styles/dist/side-nav.css',
   // './node_modules/fundamental-styles/dist/switch.css',
+  //'./node_modules/fundamental-styles/dist/step-input.css'
   //'./node_modules/fundamental-styles/dist/table.css',
   './node_modules/fundamental-styles/dist/tabs.css',
   // './node_modules/fundamental-styles/dist/textarea.css',
   //'./node_modules/fundamental-styles/dist/tile.css',
   //'./node_modules/fundamental-styles/dist/time.css',
+  //'./node_modules/fundamental-styles/dist/title.css',
   //'./node_modules/fundamental-styles/dist/token.css',
   //'./node_modules/fundamental-styles/dist/tokenizer.css',
   //'./node_modules/fundamental-styles/dist/toolbar.css',
   //'./node_modules/fundamental-styles/dist/tree.css',
   './node_modules/fundamental-styles/dist/helpers.css'
-  //'./node_modules/fundamental-styles/dist/info-label.css'
-  //'./node_modules/fundamental-styles/dist/step-input.css'
 ];

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.19",
+    "@sap-theming/theming-base-content": "~11.1.21",
     "@webcomponents/webcomponentsjs": "^2.3.0",
     "acorn": "^6.4.1",
     "axios": ">=0.18.1",
@@ -23,7 +23,7 @@
     "css-loader": "^3.0.0",
     "file-loader": "^2.0.0",
     "fs-extra": "9.0.0",
-    "fundamental-styles": "~0.10.0",
+    "fundamental-styles": "^0.11.0",
     "jsdom": "15.0.0",
     "jsdom-global": "3.0.2",
     "live-server": "^1.2.1",

core/src/Alerts.html

@@ -1,7 +1,4 @@
-<div
-  class="fd-shell__overlay fd-overlay fd-overlay--message-strip"
-  aria-hidden="false"
->
+<div class="fd-shell__overlay luigi-alert--overlay" aria-hidden="false">
   {#each alertQueue as al}
   <div
     class="fd-message-strip fd-message-strip--{alertTypeMap[al.settings.type]} fd-message-strip--dismissible"
@@ -108,10 +105,14 @@
 </script>
 
 <style type="text/scss">
-  .fd-overlay--message-strip {
+  .luigi-alert--overlay {
     position: absolute;
     z-index: 1100;
     flex-direction: column;
+    left: 50%;
+    -webkit-transform: translate(-50%);
+    transform: translate(-50%);
+    margin-top: 28px;
     .fd-message-strip:not(:first-child) {
       margin-top: 8px;
     }

core/src/App.html

@@ -1639,13 +1639,6 @@
     max-height: calc(var(--vh, 1vh) * 100 - 76px);
   }
 
-  //Overwrites with SAP variables
-
-  :global(.fd-shellbar) {
-    border-bottom: #354a5f;
-    border-bottom: 1px solid var(--sapShell_BorderColor, #354a5f);
-  }
-
   .wcContainer {
     position: absolute;
     left: 0;

core/src/Authorization.html

@@ -27,7 +27,7 @@
         {#if profileItem.icon}
         {#if hasOpenUIicon(profileItem)}
         <span
-          class="fd-top-nav__icon sap-icon--{profileItem.icon} sap-icon--m"
+          class="fd-top-nav__icon sap-icon--{profileItem.icon}"
         ></span>
         {:else}
         <img
@@ -54,7 +54,7 @@
         {#if profileNav.logout.icon}
         {#if hasOpenUIicon(profileNav.logout)}
         <span
-          class="fd-top-nav__icon sap-icon--{profileNav.logout.icon} sap-icon--m"
+          class="fd-top-nav__icon sap-icon--{profileNav.logout.icon}"
         ></span>
         {:else}
         <img

core/src/Modal.html

@@ -12,7 +12,7 @@ <h3 class="fd-dialog__title">{modalSettings.title}</h3>
       <div class="fd-bar__right">
         <div class="fd-bar__element">
           <button
-            class="fd-button fd-button--transparent fd-button--compact fd-dialog__close sap-icon--decline sap-icon--l"
+            class="fd-button fd-button--transparent fd-button--compact fd-dialog__close sap-icon--decline"
             on:click="{() => dispatch('close')}"
             aria-label="close"
           ></button>

core/src/SplitView.html

@@ -11,7 +11,7 @@
         class="lui-collapse-btn"
         on:click|stopPropagation|preventDefault="{expand}"
       >
-        <span class="sap-icon--navigation-up-arrow sap-icon--s"></span>
+        <span class="sap-icon--navigation-up-arrow"></span>
       </a>
     </div>
     <h1 class="fd-splitView__title">{splitViewSettings.title}</h1>
@@ -28,7 +28,7 @@ <h1 class="fd-splitView__title">{splitViewSettings.title}</h1>
     class="lui-collapse-btn"
     on:click|stopPropagation|preventDefault="{collapse}"
   >
-    <span class="sap-icon--navigation-down-arrow sap-icon--s"></span>
+    <span class="sap-icon--navigation-down-arrow"></span>
   </a>
 </div>
 {/if}

core/src/TopNavDropDown.html

@@ -15,7 +15,7 @@
         class="fd-menu__link"
       >
         <span
-          class="fd-top-nav__icon {node.icon && hasOpenUIicon(node) ? 'sap-icon--' + node.icon + ' sap-icon--m' : '' }"
+          class="fd-top-nav__icon {node.icon && hasOpenUIicon(node) ? 'sap-icon--' + node.icon : '' }"
         >
           {#if !hasOpenUIicon(node)}
           <img

core/src/navigation/BadgeCounter.html

@@ -32,8 +32,8 @@
       .fd-counter--notification {
         transform: none;
         position: absolute;
-        top: -10px;
-        left: 10px;
+        top: -6px;
+        left: 6px;
         border-radius: 8px;
         font-size: 10px;
         line-height: 6px;

core/src/navigation/GlobalSearch.html

@@ -251,6 +251,12 @@
   }
 </script>
 <style type="text/scss">
+  //remove default browser outline on focus for search results
+  .luigi-search-popover__body {
+    li[class*='luigi-search-result']:focus {
+      outline: none;
+    }
+  }
   .luigi-search {
     &[aria-hidden='true'] {
       visibility: hidden;
@@ -303,7 +309,7 @@
         top: 0;
         right: 0;
         background: var(--sapShellColor);
-        z-index: 1;
+        z-index: 2;
       }
       .fd-menu {
         max-width: 12rem;

core/src/navigation/LeftNav.html

@@ -45,7 +45,7 @@
               >{$getTranslation(node.label)}</span>
               {#if node.externalLink && node.externalLink.url}
               <span
-                class="sap-icon--action sap-icon--s"
+                class="sap-icon--action"
               ></span>
               {/if}
               {#if node.badgeCounter}
@@ -89,14 +89,15 @@
                   class="fd-nested-list__title"
                 >{$getTranslation(key)}</span>
               </a>
-              <a
-                class="fd-nested-list__expand-icon"
+              <button
+                class="fd-button fd-nested-list__button"
                 href="#"
                 tabindex="-1"
+                aria-label="Expand categories"
                 aria-haspopup="true"
                 aria-expanded="{isExpanded(nodes, expandedCategories)}"
                 on:click|preventDefault="{() => setExpandedState(nodes, !isExpanded(nodes, expandedCategories), this)}"
-              ></a>
+              ></button>
             </div>
             <ul
               class="fd-nested-list fd-nested-list--text-only level-2"
@@ -116,7 +117,7 @@
                   >{$getTranslation(node.label)}</span>
                   {#if node.externalLink && node.externalLink.url}
                   <span
-                    class="sap-icon--action sap-icon--s"
+                    class="sap-icon--action"
                   ></span>
                   {/if}
                   {#if node.badgeCounter}
@@ -148,7 +149,7 @@
                       >{$getTranslation(node.label)}</span>
                       {#if node.externalLink && node.externalLink.url}
                       <span
-                        class="sap-icon--action sap-icon--s"
+                        class="sap-icon--action"
                       ></span>
                       {/if}
                       {#if node.badgeCounter}
@@ -216,7 +217,7 @@
               >{$getTranslation(node.label)}</span>
               {#if node.externalLink && node.externalLink.url}
               <span
-                class="sap-icon--action sap-icon--s"
+                class="sap-icon--action"
               ></span>
               {/if}
               {#if node.badgeCounter}
@@ -652,6 +653,12 @@
     }
   }
 
+  //temporary fix of FD Styles 0.11.0 please review with new version
+  .lui-category {
+    border-top: var(--sapList_BorderWidth, 0.0625rem) solid
+      var(--sapList_GroupHeaderBorderColor, #d8d8d8);
+  }
+
   .lui-fd-side-nav-wrapper {
     height: 100%;
     overflow-y: auto;

core/src/navigation/TabNav.html

@@ -52,7 +52,7 @@
               aria-selected="{isSelectedCat(key,selectedNodeForTabNav)}"
             >
               <span class="label fd-tabs__tag">{$getTranslation(key)}</span>
-              <span class="sap-icon--dropdown sap-icon--l"></span>
+              <span class="sap-icon--dropdown luigi-icon--dropdown"></span>
             </a>
           </div>
           <div
@@ -97,7 +97,7 @@
           on:click|preventDefault="{toggleMoreBtn}"
         >
           <span class="label fd-tabs__tag">More</span>
-          <span class="sap-icon--dropdown sap-icon--l"></span>
+          <span class="sap-icon--dropdown luigi-icon--dropdown"></span>
         </a>
         <div
           class="fd-popover__body fd-popover__body--right fd-popover__body--no-arrow"
@@ -136,14 +136,15 @@
                 >
                   <span class="fd-nested-list__title">{$getTranslation(key)}</span>
                 </a>
-                <a
-                  class="fd-nested-list__expand-icon"
+                <button
+                  class="fd-button fd-nested-list__button"
                   href="#"
                   tabindex="-1"
+                  aria-label="Expand submenu"
                   aria-haspopup="true"
                   aria-expanded="{dropDownStates[key+index]}"
                   on:click|preventDefault="{() => toggleDropdownState(key+index)}"
-                ></a>
+                ></button>
               </div>
               <ul
                 class="fd-nested-list level-2"
@@ -420,7 +421,7 @@
       padding-right: 0;
 
       &.has-child {
-        .sap-icon--l {
+        .luigi-icon--dropdown {
           right: 0;
         }
       }
@@ -454,7 +455,7 @@
         .label {
           padding-right: 17px;
         }
-        .sap-icon--l {
+        .luigi-icon--dropdown {
           position: absolute;
           top: 0.4em;
           right: 14px;