@salesforcedevs/dx-components 1.3.243-newdocux-alpha5 → 1.3.243

package/src/modules/dx/tab/tab.css

@@ -11,31 +11,22 @@ a {
     );
 
     position: relative;
-    height: var(--dx-g-spacing-3xl);
-    border-radius: var(--dx-g-spacing-sm) var(--dx-g-spacing-sm) 0 0;
-}
-
-.nav-list-item_default {
-    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg);
-    justify-content: center;
     display: flex;
-    font-family: var(--dx-g-font-sans);
-    font-size: var(--dx-g-text-base);
-    line-height: var(--dx-g-spacing-lg);
-    font-weight: var(--dx-g-font-normal);
-}
-
-.nav-list-item_default:hover {
-    border-radius: var(--dx-g-spacing-sm) var(--dx-g-spacing-sm) 0 0;
-    background: var(--dx-g-cloud-blue-vibrant-95);
+    align-items: center;
+    height: var(--dx-g-spacing-xl);
+    font-family: var(--dx-g-font-display);
+    white-space: nowrap;
     color: var(--dx-g-blue-vibrant-20);
+    transition: var(--dx-g-transition-hue-1x);
+    cursor: pointer;
+    outline-offset: -1px;
 }
 
-.nav-list-item_default:focus-visible {
-    border-radius: var(--dx-g-spacing-sm) var(--dx-g-spacing-sm) 0 0;
-    background: var(--dx-g-cloud-blue-vibrant-95);
-    color: var(--dx-g-blue-vibrant-20);
-    outline: 2px solid var(--dx-g-blue-vibrant-60);
+.nav-list-item_default {
+    border: 0;
+    border-radius: var(--dx-g-spacing-md);
+    font-size: var(--dx-g-text-sm);
+    padding: 0 var(--horizontal-spacing);
 }
 
 .nav-list-item_small {
@@ -55,6 +46,8 @@ button.nav-list-item_small > dx-icon {
     margin-left: var(--dx-g-spacing-xs);
 }
 
+.nav-list-item_default:hover,
+.nav-list-item_default:active,
 :host([aria-expanded="true"]) button.nav-list-item_default {
     background: var(
         --dx-g-brand-current-button-color-background-inactive,
@@ -83,26 +76,11 @@ button.nav-list-item:active > dx-icon,
 }
 
 .nav-list-item_default.state-active {
-    color: var(--dx-g-blue-vibrant-50);
-    font-weight: var(--dx-g-font-bold);
-    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg)
-        var(--dx-g-spacing-sm) var(--dx-g-spacing-lg);
-    border-bottom: var(--dx-g-spacing-xs) solid var(--dx-g-blue-vibrant-50);
-}
-
-.nav-list-item_default.state-active:hover {
-    border-radius: var(--dx-g-spacing-sm) var(--dx-g-spacing-sm) 0 0;
-    background: var(--dx-g-cloud-blue-vibrant-95);
-    border-bottom: var(--dx-g-spacing-xs) solid var(--dx-g-blue-vibrant-20);
-    color: var(--dx-g-blue-vibrant-20);
-}
-
-.nav-list-item_default.state-active:focus-visible {
-    border-radius: var(--dx-g-spacing-sm) var(--dx-g-spacing-sm) 0 0;
-    background: var(--dx-g-cloud-blue-vibrant-95);
-    border-bottom: var(--dx-g-spacing-xs) solid var(--dx-g-blue-vibrant-20);
-    outline: 2px solid var(--dx-g-blue-vibrant-60);
-    color: var(--dx-g-blue-vibrant-20);
+    background: var(
+        --dx-g-brand-current-button-color-background-active,
+        var(--dx-g-brand-default-button-color-background-active)
+    );
+    color: var(--dx-g-brand-current-color, var(--dx-g-brand-default-color));
 }
 
 @media (max-width: 1160px) {
@@ -122,10 +100,3 @@ button.nav-list-item:active > dx-icon,
         );
     }
 }
-
-@media (max-width: 768px) {
-    .nav-list-item {
-        height: var(--dx-g-spacing-3xl);
-        display: flex;
-    }
-}

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-lg) var(--dx-g-spacing-md)
-        var(--dx-g-spacing-2xl);
+    margin: var(--dx-g-spacing-sm) var(--dx-g-spacing-md) var(--dx-g-spacing-md)
+        var(--dx-g-spacing-md);
 }
 
 @media (max-width: 768px) {

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: 0 calc(var(--dx-g-spacing-xs) + 2px) 0 var(--dx-g-spacing-sm);
 }
 
 .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/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,49 +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;
-    }
-
-    private get isDesktop(): boolean {
-        return !this.mobile;
-    }
 }

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

@@ -3,8 +3,6 @@
 
 :host {
     z-index: var(--dx-g-z-index-500);
-
-    --dx-g-doc-header-main-nav-height: 51px;
 }
 
 .header_l2_group-nav_overflow {
@@ -60,9 +58,8 @@ header.state-show-mobile-nav .header_l2_group-nav_overflow {
 /* Second row */
 
 .header_l2 {
-    background: white;
-    padding: var(--dx-g-spacing-smd) var(--dx-g-spacing-lg)
-        var(--dx-g-spacing-smd) var(--dx-g-global-header-padding-horizontal);
+    background: var(--dx-g-brand-current-color-background);
+    padding: var(--dx-g-spacing-lg) var(--dx-g-global-header-padding-horizontal);
 }
 
 .header_l2_group {
@@ -73,7 +70,6 @@ header.state-show-mobile-nav .header_l2_group-nav_overflow {
 
 .header_l2_group-title {
     flex-shrink: 0;
-    padding: var(--dx-g-spacing-smd) 0 calc(var(--dx-g-spacing-smd) - 1px) 0;
 }
 
 .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;
@@ -11,7 +11,10 @@
     --dx-c-sidebar-button-border-hover: var(--dx-g-blue-vibrant-50);
     --dx-c-sidebar-left-padding: var(--dx-g-global-header-padding-horizontal);
     --dx-c-sidebar-vertical-padding: var(--dx-g-spacing-md);
-    --doc-version-picker-width: 296px;
+}
+
+dx-tree:not(:last-child) {
+    margin-bottom: var(--dx-g-spacing-sm);
 }
 
 .header {
@@ -28,18 +31,12 @@
 }
 
 .padding-horizontal {
-    padding: 0 var(--dx-g-spacing-lg) 0 var(--dx-c-sidebar-left-padding);
-}
-
-.sidebar-header[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 {
-    line-height: 28px;
-    letter-spacing: -0.08px;
-    font-size: var(--dx-g-text-lg);
-    font-weight: var(--dx-g-font-demi);
+    line-height: inherit;
 }
 
 .header-toggle-icon {
@@ -56,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);
@@ -71,7 +68,8 @@
 
     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;
 }
 
@@ -104,7 +102,7 @@
 
 .container.container-mobile.collapsed {
     height: unset;
-    padding: 4px 0;
+    padding-bottom: 0;
 }
 
 .container.container-mobile.collapsed .header {
@@ -129,29 +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-global-header-padding-horizontal);
-    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: 767px) {
-    :host {
-        --doc-version-picker-width: calc(
-            100vw - var(--dx-c-sidebar-left-padding) - var(--dx-g-spacing-lg)
-        );
+@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,37 +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-global-header-padding-horizontal);
-}
-
-.sidebar-item:not(.sidebar-item-selected):focus-visible {
-    padding: calc(var(--dx-g-spacing-sm) - var(--dx-g-spacing-2xs)) 0;
-    margin: 0 var(--dx-g-spacing-lg) 0
-        var(--dx-g-global-header-padding-horizontal);
-    outline: var(--dx-g-spacing-2xs) solid var(--dx-g-blue-vibrant-40);
-    border-radius: var(--dx-g-spacing-2xs);
-}
-
-.sidebar-item-selected:focus-visible {
-    padding-top: 0;
-    padding-bottom: 0;
-    outline: none;
-
-    .indentation {
-        outline: var(--dx-g-spacing-2xs) solid var(--dx-g-blue-vibrant-40);
-        border-radius: var(--dx-g-spacing-2xs);
-        padding-top: calc(var(--dx-g-spacing-sm) - var(--dx-g-spacing-2xs));
-        padding-bottom: calc(var(--dx-g-spacing-sm) - var(--dx-g-spacing-2xs));
-    }
+    padding: 6px var(--dx-g-spacing-md);
 }
 
 .sidebar-item:not(.sidebar-item-selected):hover {
-    color: var(--dx-g-blue-vibrant-50);
+    background-color: var(--dx-g-gray-90);
 }

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

@@ -1,49 +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-item {
-    display: flex;
-    height: var(--dx-g-spacing-xl);
-    align-items: center;
-    border-radius: var(--dx-g-spacing-xs);
-}
-
-.footer-display {
-    display: flex;
-}
-
-.footer_lang-dropdown {
-    --dx-c-button-primary-color: var(--button-primary-color);
-    --dx-c-button-secondary-color-hover: var(--button-primary-color-hover);
-    --border-color: var(--button-primary-color);
-}
-
-.footer_lang-dropdown[aria-expanded="true"] {
-    --dx-c-button-secondary-color-hover: var(--dx-g-cloud-blue-vibrant-95);
-    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-40);
-}
-
-.footer_lang-dropdown:hover,
-.footer_lang-dropdown:active,
-.pdf_bail-link:hover {
-    /* background-color: var(--button-primary-color-hover);
-
-    --border-color: var(--button-primary-color-hover); */
-    --dx-c-button-secondary-color-hover: var(--dx-g-cloud-blue-vibrant-95);
-    --dx-c-button-primary-color: var(--dx-g-blue-vibrant-40);
-}
-
-.pdf_bail-link {
-    --dx-c-button-secondary-color-hover: var(--button-primary-color-hover);
-    --dx-c-button-primary-color: var(--button-primary-color);
-
-    margin-right: var(--dx-g-spacing-sm);
-}