@salesforcedevs/dx-components 1.40.0-integration-alpha → 1.40.0-integration-alpha2

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforcedevs/dx-components",
-  "version": "1.40.0-integration-alpha",
+  "version": "1.40.0-integration-alpha2",
   "description": "DX Lightning web components",
   "license": "MIT",
   "engines": {

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

@@ -26,6 +26,11 @@
     margin-right: var(--dx-g-spacing-lg);
 }
 
+.tree-item-row-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);
+}
+
 button {
     width: 100%;
     text-align: left;

package/src/modules/dx/treeItem/treeItem.html

@@ -1,5 +1,5 @@
 <template>
-    <div class="tree-item-row">
+    <div class={rowClass}>
         <dx-tree-tile
             href={href}
             is-root={isRoot}
@@ -7,6 +7,7 @@
             is-expanded={isExpanded}
             has-children={hasChildren}
             is-selected={isSelected}
+            is-contained-selection={isContainedSelection}
             oniconclick={onIconClick}
             show-arrow={isParent}
             target={target}

package/src/modules/dx/treeItem/treeItem.ts

@@ -51,6 +51,16 @@ export default class TreeItem extends LightningElement {
         return this._treeNode.key === this.selectedKey && !this.isExternalLink;
     }
 
+    private get rowClass(): string {
+        return this.isSelected && this.showVersionPicker
+            ? "tree-item-row tree-item-row-selected"
+            : "tree-item-row";
+    }
+
+    private get isContainedSelection(): boolean {
+        return this.isSelected && this.showVersionPicker;
+    }
+
     private get hasChildren(): boolean {
         return !!(
             this.treeNode &&

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

@@ -28,6 +28,7 @@ export default class TreeTile extends LightningElement {
     @api isExpanded = false;
     @api hasChildren = false;
     @api isSelected = false;
+    @api isContainedSelection = false;
     @api href!: string;
     @api showArrow = false;
     @api target!: string;
@@ -80,7 +81,10 @@ export default class TreeTile extends LightningElement {
             "tile-root": this.isRoot,
             "tile-with-children": !this.isRoot && this.hasChildren,
             "tile-root-with-child": this.isRoot && this.showArrow,
-            "sidebar-item-selected": this.isSelected,
+            "sidebar-item-selected":
+                this.isSelected && !this.isContainedSelection,
+            "sidebar-item-selected-text":
+                this.isSelected && this.isContainedSelection,
             "tile-with-version-picker": this.hasVersionPicker
         });
     }

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

@@ -13,6 +13,10 @@
     color: var(--dx-g-blue-vibrant-40) !important;
 }
 
+.sidebar-item-selected-text {
+    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);

package/src/modules/dxUtils/topicVersion/topicVersion.ts

@@ -21,6 +21,10 @@ export type VersionedNode = {
     };
     children?: VersionedNode[];
     versions?: TopicVersionOption[];
+    /** Set on Redoc spec tiles after the docs layout decorates the TOC. */
+    showForwardArrow?: boolean;
+    /** Docs TOC topic type (`markdown` | `spec`). May be stripped after decoration. */
+    topicType?: string;
 };
 
 type VersionPathDelta = {
@@ -113,14 +117,19 @@ export function isParentOnlyTopic(node: VersionedNode | undefined): boolean {
     return !ownHref && !!node.children?.length;
 }
 
+function isSpecNode(node: VersionedNode): boolean {
+    return node.showForwardArrow === true || node.topicType === "spec";
+}
+
 /**
- * First descendant that has a page (own href/name). Used so parent-only
- * sections select and navigate to content instead of an empty header.
+ * First descendant that has a markdown page (own href/name). Specs (Redoc)
+ * and external links are skipped so parent-only sections land on the first
+ * markdown topic even when a spec is authored first in the TOC.
  */
 export function firstContentNode(
     node: VersionedNode | undefined
 ): VersionedNode | undefined {
-    if (!node || node.link?.target === "_blank") {
+    if (!node || node.link?.target === "_blank" || isSpecNode(node)) {
         return undefined;
     }
     if (node.link?.href || node.name) {