update fundamental library in luigi core

core/fundamentalStyleClasses.js

@@ -1,25 +1,24 @@
 module.exports = [
   './node_modules/fundamental-styles/dist/root.css',
-  './node_modules/fundamental-styles/dist/fonts.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/alert.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/badge.css',
-  './node_modules/fundamental-styles/dist/popover.css',
-  //'./node_modules/fundamental-styles/dist/busy-indicator.css',
+  './node_modules/fundamental-styles/dist/bar.css',
+  //'./node_modules/fundamental-styles/dist/breadcrumb.css',
+  './node_modules/fundamental-styles/dist/busy-indicator.css',
   './node_modules/fundamental-styles/dist/button.css',
-  //'./node_modules/fundamental-styles/dist/button-group.css',
   //'./node_modules/fundamental-styles/dist/button-split.css',
-  //'./node_modules/fundamental-styles/dist/breadcrumb.css',
   //'./node_modules/fundamental-styles/dist/calendar.css',
   // './node_modules/fundamental-styles/dist/checkbox.css',
-  // './node_modules/fundamental-styles/dist/radio.css',
   './node_modules/fundamental-styles/dist/counter.css',
-  //'./node_modules/fundamental-styles/dist/dropdown.css',
+  './node_modules/fundamental-styles/dist/dialog.css',
   //'./node_modules/fundamental-styles/dist/fieldset.css',
   //'./node_modules/fundamental-styles/dist/form-group.css',
+  //'./node_modules/fundamental-styles/dist/form-input-message-group.css',
   //'./node_modules/fundamental-styles/dist/form-item.css',
   //'./node_modules/fundamental-styles/dist/form-label.css',
   //'./node_modules/fundamental-styles/dist/form-message.css',
@@ -28,36 +27,42 @@ module.exports = [
   //'./node_modules/fundamental-styles/dist/image.css',
   //'./node_modules/fundamental-styles/dist/inline-help.css',
   //'./node_modules/fundamental-styles/dist/input.css',
-  // './node_modules/fundamental-styles/dist/textarea.css',
+  //'./node_modules/fundamental-styles/dist/input-group.css',
   //'./node_modules/fundamental-styles/dist/label.css',
   //'./node_modules/fundamental-styles/dist/layout-grid.css',
   './node_modules/fundamental-styles/dist/link.css',
   //'./node_modules/fundamental-styles/dist/list.css',
   //'./node_modules/fundamental-styles/dist/list-group.css',
   //'./node_modules/fundamental-styles/dist/localization-editor.css',
   './node_modules/fundamental-styles/dist/menu.css',
-  './node_modules/fundamental-styles/dist/modal.css',
-  //'./node_modules/fundamental-styles/dist/multi-input.css',
+  //'./node_modules/fundamental-styles/dist/message-box.css',
+  './node_modules/fundamental-styles/dist/message-strip.css',
   //'./node_modules/fundamental-styles/dist/nav.css',
   //'./node_modules/fundamental-styles/dist/notification.css',
+  //'./node_modules/fundamental-styles/dist/object-status.css',
   './node_modules/fundamental-styles/dist/page.css',
   //'./node_modules/fundamental-styles/dist/pagination.css',
   //'./node_modules/fundamental-styles/dist/panel.css',
-  //'./node_modules/fundamental-styles/dist/tile.css',
-  //'./node_modules/fundamental-styles/dist/product-tile.css',
+  './node_modules/fundamental-styles/dist/popover.css',
   './node_modules/fundamental-styles/dist/product-switch.css',
+  //'./node_modules/fundamental-styles/dist/product-tile.css',
+  // './node_modules/fundamental-styles/dist/radio.css',
   //'./node_modules/fundamental-styles/dist/section.css',
+  //'./node_modules/fundamental-styles/dist/segmented-button.css',
   // './node_modules/fundamental-styles/dist/select.css',
+  './node_modules/fundamental-styles/dist/shellbar.css',
   './node_modules/fundamental-styles/dist/side-nav.css',
-  './node_modules/fundamental-styles/dist/spinner.css',
+  // './node_modules/fundamental-styles/dist/spinner.css',
   // './node_modules/fundamental-styles/dist/status-label.css',
+  // './node_modules/fundamental-styles/dist/switch.css',
   //'./node_modules/fundamental-styles/dist/table.css',
-  //'./node_modules/fundamental-styles/dist/tree.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/toggle.css',
   //'./node_modules/fundamental-styles/dist/token.css',
-  //'./node_modules/fundamental-styles/dist/input-group.css',
-  './node_modules/fundamental-styles/dist/shellbar.css',
+  //'./node_modules/fundamental-styles/dist/tokenizer.css',
+  //'./node_modules/fundamental-styles/dist/tree.css',
   './node_modules/fundamental-styles/dist/helpers.css'
+  //'./node_modules/fundamental-styles/dist/info-label.css'
 ];

core/package.json

@@ -10,6 +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.18",
     "@webcomponents/webcomponentsjs": "^2.3.0",
     "acorn": "^6.4.1",
     "axios": ">=0.18.1",
@@ -21,7 +22,7 @@
     "core-js": "^3.2.1",
     "css-loader": "^3.0.0",
     "file-loader": "^2.0.0",
-    "fundamental-styles": "^0.6.0",
+    "fundamental-styles": "^0.8.1",
     "jsdom": "15.0.0",
     "jsdom-global": "3.0.2",
     "lodash": ">=4.17.13",

core/src/Alerts.html

@@ -1,19 +1,24 @@
-<div class="fd-shell__overlay fd-overlay fd-overlay--alert" aria-hidden="false">
+<div
+  class="fd-shell__overlay fd-overlay fd-overlay--message-strip"
+  aria-hidden="false"
+>
   {#each alertQueue as al}
   <div
-    class="fd-alert fd-alert--{alertTypeMap[al.settings.type]} fd-alert--dismissible"
+    class="fd-message-strip fd-message-strip--{alertTypeMap[al.settings.type]} fd-message-strip--dismissible"
     role="alert"
     id="j2ALl423"
     data-testid="luigi-alert"
   >
+    <p
+      class="fd-message-strip__text"
+    >{@html al.dataSanitized ? al.settings.text: ''}</p>
     <button
-      class="fd-button fd-button--light fd-button--compact fd-alert__close"
+      class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close"
       on:click="{() => dispatch('alertDismiss',{id: al.settings.id})}"
       aria-label="Close"
       aria-controls="j2ALl423"
       data-testid="luigi-alert-dismiss"
     ></button>
-    <p class="fd-alert__text">{@html al.dataSanitized ? al.settings.text: ''}</p>
   </div>
   {/each}
 </div>
@@ -103,15 +108,15 @@
 </script>
 
 <style type="text/scss">
-  .fd-overlay--alert {
+  .fd-overlay--message-strip {
     position: absolute;
     z-index: 1100;
     flex-direction: column;
-    .fd-alert:not(:first-child) {
+    .fd-message-strip:not(:first-child) {
       margin-top: 8px;
     }
   }
-  .fd-alert__text {
+  .fd-message-strip__text {
     :global(a) {
       display: inline-block;
       line-height: 1.42857;

core/src/App.html

@@ -43,8 +43,15 @@
     aria-hidden="false"
     aria-label="Loading"
   >
-    <div class="fd-spinner">
-      <div class="fd-spinner__body"></div>
+    <div
+      class="fd-busy-indicator--m"
+      aria-hidden="false"
+      aria-label="Loading"
+      data-testid="luigi-loading-spinner"
+    >
+      <div class="fd-busy-indicator--circle-0"></div>
+      <div class="fd-busy-indicator--circle-1"></div>
+      <div class="fd-busy-indicator--circle-2"></div>
     </div>
   </div>
   {/if}
@@ -1118,14 +1125,9 @@
 </script>
 
 <style type="text/scss">
-  /*Mixins*/
+  @import 'styles/fonts';
   @import 'styles/mixins';
-
-  $topNavHeight: 44px;
-  $topNavHeightTab: 44px;
-  $leftNavWidth: 15rem;
-  $leftNavWidthCollapsed: 2.75rem;
-  $desktopMinWidth: 600px;
+  @import 'styles/variables';
 
   :global(html) {
     box-sizing: border-box;
@@ -1156,12 +1158,14 @@
   :global([luigi-app-loading-indicator]) {
     z-index: 10;
     background-color: var(--fd-background-color);
-    padding-top: 30vh;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
   :global([luigi-app-loading-indicator].hidden) {
     visibility: hidden;
@@ -1351,6 +1355,15 @@
         left: $leftNavWidthCollapsed;
       }
     }
+
+    :global(.fd-dialog) {
+      &__content {
+        &:not(.fd-dialog__content--mobile) {
+          max-width: 90%;
+          min-width: 90%;
+        }
+      }
+    }
   }
 
   :global(html.luigi-app-in-custom-container) {
@@ -1394,46 +1407,82 @@
   }
 
   //Fixing issues for fundamental styles
+
+  //Add padding for shellbar buttons
   :global(.fd-shellbar__button) {
-    padding-left: 12px;
-    padding-right: 12px;
+    padding-left: 0.5625rem !important;
+    padding-right: 0.5625rem !important;
   }
 
-  //Overwrites with SAP variables
+  :global(.fd-menu__link) {
+    text-decoration: none; //Remove underline from links in fd-menu
+    border-radius: 0; //Remove border radius from links inside fd-menu
+  }
 
-  :global(.fd-shellbar) {
-    border-bottom: #354a5f;
-    border-bottom: 1px solid var(--sapShell_BorderColor, #354a5f);
+  //Make border radius for links inside fd-menu only for the first and last elements
+  @mixin luigi-menu__link--border($position) {
+    :global(.fd-menu__link) {
+      border-#{$position}-left-radius: 0.25rem;
+      border-#{$position}-left-radius: var(
+        --sapElement_BorderCornerRadius,
+        0.25rem
+      );
+      border-#{$position}-right-radius: 0.25rem;
+      border-#{$position}-right-radius: var(
+        --sapElement_BorderCornerRadius,
+        0.25rem
+      );
+    }
   }
+  :global(.fd-menu) {
+    :global(.fd-menu__list) {
+      &:first-child {
+        :global(.fd-menu__item) {
+          &:first-child {
+            @include luigi-menu__link--border('top');
+          }
+        }
+      }
 
-  :global(.fd-menu__item) {
-    background-color: var(--sapBackgroundColor, #fff);
-    color: var(--sapLinkColor, #51555a);
-
-    &.is-hover,
-    &:hover,
-    &.is-selected:hover {
-      color: #0854a0;
-      color: var(--sapLink_Hover_Color, #0854a0);
-      background-color: #ebf5fe;
-      background-color: var(--sapButton_Hover_Background, #ebf5fe);
+      &:last-child {
+        :global(.fd-menu__item) {
+          &:last-child {
+            @include luigi-menu__link--border('bottom');
+          }
+        }
+      }
     }
+  }
+
+  //Add z-index for dialogs
+  :global(.fd-dialog) {
+    z-index: 1000;
+  }
 
-    &.is-selected {
-      color: #32363a;
-      color: var(--sapList_TextColor, #32363a);
-      background: #e5f0fa;
-      background: var(--sapList_SelectionBackgroundColor, #e5f0fa);
+  :global(.fd-dialog__content--mobile) {
+    //Remove border-radius from mobile fullscreen dialog
+    border-radius: 0;
+
+    :global(.fd-dialog__header.fd-bar),
+    :global(.fd-dialog__footer.fd-bar) {
+      border-radius: 0;
     }
+
+    //Recalculate height for mobile devices
+    height: calc(var(--vh, 1vh) * 100});
+    max-height: calc(var(--vh, 1vh) * 100});
+    -webkit-overflow-scrolling: touch;
   }
 
-  :global(.fd-modal__content) {
-    background-color: #fff;
-    background-color: var(--sapGroup_ContentBackground, #fff);
-    box-shadow: var(
-      --sapContent_Shadow3,
-      0 0 0 0.0625rem rgba(0, 0, 0, 0.42),
-      0 1.25rem 5rem 0 rgba(0, 0, 0, 0.3)
-    );
+  //Recalculate height for mobile devices
+  :global(.fd-product-switch__body) {
+    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);
   }
 </style>