patternfly · nicolethoen · Jul 10, 2024 · Jul 9, 2024 · Jul 10, 2024 · Jul 10, 2024
diff --git a/packages/documentation-framework/templates/mdx.css b/packages/documentation-framework/templates/mdx.css
@@ -1,3 +1,7 @@
+p.pf-v6-c-content--p.ws-p {
+  margin: 0;
+}
+
 .ws-code {
   display: inline-block;
   background-color: var(--pf-t--global--background--color--secondary--default);
@@ -8,6 +12,10 @@
   font-family: var(--pf-t--global--font--family--mono);
 }
 
+.ws-content-table > .ws-table {
+  margin-bottom: var(--pf-t--global--spacer--md);
+}
+
 .ws-image {
   text-align: center;
 }

diff --git a/packages/documentation-framework/templates/mdx.js b/packages/documentation-framework/templates/mdx.js
@@ -91,7 +91,7 @@ const MDXChildTemplate = ({
       {toc.length > 1 && (
         <TableOfContents items={toc} />
       )}
-      <Stack hasGutter={isComponentCodeDocs} style={{...(source !== 'landing-pages' && {maxWidth: "825px"})}}>
+      <Stack hasGutter style={{...(source !== 'landing-pages' && {maxWidth: "825px"})}}>
         {InlineAlerts}
           <Component />
           {functionDocumentation.length > 0 && (

diff --git a/packages/documentation-site/package.json b/packages/documentation-site/package.json
@@ -17,7 +17,7 @@
     "screenshots": "pf-docs-framework screenshots"
   },
   "dependencies": {
-    "@patternfly/documentation-framework": "6.0.0-alpha.52",
+    "@patternfly/documentation-framework": "6.0.0-alpha.55",
     "@patternfly/react-catalog-view-extension": "6.0.0-alpha.4",
     "@patternfly/react-console": "6.0.0-alpha.3",
     "@patternfly/react-docs": "7.0.0-alpha.84",

diff --git a/...tation-site/patternfly-docs/content/design-guidelines/components/alert/alert.md b/...tation-site/patternfly-docs/content/design-guidelines/components/alert/alert.md
@@ -195,8 +195,6 @@ Plain inline alerts are commonly used in the following situations:
 
 </div>
 
-<br />
-
 - Be concise. In one-line toast alerts, use fragments instead of sentences if possible.
 
 <div class="ws-content-table">
@@ -206,9 +204,7 @@ Plain inline alerts are commonly used in the following situations:
 | Message sent| Your message has been sent.|
 
 </div>
-
-<br />
-
+
 - In toast alerts containing links, describe how the user can navigate through the UI to perform the action. Learn more about how descriptive text supports accessibility in the next section.
 
 <div class="ws-content-table">
@@ -217,9 +213,7 @@ Plain inline alerts are commonly used in the following situations:
 |:------:|:---------:|
 | From the **Settings** tab, click **View logs.**| **View logs**|
 
-</div> 
-
-<br />
+</div>
 
 ## Accessibility
 

diff --git a/...patternfly-docs/content/design-guidelines/components/empty-state/empty-state.md b/...patternfly-docs/content/design-guidelines/components/empty-state/empty-state.md
@@ -34,7 +34,6 @@ Use the [extra large empty state](#extra-large-empty-state) variation for gettin
 | Welcome to PatternFly | Welcome to PatternFly! |
 
 </div>
-<br /> 
 
 **Body**: Explain how the product or feature delivers value to the user. State what the user can do with the product instead of what the product enables them to do. This way, you give power to the user.
 
@@ -74,7 +73,6 @@ Use the [small empty state](#small-empty-state) variation for no results empty s
 | No results found | Your search did not yield any results |
 
 </div>
-<br /> 
 
 **Body**: Explain what the user should do next so that they can continue searching for what they need.
 
@@ -112,7 +110,6 @@ Use the [large empty state](#large-empty-state) variation for required configura
 | Start the configuration process and follow the on-screen instructions. | You cannot continue until you complete the configuration. |
 
 </div>
-<br />  
 
 **Button**: Give the user the ability to quickly take action on the task. 
 
@@ -139,8 +136,7 @@ Use the [large empty state](#large-empty-state) variation for no access empty st
 |:-------------------------------:|:--------------------------:|
 | Access permissions needed | Access denied |
 
-</div>
-<br />  
+</div> 
 
 **Body**: Explain what action the user must take to reach their goal of accessing the page.
 
@@ -151,7 +147,6 @@ Use the [large empty state](#large-empty-state) variation for no access empty st
 | To access PatternFly, ask your administrator to adjust your permissions. | You don’t have access to PatternFly. |
 
 </div>
-<br />  
 
 **Button**: Give the user the ability to easily leave the page and return to the dashboard, home page, or another main area of the product. 
 
@@ -210,7 +205,6 @@ Use the [extra large empty state](#extra-large-empty-state) variation for succes
 | You're all set | You have successfully registered |
 
 </div>
-<br />   
 
 **Body**: Give the user a next step so that they can continue using the product. If an additional confirmation is needed (such as a confirmation email), include that in the body, too. 
 
@@ -221,7 +215,6 @@ Use the [extra large empty state](#extra-large-empty-state) variation for succes
 | We emailed you a confirmation. Ready to explore other activities? | You can now exit. |
 
 </div>
-<br />    
 
 **Button**: Give the user the ability to easily take the next step. 
 
@@ -249,7 +242,6 @@ Use the [large empty state](#large-empty-state) variation for creation empty sta
 | No service accounts yet | No service accounts have been found |
 
 </div>
-<br />   
 
 **Body**: Explain what the user needs to do next.
 

diff --git a/...tation-site/patternfly-docs/content/design-guidelines/content/error-messages.md b/...tation-site/patternfly-docs/content/design-guidelines/content/error-messages.md
@@ -36,7 +36,6 @@ A user should never feel like the error is their fault. Avoid language like “Y
 | You did not provide your authentication credentials. | Authentication credentials weren't provided.| 
 
 </div> 
-<br /> 
 
 #### Give users a next step
 
@@ -49,7 +48,6 @@ A user should never feel stuck. If they’re hit with an error, give them the in
 | Your list already has the maximum number of items. You are not able to continue customizing. | Your list has the maximum number of items. To continue customizing, remove an item.|
 
 </div>
-<br /> 
 
 #### Avoid jargon
 
@@ -62,7 +60,6 @@ Error messages are frustrating enough without technical terms that users might n
 | Error code 5959: Outdated version information. Task termination pending. | Your task is outdated. To keep it active, update its version.|
 
 </div>
-<br />
 
 #### Include the right amount of description
 
@@ -75,7 +72,6 @@ Tell your user what is wrong. An error without an explanation can add to their f
 | An error occurred. The email cannot be sent. | To send this email, turn on your email permissions in user settings.|
 
 </div>
-<br />
 
 However, don’t include too much information. The user doesn’t need to know exactly what is going on behind the scenes. Only give them information about what went wrong and what they can do next.  
 
@@ -85,9 +81,7 @@ However, don’t include too much information. The user doesn’t need to know e
 |:------------:|:------------:|
 | Your information cannot be saved. Our system is currently designed to accommodate 1 record per user. The system memory is unable to store more at this time. | Only 1 record can be saved. To continue, remove one of your records.|
 
-</div> 
-<br /> 
-
+</div>
 
 #### Lead with the benefit
 
@@ -133,8 +127,7 @@ To create effective 404 pages, follow these best practice guidelines:
     |:-----------:|:-----------:|
     | Error 404: Not found| 404: That page no longer exists | 
 
-    </div> 
-    <br />
+    </div>
 
 1. **Avoid exclamations, colloquialisms, and excessive humor.** Write 404 headings to be informative and repeatable. When users land on a page more than once, jokes grow stale. Steer clear of extraneous words like “Uh oh!” or “Oops!”.
 
@@ -147,7 +140,6 @@ To create effective 404 pages, follow these best practice guidelines:
     | Huh, that's odd... | That page no longer exists |
 
     </div> 
-    <br />
 
 1. **Avoid assigning blame to the user.** If your brand doesn’t use first-person plural (“we”) pronouns, use “that page” or “this page” as your heading's subject instead.
 
@@ -159,7 +151,6 @@ To create effective 404 pages, follow these best practice guidelines:
     | The page you're trying to reach doesn't exist | That page no longer exists |
 
     </div>
-    <br />
 
 1. **Turn error into opportunity.** Always provide a link back to your site’s home page, and include supplemental next steps below your heading to encourage users to explore options beyond just going back to where they came from.
 
@@ -170,7 +161,6 @@ To create effective 404 pages, follow these best practice guidelines:
     | That page doesn't exist. | Another page might have what you need, so try searching PatternFly.  |
 
     </div>
-    <br />
 
 1. **Channel your brand voice.** Bland, impersonal error messages can be frustrating. Infuse your 404 page content with brand personality to support a more inviting site experience. 
 
@@ -181,7 +171,6 @@ To create effective 404 pages, follow these best practice guidelines:
     | **Error 404: Not found**<br />Requested URL not found on this server. Please try again. | **404: We couldn't find that page**<br />Another page might have what you need, so try searching PatternFly. |
 
     </div>
-    <br />
 
 1. **Write for all audiences.** Be mindful of localization. Puns, wordplay, and cultural references may not localize for all users. Prioritize clarity over cleverness.
 
@@ -191,5 +180,4 @@ To create effective 404 pages, follow these best practice guidelines:
     |:-----------:|:-----------:|
     | **404: Not all who wander are lost...**<br />But this page is. Search again or find your way back home. | **404: We lost that page**<br />Let's find you a better one. Try a new search or return home. |
 
-    </div>
-    <br />                  
+    </div>                 
diff --git a/...ntation-site/patternfly-docs/content/design-guidelines/content/product-tours.md b/...ntation-site/patternfly-docs/content/design-guidelines/content/product-tours.md
@@ -17,7 +17,6 @@ When writing a product tour, refer to the following best practice guidelines and
     | We introduced a new feature for designing called Flyer Fact. Discover how it works by taking a tour to learn more.<br />**OK \| Cancel** | Create consistency and design faster with Flyer Fact.<br />**Start tour \| Not now** |
 
     </div>
-    <br />
 
 1. **Be conversational**: Imagine that you’re sitting beside the user and walking them through the product. Avoid jargon and be casual.
 
@@ -28,7 +27,6 @@ When writing a product tour, refer to the following best practice guidelines and
     | There are three major areas of Flyer Fact: components, layouts, and documentation. These are for designers to utilize in order to build user experiences that serve the needs of their users. | Create accessible and intuitive interfaces with Flyer Fact’s components, layouts, and documentation. |
 
     </div>
-    <br />
 
 1. **Empathize with the user**: Learning new things can be scary, so don’t stuff your onboarding flow with exclamation marks, and avoid telling the user how hard you worked on the new tool or how excited you are. Instead, understand that the user might be a little intimidated and focus on giving them information and guidance in a straightforward way.
 
@@ -39,4 +37,3 @@ When writing a product tour, refer to the following best practice guidelines and
     | We are so excited to announce the Flyer Fact redesign! We can’t wait to show you around. | Flyer Fact has a new look. Let’s explore what you can do. |
 
     </div>
-    <br />
diff --git a/...ocumentation-site/patternfly-docs/content/design-guidelines/content/tooltips.md b/...ocumentation-site/patternfly-docs/content/design-guidelines/content/tooltips.md
@@ -25,8 +25,6 @@ A **tooltip** is a message box that is shown when a UI element, like a button or
 <Tooltip content={"This is a tooltip. It contains useful information that solves all your problems."} aria="describedby" >
       <Button>I'm a button with a tooltip!</Button>
 </Tooltip>
-<br />
-<br />
 
 When writing tooltips, follow these general recommendations:
 
@@ -61,7 +59,6 @@ For example:
 <Tooltip content={"Search"} aria="labelledby"> <Button variant="plain"> <SearchIcon /></Button> </Tooltip>
 </SplitItem>
 </Split>
-<br />
 
 In PatternFly, there are commonly used icons that hold universal meanings. These should always use the same tooltip description, as shown in the following table: 
 
@@ -82,4 +79,4 @@ In PatternFly, there are commonly used icons that hold universal meanings. These
 | <ExportIcon />  | pficon-export | Export |
 | <TaskIcon />  | pficon-task | Tasks | 
 
-You can learn more about the usage of these icons in our [design foundations.](/design-foundations/icons)
+You can learn more about the usage of these icons in our [design foundations.](/design-foundations/icons)
diff --git a/.../patternfly-docs/content/design-guidelines/content/writing-for-all-audiences.md b/.../patternfly-docs/content/design-guidelines/content/writing-for-all-audiences.md
@@ -16,9 +16,9 @@ To create accessible content, refer to the following best practices:
 
 - Don't identify items by color only. Color identifiers don’t help users who are colorblind. For example:
 
-    <br /><br />
+    <br />
     <img src="./img/submit-form.png" alt="blue PatternFly primary button reading Submit form" width="150"/>
-    <br /><br />
+    <br />
 
     <div class="ws-content-table">
 

diff --git a/...ly-docs/content/design-guidelines/styles/colors-for-charts/colors-for-charts.md b/...ly-docs/content/design-guidelines/styles/colors-for-charts/colors-for-charts.md
@@ -40,7 +40,7 @@ PatternFly recommends colors to use with bar charts, donut charts and pie charts
 ## Color and pattern usage
 
 When selecting colors for your chart, there are a few important usage considerations to keep in mind. Within a color family, use the base color before the other, lighter or darker hues. Additionally, consider other basic guidelines: 
-<br />
+
 * **Green family:** Use to show success
 * **Red family:** Use to show failure
 * **Other color families:** Use for neutral purposes or categories
@@ -65,8 +65,6 @@ When selecting colors for your chart, there are a few important usage considerat
   </GridItem>
 </Grid>
 
-<br />
-
 <Grid hasGutter>
   <GridItem xl={6} lg={12} className="ws-chart-colors-gridtext">
     ### Chart with nested (grouped) variables
@@ -79,8 +77,6 @@ When selecting colors for your chart, there are a few important usage considerat
   </GridItem>
 </Grid>
 
-<br />
-
 <Grid hasGutter>
   <GridItem xl={6} lg={12} className="ws-chart-colors-gridtext">
     ### Chart with many variables (>7)

diff --git a/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/icons/icons.css b/packages/documentation-site/patternfly-docs/content/design-guidelines/styles/icons/icons.css
@@ -36,13 +36,6 @@
   margin-right: 8px;
 }
 
-#icon-sizes,
-#icon-colors,
-#all-icons,
-#updated-icon-recommendations {
-  margin-bottom: 24px;
-}
-
 #ws-icons-table td[data-label="Icon"] svg,
 #ws-icons-table td[data-label="Unicode"] span {
   cursor: pointer;
@@ -53,7 +46,7 @@
 }
 
 #all-icons ~ .ws-p > .ws-code {
-  margin-inline-start: var(--pf-t--global--spacer--sm);  
+  margin-inline-start: var(--pf-t--global--spacer--sm);
 }
 
 .ws-icon-code {

diff --git a/...tation-site/patternfly-docs/content/design-guidelines/styles/spacers/spacers.md b/...tation-site/patternfly-docs/content/design-guidelines/styles/spacers/spacers.md
@@ -111,9 +111,6 @@ Some components like icons, buttons, and input fields, have a fixed amount of pa
 
 <img src="./padding-example.png" alt="Spacers example" style="background-color: var(--pf-v6-global--palette--white)" />
 
-<br/>
-<br/>
-
 ### Using spacers with text 
 
 When using spacers with text-based content, you should consider line height to ensure that you’re leaving the right amount of vertical space between each line of text. 
@@ -129,8 +126,6 @@ When using spacers with text-based content, you should consider line height to e
     </p>
   </div>
 
-<br/>
-
 You also need to use different spacer sizes depending on the type of text you’re using. For example, you’ll need to provide a 16px spacer between a title and body copy, but only an 8px spacer between items in a bulleted or numbered list.
 
   <div class="content-inner-div">
@@ -174,7 +169,5 @@ You also need to use different spacer sizes depending on the type of text you’
     </p>
   </div>
 
-<br/>
-
 For more information about line height and typography, read our [typography guidelines.](/design-foundations/typography)
 
diff --git a/...ntation-site/patternfly-docs/content/developer-resources/about-accessibility.md b/...ntation-site/patternfly-docs/content/developer-resources/about-accessibility.md
@@ -76,8 +76,6 @@ Accessibility takes **all users** into account.
 
 
 <img src="./PF-a11y.png" alt="An accessibility spectrum showing examples of the situational, temporary, and permanent situations for different impairments." />
-<br />
-<br />
 
 ## Experience parity
 We believe that all abilities should be treated equally. There should be parity in the experience of all users—one user group shouldn't be prioritized over the other.
@@ -94,4 +92,4 @@ To help you achieve this, consider these guidelines:
 - There should be parity between hover and focus events. Any information that’s available on hover for the mouse user should be available on keyboard focus.
   - Make content that appears on hover available to a screen reader by using `aria-describedby` (refer to [Tooltips & Toggletips example from Inclusive Components](https://inclusive-components.design/tooltips-toggletips/)).
 
-When building accessible user experiences, solving for one can extend to many. Humans are diverse and unique, and designing for accessibility takes that into consideration to create truly inclusive products.
+When building accessible user experiences, solving for one can extend to many. Humans are diverse and unique, and designing for accessibility takes that into consideration to create truly inclusive products.