From 6869ebb6ec719edfcb4f4cebaacd20eda5529427 Mon Sep 17 00:00:00 2001 From: Rebecca Alpert Date: Tue, 25 Aug 2026 16:05:21 -0400 Subject: [PATCH 1/3] 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 https://github.com/patternfly/patternfly-org/issues/4257 Assisted-by: Cursor --- .../components/example/example.css | 5 +++ .../documentation-framework/templates/mdx.css | 18 ++++++++++ .../documentation-framework/templates/mdx.js | 34 +++++++++++++++---- 3 files changed, 51 insertions(+), 6 deletions(-) diff --git a/packages/documentation-framework/components/example/example.css b/packages/documentation-framework/components/example/example.css index a9750d46c4..d2a006eaf0 100644 --- a/packages/documentation-framework/components/example/example.css +++ b/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; diff --git a/packages/documentation-framework/templates/mdx.css b/packages/documentation-framework/templates/mdx.css index 17f6f13d0e..e2d05b2152 100644 --- a/packages/documentation-framework/templates/mdx.css +++ b/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); diff --git a/packages/documentation-framework/templates/mdx.js b/packages/documentation-framework/templates/mdx.js index 24c3da8031..2cb101f984 100644 --- a/packages/documentation-framework/templates/mdx.js +++ b/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,14 +152,18 @@ const MDXChildTemplate = ({ Component, source, toc = [], index = 0, id }) => { ); // Create dynamic component for @reach/router const ChildComponent = () => ( -
+
{toc.length > 1 && } - + {InlineAlerts} {source !== 'css-variables' && } {source !== 'css-variables' && functionDocumentation.length > 0 && ( - + Functions @@ -149,7 +171,7 @@ const MDXChildTemplate = ({ Component, source, toc = [], index = 0, id }) => { )} {source !== 'css-variables' && propsTitle && ( - + {propsTitle} {propComponents.map((component) => ( @@ -165,7 +187,7 @@ const MDXChildTemplate = ({ Component, source, toc = [], index = 0, id }) => { )} {source === 'css-variables' && cssPrefix.length > 0 && ( - + {cssVarsTitle} {cssPrefix.map((prefix, index) => ( From f835a5003447a0ad728070214a2fa8bda54f8e4f Mon Sep 17 00:00:00 2001 From: Rebecca Alpert Date: Thu, 27 Aug 2026 14:29:10 -0400 Subject: [PATCH 2/3] Switch to Stack instead --- .../components/example/example.css | 5 --- .../components/example/example.js | 36 ++++++++++--------- .../documentation-framework/templates/mdx.css | 20 +++-------- .../documentation-framework/templates/mdx.js | 23 +----------- 4 files changed, 25 insertions(+), 59 deletions(-) diff --git a/packages/documentation-framework/components/example/example.css b/packages/documentation-framework/components/example/example.css index d2a006eaf0..a9750d46c4 100644 --- a/packages/documentation-framework/components/example/example.css +++ b/packages/documentation-framework/components/example/example.css @@ -6,11 +6,6 @@ --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; diff --git a/packages/documentation-framework/components/example/example.js b/packages/documentation-framework/components/example/example.js index 8ee8de60fb..2f19941481 100644 --- a/packages/documentation-framework/components/example/example.js +++ b/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} /> @@ -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 ( - + {title} {children} - - + + {isFullscreen ? ( ) : ( @@ -377,8 +381,8 @@ export const Example = ({ {livePreview}
)} - - + + - + ); }; diff --git a/packages/documentation-framework/templates/mdx.css b/packages/documentation-framework/templates/mdx.css index e2d05b2152..c9b508b922 100644 --- a/packages/documentation-framework/templates/mdx.css +++ b/packages/documentation-framework/templates/mdx.css @@ -1,27 +1,15 @@ @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 { +/* 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; } -/* 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 { +/* Stack gutter provides spacing before template section headings. */ +.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); diff --git a/packages/documentation-framework/templates/mdx.js b/packages/documentation-framework/templates/mdx.js index 2cb101f984..882d9f8b74 100644 --- a/packages/documentation-framework/templates/mdx.js +++ b/packages/documentation-framework/templates/mdx.js @@ -87,26 +87,6 @@ const MDXChildTemplate = ({ Component, source, toc = [], index = 0, id }) => { ensureID(toc); } - // 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 || deprecated || @@ -155,10 +135,9 @@ const MDXChildTemplate = ({ Component, source, toc = [], index = 0, id }) => {
{toc.length > 1 && } - + {InlineAlerts} {source !== 'css-variables' && } {source !== 'css-variables' && functionDocumentation.length > 0 && ( From 9dad1d5937e15e63d8f450ce9fb0d39217c592d2 Mon Sep 17 00:00:00 2001 From: Rebecca Alpert Date: Thu, 27 Aug 2026 16:32:05 -0400 Subject: [PATCH 3/3] More Michael suggestions --- .../documentation-framework/components/example/example.css | 4 ++++ .../documentation-framework/components/example/example.js | 2 +- packages/documentation-framework/templates/mdx.css | 1 + 3 files changed, 6 insertions(+), 1 deletion(-) diff --git a/packages/documentation-framework/components/example/example.css b/packages/documentation-framework/components/example/example.css index a9750d46c4..6af274e328 100644 --- a/packages/documentation-framework/components/example/example.css +++ b/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; } diff --git a/packages/documentation-framework/components/example/example.js b/packages/documentation-framework/components/example/example.js index 2f19941481..d62748e509 100644 --- a/packages/documentation-framework/components/example/example.js +++ b/packages/documentation-framework/components/example/example.js @@ -354,7 +354,7 @@ export const Example = ({ return ( - + {title} {children} diff --git a/packages/documentation-framework/templates/mdx.css b/packages/documentation-framework/templates/mdx.css index c9b508b922..47725bf2d0 100644 --- a/packages/documentation-framework/templates/mdx.css +++ b/packages/documentation-framework/templates/mdx.css @@ -36,4 +36,5 @@ max-width: min(100%, 1200px); flex-grow: 1; min-width: 0; + gap: 2.5rem; }