chore(docs): Adjust spacing

We used to determine the gutter based on whether items were component docs - this brings that back so we can adjust where margins are used.

Fixes #4257

Assisted-by: Cursor

Author: rebeccaalpert

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

@@ -6,6 +6,11 @@
   --pf-v6-c-code-editor__header--before--BorderBottomWidth: 0;
 }
 
+/* Code editor: space before the next block (e.g. section heading). */
+[data-prose-content] .ws-code-editor:has(.pf-v6-c-code-editor__header-content:last-child) {
+  margin-block-end: var(--pf-t--global--spacer--lg);
+}
+
 .ws-code-editor-control {
   --pf-v6-c-button--m-control--BackgroundColor: transparent;
   --pf-v6-c-button--m-control--active--BackgroundColor: transparent;

packages/documentation-framework/templates/mdx.css

@@ -1,9 +1,27 @@
 @import './content-sources/ai-guidelines.css';
 
+/* Org docs rely on Stack hasGutter for block spacing; suppress paragraph margins. */
 p.pf-v6-c-content--p.ws-p {
   margin: 0;
 }
 
+/* Component/code docs and other prose-heavy sources need editorial paragraph spacing. */
+[data-prose-content] p.pf-v6-c-content--p.ws-p {
+  margin-block-end: var(--pf-v6-c-content--MarginBlockEnd);
+}
+
+/* Org docs: Stack gutter handles spacing before template sections; not content headings. */
+:not([data-prose-content]) .ws-example-page-wrapper.pf-m-gutter .ws-stack-section-heading {
+  margin-block-start: 0;
+}
+
+/* Prose docs: editorial heading spacing (Stack hasGutter is off; typography handles rhythm). */
+[data-prose-content] .ws-heading.ws-h2,
+[data-prose-content] .ws-heading.ws-h3,
+[data-prose-content] .ws-heading.ws-h4 {
+  margin-block-end: var(--pf-t--global--spacer--lg);
+}
+
 .ws-code {
   display: inline-block;
   background-color: var(--pf-t--global--background--color--secondary--default);

packages/documentation-framework/templates/mdx.js

@@ -87,7 +87,25 @@ const MDXChildTemplate = ({ Component, source, toc = [], index = 0, id }) => {
     ensureID(toc);
   }
 
-  const isComponentCodeDocs = ['react', 'react-demos', 'html', 'html-demos', 'react-templates'].includes(source);
+  // Markdown sourced from component/code repos needs editorial paragraph spacing.
+  const isProseContent = [
+    'react',
+    'react-next',
+    'react-deprecated',
+    'react-demos',
+    'react-templates',
+    'html',
+    'html-demos',
+    'html-deprecated',
+    'ECharts-docs',
+    'ECharts',
+    'ECharts-next',
+    '-Victory',
+    '-Victory-next',
+    'ai-guidelines',
+    'extensions',
+    'components'
+  ].includes(source);
 
   const InlineAlerts = (optIn ||
     beta ||
@@ -134,22 +152,26 @@ 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}
+      {...(isProseContent && { 'data-prose-content': true })}
+    >
       {toc.length > 1 && <TableOfContents items={toc} />}
-      <Stack hasGutter className={(source !== 'landing-pages' && 'ws-example-page-wrapper')}>
+      <Stack hasGutter={!isProseContent} className={(source !== 'landing-pages' && 'ws-example-page-wrapper')}>
         {InlineAlerts}
         <Component />
         {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>
         )}
         {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 +187,7 @@ const MDXChildTemplate = ({ Component, source, toc = [], index = 0, id }) => {
         )}
         {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) => (