chore(docs): updatin spacin

Author: mcoker

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 @@
-.pf-v6-l-stack > 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 @@
 .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/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