@salesforcedevs/dx-components 1.3.210-lnb18-alpha → 1.3.210-lnb19-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.210-lnb18-alpha",
+    "version": "1.3.210-lnb19-alpha",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

package/src/modules/dx/sidebar/sidebar.css

@@ -15,9 +15,7 @@ dx-empty-state {
 
 .sidebar-content {
     overflow-y: auto;
-    padding-bottom: var(--dx-g-spacing-md);
-    margin-bottom: var(--dx-g-spacing-2xl);
-    padding-top: var(--dx-g-spacing-sm);
+    padding: var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-md);
 }
 
 .loading-skeleton {

package/src/modules/dxBaseElements/sidebarBase/sidebarBase.ts

@@ -1,4 +1,4 @@
-import { LightningElement, api, track } from "lwc";
+import { LightningElement, api } from "lwc";
 import type { OptionWithLink } from "typings/custom";
 import { toJson } from "dxUtils/normalizers";
 
@@ -14,6 +14,8 @@ export class SidebarBase extends LightningElement {
     mobile: boolean = true;
     expanded: boolean = true;
     _value?: string = undefined;
+    showBoxShadow: boolean = false;
+    private scrolling: boolean = false;
 
     @api langValuePath: string = "id";
     @api language!: string;
@@ -47,9 +49,6 @@ export class SidebarBase extends LightningElement {
         return this._sidebarContent;
     }
 
-    @track showBoxShadow = false;
-    private scrolling = false;
-
     /**
      * This method is to handle the scroll event for LNB and show box shadow
      * @param scrollEvent

package/src/modules/dxHelpers/commonSidebar/commonSidebar.css

@@ -27,13 +27,12 @@
 }
 
 .padding-horizontal {
-    padding-left: var(--dx-g-spacing-2xl);
-    padding-right: var(--dx-g-spacing-lg);
+    padding: 0 var(--dx-g-spacing-lg) 0 var(--dx-g-spacing-2xl);
     border-bottom: 1px solid var(--dx-g-gray-90);
 }
 
 .padding-horizontal[show-shadow="true"] {
-    box-shadow: var(--dx-g-box-shadow-sm);
+    box-shadow: 0 4px 4px -2px var(--dx-g-gray-90);
 }
 
 .header-title {
@@ -141,6 +140,7 @@
     border-right: 1px solid var(--dx-g-gray-90);
     height: var(--dx-g-spacing-2xl);
     align-items: center;
+    margin-top: var(--dx-g-spacing-2xl);
 }
 
 @media screen and (max-width: 1279px) {

package/src/modules/dxHelpers/commonTreeItem/commonTreeItem.css

@@ -18,10 +18,7 @@
 }
 
 .sidebar-item:focus-visible {
-    padding-left: 0;
-    margin-left: var(--dx-g-spacing-2xl);
-    padding-right: 0;
-    margin-right: var(--dx-g-spacing-lg);
+    margin: 0 calc(var(--dx-g-spacing-2xs) + 1px);
     outline: 2px solid var(--dx-g-blue-vibrant-40);
     border-radius: 2px;
 }