@salesforcedevs/dx-components 1.3.241-ux-alpha → 1.3.241-ux-alpha1

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/dx-components",
-    "version": "1.3.241-ux-alpha",
+    "version": "1.3.241-ux-alpha1",
     "description": "DX Lightning web components",
     "license": "MIT",
     "engines": {

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

@@ -15,7 +15,7 @@ dx-empty-state {
 
 .sidebar-content {
     overflow-y: auto;
-    padding-bottom: var(--dx-g-spacing-md);
+    padding: var(--dx-g-spacing-sm) 0 var(--dx-g-spacing-md);
 }
 
 .loading-skeleton {
@@ -53,6 +53,13 @@ dx-empty-state {
     --dx-c-button-secondary-color-hover: var(--dx-g-gray-80);
 }
 
+.results-heading {
+    --dx-g-text-body-color: var(--sds-g-gray-14);
+
+    margin-bottom: var(--dx-g-spacing-sm);
+    font-weight: var(--dx-g-font-bold);
+}
+
 @media (max-width: 768px) {
     :host {
         width: 100%;
@@ -61,8 +68,4 @@ dx-empty-state {
     .loading-skeleton {
         width: 100%;
     }
-
-    .sidebar-content-tree {
-        padding: 0 var(--dx-g-spacing-sm);
-    }
 }

package/src/modules/dx/sidebar/sidebar.html

@@ -22,7 +22,10 @@
             </div>
         </div>
 
-        <div class="sidebar-header padding-horizontal">
+        <div
+            class="sidebar-header padding-horizontal"
+            show-shadow={showBoxShadow}
+        >
             <div class="header" if:false={mobile}>
                 <h2 class="dx-text-display-6 header-title">{header}</h2>
                 <slot name="header"></slot>
@@ -42,7 +45,7 @@
                 ></dx-sidebar-search>
             </div>
             <h2
-                class="results-heading dx-text-display-8"
+                class="results-heading dx-text-body-3"
                 if:true={showResultsHeading}
             >
                 Results
@@ -83,7 +86,7 @@
                 size="small"
             ></dx-empty-state>
         </div>
-        <div class="sidebar-content sidebar-content-tree">
+        <div class={sidebarContentClass} onscroll={handleScroll}>
             <dx-tree
                 for:each={trees}
                 for:item="tree"

package/src/modules/dx/sidebar/sidebar.ts

@@ -175,7 +175,7 @@ export default class Sidebar extends SidebarBase {
         this.isSearchLoading = e.detail;
     }
 
-    private onSidebarSearchContentScroll() {
+    private onSidebarSearchContentScroll(scrollEvent) {
         if (this.isSearchLoading) {
             return;
         }
@@ -192,6 +192,7 @@ export default class Sidebar extends SidebarBase {
             this.requestedFetchMoreResults = true;
             search.fetchMoreResults();
         }
+        this.handleScroll(scrollEvent);
     }
 
     private initializeSearchScrollPosition() {

package/src/modules/dx/sidebarOld/sidebarOld.css

@@ -2,6 +2,7 @@
 
 .sidebar-content {
     overflow-y: auto;
+    padding-top: var(--dx-g-spacing-sm);
 }
 
 dx-empty-state {

package/src/modules/dx/sidebarOld/sidebarOld.html

@@ -23,7 +23,7 @@
         </div>
 
         <template if:true={expanded}>
-            <div class="padding-horizontal">
+            <div class="padding-horizontal" show-shadow={showBoxShadow}>
                 <div class="header" if:false={mobile}>
                     <h2 class="dx-text-display-6 header-title">{header}</h2>
                     <slot name="header"></slot>
@@ -48,8 +48,9 @@
                 </div>
             </div>
             <div
-                class="sidebar-content sidebar-content-tree"
+                class={sidebarContentClass}
                 if:true={anyResultMatch}
+                onscroll={handleScroll}
             >
                 <dx-tree
                     for:each={filteredTrees}

package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.css

@@ -8,29 +8,51 @@ a {
 }
 
 .sidebar-item {
-    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-md);
+    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg)
+        var(--dx-g-spacing-smd) var(--dx-g-spacing-2xl);
+}
+
+.sidebar-item:focus-visible {
+    margin: 0 calc(var(--dx-g-spacing-2xs) + 1px);
+    outline: 2px solid var(--dx-g-blue-vibrant-40);
+    border-radius: 2px;
 }
 
 .search-text {
-    font-size: var(--dx-g-text-xs);
+    font-size: var(--dx-g-text-sm);
     font-family: var(--dx-g-font-sans);
-    line-height: 18px;
+    line-height: var(--dx-g-text-lg);
+    font-weight: var(--dx-g-font-bold);
     overflow-wrap: break-word;
 }
 
 .description {
     -webkit-line-clamp: 3;
     overflow-wrap: break-word;
+
+    --dx-g-text-body-color: var(--dx-g-blue-vibrant-20);
+
+    font-weight: var(--dx-g-font-normal);
 }
 
 .title {
     color: var(--dx-g-text-heading-color);
 }
 
+.title:hover {
+    color: var(--dx-g-blue-vibrant-50);
+}
+
 .bold {
     font-weight: 700;
 }
 
 a > *:not(:last-child) {
-    margin-bottom: 2px;
+    margin-bottom: var(--dx-g-spacing-xs);
+}
+
+@media (max-width: 768px) {
+    .sidebar-item {
+        padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg);
+    }
 }

package/src/modules/dx/treeItem/treeItem.css

@@ -14,8 +14,8 @@ button:focus {
 }
 
 .tree-children-loading {
-    margin: var(--dx-g-spacing-sm) var(--dx-g-spacing-md) var(--dx-g-spacing-md)
-        var(--dx-g-spacing-md);
+    margin: var(--dx-g-spacing-sm) var(--dx-g-spacing-lg) var(--dx-g-spacing-md)
+        var(--dx-g-spacing-2xl);
 }
 
 @media (max-width: 768px) {

package/src/modules/dx/treeTile/treeTile.css

@@ -23,21 +23,23 @@
     --tile-height: 20px;
 
     font-family: var(--dx-g-font-sans);
-    font-size: 13px;
+    font-size: 14px;
     line-height: var(--tile-height);
+    font-weight: var(--dx-g-font-normal);
 }
 
 .tile-root {
-    font-family: var(--dx-g-font-display);
+    font-family: var(--dx-g-font-sans);
     font-size: var(--dx-g-text-sm);
-    font-weight: var(--dx-g-font-demi);
-    color: var(--dx-g-blue-vibrant-30);
+    font-weight: var(--dx-g-font-bold);
+    color: var(--dx-g-blue-vibrant-20);
     display: block;
 }
 
 .tile-icon {
     align-items: center;
     height: var(--tile-height);
+    padding-right: calc(var(--dx-g-spacing-xs) + 2px);
 }
 
 .tile-label {
@@ -54,95 +56,102 @@
 
 .tile-with-children .tile-expand-icon {
     order: 1;
-    padding-right: var(--dx-g-spacing-xs);
 }
 
 .indentation {
-    padding-left: var(--indentation);
+    padding-left: calc(var(--indentation) + var(--dx-g-spacing-2xs));
 }
 
 .tile-with-children .indentation {
     padding-left: calc(var(--indentation) - var(--base-indentation));
 }
 
+.tile-root-with-child .indentation {
+    padding-left: 0;
+}
+
+[aria-level="2"] {
+    --indentation: var(--dx-g-spacing-md);
+}
+
 [aria-level="3"] {
-    --indentation: var(--base-indentation);
+    --indentation: calc(2 * var(--base-indentation));
 }
 
 [aria-level="4"] {
-    --indentation: calc(2 * var(--base-indentation));
+    --indentation: calc(3 * var(--base-indentation));
 }
 
 [aria-level="5"] {
-    --indentation: calc(3 * var(--base-indentation));
+    --indentation: calc(4 * var(--base-indentation));
 }
 
 [aria-level="6"] {
-    --indentation: calc(4 * var(--base-indentation));
+    --indentation: calc(5 * var(--base-indentation));
 }
 
 [aria-level="7"] {
-    --indentation: calc(5 * var(--base-indentation));
+    --indentation: calc(6 * var(--base-indentation));
 }
 
 [aria-level="8"] {
-    --indentation: calc(6 * var(--base-indentation));
+    --indentation: calc(7 * var(--base-indentation));
 }
 
 [aria-level="9"] {
-    --indentation: calc(7 * var(--base-indentation));
+    --indentation: calc(8 * var(--base-indentation));
 }
 
 [aria-level="10"] {
-    --indentation: calc(8 * var(--base-indentation));
+    --indentation: calc(9 * var(--base-indentation));
 }
 
 [aria-level="11"] {
-    --indentation: calc(9 * var(--base-indentation));
+    --indentation: calc(10 * var(--base-indentation));
 }
 
 [aria-level="12"] {
-    --indentation: calc(10 * var(--base-indentation));
+    --indentation: calc(11 * var(--base-indentation));
 }
 
 [aria-level="13"] {
-    --indentation: calc(11 * var(--base-indentation));
+    --indentation: calc(12 * var(--base-indentation));
 }
 
 [aria-level="14"] {
-    --indentation: calc(12 * var(--base-indentation));
+    --indentation: calc(13 * var(--base-indentation));
 }
 
 [aria-level="15"] {
-    --indentation: calc(13 * var(--base-indentation));
+    --indentation: calc(14 * var(--base-indentation));
 }
 
 [aria-level="16"] {
-    --indentation: calc(14 * var(--base-indentation));
+    --indentation: calc(15 * var(--base-indentation));
 }
 
 [aria-level="17"] {
-    --indentation: calc(15 * var(--base-indentation));
+    --indentation: calc(16 * var(--base-indentation));
 }
 
 [aria-level="18"] {
-    --indentation: calc(16 * var(--base-indentation));
+    --indentation: calc(17 * var(--base-indentation));
 }
 
 [aria-level="19"] {
-    --indentation: calc(17 * var(--base-indentation));
+    --indentation: calc(18 * var(--base-indentation));
 }
 
 [aria-level="20"] {
-    --indentation: calc(18 * var(--base-indentation));
+    --indentation: calc(19 * var(--base-indentation));
 }
 
 [aria-level="21"] {
-    --indentation: calc(19 * var(--base-indentation));
+    --indentation: calc(20 * var(--base-indentation));
 }
 
 [aria-level="22"] {
-    --indentation: calc(20 * var(--base-indentation));
+    --indentation: calc(21 * var(--base-indentation));
 }
 
 dx-metadata-badge {
@@ -181,10 +190,10 @@ a {
 
 a:link,
 a:visited {
-    color: var(--dx-g-gray-10);
+    color: var(--dx-g-blue-vibrant-20);
 }
 
 a:visited.tile-root,
 a:link.tile-root {
-    color: var(--dx-g-blue-vibrant-30);
+    color: var(--dx-g-blue-vibrant-20);
 }

package/src/modules/dx/treeTile/treeTile.html

@@ -1,12 +1,6 @@
 <template>
     <a href={href} class={tileClass} target={target}>
         <div class="flex indentation" role="heading" aria-level={tileAriaLevel}>
-            <span
-                class="tile-label sidebar-item-truncate-text"
-                title={treeNode.label}
-            >
-                {treeNode.label}
-            </span>
             <div class="flex tile-expand-icon tile-icon" if:true={showArrow}>
                 <dx-icon
                     aria-expanded={isExpanded}
@@ -16,6 +10,12 @@
                     onclick={onClickIcon}
                 ></dx-icon>
             </div>
+            <span
+                class="tile-label sidebar-item-truncate-text"
+                title={treeNode.label}
+            >
+                {treeNode.label}
+            </span>
             <dx-metadata-badge
                 if:true={showMethod}
                 class="flex tile-icon"

package/src/modules/dx/treeTile/treeTile.ts

@@ -37,7 +37,7 @@ export default class TreeTile extends LightningElement {
     }
 
     private get iconSize() {
-        return this.isRoot ? "small" : "xsmall";
+        return "xsmall";
     }
 
     private get metadataBadgeColor(): string | undefined {
@@ -62,6 +62,7 @@ export default class TreeTile extends LightningElement {
         return cx("tile", "sidebar-item", {
             "tile-root": this.isRoot,
             "tile-with-children": !this.isRoot && this.hasChildren,
+            "tile-root-with-child": this.isRoot && this.showArrow,
             "sidebar-item-selected": this.isSelected
         });
     }

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

@@ -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,6 +49,29 @@ export class SidebarBase extends LightningElement {
         return this._sidebarContent;
     }
 
+    /**
+     * This method is to handle the scroll event for LNB and show box shadow
+     * @param scrollEvent
+     */
+    handleScroll(scrollEvent: any) {
+        const lnb = scrollEvent.target;
+
+        if (!this.scrolling) {
+            this.scrolling = true;
+            // Set a timeout to handle scroll event after a delay
+            setTimeout(() => {
+                // Check if lnb is scrolled
+                if (lnb.scrollTop > 0 && lnb.scrollHeight > lnb.clientHeight) {
+                    this.showBoxShadow = true;
+                } else {
+                    this.showBoxShadow = false;
+                }
+                // Reset scrolling back to false after handling the scroll
+                this.scrolling = false;
+            }, 200);
+        }
+    }
+
     renderedCallback(): void {
         /**
          * Implementing debouncing kind of logic here to scroll to selected element once tree rendering is done
@@ -125,4 +150,11 @@ export class SidebarBase extends LightningElement {
     private get hasSidebarFooter(): boolean {
         return this.languages?.length > 1 || Boolean(this.bailHref);
     }
+
+    private get sidebarContentClass(): string {
+        const sidebarConterCss = "sidebar-content sidebar-content-tree";
+        return this.hasSidebarFooter || this.hasMobileSidebarFooter
+            ? sidebarConterCss + " sidebar-content-hasfooter"
+            : sidebarConterCss;
+    }
 }

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

@@ -2,7 +2,7 @@
 @import "dxHelpers/text";
 
 :host {
-    --dx-c-sidebar-width: 275px;
+    --dx-c-sidebar-width: 337px;
     --dx-c-sidebar-button-color: var(--dx-g-blue-vibrant-50);
     --dx-c-sidebar-button-background: white;
     --dx-c-sidebar-button-border: white;
@@ -13,15 +13,6 @@
     --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
 }
 
-dx-tree {
-    border-top: 1px solid var(--dx-g-gray-90);
-}
-
-dx-tree:last-child {
-    border-bottom: 1px solid var(--dx-g-gray-90);
-    margin-bottom: var(--dx-g-spacing-sm);
-}
-
 .header {
     box-sizing: content-box;
     display: flex;
@@ -36,8 +27,11 @@ dx-tree:last-child {
 }
 
 .padding-horizontal {
-    padding-left: var(--dx-g-spacing-md);
-    padding-right: var(--dx-g-spacing-md);
+    padding: 0 var(--dx-g-spacing-lg) 0 var(--dx-g-spacing-2xl);
+}
+
+.padding-horizontal[show-shadow="true"] {
+    box-shadow: 0 4px 4px -2px var(--dx-g-gray-90);
 }
 
 .header-title {
@@ -119,7 +113,7 @@ dx-tree:last-child {
 }
 
 .search {
-    padding-bottom: var(--dx-g-spacing-md);
+    padding-bottom: var(--dx-g-spacing-smd);
 }
 
 .search-box {
@@ -147,9 +141,18 @@ dx-tree:last-child {
     align-items: center;
 }
 
-@media screen and (max-width: 768px) {
+.sidebar-content-hasfooter {
+    margin-bottom: var(--dx-g-spacing-2xl);
+}
+
+@media screen and (max-width: 1279px) {
+    .padding-horizontal {
+        padding-left: var(--dx-g-spacing-xl);
+    }
+}
+
+@media screen and (max-width: 767px) {
     .padding-horizontal {
         padding-left: var(--dx-g-spacing-lg);
-        padding-right: var(--dx-g-spacing-md);
     }
 }

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

@@ -10,12 +10,31 @@
     background: var(--dx-g-cloud-blue-vibrant-95);
     box-shadow: inset var(--dx-g-spacing-xs) 0 0 0 var(--dx-g-blue-vibrant-40);
     border-radius: 0;
+    color: var(--dx-g-blue-vibrant-40) !important;
 }
 
 .sidebar-item {
-    padding: 6px var(--dx-g-spacing-xl);
+    padding: 6px var(--dx-g-spacing-lg) 6px var(--dx-g-spacing-2xl);
+}
+
+.sidebar-item:focus-visible {
+    margin: 0 calc(var(--dx-g-spacing-2xs) + 1px);
+    outline: 2px solid var(--dx-g-blue-vibrant-40);
+    border-radius: 2px;
 }
 
 .sidebar-item:not(.sidebar-item-selected):hover {
     color: var(--dx-g-blue-vibrant-50);
 }
+
+@media (max-width: 1279px) {
+    .sidebar-item {
+        padding: 6px var(--dx-g-spacing-lg) 6px var(--dx-g-spacing-xl);
+    }
+}
+
+@media (max-width: 767px) {
+    .sidebar-item {
+        padding: 6px var(--dx-g-spacing-lg) 6px var(--dx-g-spacing-lg);
+    }
+}