@salesforcedevs/dx-components 1.3.241-ux-alpha1 → 1.3.242-alpha2

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

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

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

@@ -1,6 +1,12 @@
 <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}
@@ -10,12 +16,6 @@
                     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 "xsmall";
+        return this.isRoot ? "small" : "xsmall";
     }
 
     private get metadataBadgeColor(): string | undefined {
@@ -62,7 +62,6 @@ 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/headerBase/headerBase.ts

@@ -8,7 +8,7 @@ const VALID_BRANDS = [
     "analytics",
     "commerce",
     "employees",
-    "data-cloud",
+    "data",
     "industries",
     "integration",
     "learning",

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

@@ -1,6 +1,4 @@
-import { LightningElement, api } from "lwc";
-import type { OptionWithLink } from "typings/custom";
-import { toJson } from "dxUtils/normalizers";
+import { LightningElement } from "lwc";
 
 export const HEIGHT_OF_SIDEBAR_ITEM = 32;
 export const WAIT_TIME_BEFORE_SCROLL_IN_MS = 500;
@@ -10,35 +8,6 @@ export class SidebarBase extends LightningElement {
 
     selectedElement: HTMLElement | null = null;
     timerId: ReturnType<typeof setTimeout> | null = null;
-    _languages!: OptionWithLink[];
-    mobile: boolean = true;
-    expanded: boolean = true;
-    _value?: string = undefined;
-    showBoxShadow: boolean = false;
-    private scrolling: boolean = false;
-
-    @api langValuePath: string = "id";
-    @api language!: string;
-    @api bailHref!: string;
-    @api bailLabel!: string;
-
-    @api
-    get languages() {
-        return this._languages;
-    }
-
-    set languages(value) {
-        this._languages = toJson(value);
-    }
-
-    @api
-    get value() {
-        return this._value;
-    }
-
-    set value(value) {
-        this._value = value;
-    }
 
     get sidebarContent() {
         if (!this._sidebarContent) {
@@ -49,29 +18,6 @@ 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
@@ -116,45 +62,4 @@ export class SidebarBase extends LightningElement {
             this.selectedElement = null;
         }
     }
-
-    onMediaChange = (event: MediaQueryListEvent | MediaQueryList) => {
-        this.mobile = event.matches;
-        this.expanded = !this.mobile;
-    };
-
-    onSelect(event: CustomEvent) {
-        this._value = event.detail.name;
-
-        if (this.mobile) {
-            this.onToggleClick();
-        }
-    }
-
-    onToggleClick() {
-        this.expanded = !this.expanded;
-        this.dispatchEvent(
-            new CustomEvent("togglesidebar", {
-                detail: {
-                    open: this.expanded,
-                    bubbles: true,
-                    composed: true
-                }
-            })
-        );
-    }
-
-    private get hasMobileSidebarFooter(): boolean {
-        return this.mobile && this.languages?.length > 1 && this.expanded;
-    }
-
-    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/dxConstants/brands/brands.ts

@@ -2,7 +2,7 @@ import { Brand } from "typings/custom";
 
 export const BRANDS = [
     "employees",
-    "data-cloud",
+    "data",
     "marketing",
     "partners",
     "commerce",

package/src/modules/dxHelpers/commonHeader/commonHeader.css

@@ -58,7 +58,7 @@ header.state-show-mobile-nav .header_l2_group-nav_overflow {
 /* Second row */
 
 .header_l2 {
-    background: white;
+    background: var(--dx-g-brand-current-color-background);
     padding: var(--dx-g-spacing-lg) var(--dx-g-global-header-padding-horizontal);
 }
 
@@ -70,7 +70,6 @@ header.state-show-mobile-nav .header_l2_group-nav_overflow {
 
 .header_l2_group-title {
     flex-shrink: 0;
-    padding-right: var(--dx-g-spacing-xl);
 }
 
 .header_l2_group-title

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

@@ -2,7 +2,7 @@
 @import "dxHelpers/text";
 
 :host {
-    --dx-c-sidebar-width: 337px;
+    --dx-c-sidebar-width: 275px;
     --dx-c-sidebar-button-color: var(--dx-g-blue-vibrant-50);
     --dx-c-sidebar-button-background: white;
     --dx-c-sidebar-button-border: white;
@@ -13,6 +13,10 @@
     --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
 }
 
+dx-tree:not(:last-child) {
+    margin-bottom: var(--dx-g-spacing-sm);
+}
+
 .header {
     box-sizing: content-box;
     display: flex;
@@ -27,11 +31,8 @@
 }
 
 .padding-horizontal {
-    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);
+    padding-left: var(--dx-g-spacing-md);
+    padding-right: var(--dx-g-spacing-md);
 }
 
 .header-title {
@@ -52,7 +53,7 @@
 }
 
 .container {
-    background-color: white;
+    background-color: var(--dx-g-gray-95);
     display: flex;
     flex-direction: column;
     height: var(--dx-c-sidebar-height);
@@ -65,10 +66,10 @@
         var(--dx-c-sidebar-left-padding) - var(--dx-g-spacing-md)
     );
 
-    border-right: 1px solid var(--dx-g-gray-90);
     box-shadow: 2px 0 0 0 var(--border-color);
     min-height: var(--dx-c-sidebar-min-height);
-    padding: var(--dx-c-sidebar-vertical-padding) 0 var(--dx-g-spacing-2xs) 0;
+    padding: var(--dx-c-sidebar-vertical-padding) 0
+        var(--dx-c-sidebar-vertical-padding) var(--left-spacing);
     position: relative;
 }
 
@@ -113,7 +114,7 @@
 }
 
 .search {
-    padding-bottom: var(--dx-g-spacing-smd);
+    padding-bottom: var(--dx-g-spacing-md);
 }
 
 .search-box {
@@ -126,33 +127,9 @@
     white-space: nowrap;
 }
 
-.footer-nav {
-    display: flex;
-    padding: var(--dx-g-spacing-xs) var(--dx-g-spacing-sm)
-        var(--dx-g-spacing-xs) var(--dx-g-spacing-xl);
-    position: fixed;
-    bottom: 0;
-    left: 0;
-    width: inherit;
-    background: white;
-    border-top: 1px solid var(--dx-g-gray-90);
-    border-right: 1px solid var(--dx-g-gray-90);
-    height: var(--dx-g-spacing-2xl);
-    align-items: center;
-}
-
-.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) {
+@media screen and (max-width: 768px) {
     .padding-horizontal {
         padding-left: var(--dx-g-spacing-lg);
+        padding-right: var(--dx-g-spacing-md);
     }
 }

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

@@ -8,33 +8,14 @@
 
 .sidebar-item-selected {
     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);
+    box-shadow: inset var(--dx-g-spacing-xs) 0 0 0 var(--dx-g-blue-vibrant-60);
     border-radius: 0;
-    color: var(--dx-g-blue-vibrant-40) !important;
 }
 
 .sidebar-item {
-    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;
+    padding: 6px var(--dx-g-spacing-md);
 }
 
 .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);
-    }
+    background-color: var(--dx-g-gray-90);
 }

package/src/modules/dx/sidebarFooterNav/sidebarFooterNav.css

@@ -1,52 +0,0 @@
-@import "dxHelpers/reset";
-
-:host {
-    --button-primary-color: var(--dx-g-blue-vibrant-50);
-    --button-primary-color-hover: var(--dx-g-cloud-blue-vibrant-95);
-    --popover-container-open-transform: translateX(-4px) translateY(-8px);
-    --popover-transition: none;
-    --dx-c-dropdown-option-font-weight: normal;
-    --dx-c-dropdown-option-label-color: var(--dx-g-gray-10);
-}
-
-.footer-display {
-    display: flex;
-}
-
-.footer_lang-dropdown {
-    --dx-c-button-primary-color: var(--button-primary-color);
-    --border-color: var(--button-primary-color);
-
-    display: flex;
-    padding: 0 var(--dx-g-spacing-md);
-    height: var(--dx-g-spacing-xl);
-    border-radius: var(--dx-g-spacing-xs);
-    align-items: center;
-}
-
-.footer_lang-dropdown[aria-expanded="true"] {
-    background-color: var(--dx-g-cloud-blue-vibrant-95);
-
-    --border-color: var(--dx-g-cloud-blue-vibrant-95);
-}
-
-.footer_lang-dropdown:hover,
-.footer_lang-dropdown:active,
-.footer_lang-dropdown:focus,
-.pdf_bail-link:hover {
-    background-color: var(--button-primary-color-hover);
-
-    --border-color: var(--button-primary-color-hover);
-}
-
-.pdf_bail-link {
-    --dx-c-button-horizontal-spacing: var(--dx-g-spacing-sm);
-    --dx-c-button-priamry-color-hover: var(--dx-g-cloud-blue-vibrant-95);
-
-    padding: 0 var(--dx-g-spacing-md);
-    border-radius: var(--dx-g-spacing-xs);
-    margin-right: var(--dx-g-spacing-sm);
-    display: flex;
-    height: var(--dx-g-spacing-xl);
-    align-items: center;
-}

package/src/modules/dx/sidebarFooterNav/sidebarFooterNav.html

@@ -1,55 +0,0 @@
-<template>
-    <div if:false={mobile} class="footer-display">
-        <dx-button
-            if:true={hasBailLink}
-            aria-label={bailLabel}
-            class="pdf_bail-link"
-            href={bailHref}
-            onclick={handleBailClick}
-            variant="inline"
-            icon-size="medium"
-            icon-symbol="new_window"
-            target="_blank"
-        >
-            {bailLabel}
-        </dx-button>
-        <dx-dropdown
-            if:true={hasLanguages}
-            options={languages}
-            small
-            value-path={langValuePath}
-            value={language}
-            onchange={onLangChange}
-        >
-            <dx-button
-                class="footer_lang-dropdown"
-                aria-label="Select Language"
-                variant="inline"
-                icon-size="medium"
-                icon-symbol="world"
-            >
-                {languageLabel}
-            </dx-button>
-        </dx-dropdown>
-    </div>
-    <div if:true={mobile} class="footer-display">
-        <dx-dropdown
-            if:true={hasLanguages}
-            options={languages}
-            small
-            value-path={langValuePath}
-            value={language}
-            onchange={onLangChange}
-        >
-            <dx-button
-                class="footer_lang-dropdown"
-                aria-label="Select Language"
-                variant="inline"
-                icon-size="small"
-                icon-symbol="world"
-            >
-                {languageLabel}
-            </dx-button>
-        </dx-dropdown>
-    </div>
-</template>