@salesforcedevs/docs-components 1.18.6-dynamic-pg1 → 1.18.8-specfix-alpha

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@salesforcedevs/docs-components",
-    "version": "1.18.6-dynamic-pg1",
+    "version": "1.18.8-specfix-alpha",
     "description": "Docs Lightning web components for DSC",
     "license": "MIT",
     "main": "index.js",

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

@@ -10,27 +10,13 @@
  * Total: 606px
 **/
 
-:host {
-    --playground-iframe-min-height: 500px;
-    --playground-iframe-max-height: 5000px;
-}
-
 iframe {
     width: 100%;
     height: 606px;
-    min-height: var(--playground-iframe-min-height);
-    max-height: var(--playground-iframe-max-height);
-    transition: height 0.3s ease, min-height 0.3s ease;
     border-radius: var(--dx-g-spacing-sm);
     border: 1px solid var(--dx-g-gray-90);
 }
 
-@media (prefers-reduced-motion: reduce) {
-    iframe {
-        transition: none;
-    }
-}
-
 .playground-container {
     position: relative;
 }

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

@@ -1,7 +1,5 @@
 import { LightningElement, api } from "lwc";
 
-const PLAYGROUND_HEIGHT_MESSAGE = "PLAYGROUND_HEIGHT_CHANGE";
-
 export default class ComponentPlayground extends LightningElement {
     @api model!: string;
     @api namespace!: string;
@@ -38,49 +36,7 @@ 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;
     }
-
-    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`;
-        }
-    };
 }

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

@@ -7,6 +7,11 @@
             if:true={isLoading}
         ></dx-spinner>
         <dx-error-fallback lwc:if={showError}></dx-error-fallback>
+        <dx-error-fallback
+            lwc:if={showNoSpecifications}
+            title="No specifications to show"
+            description="No specifications are available for this component or API module. When specifications are defined, they'll appear here."
+        ></dx-error-fallback>
         <template lwc:if={hasAttributes}>
             <doc-heading
                 header="Attributes"
@@ -29,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

@@ -108,6 +108,21 @@ export default class SpecificationContent extends LightningElement {
         return this.events?.length > 0;
     }
 
+    get showNoSpecifications() {
+        return (
+            !this.showError &&
+            !this.isLoading &&
+            !this.hasAttributes &&
+            !this.hasMethods &&
+            !this.hasSlots &&
+            !this.hasEvents
+        );
+    }
+
+    get isModelAura() {
+        return this.model === "aura";
+    }
+
     renderedCallback(): void {
         if (this.data) {
             this.debouncedNotifyDataRendered();

package/src/modules/docHelpers/amfStyle/amfStyle.css

@@ -174,8 +174,6 @@ api-security-documentation {
     --http-code-snippet-container-background-color: rgb(250 250 250);
     --http-code-snippet-container-padding: var(--dx-g-spacing-md);
 
-    /* prism */
-
     /* --code-operator-value-background-color */
 }
 

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

@@ -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);
     }