Merge branch 'main' into iss#4518

Author: andrew-ronaldson

.github/slack-rotation.yml

@@ -0,0 +1,34 @@
+name: Weekly Slack Monitor Rotation
+
+on:
+  schedule:
+    # Runs at 9:00 AM every Monday (UTC)
+    - cron: '0 9 * * 1'
+  # Also allow manual trigger for testing
+  workflow_dispatch:
+
+jobs:
+  rotate-monitor:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      
+      - name: Set up Python
+        uses: actions/setup-python@v4
+        with:
+          python-version: '3.10'
+      
+      - name: Install dependencies
+        run: |
+          python -m pip install --upgrade pip
+          pip install requests
+      
+      - name: Run rotation script
+        env:
+          SLACK_TOKEN: ${{ secrets.SLACK_MONITOR_APP_SLACK_TOKEN }}
+          CHANNEL_ID: ${{ secrets.TEAM_UXD_PATTERNFLY_CHANNEL_ID }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          EXCLUDED_USERS: ${{ secrets.SLACK_MONITOR_EXCLUDED_USERS }}
+        run: python scripts/slack_monitor_rotation.py

.github/workflows/slack-monitor-rotation.yml

@@ -0,0 +1,34 @@
+name: Weekly Slack Monitor Rotation
+
+on:
+  schedule:
+    # Runs at 9:00 AM every Monday (UTC)
+    - cron: '0 9 * * 1'
+  # Also allow manual trigger for testing
+  workflow_dispatch:
+
+jobs:
+  rotate-monitor:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+        with:
+          fetch-depth: 0
+      
+      - name: Set up Python
+        uses: actions/setup-python@v4
+        with:
+          python-version: '3.10'
+      
+      - name: Install dependencies
+        run: |
+          python -m pip install --upgrade pip
+          pip install requests
+      
+      - name: Run rotation script
+        env:
+          SLACK_TOKEN: ${{ secrets.SLACK_MONITOR_APP_SLACK_TOKEN }}
+          CHANNEL_ID: ${{ secrets.TEAM_UXD_PATTERNFLY_CHANNEL_ID }}
+          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+          EXCLUDED_USERS: ${{ secrets.SLACK_MONITOR_EXCLUDED_USERS }}
+        run: python scripts/slack_monitor_rotation.py

packages/ast-helpers/CHANGELOG.md

@@ -3,6 +3,55 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# 1.4.0-alpha.177 (2025-04-23)
+
+
+### Bug Fixes
+
+* **example:** keeps example content from overflowing content area ([#4550](https://github.com/patternfly/patternfly-org/issues/4550)) ([8a4b648](https://github.com/patternfly/patternfly-org/commit/8a4b648a46aa710608557ce920e8070bf251d5ef))
+
+
+
+
+
+# 1.4.0-alpha.176 (2025-04-16)
+
+**Note:** Version bump only for package @patternfly/ast-helpers
+
+
+
+
+
+# 1.4.0-alpha.175 (2025-04-15)
+
+**Note:** Version bump only for package @patternfly/ast-helpers
+
+
+
+
+
+# 1.4.0-alpha.174 (2025-04-10)
+
+
+### Reverts
+
+* Revert "feat(ver): enable react 19 support in framework (#4515)" (#4541) ([93ae3ec](https://github.com/patternfly/patternfly-org/commit/93ae3ecc6bf551ae1eb8ab844aa82ca6619cf2bf)), closes [#4515](https://github.com/patternfly/patternfly-org/issues/4515) [#4541](https://github.com/patternfly/patternfly-org/issues/4541)
+
+
+
+
+
+# 1.4.0-alpha.173 (2025-04-10)
+
+
+### Features
+
+* **ver:** enable react 19 support in framework ([#4515](https://github.com/patternfly/patternfly-org/issues/4515)) ([07ed7ae](https://github.com/patternfly/patternfly-org/commit/07ed7ae30789543204f8c8f5031c96e478164957))
+
+
+
+
+
 # 1.4.0-alpha.172 (2025-04-09)
 
 

packages/ast-helpers/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/ast-helpers",
   "description": "Acorn AST helpers for working with live code",
-  "version": "1.4.0-alpha.172",
+  "version": "1.4.0-alpha.177",
   "author": "Red Hat",
   "license": "MIT",
   "publishConfig": {

packages/documentation-framework/CHANGELOG.md

@@ -3,6 +3,55 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.9.4 (2025-04-23)
+
+
+### Bug Fixes
+
+* **example:** keeps example content from overflowing content area ([#4550](https://github.com/patternfly/patternfly-org/issues/4550)) ([8a4b648](https://github.com/patternfly/patternfly-org/commit/8a4b648a46aa710608557ce920e8070bf251d5ef))
+
+
+
+
+
+## 6.9.3 (2025-04-16)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+
+
+
+## 6.9.2 (2025-04-15)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+
+
+
+## 6.9.1 (2025-04-10)
+
+
+### Reverts
+
+* Revert "feat(ver): enable react 19 support in framework (#4515)" (#4541) ([93ae3ec](https://github.com/patternfly/patternfly-org/commit/93ae3ecc6bf551ae1eb8ab844aa82ca6619cf2bf)), closes [#4515](https://github.com/patternfly/patternfly-org/issues/4515) [#4541](https://github.com/patternfly/patternfly-org/issues/4541)
+
+
+
+
+
+# 6.9.0 (2025-04-10)
+
+
+### Features
+
+* **ver:** enable react 19 support in framework ([#4515](https://github.com/patternfly/patternfly-org/issues/4515)) ([07ed7ae](https://github.com/patternfly/patternfly-org/commit/07ed7ae30789543204f8c8f5031c96e478164957))
+
+
+
+
+
 ## 6.8.4 (2025-04-09)
 
 

packages/documentation-framework/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "6.8.4",
+  "version": "6.9.4",
   "author": "Red Hat",
   "license": "MIT",
   "bin": {
@@ -12,7 +12,7 @@
     "@babel/preset-env": "^7.24.3",
     "@babel/preset-react": "^7.24.1",
     "@mdx-js/util": "1.6.16",
-    "@patternfly/ast-helpers": "^1.4.0-alpha.172",
+    "@patternfly/ast-helpers": "^1.4.0-alpha.177",
     "@reach/router": "npm:@gatsbyjs/reach-router@1.3.9",
     "autoprefixer": "9.8.6",
     "babel-loader": "^9.1.3",

packages/documentation-framework/templates/mdx.css

@@ -23,3 +23,7 @@ p.pf-v6-c-content--p.ws-p {
 .ws-back-to-top {
   z-index: var(--pf-t--global--z-index--2xl);
 }
+
+.ws-example-page-wrapper {
+  max-width: min(100%, 825px);
+}

packages/documentation-framework/templates/mdx.js

@@ -110,7 +110,7 @@ const MDXChildTemplate = ({ Component, source, toc = [], index = 0, id }) => {
   const ChildComponent = () => (
     <div className={source !== 'landing-pages' ? 'pf-v6-l-flex' : ''}>
       {toc.length > 1 && <TableOfContents items={toc} />}
-      <Stack hasGutter style={{ ...(source !== 'landing-pages' && { maxWidth: '825px' }) }}>
+      <Stack hasGutter className={(source !== 'landing-pages' && 'ws-example-page-wrapper')}>
         {InlineAlerts}
         <Component />
         {functionDocumentation.length > 0 && (

packages/documentation-site/patternfly-docs/content/design-guidelines/charts/about/about.md

@@ -1,22 +1,23 @@
 ---
 id: About charts
 section: charts
+sortValue: 1
 ---
 
 _Charts are only available in React_
 
 A **chart** visualizes data in an application. The type of chart you use will depend on your use case and the type of data you need to display.
 
 ## Elements
-<img src="./img/axis-labels.png" alt="Chart with axis labels" width="713"/> 
+<img src="./img/axis-labels.png" alt="Chart with axis labels" width="713"/> 
 
 1. **Title:** Titles should be left-aligned and appear above your chart.
 2. **Axis labels and scale values:**  We recommend using tick marks to clearly mark scale values on the y-axis. The text for axis labels and scale values should be 12px font in standard text color. All scale values should be equally distributed across the axis and the axis label should fall outside the scale values, centered with the axis line.
 3. **Legends:** We recommend using legends when charts include more than one variable and therefore use more than one color. When datasets are overlapping, an [interactive legend](#interactive-chart-legends) can be used. If space is not available to display names of horizontal and vertical axes, a legend must be added instead. The legend should list the colors that each variable obtains and the name of the variable. The text on the legend should be 14px size and standard text color. They can either be placed left-aligned to the right of the chart or centered below the chart.
 4. **Chart tooltip:** A tooltip will appear on hover over certain elements of a chart, like bars in a bar chart or segments in a donut chart. [Chart tooltips](/charts/tooltips) should display the specific values related to the element the user is hovering over. 
 
 ## Chart types
-<img src="./img/chart-legend.png" alt="Image displaying what chart types to use when" width="1024"/> 
+<img src="./img/chart-legend.png" alt="Image displaying what chart types to use when" width="1024"/> 
 
 - [Area chart](/charts/area-chart/design-guidelines): Use to show (potentially multiple) trends over a continuous scale (usually time).
 - [Bar chart](/charts/bar-chart/design-guidelines): Use to show and compare categories and their respective data point/value. Bar charts can be plotted vertically or horizontally. The axis that labels the bar is the category, the axis that marks the end point of the bar displays the data points/values.
@@ -65,3 +66,14 @@ On click
 
 1. **Legend:** When a user clicks on a legend label, it becomes disabled and the color swatch is replaced with an eye-slashed icon.
 2. **Chart:** Data corresponding to the clicked legend label is hidden from view.
+
+## Develop with charts 
+
+Default styles in the [@patternfly/react-charts package](https://www.npmjs.com/package/@patternfly/react-charts) are aligned with our light theme. Charts work with PatternFly's light theme by default&mdash;you don't need to import anything else. 
+
+To support dark-themed charts, you must:
+1. Import the [@patternfly/patternfly package](https://www.npmjs.com/package/@patternfly/patternfly), so that you can use our global tokens.
+1. Import the stylesheet that contains dark theme styles by adding this line before importing your main application component: `import '@patternfly/patternfly/patternfly-charts.css';`
+    - Once you import this file, you'll have access to [all chart variables](https://www.npmjs.com/package/@patternfly/patternfly?activeTab=code). Beyond dark theme, you could use these variables to match the style of other UI elements to your chart styles. 
+
+To display the list of all available chart tokens, filter for "charts" in [the PatternFly design tokens table](/tokens/all-patternfly-tokens). 

packages/documentation-site/patternfly-docs/content/design-guidelines/components/code-block/code-block.md

@@ -3,10 +3,14 @@ id: Code block
 section: components
 ---
 
+import '../components.css';
+
 ## Elements
 Code block has 4 main components.
 
-<img src="./img/code-block-structure.png" alt="Elements of the code block component" width="441"/>
+<div class="ws-docs-content-img">
+![Elements of the code block component.](./img/code-block-elements.svg)
+</div>
 
 1. **Code snippet:**  the content that will be copied to the user’s clipboard.
 2. **[Action buttons](#multiple-action-buttons):** completes an action when clicked. The copy button is the most common, but different or additional action buttons can be added on an as-needed basis.
@@ -15,14 +19,18 @@ Code block has 4 main components.
 
 ### Multiple action buttons
 
-<img src="./img/code-block-multiple-actions.png" alt="Code block with multiple actions" width="355"/>
-
 Code blocks can include multiple actions. Any actions are optional and customizable, but the copy action is the most common.
 
 The additional actions to the copy action can include the option to show a checkmark after the user has clicked the action button. The checkmark can be used to indicate to the user that the action was successfully triggered.
 
-### Show more/less
+<div class="ws-docs-content-img">
+![Example of a code block with multiple actions.](./img/code-block-multiple-actions.svg)
+</div>
 
-<img src="./img/code-block-collapsed-expanded.png" alt="Expanded and collapsed code block" width="758"/>
+### Show more/less
 
 There is the option to include a show more/less section in the code block. The show more/less section can be used to collapse larger code snippets. An expandable code block allows for long lines of code to be stored in an expansion panel. Expanding the code block allows the user to view the full string that they can copy.
+
+<div class="ws-docs-content-img">
+![Examples of expanded and collapsed code blocks.](./img/code-block-expanded.svg)
+</div>