Merge branch 'patternfly:main' into main

Author: wise-king-sullyman

package.json

@@ -15,7 +15,7 @@
     "clean": "lerna run clean && rm -rf build",
     "serve": "npx pf-docs-framework serve build/patternfly-org/site",
     "test": "yarn workspace patternfly-org test:a11y:ci",
-    "screenshots": "node node_modules/puppeteer/install.js && yarn workspace patternfly-org screenshots",
+    "screenshots": "yarn workspace patternfly-org screenshots",
     "start": "yarn develop",
     "start:extensions": "yarn develop:extensions",
     "uninstall": "find . -name node_modules | xargs rm -rf",
@@ -30,9 +30,9 @@
     ]
   },
   "devDependencies": {
-    "@patternfly/patternfly": "^6.0.0",
+    "@patternfly/patternfly": "^6.1.0-prerelease.2",
     "@patternfly/react-code-editor": "^6.0.0",
-    "@patternfly/react-core": "^6.0.0",
+    "@patternfly/react-core": "^6.1.0-prerelease.2",
     "@patternfly/react-table": "^6.0.0",
     "@octokit/rest": "^19.0.7",
     "glob": "^8.1.0",

packages/ast-helpers/CHANGELOG.md

@@ -3,6 +3,82 @@
 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.132 (2024-12-04)
+
+**Note:** Version bump only for package @patternfly/ast-helpers
+
+
+
+
+
+# 1.4.0-alpha.131 (2024-12-03)
+
+
+### Bug Fixes
+
+* Update text to 'Edit this page on Github' ([#4401](https://github.com/patternfly/patternfly-org/issues/4401)) ([22e6668](https://github.com/patternfly/patternfly-org/commit/22e6668c50c1a85f9a23f3bc0a7ed89d2637a7c0))
+
+
+
+
+
+# 1.4.0-alpha.130 (2024-12-03)
+
+**Note:** Version bump only for package @patternfly/ast-helpers
+
+
+
+
+
+# 1.4.0-alpha.129 (2024-11-26)
+
+
+### Bug Fixes
+
+* bump puppeteer and update screenshots ([#4394](https://github.com/patternfly/patternfly-org/issues/4394)) ([1ac1dac](https://github.com/patternfly/patternfly-org/commit/1ac1dace5994978d921008e0332ea55e21874137))
+
+
+
+
+
+# 1.4.0-alpha.128 (2024-11-22)
+
+
+### Bug Fixes
+
+* improve handling of dark mode preferences ([#4389](https://github.com/patternfly/patternfly-org/issues/4389)) ([1580900](https://github.com/patternfly/patternfly-org/commit/1580900ab1e27bdc3373d91e97c521da30878ac5)), closes [#4365](https://github.com/patternfly/patternfly-org/issues/4365)
+
+
+
+
+
+# 1.4.0-alpha.127 (2024-11-22)
+
+
+### Reverts
+
+* Revert "chore: upgrade Yarn to the latest version (#4387)" (#4391) ([14a81bf](https://github.com/patternfly/patternfly-org/commit/14a81bf15e81a7faa8ebea4c44e4fca2c6fae964)), closes [#4387](https://github.com/patternfly/patternfly-org/issues/4387) [#4391](https://github.com/patternfly/patternfly-org/issues/4391)
+
+
+
+
+
+# 1.4.0-alpha.126 (2024-11-21)
+
+**Note:** Version bump only for package @patternfly/ast-helpers
+
+
+
+
+
+# 1.4.0-alpha.125 (2024-11-20)
+
+**Note:** Version bump only for package @patternfly/ast-helpers
+
+
+
+
+
 # 1.4.0-alpha.124 (2024-11-15)
 
 

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

packages/documentation-framework/CHANGELOG.md

@@ -3,6 +3,82 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## 6.0.16 (2024-12-04)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+
+
+
+## 6.0.15 (2024-12-03)
+
+
+### Bug Fixes
+
+* Update text to 'Edit this page on Github' ([#4401](https://github.com/patternfly/patternfly-org/issues/4401)) ([22e6668](https://github.com/patternfly/patternfly-org/commit/22e6668c50c1a85f9a23f3bc0a7ed89d2637a7c0))
+
+
+
+
+
+## 6.0.14 (2024-12-03)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+
+
+
+## 6.0.13 (2024-11-26)
+
+
+### Bug Fixes
+
+* bump puppeteer and update screenshots ([#4394](https://github.com/patternfly/patternfly-org/issues/4394)) ([1ac1dac](https://github.com/patternfly/patternfly-org/commit/1ac1dace5994978d921008e0332ea55e21874137))
+
+
+
+
+
+## 6.0.12 (2024-11-22)
+
+
+### Bug Fixes
+
+* improve handling of dark mode preferences ([#4389](https://github.com/patternfly/patternfly-org/issues/4389)) ([1580900](https://github.com/patternfly/patternfly-org/commit/1580900ab1e27bdc3373d91e97c521da30878ac5)), closes [#4365](https://github.com/patternfly/patternfly-org/issues/4365)
+
+
+
+
+
+## 6.0.11 (2024-11-22)
+
+
+### Reverts
+
+* Revert "chore: upgrade Yarn to the latest version (#4387)" (#4391) ([14a81bf](https://github.com/patternfly/patternfly-org/commit/14a81bf15e81a7faa8ebea4c44e4fca2c6fae964)), closes [#4387](https://github.com/patternfly/patternfly-org/issues/4387) [#4391](https://github.com/patternfly/patternfly-org/issues/4391)
+
+
+
+
+
+## 6.0.10 (2024-11-21)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+
+
+
+## 6.0.9 (2024-11-20)
+
+**Note:** Version bump only for package @patternfly/documentation-framework
+
+
+
+
+
 ## 6.0.8 (2024-11-15)
 
 

packages/documentation-framework/layouts/sideNavLayout/sideNavLayout.js

@@ -1,4 +1,4 @@
-import React, { useEffect, useState, createContext } from 'react';
+import React, { useEffect, useState, createContext, useCallback } from 'react';
 import {
   Button,
   Page,
@@ -232,6 +232,26 @@ export function attachDocSearch(algolia, inputSelector, timeout) {
   }
 }
 
+const DARK_MODE_CLASS = "pf-v6-theme-dark";
+const DARK_MODE_STORAGE_KEY = "dark-mode";
+
+/**
+ * Determines if dark mode is enabled based on the stored value or the system preference.
+ * @returns {boolean} true if dark mode is enabled, false otherwise
+ */
+function isDarkModeEnabled() {
+  // When running in prerender mode we can't access the browser APIs.
+  if (process.env.PRERENDER) {
+    return false;
+  }
+
+  const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+  const storedValue = localStorage.getItem(DARK_MODE_STORAGE_KEY);
+  const isEnabled = storedValue === null ? mediaQuery.matches : storedValue === "true";
+
+  return isEnabled;
+}
+
 export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp }) => {
   const algolia = process.env.algolia;
   const hasGdprBanner = process.env.hasGdprBanner;
@@ -245,7 +265,63 @@ export const SideNavLayout = ({ children, groupedRoutes, navOpen: navOpenProp })
 
   const [versions, setVersions] = useState({ ...staticVersions });
   const [isRTL, setIsRTL] = useState(false);
-  const [isDarkTheme, setIsDarkTheme] = React.useState(false);
+  const [isDarkTheme, setIsDarkThemeInternal] = useState(() => isDarkModeEnabled());
+
+  /**
+   * Stores the dark mode preference in local storage and updates the dark mode class.
+   */
+  const setIsDarkTheme = useCallback((value) => {
+    localStorage.setItem(DARK_MODE_STORAGE_KEY, value.toString());
+    updateDarkMode();
+  }, []);
+
+  /**
+   * Updates the dark mode class to the root element depending on whether dark mode is enabled.
+   */
+  const updateDarkMode = useCallback(() => {
+    const isEnabled = isDarkModeEnabled();
+    const root = document.documentElement;
+
+    if (isEnabled) {
+      root.classList.add(DARK_MODE_CLASS);
+    } else {
+      root.classList.remove(DARK_MODE_CLASS);
+    }
+
+    setIsDarkThemeInternal(isEnabled);
+  }, []);
+
+  useEffect(() => {
+    // When running in prerender mode we can't access the browser APIs.
+    if (process.env.PRERENDER) {
+      return;
+    }
+
+    // Update the dark mode when the the user changes their system/browser preference.
+    const onQueryChange = () => {
+      // Remove the stored value to defer to the system preference.
+      localStorage.removeItem(DARK_MODE_STORAGE_KEY);
+      updateDarkMode();
+    };
+
+    // Update the dark mode when the user changes the preference in another context (e.g. tab or window).
+    /** @type {(event: StorageEvent) => void} */
+    const onStorageChange = (event) => {
+      if (event.key === DARK_MODE_STORAGE_KEY) {
+        updateDarkMode();
+      }
+    };
+
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+
+    mediaQuery.addEventListener("change", onQueryChange);
+    window.addEventListener("storage", onStorageChange);
+
+    return () => {
+      mediaQuery.removeEventListener("change", onQueryChange);
+      window.removeEventListener("storage", onStorageChange);
+    };
+  }, []);
 
   useEffect(() => {
     if (typeof window === 'undefined') {

packages/documentation-framework/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/documentation-framework",
   "description": "A framework to build documentation for PatternFly.",
-  "version": "6.0.8",
+  "version": "6.0.16",
   "author": "Red Hat",
   "license": "MIT",
   "private": false,
@@ -13,7 +13,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.124",
+    "@patternfly/ast-helpers": "^1.4.0-alpha.132",
     "@reach/router": "npm:@gatsbyjs/reach-router@1.3.9",
     "autoprefixer": "9.8.6",
     "babel-loader": "^9.1.3",
@@ -45,8 +45,8 @@
     "postcss": "8.4.32",
     "postcss-loader": "7.1.0",
     "process": "^0.11.10",
-    "puppeteer": "19.11.1",
-    "puppeteer-cluster": "0.23.0",
+    "puppeteer": "^23.6.1",
+    "puppeteer-cluster": "^0.24.0",
     "react-docgen": "5.3.1",
     "react-ssr-prepass": "1.5.0",
     "remark-footnotes": "1.0.0",
@@ -73,9 +73,9 @@
     "webpack-merge": "5.8.0"
   },
   "peerDependencies": {
-    "@patternfly/patternfly": "^6.0.0",
+    "@patternfly/patternfly": "^6.1.0-prerelease.2",
     "@patternfly/react-code-editor": "^6.0.0",
-    "@patternfly/react-core": "^6.0.0",
+    "@patternfly/react-core": "^6.1.0-prerelease.2",
     "@patternfly/react-table": "^6.0.0",
     "react": "^17.0.0 || ^18.0.0",
     "react-dom": "^17.0.0 || ^18.0.0"

packages/documentation-framework/templates/html.ejs

@@ -3,6 +3,7 @@
   <head>
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
+    <meta name="color-scheme" content="light dark">
     <meta name="description" content="PatternFly is Red Hat's open source design system. It consists of components, documentation, and code for building enterprise applications at scale.">
     <title><%= title %></title>
     <link rel="shortcut icon" href="/assets/Favicon-Light.png">
@@ -13,6 +14,41 @@
     <meta name="mobile-web-app-capable" content="yes">
     <meta name="theme-color" content="#151515">
     <meta name="application-name" content="PatternFly docs">
+    <script>
+      (() => {
+        "use strict";
+
+        const DARK_MODE_CLASS = "pf-v6-theme-dark";
+        const DARK_MODE_STORAGE_KEY = "dark-mode";
+        const darkModeQuery = window.matchMedia("(prefers-color-scheme: dark)");
+        
+        // Ensure that the dark mode is correctly set before the page starts rendering.
+        updateDarkMode();
+
+        /**
+         * Applies the dark mode class to the root element if dark mode is enabled.
+         */
+        function updateDarkMode() {
+          const isEnabled = isDarkModeEnabled();
+          const root = document.documentElement;
+        
+          if (isEnabled) {
+            root.classList.add(DARK_MODE_CLASS);
+          }
+        }
+
+        /**
+         * Determines if dark mode is enabled based on the stored value or the system preference.
+         * @returns {boolean} true if dark mode is enabled, false otherwise
+         */
+        function isDarkModeEnabled() {
+          const storedValue = localStorage.getItem(DARK_MODE_STORAGE_KEY);
+          const isEnabled = storedValue === null ? darkModeQuery.matches : storedValue === "true";
+
+          return isEnabled;
+        }
+      })();
+    </script>
     <%= htmlWebpackPlugin.tags.headTags %>
   </head>
   <body>

packages/documentation-framework/templates/mdx.js

@@ -222,7 +222,7 @@ const MDXChildTemplate = ({ Component, source, toc = [], index = 0, id }) => {
                 )
               }
             >
-              View source on GitHub
+              Edit this page on GitHub
             </a>
           </StackItem>
         )}