docs(design-foundations): Adds new theming guide.

package.json

@@ -59,6 +59,6 @@
     "parse-git-config": ">=3.0.0",
     "ip": ">=2.0.0",
     "http-cache-semantics": ">=4.1.1",
-    "nanoid": ">=3.3.8"
+    "nanoid": "3.3.8"
   }
 }

packages/ast-helpers/CHANGELOG.md

@@ -3,6 +3,44 @@
 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.278 (2025-09-16)
+
+
+### Bug Fixes
+
+* **theme-selector:** prevent overflow of the menu ([#4779](https://github.com/patternfly/patternfly-org/issues/4779)) ([767811f](https://github.com/patternfly/patternfly-org/commit/767811f252a888d0795f0fd13142724e160bc0cd))
+
+
+
+
+
+# 1.4.0-alpha.277 (2025-09-10)
+
+**Note:** Version bump only for package @patternfly/ast-helpers
+
+
+
+
+
+# 1.4.0-alpha.276 (2025-09-10)
+
+**Note:** Version bump only for package @patternfly/ast-helpers
+
+
+
+
+
+# 1.4.0-alpha.275 (2025-09-09)
+
+
+### Bug Fixes
+
+* address build issue with nanoid version ([#4774](https://github.com/patternfly/patternfly-org/issues/4774)) ([f78543a](https://github.com/patternfly/patternfly-org/commit/f78543acacb27e9fd638a2450d5ec37ef56de2d5))
+
+
+
+
+
 # 1.4.0-alpha.274 (2025-09-05)
 
 

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.274",
+  "version": "1.4.0-alpha.278",
   "author": "Red Hat",
   "license": "MIT",
   "publishConfig": {

packages/documentation-framework/CHANGELOG.md

@@ -3,6 +3,44 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.22.8 (2025-09-16)
+
+
+### Bug Fixes
+
+* **theme-selector:** prevent overflow of the menu ([#4779](https://github.com/patternfly/patternfly-org/issues/4779)) ([767811f](https://github.com/patternfly/patternfly-org/commit/767811f252a888d0795f0fd13142724e160bc0cd))
+
+
+
+
+
+## 6.22.7 (2025-09-10)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+
+
+
+## 6.22.6 (2025-09-10)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+
+
+
+## 6.22.5 (2025-09-09)
+
+
+### Bug Fixes
+
+* address build issue with nanoid version ([#4774](https://github.com/patternfly/patternfly-org/issues/4774)) ([f78543a](https://github.com/patternfly/patternfly-org/commit/f78543acacb27e9fd638a2450d5ec37ef56de2d5))
+
+
+
+
+
 ## 6.22.4 (2025-09-05)
 
 

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

@@ -72,8 +72,8 @@
 
 .ws-full-page-utils {
   position: fixed;
-  right: 0;
-  bottom: 0;
+  inset-inline-start: 0;
+  inset-block-end: 0;
   padding: var(--pf-t--global--spacer--lg);
   z-index: var(--pf-t--global--z-index--2xl);
 }

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

@@ -103,6 +103,11 @@ export const ThemeSelector = ({ id }) => {
       )}
       shouldFocusToggleOnSelect
       onOpenChangeKeys={['Escape']}
+      popperProps={{ 
+        position: 'right',
+        enableFlip: true,
+        preventOverflow: true
+      }}
     >
       <SelectGroup>
         <SelectList aria-label="Light/Dark theme switcher">

packages/documentation-framework/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "6.22.4",
+  "version": "6.22.8",
   "author": "Red Hat",
   "license": "MIT",
   "bin": {
@@ -12,7 +12,7 @@
     "@babel/preset-env": "7.27.1",
     "@babel/preset-react": "^7.24.1",
     "@mdx-js/util": "1.6.16",
-    "@patternfly/ast-helpers": "^1.4.0-alpha.274",
+    "@patternfly/ast-helpers": "^1.4.0-alpha.278",
     "@reach/router": "npm:@gatsbyjs/reach-router@1.3.9",
     "autoprefixer": "10.4.19",
     "babel-loader": "^9.1.3",
@@ -41,7 +41,7 @@
     "null-loader": "4.0.1",
     "parse-entities": "2.0.0",
     "path-browserify": "1.0.1",
-    "postcss": "8.5.0",
+    "postcss": "^8.4.31",
     "postcss-loader": "7.1.0",
     "process": "^0.11.10",
     "puppeteer": "^24.2.0",
@@ -93,6 +93,6 @@
     "parse-git-config": ">=3.0.0",
     "ip": ">=2.0.0",
     "http-cache-semantics": ">=4.1.1",
-    "nanoid": ">=3.3.8"
+    "nanoid": "3.3.8"
   }
 }

packages/documentation-site/patternfly-docs/content/design-guidelines/components/progress-stepper/progress-stepper.md

@@ -13,24 +13,24 @@ A **progress stepper** displays progress through a sequence of linear steps and
 </div>
 
 1. **Progress title:** Describes the task or process underway.
-2. **Progress description (optional):** Provides additional information on the task or process
-3. **Completed status:** Informs the user of a successfully completed step
-4. **In progress status:** Informs the user what step they are on
-5. **Failure status:** Informs the user of a failure or error in the step
-6. **Warning status:** Informs the user of a non-critical error in step
-7. **Pending step:** Upcoming steps needed to complete the task or process
+2. **Progress description (optional):** Provides additional information on the task or process.
+3. **Completed status:** Informs the user of a successfully completed step.
+4. **In progress status:** Informs the user what step they are on.
+5. **Failure status:** Informs the user of a failure or error in the step.
+6. **Warning status:** Informs the user of a non-critical error in a step.
+7. **Pending step:** Upcoming steps needed to complete the task or process.
 
 ## Usage
-Use a progress stepper to convey to a user how many steps are required to complete a task or process. Similar to the [progress bar](/components/progress), the progress stepper can help to keep users informed about how much effort or time the task or process will take to complete. One advantage is it displays the total number of steps at all times. Additionally, it informs the user exactly where they are in the process and how much is left until their task or process is completed. 
+Use a progress stepper to convey the number of steps required to complete a task or process. Similar to the [progress component](/components/progress), the progress stepper can help keep users informed about how much effort or time a task or process will take to complete. An advantage of the progress stepper is that the total number of steps is displayed at all times, which informs users about where they are in a process and how much is left until completion. 
 
 ### When to use
-* A user is completing a multi-step process in a card
+- For multi-step processes within a card.
 
 <div class="ws-docs-content-img">
 ![Example of a progress stepper in a card.](./img/multi-stepper-card.svg)
 </div>
 
-* A user is showing progression through a workflow in a table or card
+- To show progression through a workflow in a table or card.
 
 <div class="ws-docs-content-img">
 ![Example of a progress stepper in a table.](./img/stepper-table.svg)
@@ -40,7 +40,7 @@ Use a progress stepper to convey to a user how many steps are required to comple
 ![Example of a progress stepper in a card.](./img/stepper-card.svg)
 </div>
 
-* A user is checking the status of the installation process in a popover
+- To display the status of a process, like an installation, in a popover.
 
 <div class="ws-docs-content-img">
 ![Example of a progress stepper in a popover.](./img/stepper-popover.svg)
@@ -49,53 +49,62 @@ Use a progress stepper to convey to a user how many steps are required to comple
 ### When to use progress stepper vs. wizard
 
 Use a progress stepper:
-* To indicate to the user where they are in a step-by-step linear process on a single page. 
-* When the steps in the process could be completed by the user or happening in the background without the user completing the task themselves. 
+- To indicate to the user where they are in a step-by-step linear process on a single page. 
+- When the steps in the process could be completed by the user or could happen automatically in the background. 
 
 Use a [wizard](/components/wizard):
-* To guide the user through a multi-step flow where they must complete specific tasks in order. 
-* When the steps are complex enough they need to be broken up into smaller, more manageable steps and does not keep user on the same screen.
+- To guide the user through a multi-step flow where they must complete specific tasks in order. 
+- When the steps are complex enough to be broken up into smaller, more manageable steps, that require navigating between different screens.
+
+### When to use progress bar vs. progress stepper
+
+Use a progress stepper:
+- To indicate to a user where they are in a step-by-step linear process on a single page. 
+
+Use a [progress bar](/components/progress): 
+- To indicate to a user that the system is progressing through a task.
+- To let users monitor background tasks.
 
 ## Variations
-There are a few variations of the progress stepper that can be used for different use cases. All variations can be displayed horizontally or vertically, and the text on each step can be left justified or centered.
+There are a few variations of the progress stepper that can be used for different use cases. All variations can be displayed horizontally or vertically, and the text on each step can be left-aligned or centered.
 
 ### Basic progress stepper
-The basic progress stepper can be used when just the title of the step is enough to inform the user.
+A basic progress stepper can be used when just the title of the step is enough to inform the user.
 
 <div class="ws-docs-content-img">
 ![Example of a basic progress stepper.](./img/stepper-basic.svg)
 </div>
 
 ### Basic with descriptions
-If more description is needed, a basic progress stepper with descriptions can be used which allows for more context for each step.
+If more description is needed, you can use a basic progress stepper with descriptions, which allows for more context for each step.
 
 <div class="ws-docs-content-img">
 ![Example of a progress stepper with descriptions.](./img/stepper-with-descriptions.svg)
 </div>
 
 ### Vertical progress stepper
-The vertical alignment can be used in pages with a split view where one side houses the progress stepper and the other side houses each step’s content. These can also be used to display progress in a popover.
+A vertical progress stepper can be used in pages with a split view, where one side contains the progress stepper and the other side contains each step’s content. These can also be used to display progress in a popover.
 
 <div class="ws-docs-content-img">
 ![Example of a vertical progress stepper.](./img/stepper-vertical.svg)
 </div>
 
 ### Compact progress stepper
-In areas with less real estate such as table rows, the compact progress stepper can be used. The component will not display as much information such as each step’s title and/or description and will be smaller in size. The compact progress stepper also accounts for the alignment variations.
+In areas with less space, like table rows, the compact progress stepper can be used. Compact progress steppers will not display as much information&mdash;like each step’s title or description&mdash;and will be smaller in size. The compact progress stepper also accounts for the alignment variations.
 
 <div class="ws-docs-content-img">
 ![Example of a compact progress stepper.](./img/stepper-compact.svg)
 </div>
 
 ### Progress stepper with icons
-Custom icons can also be used for each step of the progress stepper based on the use case and the product’s need.
+Custom icons can also be used for each step of the progress stepper based on the use case and  product needs.
 
 <div class="ws-docs-content-img">
 ![Example of a progress stepper with custom icons.](./img/stepper-custom-icons.svg)
 </div>
 
 ### Progress stepper with help popover
-If additional help information or help text is needed and there is not enough real estate for a description, a popover on each step’s title can be used.
+If additional information or help text is needed and there is not enough space for a description, a popover on each step’s title can be used.
 
 <div class="ws-docs-content-img">
 ![Example of a progress stepper with a help popover.](./img/stepper-help-popover.svg)
@@ -112,34 +121,34 @@ For **in progress** steps, write your progress stepper title with present partic
 
 <div class="ws-content-table">
 
-| **Do**                      | **Don't**                  |
+| **Don't**                      | **Do**                  |
 |:-------------------------------:|:--------------------------:|
-| Installing cluster | Cluster is installing | 
-| Creating cache | Cluster creation in progress | 
+| Cluster is installing | Installing cluster | 
+| Cluster creation in progress | Creating cache  | 
 
 </div>
 
 For **failed** steps, write your progress stepper title in past tense. Avoid telling users a process “failed” in favor of providing a more specific description.
 
 <div class="ws-content-table">
 
-| **Do**                      | **Don't**                  |
+| **Don't**                      | **Do**                  |
 |:-------------------------------:|:--------------------------:|
-| Could not install cluster | Cluster installation failed | 
-| Could not validate account credentials | Account validation unsuccessful | 
+| Cluster installation failed | Could not install cluster | 
+| Account validation unsuccessful | Could not validate account credentials | 
 
 </div>
 
 For **complete** steps, write your progress stepper title in past tense. Use this brief line to confirm that a process or task succeeded. Avoid using adverbs like “successfully” by simply stating the action happened.
 
 <div class="ws-content-table">
 
-| **Do**                      | **Don't**                  |
+| **Don't**                      | **Do**                  |
 |:-------------------------------:|:--------------------------:|
-| Cluster installed | Installation is complete | 
-| Validated account credentials | Successfully validated account credentials | 
+| Installation is complete | Cluster installed | 
+| Successfully validated account credentials | Validated account credentials | 
 
 </div>
 
 ## Accessibility
-For information regarding accessibility, visit the progress stepper [accessibility tab](/components/progress-stepper/accessibility).
+For information regarding accessibility, visit the progress stepper [accessibility tab](/components/progress-stepper/accessibility).