@salesforcedevs/docs-components 1.18.8 → 1.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.18.8",
+    "version": "1.19.0",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",
@@ -25,5 +25,5 @@
         "@types/lodash.orderby": "4.6.9",
         "@types/lodash.uniqby": "4.7.9"
     },
-    "gitHead": "e9d51d7dab7f574cbbc850c7201d3296ffd7f321"
+    "gitHead": "b145b613e9d33c41e78b63fa728c90ec1f87b087"
 }

package/src/modules/doc/componentPlayground/componentPlayground.css

@@ -10,11 +10,26 @@
  * Total: 606px
 **/
 
+:host {
+    --playground-iframe-min-height: 500px;
+    --playground-iframe-max-height: 5000px;
+
+    margin-top: var(--dx-g-spacing-md) !important;
+    display: block !important;
+}
+
 iframe {
     width: 100%;
     height: 606px;
-    border-radius: var(--dx-g-spacing-sm);
-    border: 1px solid var(--dx-g-gray-90);
+    min-height: var(--playground-iframe-min-height);
+    max-height: var(--playground-iframe-max-height);
+    transition: height 0.3s ease, min-height 0.3s ease;
+}
+
+@media (prefers-reduced-motion: reduce) {
+    iframe {
+        transition: none;
+    }
 }
 
 .playground-container {

package/src/modules/doc/componentPlayground/componentPlayground.ts

@@ -1,5 +1,8 @@
 import { LightningElement, api } from "lwc";
 
+const PLAYGROUND_HEIGHT_MESSAGE = "PLAYGROUND_HEIGHT_CHANGE";
+const LOADER_TIMEOUT_MS = 2000;
+
 export default class ComponentPlayground extends LightningElement {
     @api model!: string;
     @api namespace!: string;
@@ -36,7 +39,59 @@ export default class ComponentPlayground extends LightningElement {
         }/${this.component.toLowerCase()}.html`;
     }
 
+    connectedCallback() {
+        window.addEventListener("message", this.handleIframeMessage);
+    }
+
+    disconnectedCallback() {
+        window.removeEventListener("message", this.handleIframeMessage);
+    }
+
     handleIframeLoad() {
-        this.isLoading = false;
+        if (!window.ResizeObserver) {
+            // If ResizeObserver not supported, hide loader immediately (no height messages will come)
+            this.isLoading = false;
+        } else {
+            // Hide loader after 2 seconds if no height messages received
+            // This handles cases where iframe fails to load, crashes, or height reporting fails
+            setTimeout(() => {
+                this.isLoading = false;
+            }, LOADER_TIMEOUT_MS);
+        }
     }
+
+    handleIframeMessage = (event: MessageEvent) => {
+        // Only handle height change messages from our iframe
+        if (event.data?.type !== PLAYGROUND_HEIGHT_MESSAGE) {
+            return;
+        }
+
+        const iframe = this.template.querySelector(
+            "iframe"
+        ) as HTMLIFrameElement;
+        if (!iframe || event.source !== iframe.contentWindow) {
+            return;
+        }
+
+        const height = event.data?.height;
+        if (typeof height === "number" && height > 0) {
+            const minHeight = parseInt(
+                getComputedStyle(this.template.host).getPropertyValue(
+                    "--playground-iframe-min-height"
+                ),
+                10
+            );
+            const maxHeight = parseInt(
+                getComputedStyle(this.template.host).getPropertyValue(
+                    "--playground-iframe-max-height"
+                ),
+                10
+            );
+
+            const newHeight = Math.min(Math.max(height, minHeight), maxHeight);
+            iframe.style.height = `${newHeight}px`;
+            iframe.style.minHeight = `${newHeight}px`;
+            this.isLoading = false;
+        }
+    };
 }

package/src/modules/doc/contentMedia/contentMedia.css

@@ -29,7 +29,7 @@
 
 .content-media-iframe {
     position: relative;
-    padding-bottom: calc(var(--aspect-ratio, 0.5625) * 100%);
+    padding-bottom: calc(var(--aspect-ratio, 0.5626) * 100%);
     height: 0;
 }
 

package/src/modules/doc/lwcContentLayout/lwcContentLayout.css

@@ -1 +1,9 @@
 @import "docHelpers/contentLayoutStyle";
+
+.fixed-right-nav-bar {
+    width: 180px;
+}
+
+.content-body-no-rnb {
+    max-width: 1220px;
+}

package/src/modules/doc/lwcContentLayout/lwcContentLayout.html

@@ -19,7 +19,7 @@
             <slot name="doc-phase"></slot>
             <slot name="version-banner"></slot>
             <div class="content-body-container">
-                <div class="content-body">
+                <div class={contentBodyClasses}>
                     <doc-breadcrumbs
                         lwc:if={showBreadcrumbs}
                         breadcrumbs={breadcrumbs}
@@ -29,7 +29,7 @@
                         lwc:if={shouldDisplayFeedback}
                     ></doc-sprig-survey>
                 </div>
-                <div lwc:if={showToc} class="right-nav-bar is-sticky">
+                <div lwc:if={showToc} class={rightNavBarClasses}>
                     <dx-toc
                         header={tocTitle}
                         options={tocOptions}

package/src/modules/doc/lwcContentLayout/lwcContentLayout.ts

@@ -1,4 +1,5 @@
 import ContentLayout from "doc/contentLayout";
+import cx from "classnames";
 
 const TOC_HEADER_TAG = "doc-heading";
 const RNB_BY_TAB = "docs-tab";
@@ -23,6 +24,18 @@ export default class LwcContentLayout extends ContentLayout {
         return this.rnbByTab;
     }
 
+    get rightNavBarClasses() {
+        return cx(
+            "right-nav-bar",
+            "is-sticky",
+            this.showTabBasedRNB && "fixed-right-nav-bar"
+        );
+    }
+
+    get contentBodyClasses() {
+        return cx("content-body", !this.showToc && "content-body-no-rnb");
+    }
+
     /**
      * Check if the main slot contains doc-specification-content
      * Uses caching to avoid repeated DOM queries

package/src/modules/doc/specificationContent/specificationContent.html

@@ -34,7 +34,12 @@
                         <tr key={attribute.name}>
                             <td>
                                 <span class="code">
-                                    {attribute.nameInKebabCase}
+                                    <template lwc:if={isModelAura}>
+                                        {attribute.name}
+                                    </template>
+                                    <template lwc:else>
+                                        {attribute.nameInKebabCase}
+                                    </template>
                                 </span>
                             </td>
                             <td>{attribute.description}</td>

package/src/modules/doc/specificationContent/specificationContent.ts

@@ -119,6 +119,10 @@ export default class SpecificationContent extends LightningElement {
         );
     }
 
+    get isModelAura() {
+        return this.model === "aura";
+    }
+
     renderedCallback(): void {
         if (this.data) {
             this.debouncedNotifyDataRendered();

package/src/modules/docHelpers/contentLayoutStyle/contentLayoutStyle.css

@@ -74,7 +74,7 @@ dx-toc {
 
 .content-body {
     margin: var(--dx-g-spacing-md) 0 0;
-    max-width: 900px;
+    max-width: 1000px;
     flex: 1;
     width: 0;
 }
@@ -116,6 +116,7 @@ dx-toc {
 
     .content-body-container {
         padding-right: 0;
+        padding-left: 0;
         overflow-x: auto;
         margin-bottom: calc(var(--dx-g-spacing-5xl) + 4px);
     }