@salesforcedevs/dx-components 1.3.251 → 1.3.253

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

@@ -1,7 +1,7 @@
 <template>
     <div class={containerClass}>
         <div
-            if:true={mobile}
+            lwc:if={mobile}
             class="header padding-horizontal"
             onclick={onToggleClick}
         >
@@ -16,23 +16,19 @@
                     <dx-icon
                         sprite="utility"
                         symbol={menuSymbol}
-                        color="blue-vibrant-20"
+                        color="blue-vibrant-50"
+                        size="medium"
                     ></dx-icon>
                 </dx-button>
             </div>
         </div>
 
-        <template if:true={expanded}>
-            <div class="padding-horizontal">
-                <div class="header" if:false={mobile}>
+        <template lwc:if={expanded}>
+            <div class="sidebar-header" show-shadow={showBoxShadow}>
+                <div class="header padding-horizontal" lwc:if={isDesktop}>
                     <h2 class="dx-text-display-6 header-title">{header}</h2>
-                    <slot name="header"></slot>
                 </div>
-                <div class="mobile-header" if:true={mobile}>
-                    <h2 class="dx-text-display-6">{header}</h2>
-                    <slot name="header"></slot>
-                </div>
-                <div class="search">
+                <div class="search padding-horizontal">
                     <dx-input
                         class="search-box"
                         type="search"
@@ -46,10 +42,12 @@
                         shortcut-key="j"
                     ></dx-input>
                 </div>
+                <slot name="version-picker"></slot>
             </div>
             <div
-                class="sidebar-content sidebar-content-tree"
-                if:true={anyResultMatch}
+                class={sidebarContentClass}
+                lwc:if={anyResultMatch}
+                onscroll={handleScroll}
             >
                 <dx-tree
                     for:each={filteredTrees}
@@ -68,8 +66,27 @@
                 title="No Results"
                 body={emptyStateBody}
                 suggestions={emptyStateSuggestions}
-                if:false={anyResultMatch}
+                lwc:else
             ></dx-empty-state>
+            <div lwc:if={hasMobileSidebarFooter} class="footer-nav">
+                <dx-sidebar-footer-nav
+                    lang-value-path={langValuePath}
+                    language={language}
+                    languages={languages}
+                ></dx-sidebar-footer-nav>
+            </div>
+        </template>
+
+        <template lwc:if={isDesktop}>
+            <div lwc:if={hasSidebarFooter} class="footer-nav">
+                <dx-sidebar-footer-nav
+                    lang-value-path={langValuePath}
+                    language={language}
+                    languages={languages}
+                    bail-href={bailHref}
+                    bail-label={bailLabel}
+                ></dx-sidebar-footer-nav>
+            </div>
         </template>
     </div>
 </template>

package/src/modules/dx/sidebarOld/sidebarOld.ts

@@ -11,15 +11,6 @@ const MOBILE_SIZE_MATCH = "768px";
 export default class Sidebar extends SidebarBase {
     @api header: string = "";
 
-    @api
-    get value() {
-        return this._value;
-    }
-
-    set value(value) {
-        this._value = value;
-    }
-
     @api
     get trees() {
         return this._trees;
@@ -37,13 +28,10 @@ export default class Sidebar extends SidebarBase {
         this.assignFilteredTrees();
     }
 
-    private expanded: boolean = true;
     private _searchTimeout?: number;
-    private _value?: string = undefined;
     private _trees!: Array<TreeNode>;
 
     private filteredTrees: Array<{ key: string; tree: TreeNode }> = [];
-    private mobile: boolean = true;
     private searchText: string = "";
     private matchMedia!: MediaQueryList;
     private valueToLabel: { [key: string]: string } = {};
@@ -82,6 +70,10 @@ export default class Sidebar extends SidebarBase {
         ]);
     }
 
+    private get isDesktop(): boolean {
+        return !this.mobile;
+    }
+
     connectedCallback() {
         this.matchMedia = window.matchMedia(
             `(max-width: ${MOBILE_SIZE_MATCH})`
@@ -101,32 +93,6 @@ export default class Sidebar extends SidebarBase {
         this.matchMedia.removeEventListener("change", this.onMediaChange);
     }
 
-    private onMediaChange = (event: MediaQueryListEvent | MediaQueryList) => {
-        this.mobile = event.matches;
-        this.expanded = !this.mobile;
-    };
-
-    private onSelect(event: CustomEvent) {
-        this._value = event.detail.name;
-
-        if (this.mobile) {
-            this.onToggleClick();
-        }
-    }
-
-    private onToggleClick() {
-        this.expanded = !this.expanded;
-        this.dispatchEvent(
-            new CustomEvent("togglesidebar", {
-                detail: {
-                    open: this.expanded,
-                    bubbles: true,
-                    composed: true
-                }
-            })
-        );
-    }
-
     /*
      * Debouncing this method: Do not apply searchText filter as long as this
      * function is being called to avoid running the recursivity logic very often.

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

@@ -8,29 +8,60 @@ 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-global-header-padding-horizontal);
+}
+
+.sidebar-item:not(.sidebar-item-selected):focus-visible {
+    padding: var(--dx-g-spacing-smd) 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: 0 var(--dx-g-spacing-lg) 0
+        var(--dx-g-global-header-padding-horizontal);
+    outline: none;
+
+    .search-result {
+        outline: var(--dx-g-spacing-2xs) solid var(--dx-g-blue-vibrant-40);
+        border-radius: var(--dx-g-spacing-2xs);
+        padding: var(--dx-g-spacing-smd) 0;
+    }
 }
 
 .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);
+    display: block;
 }
 
 .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);
 }

package/src/modules/dx/sidebarSearchResult/sidebarSearchResult.html

@@ -1,14 +1,20 @@
 <template>
     <a class={className} href={href} onclick={onClick}>
-        <span class="title search-text">
-            <template for:each={titleChunks} for:item="chunk">
-                <span class={chunk.class} key={chunk.id}>{chunk.value}</span>
-            </template>
-        </span>
-        <span class="description dx-text-body-3 sidebar-item-truncate-text">
-            <template for:each={descriptionChunks} for:item="chunk">
-                <span class={chunk.class} key={chunk.id}>{chunk.value}</span>
-            </template>
-        </span>
+        <div class="search-result">
+            <span class="title search-text">
+                <template for:each={titleChunks} for:item="chunk">
+                    <span class={chunk.class} key={chunk.id}>
+                        {chunk.value}
+                    </span>
+                </template>
+            </span>
+            <span class="description dx-text-body-3 sidebar-item-truncate-text">
+                <template for:each={descriptionChunks} for:item="chunk">
+                    <span class={chunk.class} key={chunk.id}>
+                        {chunk.value}
+                    </span>
+                </template>
+            </span>
+        </div>
     </a>
 </template>

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

@@ -11,22 +11,31 @@ 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;
-    align-items: center;
-    height: var(--dx-g-spacing-xl);
-    font-family: var(--dx-g-font-display);
-    white-space: nowrap;
+    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);
     color: var(--dx-g-blue-vibrant-20);
-    transition: var(--dx-g-transition-hue-1x);
-    cursor: pointer;
-    outline-offset: -1px;
 }
 
-.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_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_small {
@@ -46,8 +55,6 @@ 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,
@@ -76,11 +83,26 @@ button.nav-list-item:active > dx-icon,
 }
 
 .nav-list-item_default.state-active {
-    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));
+    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);
 }
 
 @media (max-width: 1160px) {
@@ -100,3 +122,10 @@ 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-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-global-header-padding-horizontal);
 }
 
 @media (max-width: 768px) {

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

@@ -23,21 +23,25 @@
     --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: calc(var(--dx-g-spacing-sm) + var(--dx-g-spacing-2xs))
+        calc(var(--dx-g-spacing-xs) + 2px)
+        calc(var(--dx-g-spacing-sm) + var(--dx-g-spacing-2xs)) 0;
 }
 
 .tile-label {
@@ -54,95 +58,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 +192,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
         });
     }