chore(docs): Adjust spacing

packages/documentation-framework/components/example/example.css

@@ -2,6 +2,10 @@
   --ws-code-editor--tooltip--MaxWidth: 16ch;
 }
 
+.ws-heading.ws-example-heading {
+  margin-block-end: -0.5rem;
+}
+
 .ws-code-editor:not(.ws-example-code-expanded) > .pf-v6-c-code-editor__header::before {
   --pf-v6-c-code-editor__header--before--BorderBottomWidth: 0;
 }

packages/documentation-framework/components/example/example.js

@@ -9,8 +9,7 @@ import {
   Label,
   Switch,
   Tooltip,
-  Stack,
-  StackItem,
+  Stack
 } from '@patternfly/react-core';
 import * as reactCoreModule from '@patternfly/react-core';
 import * as reactCoreNextModule from '@patternfly/react-core/next';
@@ -117,8 +116,6 @@ export const Example = ({
   // absolute url to hosted file
   sourceLink = ''
 }) => {
-
-
   if (isFullscreenPreview) {
     isFullscreen = false;
   }
@@ -284,7 +281,9 @@ export const Example = ({
                   className={css('ws-full-page-utils-position-btn', utilsProps.className)}
                   isClicked={fullPageUtilsPosition === utilsProps.className}
                   onClick={() => setFullPageUtilsPosition(utilsProps.className)}
-                  aria-label={`${utilsProps.label}${fullPageUtilsPosition === utilsProps.className ? ', selected' : ''}`}
+                  aria-label={`${utilsProps.label}${
+                    fullPageUtilsPosition === utilsProps.className ? ', selected' : ''
+                  }`}
                   icon={fullPageUtilsPosition === utilsProps.className ? utilsProps.iconClicked : utilsProps.icon}
                 />
               </Tooltip>
@@ -303,7 +302,7 @@ export const Example = ({
   const fullscreenLink = (() => {
     const cleanPathname = loc.pathname.replace(/\/$/, '');
     const sourcePath = `/${source}`;
-    
+
     // Check if the source is already at the end of the pathname to avoid duplication
     // Using endsWith instead of includes to prevent false positives (e.g., /react-console matching /react)
     if (cleanPathname.endsWith(sourcePath)) {
@@ -348,19 +347,19 @@ export const Example = ({
   const metaText = hasMetaText && tooltips;
 
   const thumbnailDimensions = {
-    width: "800",
-    height: "450"
-  }
+    width: '800',
+    height: '450'
+  };
 
   return (
     <Stack hasGutter>
-      <StackItem>
-        <AutoLinkHeader metaText={metaText} headingLevel="h3">
+      <Stack hasGutter>
+        <AutoLinkHeader metaText={metaText} headingLevel="h3" className="ws-example-heading">
           {title}
         </AutoLinkHeader>
         {children}
-      </StackItem>
-      <StackItem>
+      </Stack>
+      <Stack hasGutter>
         {isFullscreen ? (
           <div>
             <a
@@ -369,16 +368,21 @@ export const Example = ({
               target="_blank"
               aria-label={`Open fullscreen ${title} example`}
             >
-              <img src={thumbnail} width={thumbnailDimensions.width} height={thumbnailDimensions.height} alt={`${title} screenshot`} />
+              <img
+                src={thumbnail}
+                width={thumbnailDimensions.width}
+                height={thumbnailDimensions.height}
+                alt={`${title} screenshot`}
+              />
             </a>
           </div>
         ) : (
           <div id={previewId} className={css(className, isRTL && 'pf-v6-m-dir-rtl')}>
             {livePreview}
           </div>
         )}
-      </StackItem>
-      <StackItem>
+      </Stack>
+      <Stack hasGutter>
         <ExampleToolbar
           lang={lang}
           isFullscreen={isFullscreen}
@@ -389,7 +393,7 @@ export const Example = ({
           codeBoxParams={codeBoxParams}
           exampleTitle={title}
         />
-      </StackItem>
+      </Stack>
     </Stack>
   );
 };

packages/documentation-framework/templates/mdx.css

@@ -1,9 +1,15 @@
 @import './content-sources/ai-guidelines.css';
 
-p.pf-v6-c-content--p.ws-p {
+/* Stack gutter already spaces direct children; don't also use paragraph margins. */
+.pf-v6-l-stack.pf-m-gutter > p.pf-v6-c-content--p.ws-p {
   margin: 0;
 }
 
+/* Stack gutter provides spacing before template section headings. */
+.ws-example-page-wrapper.pf-m-gutter .ws-stack-section-heading {
+  margin-block-start: 0;
+}
+
 .ws-code {
   display: inline-block;
   background-color: var(--pf-t--global--background--color--secondary--default);
@@ -30,4 +36,5 @@ p.pf-v6-c-content--p.ws-p {
   max-width: min(100%, 1200px);
   flex-grow: 1;
   min-width: 0;
+  gap: 2.5rem;
 }

packages/documentation-framework/templates/mdx.js

@@ -87,8 +87,6 @@ const MDXChildTemplate = ({ Component, source, toc = [], index = 0, id }) => {
     ensureID(toc);
   }
 
-  const isComponentCodeDocs = ['react', 'react-demos', 'html', 'html-demos', 'react-templates'].includes(source);
-
   const InlineAlerts = (optIn ||
     beta ||
     deprecated ||
@@ -134,22 +132,25 @@ const MDXChildTemplate = ({ Component, source, toc = [], index = 0, id }) => {
   );
   // Create dynamic component for @reach/router
   const ChildComponent = () => (
-    <div className={source !== 'landing-pages' ? 'pf-v6-l-flex pf-v6-m-column pf-m-nowrap-on-2xl' : ''} data-content-source={source}>
+    <div
+      className={source !== 'landing-pages' ? 'pf-v6-l-flex pf-v6-m-column pf-m-nowrap-on-2xl' : ''}
+      data-content-source={source}
+    >
       {toc.length > 1 && <TableOfContents items={toc} />}
-      <Stack hasGutter className={(source !== 'landing-pages' && 'ws-example-page-wrapper')}>
+      <Stack hasGutter className={source !== 'landing-pages' && 'ws-example-page-wrapper'}>
         {InlineAlerts}
         {source !== 'css-variables' && <Component />}
         {source !== 'css-variables' && functionDocumentation.length > 0 && (
           <StackItem>
-            <AutoLinkHeader headingLevel="h2" className="pf-v6-c-content--h2" id="functions">
+            <AutoLinkHeader headingLevel="h2" className="pf-v6-c-content--h2 ws-stack-section-heading" id="functions">
               Functions
             </AutoLinkHeader>
             <FunctionsTable functionDescriptions={functionDocumentation} />
           </StackItem>
         )}
         {source !== 'css-variables' && propsTitle && (
           <StackItem>
-            <AutoLinkHeader headingLevel="h2" className="pf-v6-c-content--h2" id="props">
+            <AutoLinkHeader headingLevel="h2" className="pf-v6-c-content--h2 ws-stack-section-heading" id="props">
               {propsTitle}
             </AutoLinkHeader>
             {propComponents.map((component) => (
@@ -165,7 +166,7 @@ const MDXChildTemplate = ({ Component, source, toc = [], index = 0, id }) => {
         )}
         {source === 'css-variables' && cssPrefix.length > 0 && (
           <StackItem>
-            <AutoLinkHeader headingLevel="h2" className="pf-v6-c-content--h2" id="css-variables">
+            <AutoLinkHeader headingLevel="h2" className="pf-v6-c-content--h2 ws-stack-section-heading" id="css-variables">
               {cssVarsTitle}
             </AutoLinkHeader>
             {cssPrefix.map((prefix, index) => (