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

package/package.json

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

package/src/modules/doc/header/header.css

@@ -77,12 +77,6 @@ header:not(.has-brand) > .header_l2 {
     border-top: 1px solid var(--dx-g-gray-90);
 }
 
-@media (max-width: 1280px) {
-    .no-header-content {
-        border-top: 0;
-    }
-}
-
 @media (max-width: 768px) {
     .header_l2 {
         padding: 0;

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

@@ -10,34 +10,11 @@ import type { OptionWithLink, TreeNode } from "typings/custom";
  */
 const TOPIC_TYPE_SPEC = "spec";
 
-function findFirstContentDescendant(node: TreeNode): TreeNode | undefined {
-    for (const child of node.children ?? []) {
-        const isSpec =
-            (child as { topicType?: string }).topicType === TOPIC_TYPE_SPEC;
-        const isExternal = child.link?.target === "_blank";
-        if (isSpec || isExternal) {
-            continue;
-        }
-
-        if (child.link?.href) {
-            return child;
-        }
-
-        const descendant = findFirstContentDescendant(child);
-        if (descendant) {
-            return descendant;
-        }
-    }
-
-    return undefined;
-}
-
 /**
  * Translates per-topic `topicType` into the generic `showForwardArrow` flag
- * that `dx-tree-tile` reads (spec topics get the forward arrow icon for Redoc),
- * and redirects content-less parent topics to their first content descendant.
+ * that `dx-tree-tile` reads (spec topics get the forward arrow icon for Redoc).
  */
-function decorateTopics(
+function decorateTopicsWithForwardArrow(
     topics: Array<TreeNode & { topicType?: string }> | undefined
 ): TreeNode[] | undefined {
     return topics?.map((topic) => {
@@ -46,21 +23,10 @@ function decorateTopics(
             decorated.showForwardArrow = true;
         }
         if (decorated.children) {
-            decorated.children = decorateTopics(decorated.children);
-        }
-
-        // Redirect parent topics without their own content to their first
-        // available content descendant.
-        const isContentlessParent =
-            !!decorated.children?.length && !decorated.link?.href;
-
-        if (isContentlessParent) {
-            const firstContent = findFirstContentDescendant(topic);
-            if (firstContent?.link) {
-                decorated.link = { ...firstContent.link };
-            }
+            decorated.children = decorateTopicsWithForwardArrow(
+                decorated.children
+            );
         }
-
         return decorated;
     });
 }
@@ -111,7 +77,9 @@ export default class UnifiedContentLayout extends LightningElement {
     }
 
     set sidebarContent(value: string) {
-        this._sidebarContent = decorateTopics(toJson(value)?.topics);
+        this._sidebarContent = decorateTopicsWithForwardArrow(
+            toJson(value)?.topics
+        );
     }
 
     private get enableFooter(): boolean {

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

@@ -62,3 +62,117 @@ 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,6 +1,43 @@
 <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,6 +12,8 @@ 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() {
@@ -51,6 +53,27 @@ 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;
     }
@@ -59,6 +82,25 @@ 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 }));
     }