@patternfly/documentation-framework 6.51.7 → 6.51.9

package/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.51.9 (2026-09-02)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+
+
+
+## 6.51.8 (2026-09-01)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+
+
+
 ## 6.51.7 (2026-08-13)
 
 **Note:** Version bump only for package @patternfly/documentation-framework

package/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;
 }

package/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,7 +368,12 @@ 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>
         ) : (
@@ -377,8 +381,8 @@ export const Example = ({
             {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>
   );
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "6.51.7",
+  "version": "6.51.9",
   "author": "Red Hat",
   "license": "MIT",
   "bin": {
@@ -92,5 +92,5 @@
     "http-cache-semantics": ">=4.1.1",
     "nanoid": "3.3.8"
   },
-  "gitHead": "99ed097b432edeb050484dec6ee06f5bc853ec5d"
+  "gitHead": "a7c4848bb32a4d315b93cb82f5769a2795e69612"
 }

package/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;
 }

package/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,14 +132,17 @@ 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} />
@@ -149,7 +150,7 @@ const MDXChildTemplate = ({ Component, source, toc = [], index = 0, id }) => {
         )}
         {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) => (