@sapui5/sap.ushell 1.138.1 → 1.139.1

package/src/main/js/sap/ushell/support/plugins/flpConfig/FlpConfigurationPlugin.js

@@ -9,7 +9,7 @@
  * Fiori launchpad in a tree table separated by IconTabFilters for the first level properties of the configuration object.
  * Also it provides a search for last level properties.
  *
- * @version 1.138.1
+ * @version 1.139.1
  */
 sap.ui.define([
     "sap/ui/core/Element",
@@ -68,10 +68,10 @@ sap.ui.define([
             this._oSupportStub = oSupportStub;
             if (this.runsAsToolPlugin()) {
                 // tool window events
-                this._aEventIds = [this.getId() + "ReceiveData"];
+                this._aEventIds = [`${this.getId()}ReceiveData`];
             } else {
                 // application window events
-                this._aEventIds = [this.getId() + "RequestData"];
+                this._aEventIds = [`${this.getId()}RequestData`];
             }
         }
     });
@@ -86,16 +86,16 @@ sap.ui.define([
         return true;
     };
 
-    FlpConfigurationPlugin.prototype.init = function (/*oSupportStub*/) {
+    FlpConfigurationPlugin.prototype.init = function (/* oSupportStub */) {
         // call super init function to register events
         Plugin.prototype.init.apply(this, arguments);
 
         if (this.runsAsToolPlugin()) {
             // delay call to get FlpConfig and build UI because of asynchronous event handling
             // event to receive data is not accessible immediately
-            setTimeout(function () {
+            setTimeout(() => {
                 this.requestData();
-            }.bind(this), 500);
+            }, 500);
 
             // place plugin in diagnostics tool
             const oRM = new RenderManager().getInterface();
@@ -110,13 +110,13 @@ sap.ui.define([
         }
     };
 
-    FlpConfigurationPlugin.prototype.exit = function (/*oSupportStub*/) {
+    FlpConfigurationPlugin.prototype.exit = function (/* oSupportStub */) {
         Plugin.prototype.exit.apply(this, arguments);
     };
 
     // trigger RequestData event in application window
     FlpConfigurationPlugin.prototype.requestData = function () {
-        this._oSupportStub.sendEvent(this.getId() + "RequestData", {
+        this._oSupportStub.sendEvent(`${this.getId()}RequestData`, {
             eventData: { data: {} }
         });
     };
@@ -126,7 +126,7 @@ sap.ui.define([
         // trigger ReceiveData event in tool window
         const oPrepareForSending = {};
         this.prepareForSending(window["sap-ushell-config"], oPrepareForSending);
-        this._oSupportStub.sendEvent(this.getId() + "ReceiveData", {
+        this._oSupportStub.sendEvent(`${this.getId()}ReceiveData`, {
             eventData: { data: oPrepareForSending }
         });
     };
@@ -149,18 +149,32 @@ sap.ui.define([
         });
     };
 
+    // get hierarchy level of properties for one specific level one element
+    function _getHierarchyDepth (oCurrentObject, sLevelOneProp) {
+        let iHierarchyDepth = 0;
+        if (oCurrentObject[sLevelOneProp]) {
+            oCurrentObject[sLevelOneProp].forEach((oProperty) => {
+                const iTmpHierarchyDepth = _getHierarchyDepth(oProperty, sLevelOneProp);
+                if (iTmpHierarchyDepth > iHierarchyDepth) {
+                    iHierarchyDepth = iTmpHierarchyDepth;
+                }
+            });
+        }
+        return iHierarchyDepth + 1;
+    }
+
     /**
      * handles press event for expand button, two steps:
      *   1) get hierarchy depth
      *   2) expand table to retrieved level
      */
-    function _onPressExpand (/*oEvent*/) {
+    function _onPressExpand (/* oEvent */) {
         let iHierarchyCount = 0;
         const sSelectedKey = Element.getElementById("sap-ui-support-flpConfigurationPlugin-TabBar").getSelectedKey();
         const oFlpConfig = Element.getElementById("sap-ui-support-flpConfigurationPlugin-TabBar").getModel().getData();
 
         if (Array.isArray(oFlpConfig[sSelectedKey])) {
-            oFlpConfig[sSelectedKey].forEach(function (sProperty, iPropIndex) {
+            oFlpConfig[sSelectedKey].forEach((sProperty, iPropIndex) => {
                 const iHierarchyCountTmp = _getHierarchyDepth(oFlpConfig[sSelectedKey][iPropIndex], sSelectedKey);
                 if (iHierarchyCount < iHierarchyCountTmp) {
                     iHierarchyCount = iHierarchyCountTmp;
@@ -168,7 +182,7 @@ sap.ui.define([
             });
             if (iHierarchyCount > 0) {
                 // minus 1 because last hierarchy level does not need to expanded but counts because its a hierarchy level as well
-                Element.getElementById("sap-ui-support-flpConfigurationPlugin-TreeTable" + sSelectedKey).expandToLevel(iHierarchyCount - 1);
+                Element.getElementById(`sap-ui-support-flpConfigurationPlugin-TreeTable${sSelectedKey}`).expandToLevel(iHierarchyCount - 1);
             } else {
                 MessageBox.error(new Label({
                     text: oResourceBundle.getText("MISSING_HIERARCHY_LEVEL")
@@ -178,9 +192,87 @@ sap.ui.define([
     }
 
     // handles press event for collapse button
-    function _onPressCollapse (/*oEvent*/) {
+    function _onPressCollapse (/* oEvent */) {
         const sSelectedKey = Element.getElementById("sap-ui-support-flpConfigurationPlugin-TabBar").getSelectedKey();
-        Element.getElementById("sap-ui-support-flpConfigurationPlugin-TreeTable" + sSelectedKey).collapseAll();
+        Element.getElementById(`sap-ui-support-flpConfigurationPlugin-TreeTable${sSelectedKey}`).collapseAll();
+    }
+
+    // get properties under a specific hierarchy level one property that fit to a search value
+    // depth first search
+    function _searchForProperties (oCurrentObject, sProperty, sPath, aPathsFound, sSearchQuery) {
+        oCurrentObject.forEach((element, index) => {
+            // if there are deeper levels go into
+            if (element[sProperty]) {
+                // build path with current array index and level one property
+                sPath = `${sPath}.${index}.${sProperty}`;
+                sPath = _searchForProperties(element[sProperty], sProperty, sPath, aPathsFound, sSearchQuery);
+                // check if property name contains search query
+            } else if (element.property.indexOf(sSearchQuery) > -1) {
+                sPath = `${sPath}.${index}`;
+                aPathsFound.push(sPath);
+                // path must be reduced to one level higher path so that path stays in its level e.g.
+                // renderers.0.renderers.0 -> renderers.0.renderers
+                sPath = sPath.substring(0, sPath.lastIndexOf("."));
+            }
+        });
+        // see path reducing above, go to previous level
+        sPath = sPath.substring(0, sPath.lastIndexOf("."));
+        if (isNaN(parseInt(sPath.substr(sPath.lastIndexOf(".") + 1), 10))) {
+            return sPath;
+        }
+        return sPath.substring(0, sPath.lastIndexOf("."));
+    }
+
+    // get value of a property of a specific path
+    function _getValueForPath (oFlpConfig, aPath) {
+        for (let i = 0; i < aPath.length; i++) {
+            if (oFlpConfig) {
+                oFlpConfig = oFlpConfig[aPath[i]];
+            }
+        }
+        return oFlpConfig;
+    }
+
+    // set value of a property of a specific path
+    function _setValueFromPath (oFlpConfigSearch, sValue, sPath) {
+        const aPath = sPath.split(",");
+        for (let i = 0; i < aPath.length - 1; i++) {
+            oFlpConfigSearch = oFlpConfigSearch[aPath[i]];
+        }
+        oFlpConfigSearch[aPath[aPath.length - 1]] = sValue;
+    }
+
+    // get number of properties under a specific hierarchy level one property
+    // works like recursive depth first search
+    function _getPropertyCount (oCurrentObject, sLevelOneProp, iPropertyCounter) {
+        if (Array.isArray(oCurrentObject)) {
+            oCurrentObject.forEach((oCurrentProp) => {
+                if (oCurrentProp[sLevelOneProp]) {
+                    iPropertyCounter = _getPropertyCount(oCurrentProp[sLevelOneProp], sLevelOneProp, iPropertyCounter);
+                } else {
+                    iPropertyCounter += 1;
+                }
+            });
+            return iPropertyCounter;
+        } return undefined;
+    }
+
+    // build an object containing arrays and objects from a path
+    function _createObjectFromPath (oFlpConfigSearch, aPath, oValue, sLevelOneProp, iPathLength) {
+        if (aPath.length === 1) {
+            oFlpConfigSearch[aPath[0]] = oValue;
+        } else {
+            const aPathCurrent = aPath.shift();
+            oFlpConfigSearch[aPathCurrent] =
+                _createObjectFromPath(typeof oFlpConfigSearch[aPathCurrent] === "undefined" ? {} : oFlpConfigSearch[aPathCurrent],
+                    aPath, oValue, sLevelOneProp, iPathLength);
+        }
+        // in case the level has properties "{levelOneProp}", "value", "property" delete "value" because it is not the last level
+        if (oFlpConfigSearch[sLevelOneProp] && oFlpConfigSearch.property && oFlpConfigSearch.value) {
+            delete oFlpConfigSearch.value;
+            oFlpConfigSearch.property = "";
+        }
+        return oFlpConfigSearch;
     }
 
     // handles search event for input field
@@ -210,7 +302,7 @@ sap.ui.define([
         }
 
         // get all IconTabFilter
-        Object.keys(oFlpConfig).forEach(function (sLevelOneProp) {
+        Object.keys(oFlpConfig).forEach((sLevelOneProp) => {
             oTabBarFilter[sLevelOneProp] = 0;
         });
 
@@ -223,7 +315,7 @@ sap.ui.define([
                 oLevelOneHierarchyPaths[sLevelOneProp] = aPathsForOneProperty;
             }
 
-            Object.keys(oLevelOneHierarchyPaths).forEach(function (sLevelOneProp) {
+            Object.keys(oLevelOneHierarchyPaths).forEach((sLevelOneProp) => {
                 aAllProperties = oLevelOneHierarchyPaths[sLevelOneProp];
 
                 for (let i = 0; i < aAllProperties.length; i++) {
@@ -252,7 +344,7 @@ sap.ui.define([
                             // set value for property if it is not the last level
                             if (oValueForPath && _getValueForPath(oFlpConfigSearch, aPropertyInt.slice(0, k + 2))) {
                                 _setValueFromPath(oFlpConfigSearch, oValueForPath.property,
-                                    aPropertyInt.slice(0, k + 2).toString() + ",property");
+                                    `${aPropertyInt.slice(0, k + 2).toString()},property`);
                             } else if (k !== aPropertyInt.length - 2) {
                                 // save all paths for which a value could not be set because object has part not yet and add them later
                                 aMissingValues.push(aPropertyInt.slice(0, k + 2).toString());
@@ -264,15 +356,15 @@ sap.ui.define([
                     _createObjectFromPath(oFlpConfigSearch, aPropertyInt, { property: "", value: "" }, aPropertyInt[0], aPropertyIntTmp.length);
                     oValueForPath = _getValueForPath(oFlpConfig, aPropertyIntCopy);
                     if (oValueForPath) {
-                        _setValueFromPath(oFlpConfigSearch, oValueForPath.value, aPropertyIntCopy.toString() + ",value");
-                        _setValueFromPath(oFlpConfigSearch, oValueForPath.property, aPropertyIntCopy.toString() + ",property");
+                        _setValueFromPath(oFlpConfigSearch, oValueForPath.value, `${aPropertyIntCopy.toString()},value`);
+                        _setValueFromPath(oFlpConfigSearch, oValueForPath.property, `${aPropertyIntCopy.toString()},property`);
                     }
                 }
                 // add missing values from above
                 aMissingValues.forEach((sPath) => {
                     oValueForPath = _getValueForPath(oFlpConfig, sPath.split(","));
                     if (oValueForPath && _getValueForPath(oFlpConfigSearch, sPath.split(","))) {
-                        _setValueFromPath(oFlpConfigSearch, oValueForPath.property, sPath + ",property");
+                        _setValueFromPath(oFlpConfigSearch, oValueForPath.property, `${sPath},property`);
                     }
                 });
                 aMissingValues = [];
@@ -287,11 +379,11 @@ sap.ui.define([
             Element.getElementById("sap-ui-support-flpConfigurationPlugin-TabBar").setModel(new JSONModel(oFlpConfig), "Full");
 
             let iHierarchyCount = 0;
-            Object.keys(oTabBarFilter).forEach(function (sLevelOneProp) {
+            Object.keys(oTabBarFilter).forEach((sLevelOneProp) => {
                 sSelectedKey = sLevelOneProp;
                 // get hierarchy level to expand levels in tree table and expand them by default after a search
                 if (oFlpConfigSearch[sSelectedKey] && Array.isArray(oFlpConfigSearch[sSelectedKey])) {
-                    oFlpConfigSearch[sSelectedKey].forEach(function (sProperty, iPropIndex) {
+                    oFlpConfigSearch[sSelectedKey].forEach((sProperty, iPropIndex) => {
                         const iHierarchyCountTmp = _getHierarchyDepth(oFlpConfigSearch[sSelectedKey][iPropIndex], sSelectedKey);
                         if (iHierarchyCount < iHierarchyCountTmp) {
                             iHierarchyCount = iHierarchyCountTmp;
@@ -299,111 +391,19 @@ sap.ui.define([
                     });
                 }
                 // minus 1 because last hierarchy level does not need to expanded but counts because its a hierarchy level as well
-                Element.getElementById("sap-ui-support-flpConfigurationPlugin-TreeTable" + sLevelOneProp).expandToLevel(iHierarchyCount - 1);
+                Element.getElementById(`sap-ui-support-flpConfigurationPlugin-TreeTable${sLevelOneProp}`).expandToLevel(iHierarchyCount - 1);
                 // set numbers of properties in UI
                 Element.getElementById(sLevelOneProp).setCount(_getPropertyCount(oFlpConfigSearch[sLevelOneProp], sLevelOneProp, 0));
             });
         } else {
             // set numbers of properties in UI
-            Object.keys(oTabBarFilter).forEach(function (sLevelOneProp) {
+            Object.keys(oTabBarFilter).forEach((sLevelOneProp) => {
                 Element.getElementById(sLevelOneProp).setCount(_getPropertyCount(oFlpConfig[sLevelOneProp], sLevelOneProp, 0));
             });
             Element.getElementById("sap-ui-support-flpConfigurationPlugin-TabBar").setModel(new JSONModel(oFlpConfig));
         }
     };
 
-    // get hierarchy level of properties for one specific level one element
-    function _getHierarchyDepth (oCurrentObject, sLevelOneProp) {
-        let iHierarchyDepth = 0;
-        if (oCurrentObject[sLevelOneProp]) {
-            oCurrentObject[sLevelOneProp].forEach(function (oProperty) {
-                const iTmpHierarchyDepth = _getHierarchyDepth(oProperty, sLevelOneProp);
-                if (iTmpHierarchyDepth > iHierarchyDepth) {
-                    iHierarchyDepth = iTmpHierarchyDepth;
-                }
-            });
-        }
-        return iHierarchyDepth + 1;
-    }
-
-    // get value of a property of a specific path
-    function _getValueForPath (oFlpConfig, aPath) {
-        for (let i = 0; i < aPath.length; i++) {
-            if (oFlpConfig) {
-                oFlpConfig = oFlpConfig[aPath[i]];
-            }
-        }
-        return oFlpConfig;
-    }
-
-    // get number of properties under a specific hierarchy level one property
-    // works like recursive depth first search
-    function _getPropertyCount (oCurrentObject, sLevelOneProp, iPropertyCounter) {
-        if (Array.isArray(oCurrentObject)) {
-            oCurrentObject.forEach(function (oCurrentProp) {
-                if (oCurrentProp[sLevelOneProp]) {
-                    iPropertyCounter = _getPropertyCount(oCurrentProp[sLevelOneProp], sLevelOneProp, iPropertyCounter);
-                } else {
-                    iPropertyCounter += 1;
-                }
-            });
-            return iPropertyCounter;
-        } return undefined;
-    }
-
-    // set value of a property of a specific path
-    function _setValueFromPath (oFlpConfigSearch, sValue, sPath) {
-        const aPath = sPath.split(",");
-        for (let i = 0; i < aPath.length - 1; i++) {
-            oFlpConfigSearch = oFlpConfigSearch[aPath[i]];
-        }
-        oFlpConfigSearch[aPath[aPath.length - 1]] = sValue;
-    }
-
-    // build an object containing arrays and objects from a path
-    function _createObjectFromPath (oFlpConfigSearch, aPath, oValue, sLevelOneProp, iPathLength) {
-        if (aPath.length === 1) {
-            oFlpConfigSearch[aPath[0]] = oValue;
-        } else {
-            const aPathCurrent = aPath.shift();
-            oFlpConfigSearch[aPathCurrent] =
-                _createObjectFromPath(typeof oFlpConfigSearch[aPathCurrent] === "undefined" ? {} : oFlpConfigSearch[aPathCurrent],
-                    aPath, oValue, sLevelOneProp, iPathLength);
-        }
-        // in case the level has properties "{levelOneProp}", "value", "property" delete "value" because it is not the last level
-        if (oFlpConfigSearch[sLevelOneProp] && oFlpConfigSearch.property && oFlpConfigSearch.value) {
-            delete oFlpConfigSearch.value;
-            oFlpConfigSearch.property = "";
-        }
-        return oFlpConfigSearch;
-    }
-
-    // get properties under a specific hierarchy level one property that fit to a search value
-    // depth first search
-    function _searchForProperties (oCurrentObject, sProperty, sPath, aPathsFound, sSearchQuery) {
-        oCurrentObject.forEach(function (element, index) {
-            // if there are deeper levels go into
-            if (element[sProperty]) {
-                // build path with current array index and level one property
-                sPath = sPath + "." + index + "." + sProperty;
-                sPath = _searchForProperties(element[sProperty], sProperty, sPath, aPathsFound, sSearchQuery);
-                // check if property name contains search query
-            } else if (element.property.indexOf(sSearchQuery) > -1) {
-                sPath = sPath + "." + index;
-                aPathsFound.push(sPath);
-                // path must be reduced to one level higher path so that path stays in its level e.g.
-                // renderers.0.renderers.0 -> renderers.0.renderers
-                sPath = sPath.substring(0, sPath.lastIndexOf("."));
-            }
-        });
-        // see path reducing above, go to previous level
-        sPath = sPath.substring(0, sPath.lastIndexOf("."));
-        if (isNaN(parseInt(sPath.substr(sPath.lastIndexOf(".") + 1), 10))) {
-            return sPath;
-        }
-        return sPath.substring(0, sPath.lastIndexOf("."));
-    }
-
     // returns top level node of constructed hierarchical array
     // it is recursive, depth first search
     function _createNewConfigJSON (oCurrentObject, sPropertyKey) {
@@ -411,7 +411,7 @@ sap.ui.define([
         if (typeof oCurrentObject !== "object") {
             return [{ property: sPropertyKey, value: oCurrentObject }];
         }
-        return Object.keys(oCurrentObject).map(function (sPropertyName) {
+        return Object.keys(oCurrentObject).map((sPropertyName) => {
             // produce the nth element
             const oResult = { property: sPropertyName };
             const vValue = oCurrentObject[sPropertyName];
@@ -440,7 +440,7 @@ sap.ui.define([
      *   - it prepares the data for being sent by the plugin framework
      */
     FlpConfigurationPlugin.prototype.prepareForSending = function (oFlpConfig, oPreparedConfig) {
-        Object.keys(oFlpConfig).forEach(function (sKey) {
+        Object.keys(oFlpConfig).forEach((sKey) => {
             const oCurrentElement = oFlpConfig[sKey];
             switch (typeof oCurrentElement) {
                 case "object":
@@ -464,13 +464,13 @@ sap.ui.define([
                     oPreparedConfig[sKey] = oFlpConfig[sKey];
                     return;
             }
-        }.bind(this));
+        });
     };
 
     // build new config JSON with structure usable for data binding
     FlpConfigurationPlugin.prototype.getNewConfigJSON = function (oFlpConfig) {
         const oNewConfigJSON = {};
-        Object.keys(oFlpConfig).forEach(function (sLevelOneElement) {
+        Object.keys(oFlpConfig).forEach((sLevelOneElement) => {
             oNewConfigJSON[sLevelOneElement] = _createNewConfigJSON(oFlpConfig[sLevelOneElement], sLevelOneElement);
         });
         return oNewConfigJSON;
@@ -510,14 +510,14 @@ sap.ui.define([
                 });
 
                 // each hierarchy level one property gets an own tab filter
-                Object.keys(this.flpConfig).forEach(function (element, index) {
+                Object.keys(this.flpConfig).forEach((element, index) => {
                     oTabBar.insertItem(new IconTabFilter(element, {
                         key: element,
                         text: element,
                         count: oCountTabBar[element],
                         content: [
-                            new TreeTable("sap-ui-support-flpConfigurationPlugin-TreeTable" + element, {
-                                rows: "{/" + element + "/}",
+                            new TreeTable(`sap-ui-support-flpConfigurationPlugin-TreeTable${element}`, {
+                                rows: `{/${element}/}`,
                                 selectionMode: SelectionMode.None,
                                 enableCellFilter: true,
                                 extension: [

package/src/main/js/sap/ushell/themes/base/ShellBar.less

@@ -5,5 +5,6 @@
 // sapUshellFixedPadding is used to add more specificty
 // and overwrite the responsive styling of the component
 .sapUshellFixedPadding .sapUshellShellBar {
-  padding-inline: 0.875rem;
+  padding-left: 0.875rem;
+  padding-right: 1rem;
 }

package/src/main/js/sap/ushell/themes/base/ShellHeader.less

@@ -33,7 +33,7 @@
   // and overwrite the responsive styling of the component
   .sapUshellShellHeader.sapUshellFixedPadding {
     padding-left: 0.625rem !important; /* 10px + 4px of the headbegin/headend === 14px according to the specification */
-    padding-right: 0.625rem !important;
+    padding-right: 0.750rem !important; /* 12px + 4px of the headbegin/headend === 16px according to the specification */
   }
 
   .sapUshellHeaderPlaceHolder {

package/src/main/js/sap/ushell/themes/base/ToolAreaItem.less

@@ -11,10 +11,11 @@
   width: 15rem;
   z-index: 1;
   overflow: hidden;
+  overflow-y: auto;
   transition: left 500ms ease;
 
   &.sapUshellToolAreaTextHidden {
-    width: 3.0625rem;
+    width: 4.25rem;
 
     .sapUshellToolAreaItemText {
       display: none;

package/src/main/js/sap/ushell/themes/sap_fiori_3/ShellBar.less

@@ -0,0 +1,9 @@
+/* ====================================== */
+/* CSS for the ui5-ShellBar (sap_fiori_3) */
+/* ====================================== */
+
+// sapUshellFixedPadding is used to add more specificty
+// and overwrite the responsive styling of the component
+.sapUshellFixedPadding .sapUshellShellBar {
+    padding-left: 0.375rem; // aligns SideNavigation panel and button for Quartz theme
+}

package/src/main/js/sap/ushell/themes/sap_fiori_3/ShellHeader.less

@@ -6,6 +6,12 @@
   background-color: @sapUiShellColor;
 }
 
+// sapUshellFixedPadding is used to add more specificty
+// and overwrite the responsive styling of the component
+.sapUshellShellHeader.sapUshellFixedPadding {
+  padding-left: 0.375rem !important; // aligns SideNavigation panel and button for Quartz theme
+}
+
 .sapUshellShellIco:focus,
 #userActionsMenuHeaderButton:focus,
 .sapUshellShellHeadItm:focus {

package/src/main/js/sap/ushell/themes/sap_fiori_3/library.source.less

@@ -24,6 +24,7 @@
 @import "PlusTile.less";
 @import "QuickAccess.less";
 @import "Section.less";
+@import "ShellBar.less";
 @import "ShellHeader.less";
 @import "ShellLayout.less";
 @import "SidePane.less";

package/src/main/js/sap/ushell/themes/sap_fiori_3_dark/ShellBar.less

@@ -0,0 +1,9 @@
+/* ====================================== */
+/* CSS for the ui5-ShellBar (sap_fiori_3_dark) */
+/* ====================================== */
+
+// sapUshellFixedPadding is used to add more specificty
+// and overwrite the responsive styling of the component
+.sapUshellFixedPadding .sapUshellShellBar {
+    padding-left: 0.375rem; // aligns SideNavigation panel and button for Quartz theme
+}

package/src/main/js/sap/ushell/themes/sap_fiori_3_dark/library.source.less

@@ -24,6 +24,7 @@
 @import "PlusTile.less";
 @import "QuickAccess.less";
 @import "Section.less";
+@import "ShellBar.less";
 @import "ShellHeader.less";
 @import "ShellLayout.less";
 @import "SidePane.less";

package/src/main/js/sap/ushell/themes/sap_fiori_3_hcb/ShellBar.less

@@ -0,0 +1,9 @@
+/* ====================================== */
+/* CSS for the ui5-ShellBar (sap_fiori_3_hcb) */
+/* ====================================== */
+
+// sapUshellFixedPadding is used to add more specificty
+// and overwrite the responsive styling of the component
+.sapUshellFixedPadding .sapUshellShellBar {
+    padding-left: 0.375rem; // aligns SideNavigation panel and button for Quartz theme
+}

package/src/main/js/sap/ushell/themes/sap_fiori_3_hcb/library.source.less

@@ -19,6 +19,7 @@
 @import "PictureTile.less";
 @import "PlusTile.less";
 @import "Section.less";
+@import "ShellBar.less";
 @import "ShellFloatingAction.less";
 @import "ShellHeader.less";
 @import "SidePane.less";

package/src/main/js/sap/ushell/themes/sap_fiori_3_hcw/ShellBar.less

@@ -0,0 +1,9 @@
+/* ====================================== */
+/* CSS for the ui5-ShellBar (sap_fiori_3_hcw) */
+/* ====================================== */
+
+// sapUshellFixedPadding is used to add more specificty
+// and overwrite the responsive styling of the component
+.sapUshellFixedPadding .sapUshellShellBar {
+    padding-left: 0.375rem; // aligns SideNavigation panel and button for Quartz theme
+}

package/src/main/js/sap/ushell/themes/sap_fiori_3_hcw/library.source.less

@@ -19,6 +19,7 @@
 @import "PictureTile.less";
 @import "PlusTile.less";
 @import "Section.less";
+@import "ShellBar.less";
 @import "ShellFloatingAction.less";
 @import "ShellHeader.less";
 @import "SidePane.less";

package/src/main/js/sap/ushell/themes/sap_hcb/base_ShellHeader.less

@@ -26,7 +26,7 @@
   // and overwrite the responsive styling of the component
   .sapUshellShellHeader.sapUshellFixedPadding {
     padding-left: 0.625rem !important; /* 10px + 4px of the headbegin/headend === 14px according to the specification */
-    padding-right: 0.625rem !important;
+    padding-right: 0.750rem !important; /* 12px + 4px of the headbegin/headend === 16px according to the specification */
   }
 
   .sapUshellHeaderPlaceHolder {