@salesforcedevs/docs-components 1.35.0-ver-picker-1 → 1.40.0-docs-feedback-3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@salesforcedevs/docs-components",
-  "version": "1.35.0-ver-picker-1",
+  "version": "1.40.0-docs-feedback-3",
   "description": "Docs Lightning web components for DSC",
   "license": "MIT",
   "main": "index.js",

package/src/modules/doc/header/header.ts

@@ -74,6 +74,13 @@ export default class Header extends HeaderBase {
         return (this.hideDocHeader && !this.mobile) || this.showDocDivider;
     }
 
+    private get isDocsPath(): boolean {
+        return (
+            window.location.pathname.includes("/docs/") &&
+            window.location.pathname !== "/docs/apis"
+        );
+    }
+
     connectedCallback(): void {
         super.connectedCallback();
         this.tabletMatchMedia = window.matchMedia(
@@ -83,9 +90,7 @@ export default class Header extends HeaderBase {
         this.tabletMatchMedia.addEventListener("change", this.onTabletChange);
 
         if (
-            (!this.shouldHideHeader &&
-                window.location.pathname.includes("/docs/") &&
-                window.location.pathname !== "/docs/apis") ||
+            (!this.shouldHideHeader && this.isDocsPath) ||
             window.location.pathname ===
                 "/tableau/embedding-playground/overview" ||
             isStorybook()
@@ -109,6 +114,12 @@ export default class Header extends HeaderBase {
         );
     }
 
+    renderedCallback(): void {
+        if (this.hideDocHeader) {
+            this.shouldRender = !this.shouldHideHeader && this.isDocsPath;
+        }
+    }
+
     private onTabletChange = (e: MediaQueryListEvent | MediaQueryList) =>
         (this.tablet = e.matches);
 

package/src/modules/doc/unifiedContentLayout/unifiedContentLayout.ts

@@ -10,11 +10,38 @@ import type { OptionWithLink, TreeNode } from "typings/custom";
  */
 const TOPIC_TYPE_SPEC = "spec";
 
+/**
+ * Walks down the first-child chain and returns the first markdown content
+ * page found, descending through nested content-less parents. Returns
+ * undefined if the chain breaks on a spec or external link before reaching a
+ * content page.
+ */
+function firstChildContentPage(node: TreeNode): TreeNode | undefined {
+    const firstChild = node.children?.[0];
+    if (!firstChild) {
+        return undefined;
+    }
+
+    const isSpec =
+        (firstChild as { topicType?: string }).topicType === TOPIC_TYPE_SPEC;
+    const isExternal = firstChild.link?.target === "_blank";
+    if (isSpec || isExternal) {
+        return undefined;
+    }
+
+    if (firstChild.link?.href) {
+        return firstChild;
+    }
+
+    return firstChildContentPage(firstChild);
+}
+
 /**
  * Translates per-topic `topicType` into the generic `showForwardArrow` flag
- * that `dx-tree-tile` reads (spec topics get the forward arrow icon for Redoc).
+ * that `dx-tree-tile` reads (spec topics get the forward arrow icon for Redoc),
+ * and redirects content-less parent topics whose first child is a content page
  */
-function decorateTopicsWithForwardArrow(
+function decorateTopics(
     topics: Array<TreeNode & { topicType?: string }> | undefined
 ): TreeNode[] | undefined {
     return topics?.map((topic) => {
@@ -23,10 +50,23 @@ function decorateTopicsWithForwardArrow(
             decorated.showForwardArrow = true;
         }
         if (decorated.children) {
-            decorated.children = decorateTopicsWithForwardArrow(
-                decorated.children
-            );
+            decorated.children = decorateTopics(decorated.children);
         }
+
+        /** Redirect a parent that has no content of its own to its first child
+         * but only when that first child is itself a content page
+         */
+        const isContentlessParent =
+            !!decorated.children?.length && !decorated.link?.href;
+
+        if (isContentlessParent) {
+            decorated.redirectToChild = true;
+            const firstChild = firstChildContentPage(topic);
+            if (firstChild?.link) {
+                decorated.link = { ...firstChild.link };
+            }
+        }
+
         return decorated;
     });
 }
@@ -77,9 +117,7 @@ export default class UnifiedContentLayout extends LightningElement {
     }
 
     set sidebarContent(value: string) {
-        this._sidebarContent = decorateTopicsWithForwardArrow(
-            toJson(value)?.topics
-        );
+        this._sidebarContent = decorateTopics(toJson(value)?.topics);
     }
 
     private get enableFooter(): boolean {

package/src/modules/doc/versionPicker/versionPicker.css

@@ -62,117 +62,3 @@ dx-type-badge.not-latest-badge {
 
     margin-left: var(--dx-g-spacing-sm);
 }
-
-/* ------------------------------------------------------------------ *
- * Small "dot" variant (opt-in via `small`). Additive 
- * ------------------------------------------------------------------ */
-
-/* Scoped hooks so the shared dx-popover/dx-dropdown-option keep their defaults. */
-.version-picker-dropdown-small {
-    --dx-c-dropdown-option-font-size: var(--dx-g-text-xs);
-    --dx-c-dropdown-option-padding: var(--dx-g-spacing-sm)
-        var(--dx-g-spacing-lg);
-    --dx-c-dropdown-option-border-radius: 0;
-    --dx-c-popover-border: none;
-    --dx-c-popover-padding: var(--dx-g-spacing-sm) 0;
-}
-
-.version-picker-button-small {
-    display: flex;
-    width: fit-content;
-    max-width: 104px;
-    border-radius: var(--dx-g-spacing-xs);
-
-    --dx-c-button-font-size: var(--dx-g-text-xs);
-    --dx-c-button-font-weight: var(--dx-g-font-normal);
-    --dx-c-button-line-height: 18px;
-    --dx-g-button-icon-color: var(--dx-g-gray-50);
-    --dx-g-spacing-sm: var(--dx-g-spacing-2xs);
-}
-
-/* min-width: 0 on each flex ancestor lets the label truncate: a flex item's
-   default min-width: auto refuses to shrink below its content and overrides the
-   host's max-width, so without this the trigger overflows instead. */
-.version-picker-button-small::part(content) {
-    display: flex;
-    flex: 1;
-    min-width: 0;
-    width: auto;
-    overflow: hidden;
-}
-
-/* Border is an inset box-shadow, not a real border, so thickening it on
-   hover/focus doesn't widen the fit-content box (no horizontal shift). */
-.version-picker-button-small::part(container) {
-    box-sizing: border-box;
-
-    /* width:100% re-ties to the 104px-capped host (container is width:inherit,
-       which copies width but not max-width). */
-    width: 100%;
-    height: 24px;
-    padding: 0 var(--dx-g-spacing-xs);
-    border-radius: var(--dx-g-spacing-xs);
-    background: #fff;
-    box-shadow: inset 0 0 0 1px var(--dx-g-gray-50);
-    color: var(--dx-g-gray-10);
-}
-
-.version-picker-button-small::part(container):hover {
-    background: var(--dx-g-blue-vibrant-95);
-    box-shadow: inset 0 0 0 2px var(--dx-g-blue-vibrant-20);
-}
-
-.version-picker-button-small:hover,
-.version-picker-button-small:focus-within,
-.version-picker-button-small[aria-expanded="true"] {
-    --dx-g-button-icon-color: var(--dx-g-blue-vibrant-20);
-}
-
-/* Also matches aria-expanded so the ring stays while the menu is open (opening
-   moves focus into the menu, which would otherwise drop :focus-within). */
-.version-picker-button-small:focus-within::part(container),
-.version-picker-button-small[aria-expanded="true"]::part(container) {
-    background: var(--dx-g-blue-vibrant-95);
-    box-shadow: inset 0 0 0 2px var(--dx-g-blue-vibrant-20), 0 0 0 2px #fff,
-        0 0 0 4px var(--dx-g-blue-vibrant-60);
-}
-
-.selected-version-small {
-    flex: 1;
-    min-width: 0;
-}
-
-.version-picker-dot {
-    flex: 0 0 auto;
-    width: 8px;
-    height: 8px;
-    margin-right: var(--dx-g-spacing-xs);
-    border-radius: 50%;
-}
-
-.version-picker-dot-latest {
-    background: var(--dx-g-green-vibrant-60);
-}
-
-.version-picker-dot-not-latest {
-    background: var(--dx-g-yellow-vibrant-80);
-}
-
-.version-picker-readonly-small {
-    display: inline-flex;
-    align-items: center;
-    box-sizing: border-box;
-    width: fit-content;
-    max-width: 104px;
-    height: 24px;
-    margin: 0;
-    padding: 0 var(--dx-g-spacing-xs);
-    border: 1px solid var(--dx-g-gray-80);
-    border-radius: var(--dx-g-spacing-xs);
-    overflow: hidden;
-    color: var(--dx-g-gray-10);
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    font: var(--dx-g-font-normal) var(--dx-g-text-xs) / 18px
-        var(--dx-g-font-sans), sans-serif;
-}

package/src/modules/doc/versionPicker/versionPicker.html

@@ -1,43 +1,6 @@
 <template>
     <div lwc:if={showVersionPicker} class="version-picker-container">
-        <!-- Small read-only: plain value, no dropdown -->
-        <p lwc:if={readOnly} class="version-picker-readonly-small">
-            {selectedVersion.label}
-        </p>
-
-        <!-- Small "dot" variant -->
         <dx-dropdown
-            lwc:elseif={small}
-            class="version-picker-dropdown-small"
-            options={versions}
-            analytics-event="custEv_docVersionSelect"
-            analytics-payload={analyticsPayload}
-            value={selectedVersion.id}
-            onchange={onVersionChange}
-        >
-            <dx-button
-                class="version-picker-button version-picker-button-small"
-                variant="tertiary"
-                size="small"
-                font="sans"
-                icon-symbol="chevrondown"
-                icon-size="xsmall"
-                aria-label={smallTriggerAriaLabel}
-            >
-                <div class="selected-version selected-version-small">
-                    <template lwc:if={showLatestTag}>
-                        <span class={dotClass} aria-hidden="true"></span>
-                    </template>
-                    <p class="selected-version-label">
-                        {selectedVersion.label}
-                    </p>
-                </div>
-            </dx-button>
-        </dx-dropdown>
-
-        <!-- Default (existing) -->
-        <dx-dropdown
-            lwc:else
             options={versions}
             analytics-event="custEv_docVersionSelect"
             analytics-payload={analyticsPayload}

package/src/modules/doc/versionPicker/versionPicker.ts

@@ -12,8 +12,6 @@ export default class VersionPicker extends LightningElement {
     private _selectedVersion?: OptionWithNested;
     private _latestVersion: boolean = false;
     private _hideBadge: boolean = false;
-    private _small: boolean = false;
-    private _readOnly: boolean = false;
 
     @api
     get versions() {
@@ -53,27 +51,6 @@ export default class VersionPicker extends LightningElement {
         this._hideBadge = normalizeBoolean(value);
     }
 
-    // Opt-in compact "dot" variant (24px, abbreviated label). Off by default so
-    // existing consumers render the default trigger unchanged.
-    @api
-    get small() {
-        return this._small;
-    }
-
-    set small(value) {
-        this._small = normalizeBoolean(value);
-    }
-
-    // Opt-in read-only state: plain value, no dropdown menu.
-    @api
-    get readOnly() {
-        return this._readOnly;
-    }
-
-    set readOnly(value) {
-        this._readOnly = normalizeBoolean(value);
-    }
-
     private get showVersionPicker() {
         return this._versions && this._versions.length !== 0;
     }
@@ -82,25 +59,6 @@ export default class VersionPicker extends LightningElement {
         return !this.hideBadge;
     }
 
-    private get dotClass(): string {
-        return `version-picker-dot ${
-            this.latestVersion
-                ? "version-picker-dot-latest"
-                : "version-picker-dot-not-latest"
-        }`;
-    }
-
-    // Accessible name for the small trigger: includes the latest state so it
-    // isn't conveyed by the dot's color alone (WCAG 1.4.1). Omits the state
-    // when the indicator is hidden.
-    private get smallTriggerAriaLabel(): string {
-        const label = this.selectedVersion?.label ?? "";
-        if (!this.showLatestTag) {
-            return label;
-        }
-        return `${label}, ${this.latestVersion ? "Latest" : "Not Latest"}`;
-    }
-
     private onVersionChange(e: CustomEvent) {
         this.dispatchEvent(new CustomEvent("change", { detail: e.detail }));
     }