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) => (