fix(styling): Allow for spacing between paragraphs of non-stack text

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

@@ -4,11 +4,12 @@
 
 .ws-heading-anchor {
   color: var(--pf-t--global--icon--color--regular);
-  transform: translate(calc(-100% - var(--pf-t--global--spacer--xs)), -50%);
+  transform: translate(-100%, -50%);
   opacity: 0;
   position: absolute;
   left: 0;
   top: 50%;
+  padding-inline-end: var(--pf-t--global--spacer--xs);
 }
 
 .ws-heading-anchor-icon {

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

@@ -15,22 +15,22 @@ export const AutoLinkHeader = ({
   const slug = id || slugger(children);
 
   return (
-    <Flex alignItems={{ default: 'alignItemsCenter'}} spaceItems={{ default: "spaceItemsSm" }}>
+  <Content
+    id={slug}
+    component={headingLevel}
+    className={css('ws-heading', className)}
+    tabIndex={-1}
+    isEditorial
+  >
+    <Flex alignItems={{ default: 'alignItemsCenter'}} spaceItems={{ default: "spaceItemsSm" }} className={`ws-autolink-header ws-autolink-header-${headingLevel}`}>
       <FlexItem>
-        <Content
-          id={slug}
-          component={headingLevel}
-          className={css('ws-heading', className)}
-          tabIndex={-1}
-          isEditorial
-        >
-          <Link href={`#${slug}`} className="ws-heading-anchor" tabIndex="-1" aria-hidden>
-            <LinkIcon className="ws-heading-anchor-icon" style={{ verticalAlign: 'middle' }} />
-          </Link>
-          {children}
-        </Content>
+        <Link href={`#${slug}`} className="ws-heading-anchor" tabIndex="-1" aria-hidden>
+          <LinkIcon className="ws-heading-anchor-icon" style={{ verticalAlign: 'middle' }} />
+        </Link>
+        {children}
       </FlexItem>
       {metaText && <FlexItem>{metaText}</FlexItem>}
     </Flex>
+  </Content>
   )
 };

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

@@ -2,8 +2,9 @@
   --ws-code-editor--tooltip--MaxWidth: 16ch;
 }
 
-.ws-code-editor:not(.ws-example-code-expanded) > .pf-v6-c-code-editor__header::before {
-  --pf-v6-c-code-editor__header--before--BorderBottomWidth: 0;
+.ws-code-editor {
+  --pf-v6-c-code-editor__header-content--PaddingInlineStart: 0;
+  --pf-v6-c-code-editor__header-content--PaddingInlineEnd: 0;
 }
 
 .ws-code-editor-control {
@@ -86,3 +87,7 @@
   opacity: 0.8;
   box-shadow: var(--pf-t--global--box-shadow--sm);
 }
+
+.ws-example-toolbar {
+  margin-block-end: var(--pf-t--global--spacer--lg);
+}

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

@@ -294,7 +294,7 @@ export const Example = ({
         </AutoLinkHeader>
         {children}
       </StackItem>
-      <StackItem>
+      <StackItem className="ws-example-preview">
         {isFullscreen ? (
           <div>
             <a
@@ -323,7 +323,7 @@ export const Example = ({
           </div>
         )}
       </StackItem>
-      <StackItem>
+      <StackItem className="ws-example-toolbar">
         <ExampleToolbar
           lang={lang}
           isFullscreen={isFullscreen}

packages/documentation-framework/templates/mdx.css

@@ -1,5 +1,9 @@
-p.pf-v6-c-content--p.ws-p {
-  margin: 0;
+.ws-content.pf-v6-l-stack > [class*="pf-v6-c-content"] {
+  margin-bottom: 0;
+}
+
+.ws-content {
+  max-width: 825px;
 }
 
 .ws-code {
@@ -23,3 +27,7 @@ p.pf-v6-c-content--p.ws-p {
 .ws-back-to-top {
   z-index: var(--pf-t--global--z-index--2xl);
 }
+
+.ws-autolink-header:not(:first-child) {
+  margin-top: var(--pf-t--global--spacer--md);
+}

packages/documentation-framework/templates/mdx.js

@@ -154,7 +154,7 @@ const MDXChildTemplate = ({ Component, source, toc = [], index = 0, id }) => {
       {toc.length > 1 && <TableOfContents items={toc} />}
       <Stack
         hasGutter
-        style={{ ...(source !== 'landing-pages' && { maxWidth: '825px' }) }}
+        className={(source !== 'landing-pages' && 'ws-content')}
       >
         {InlineAlerts}
         <Component />

packages/documentation-site/package.json

@@ -17,7 +17,7 @@
     "screenshots": "pf-docs-framework screenshots"
   },
   "dependencies": {
-    "@patternfly/documentation-framework": "6.0.12",
+    "@patternfly/documentation-framework": "6.0.13",
     "@patternfly/react-catalog-view-extension": "6.0.0",
     "@patternfly/react-console": "6.0.0",
     "@patternfly/react-docs": "7.0.0",

packages/documentation-site/patternfly-docs/content/design-guidelines/usage-and-behavior/usage-and-behavior.md

@@ -3,8 +3,6 @@ id: Usage and behavior
 section: design-foundations
 ---
 
-# PatternFly component usage and behavior guidelines
-
 As you design with PatternFly, you might encounter common use cases where multiple components could be used. These guidelines outline which component to use in these situations and shares where to find more detailed usage guidelines.
 
 ## Displaying structured data