Merge branch 'main' into iss12148

nicolethoen · web-flow · commit e36d98dce958 · 2025-12-11T08:22:35.000-05:00
diff --git a/packages/react-code-editor/CHANGELOG.md b/packages/react-code-editor/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.5.0-prerelease.22](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.5.0-prerelease.21...@patternfly/react-code-editor@6.5.0-prerelease.22) (2025-12-03)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
+# [6.5.0-prerelease.21](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.5.0-prerelease.20...@patternfly/react-code-editor@6.5.0-prerelease.21) (2025-12-03)
+
+**Note:** Version bump only for package @patternfly/react-code-editor
+
 # [6.5.0-prerelease.20](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-code-editor@6.5.0-prerelease.19...@patternfly/react-code-editor@6.5.0-prerelease.20) (2025-12-01)
 
 **Note:** Version bump only for package @patternfly/react-code-editor
diff --git a/packages/react-code-editor/package.json b/packages/react-code-editor/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-code-editor",
-  "version": "6.5.0-prerelease.20",
+  "version": "6.5.0-prerelease.22",
   "description": "This package provides a PatternFly wrapper for the Monaco code editor\n",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
diff --git a/packages/react-core/CHANGELOG.md b/packages/react-core/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.5.0-prerelease.21](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@6.5.0-prerelease.20...@patternfly/react-core@6.5.0-prerelease.21) (2025-12-03)
+
+**Note:** Version bump only for package @patternfly/react-core
+
+# [6.5.0-prerelease.20](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@6.5.0-prerelease.19...@patternfly/react-core@6.5.0-prerelease.20) (2025-12-03)
+
+**Note:** Version bump only for package @patternfly/react-core
+
 # [6.5.0-prerelease.19](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-core@6.5.0-prerelease.18...@patternfly/react-core@6.5.0-prerelease.19) (2025-12-01)
 
 ### Features
diff --git a/packages/react-core/package.json b/packages/react-core/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-core",
-  "version": "6.5.0-prerelease.19",
+  "version": "6.5.0-prerelease.21",
   "description": "This library provides a set of common React components for use with the PatternFly reference implementation.",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
diff --git a/packages/react-core/src/components/Compass/examples/Compass.md b/packages/react-core/src/components/Compass/examples/Compass.md
@@ -39,7 +39,7 @@ In a basic Compass layout, content can be passed to the following props to popul
 
 To customize the background image of the `<Compass>` and `<CompassHero>` components, you can use their respective `backgroundSrcLight` and `backgroundSrcDark` props. You can also add and customize a color gradient background for the `<CompassHero>` component by using the `gradientLight` and `gradientDark` props.
 
-```ts file="CompassBasic.tsx"
+```ts isBeta file="CompassBasic.tsx"
 
 ```
 
diff --git a/packages/react-docs/CHANGELOG.md b/packages/react-docs/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [7.5.0-prerelease.23](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.5.0-prerelease.22...@patternfly/react-docs@7.5.0-prerelease.23) (2025-12-03)
+
+**Note:** Version bump only for package @patternfly/react-docs
+
+# [7.5.0-prerelease.22](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.5.0-prerelease.21...@patternfly/react-docs@7.5.0-prerelease.22) (2025-12-03)
+
+**Note:** Version bump only for package @patternfly/react-docs
+
 # [7.5.0-prerelease.21](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-docs@7.5.0-prerelease.20...@patternfly/react-docs@7.5.0-prerelease.21) (2025-12-01)
 
 **Note:** Version bump only for package @patternfly/react-docs
diff --git a/packages/react-docs/package.json b/packages/react-docs/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@patternfly/react-docs",
   "description": "PatternFly React Docs",
-  "version": "7.5.0-prerelease.21",
+  "version": "7.5.0-prerelease.23",
   "publishConfig": {
     "access": "public",
     "tag": "prerelease"
diff --git a/packages/react-drag-drop/CHANGELOG.md b/packages/react-drag-drop/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.5.0-prerelease.21](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-drag-drop@6.5.0-prerelease.20...@patternfly/react-drag-drop@6.5.0-prerelease.21) (2025-12-03)
+
+**Note:** Version bump only for package @patternfly/react-drag-drop
+
+# [6.5.0-prerelease.20](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-drag-drop@6.5.0-prerelease.19...@patternfly/react-drag-drop@6.5.0-prerelease.20) (2025-12-03)
+
+**Note:** Version bump only for package @patternfly/react-drag-drop
+
 # [6.5.0-prerelease.19](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-drag-drop@6.5.0-prerelease.18...@patternfly/react-drag-drop@6.5.0-prerelease.19) (2025-12-01)
 
 **Note:** Version bump only for package @patternfly/react-drag-drop
diff --git a/packages/react-drag-drop/package.json b/packages/react-drag-drop/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-drag-drop",
-  "version": "6.5.0-prerelease.19",
+  "version": "6.5.0-prerelease.21",
   "description": "PatternFly drag and drop solution",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
diff --git a/packages/react-icons/CHANGELOG.md b/packages/react-icons/CHANGELOG.md
@@ -3,6 +3,12 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.5.0-prerelease.8](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-icons@6.5.0-prerelease.7...@patternfly/react-icons@6.5.0-prerelease.8) (2025-12-03)
+
+### Features
+
+- **react-icons:** update to create static SVGs ([#12154](https://github.com/patternfly/patternfly-react/issues/12154)) ([3d2fd6f](https://github.com/patternfly/patternfly-react/commit/3d2fd6f1d408961e89b37da15aaffa705205afa9))
+
 # [6.5.0-prerelease.7](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-icons@6.5.0-prerelease.6...@patternfly/react-icons@6.5.0-prerelease.7) (2025-11-20)
 
 ### Features
diff --git a/packages/react-icons/README.md b/packages/react-icons/README.md
@@ -10,7 +10,7 @@ import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
 const closeIcon = <TimesIcon />;
 ```
 
-For a list of the available icons please refer to the [PatternFly react docs](https://react-staging.patternfly.org/icons)
+For a list of the available icons please refer to the [PatternFly react docs](https://pf-react-staging.patternfly.org/icons)
 
 ## Styling icons
 
@@ -68,3 +68,28 @@ module.exports = {
   ]
 }
 ```
+
+## Static SVGs
+
+All icons are also available as static SVG files in `@patternfly/react-icons/dist/static`. The static SVGs include all the same attributes as the React components (viewBox, class names, etc.) to ensure visual consistency.
+
+Static SVGs are useful when you need to:
+- Use icons in non-React contexts, such as static HTML
+- Reference icons via URL or file path
+
+### Usage
+
+You can import or reference static SVG files directly:
+
+```jsx
+// In HTML
+<img src="/icons/static/times-icon.svg" alt="Close" />
+
+// In CSS
+.close-icon {
+  background-image: url('/icons/static/times-icon.svg');
+}
+
+// Direct file path
+import timesIcon from '@patternfly/react-icons/dist/static/times-icon.svg';
+```
diff --git a/packages/react-icons/package.json b/packages/react-icons/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-icons",
-  "version": "6.5.0-prerelease.7",
+  "version": "6.5.0-prerelease.8",
   "description": "PatternFly 4 Icons as React Components",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
@@ -26,8 +26,9 @@
   "homepage": "https://github.com/patternfly/patternfly-react#readme",
   "scripts": {
     "build:single:packages": "node ../../scripts/build-single-packages.mjs --config single-packages.config.json",
+    "build:esm": "tsc --build tsconfig.json",
     "clean": "rimraf dist src/icons src/index.js src/index.d.ts",
-    "generate": "rimraf dist/esm/icons dist/js/icons && node scripts/writeIcons.mjs"
+    "generate": "rimraf dist/esm/icons dist/js/icons && yarn build:esm && node scripts/writeIcons.mjs"
   },
   "devDependencies": {
     "@fortawesome/free-brands-svg-icons": "^5.15.4",
diff --git a/packages/react-icons/scripts/writeIcons.mjs b/packages/react-icons/scripts/writeIcons.mjs
@@ -1,11 +1,18 @@
 import { join } from 'path';
-import { outputFileSync } from 'fs-extra/esm';
+import { outputFileSync, ensureDirSync } from 'fs-extra/esm';
 import { generateIcons } from './generateIcons.mjs';
+import { createElement } from 'react';
+import { renderToString } from 'react-dom/server';
 
 import * as url from 'url';
 const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
 
+// Import createIcon from compiled dist (build:esm must run first)
+const createIconModule = await import('../dist/esm/createIcon.js');
+const createIcon = createIconModule.createIcon;
+
 const outDir = join(__dirname, '../dist');
+const staticDir = join(outDir, 'static');
 
 const removeSnake = (s) => s.toUpperCase().replace('-', '').replace('_', '');
 const toCamel = (s) => `${s[0].toUpperCase()}${s.substr(1).replace(/([-_][\w])/gi, removeSnake)}`;
@@ -72,6 +79,50 @@ export default ${jsName};
   outputFileSync(join(outDir, 'esm/icons', filename), text);
 };
 
+/**
+ * Generates a static SVG string from icon data using createIcon
+ * @param {string} iconName The name of the icon
+ * @param {object} icon The icon data object
+ * @returns {string} Static SVG markup
+ */
+function generateStaticSVG(iconName, icon) {
+  const jsName = `${toCamel(iconName)}Icon`;
+
+  // Create icon component using createIcon
+  const IconComponent = createIcon({
+    name: jsName,
+    width: icon.width,
+    height: icon.height,
+    svgPath: icon.svgPathData,
+    xOffset: icon.xOffset || 0,
+    yOffset: icon.yOffset || 0,
+    svgClassName: icon.svgClassName
+  });
+
+  // Render the component to string
+  const svgString = renderToString(createElement(IconComponent));
+
+  // Convert React's className to class for static SVG
+  return svgString.replace(/className=/g, 'class=');
+}
+
+/**
+ * Writes static SVG files to dist/static directory
+ * @param {object} icons icons from generateIcons
+ */
+function writeStaticSVGs(icons) {
+  ensureDirSync(staticDir);
+
+  Object.entries(icons).forEach(([iconName, icon]) => {
+    const svgContent = generateStaticSVG(iconName, icon);
+    const svgFileName = `${iconName}.svg`;
+    outputFileSync(join(staticDir, svgFileName), svgContent, 'utf-8');
+  });
+
+  // eslint-disable-next-line no-console
+  console.log(`Wrote ${Object.keys(icons).length} static SVG files to ${staticDir}`);
+}
+
 /**
  * Writes CJS and ESM icons to `dist` directory
  *
@@ -114,4 +165,6 @@ ${index
   console.log('Wrote', index.length * 3 + 3, 'icon files.');
 }
 
-writeIcons(generateIcons());
+const icons = generateIcons();
+writeIcons(icons);
+writeStaticSVGs(icons);
diff --git a/packages/react-integration/demo-app-ts/CHANGELOG.md b/packages/react-integration/demo-app-ts/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.5.0-prerelease.21](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@6.5.0-prerelease.20...demo-app-ts@6.5.0-prerelease.21) (2025-12-03)
+
+**Note:** Version bump only for package demo-app-ts
+
+# [6.5.0-prerelease.20](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@6.5.0-prerelease.19...demo-app-ts@6.5.0-prerelease.20) (2025-12-03)
+
+**Note:** Version bump only for package demo-app-ts
+
 # [6.5.0-prerelease.19](https://github.com/patternfly/patternfly-react/compare/demo-app-ts@6.5.0-prerelease.18...demo-app-ts@6.5.0-prerelease.19) (2025-12-01)
 
 **Note:** Version bump only for package demo-app-ts
diff --git a/packages/react-integration/demo-app-ts/package.json b/packages/react-integration/demo-app-ts/package.json
@@ -1,7 +1,7 @@
 {
   "name": "demo-app-ts",
   "private": true,
-  "version": "6.5.0-prerelease.19",
+  "version": "6.5.0-prerelease.21",
   "scripts": {
     "dev": "vite",
     "build": "tsc && vite build",
diff --git a/packages/react-table/CHANGELOG.md b/packages/react-table/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.5.0-prerelease.21](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@6.5.0-prerelease.20...@patternfly/react-table@6.5.0-prerelease.21) (2025-12-03)
+
+**Note:** Version bump only for package @patternfly/react-table
+
+# [6.5.0-prerelease.20](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@6.5.0-prerelease.19...@patternfly/react-table@6.5.0-prerelease.20) (2025-12-03)
+
+**Note:** Version bump only for package @patternfly/react-table
+
 # [6.5.0-prerelease.19](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-table@6.5.0-prerelease.18...@patternfly/react-table@6.5.0-prerelease.19) (2025-12-01)
 
 **Note:** Version bump only for package @patternfly/react-table
diff --git a/packages/react-table/package.json b/packages/react-table/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-table",
-  "version": "6.5.0-prerelease.19",
+  "version": "6.5.0-prerelease.21",
   "description": "This library provides a set of React table components for use with the PatternFly 4",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",
diff --git a/packages/react-templates/CHANGELOG.md b/packages/react-templates/CHANGELOG.md
@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [6.5.0-prerelease.21](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-templates@6.5.0-prerelease.20...@patternfly/react-templates@6.5.0-prerelease.21) (2025-12-03)
+
+**Note:** Version bump only for package @patternfly/react-templates
+
+# [6.5.0-prerelease.20](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-templates@6.5.0-prerelease.19...@patternfly/react-templates@6.5.0-prerelease.20) (2025-12-03)
+
+**Note:** Version bump only for package @patternfly/react-templates
+
 # [6.5.0-prerelease.19](https://github.com/patternfly/patternfly-react/compare/@patternfly/react-templates@6.5.0-prerelease.18...@patternfly/react-templates@6.5.0-prerelease.19) (2025-12-01)
 
 **Note:** Version bump only for package @patternfly/react-templates
diff --git a/packages/react-templates/package.json b/packages/react-templates/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@patternfly/react-templates",
-  "version": "6.5.0-prerelease.19",
+  "version": "6.5.0-prerelease.21",
   "description": "This package provides wrapped component demos for ease of use\n",
   "main": "dist/js/index.js",
   "module": "dist/esm/index.js",

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@patternfly/react-code-editor",`
`3`		`- "version": "6.5.0-prerelease.20",`
	`3`	`+ "version": "6.5.0-prerelease.22",`
`4`	`4`	`"description": "This package provides a PatternFly wrapper for the Monaco code editor\n",`
`5`	`5`	`"main": "dist/js/index.js",`
`6`	`6`	`"module": "dist/esm/index.js",`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@patternfly/react-core",`
`3`		`- "version": "6.5.0-prerelease.19",`
	`3`	`+ "version": "6.5.0-prerelease.21",`
`4`	`4`	`"description": "This library provides a set of common React components for use with the PatternFly reference implementation.",`
`5`	`5`	`"main": "dist/js/index.js",`
`6`	`6`	`"module": "dist/esm/index.js",`
Original file line number	Diff line number	Diff line change
`@@ -1,7 +1,7 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@patternfly/react-docs",`
`3`	`3`	`"description": "PatternFly React Docs",`
`4`		`- "version": "7.5.0-prerelease.21",`
	`4`	`+ "version": "7.5.0-prerelease.23",`
`5`	`5`	`"publishConfig": {`
`6`	`6`	`"access": "public",`
`7`	`7`	`"tag": "prerelease"`
Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@patternfly/react-drag-drop",`
`3`		`- "version": "6.5.0-prerelease.19",`
	`3`	`+ "version": "6.5.0-prerelease.21",`
`4`	`4`	`"description": "PatternFly drag and drop solution",`
`5`	`5`	`"main": "dist/js/index.js",`
`6`	`6`	`"module": "dist/esm/index.js",`