From 708e011caefede5243c8baf925a6a210db38e746 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Tue, 23 Jun 2026 09:55:33 -0400 Subject: [PATCH 1/5] fix(InfrastructureIcons): replaced with RH brand icons part 3 --- .../MultipleFileUploadStatusItem.tsx | 4 ++-- .../__tests__/MultipleFileUploadStatusItem.test.tsx | 8 ++++---- packages/react-core/src/components/Nav/examples/Nav.md | 5 ++--- .../src/components/Nav/examples/NavIcons.tsx | 8 ++++---- .../components/TreeView/examples/TreeViewWithIcons.tsx | 8 ++++---- packages/react-core/src/demos/Compass/Compass.md | 2 +- .../src/demos/Compass/examples/CompassDockDemo.tsx | 4 ++-- packages/react-core/src/demos/Nav.md | 2 +- packages/react-core/src/demos/Page.md | 2 +- .../react-core/src/demos/examples/Nav/NavDockedNav.tsx | 4 ++-- .../src/components/demos/TreeViewDemo/TreeViewDemo.tsx | 10 +++++----- .../react-table/src/components/Table/examples/Table.md | 4 ++-- .../src/components/Table/examples/TableTree.tsx | 6 +++--- .../components/Table/examples/LegacyTableTree.tsx | 6 +++--- .../src/deprecated/components/Table/examples/Table.md | 4 ++-- 15 files changed, 38 insertions(+), 39 deletions(-) diff --git a/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx b/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx index ab52edf5776..6af25b0dae4 100644 --- a/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx +++ b/packages/react-core/src/components/MultipleFileUpload/MultipleFileUploadStatusItem.tsx @@ -3,7 +3,7 @@ import styles from '@patternfly/react-styles/css/components/MultipleFileUpload/m import { css } from '@patternfly/react-styles'; import { Progress } from '../Progress'; import { Button } from '../Button'; -import FileIcon from '@patternfly/react-icons/dist/esm/icons/file-icon'; +import RhUiDocumentFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-document-fill-icon'; import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon'; /** Automatically reads an uploaded file to render a visual representation of it, including @@ -149,7 +149,7 @@ export const MultipleFileUploadStatusItem: React.FunctionComponent -
{fileIcon || }
+
{fileIcon || }
{progressAriaLiveMessage && diff --git a/packages/react-core/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatusItem.test.tsx b/packages/react-core/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatusItem.test.tsx index 79b8081ea6b..f2954c62ea2 100644 --- a/packages/react-core/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatusItem.test.tsx +++ b/packages/react-core/src/components/MultipleFileUpload/__tests__/MultipleFileUploadStatusItem.test.tsx @@ -1,7 +1,7 @@ import { render, screen } from '@testing-library/react'; import { MultipleFileUploadStatusItem } from '../MultipleFileUploadStatusItem'; -import FileImageIcon from '@patternfly/react-icons/dist/esm/icons/file-image-icon'; +import RhUiImageFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-image-fill-icon'; describe('MultipleFileUploadStatusItem', () => { test('renders with expected class names', () => { @@ -26,7 +26,7 @@ describe('MultipleFileUploadStatusItem', () => { const { asFragment } = render( } + fileIcon={} fileName="testCustomFileName.txt" fileSize={42} progressId="test-progress-id" @@ -42,7 +42,7 @@ describe('MultipleFileUploadStatusItem', () => { const { asFragment } = render( } + fileIcon={} fileName="testCustomFileName.txt" fileSize={42} progressId="test-progress-id" @@ -58,7 +58,7 @@ describe('MultipleFileUploadStatusItem', () => { const { asFragment } = render( } + fileIcon={} fileName="testCustomFileName.txt" fileSize={42} progressId="test-progress-id" diff --git a/packages/react-core/src/components/Nav/examples/Nav.md b/packages/react-core/src/components/Nav/examples/Nav.md index 037efc47a6e..432166e95e8 100644 --- a/packages/react-core/src/components/Nav/examples/Nav.md +++ b/packages/react-core/src/components/Nav/examples/Nav.md @@ -10,8 +10,8 @@ import { useState } from 'react'; import './nav.css'; import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon'; import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; -import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon'; -import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-icon'; +import RhUiFolderFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-fill-icon'; +import RhUiFolderOpenFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-open-fill-icon'; import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon'; import RhUiLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-link-icon'; @@ -81,7 +81,6 @@ A flyout should be a `Menu` component. Press `space` or `right arrow` to open a ``` - ## Types ### NavSelectClickHandler diff --git a/packages/react-core/src/components/Nav/examples/NavIcons.tsx b/packages/react-core/src/components/Nav/examples/NavIcons.tsx index f8260480406..2c6708fcf2f 100644 --- a/packages/react-core/src/components/Nav/examples/NavIcons.tsx +++ b/packages/react-core/src/components/Nav/examples/NavIcons.tsx @@ -1,9 +1,9 @@ import { useState } from 'react'; import { Nav, NavExpandable, NavItem, NavList } from '@patternfly/react-core'; import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; -import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon'; +import RhUiFolderFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-fill-icon'; import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon'; -import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-icon'; +import RhUiFolderOpenFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-open-fill-icon'; import RhUiLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-link-icon'; export const NavIcons: React.FunctionComponent = () => { @@ -32,7 +32,7 @@ export const NavIcons: React.FunctionComponent = () => { to="#nav-icon-link2" itemId={1} isActive={activeItem === 1} - icon={} + icon={} > Link 2 @@ -56,7 +56,7 @@ export const NavIcons: React.FunctionComponent = () => { > Link 4 - } groupId="nav-icon-expandable"> + } groupId="nav-icon-expandable"> { const [activeItems, setActiveItems] = useState(); @@ -78,8 +78,8 @@ export const TreeViewWithIcons: React.FunctionComponent = () => { data={options} activeItems={activeItems} onSelect={onSelect} - icon={} - expandedIcon={} + icon={} + expandedIcon={} /> ); }; diff --git a/packages/react-core/src/demos/Compass/Compass.md b/packages/react-core/src/demos/Compass/Compass.md index eb8c63a531d..0f59be591d6 100644 --- a/packages/react-core/src/demos/Compass/Compass.md +++ b/packages/react-core/src/demos/Compass/Compass.md @@ -9,7 +9,7 @@ import OutlinedPlusSquare from '@patternfly/react-icons/dist/esm/icons/outlined- import RhUiCopyIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-icon'; import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon'; import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; -import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon'; +import RhUiFolderFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-fill-icon'; import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon'; import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon'; import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon'; diff --git a/packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx b/packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx index d36fee0c37f..bffb76fd27f 100644 --- a/packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx +++ b/packages/react-core/src/demos/Compass/examples/CompassDockDemo.tsx @@ -29,7 +29,7 @@ import { PageToggleButton } from '@patternfly/react-core'; import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; -import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon'; +import RhUiFolderFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-fill-icon'; import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon'; import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon'; import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon'; @@ -268,7 +268,7 @@ export const CompassDockDemo: React.FunctionComponent = () => { to="#nav-icon-link2" itemId={1} isActive={activeItem === 1} - icon={} + icon={} anchorRef={navItem2Ref} aria-label="Policy" > diff --git a/packages/react-core/src/demos/Nav.md b/packages/react-core/src/demos/Nav.md index f51f988571b..7cee313c18f 100644 --- a/packages/react-core/src/demos/Nav.md +++ b/packages/react-core/src/demos/Nav.md @@ -13,7 +13,7 @@ import RhUiMenuBarsIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-menu- import imgAvatar from '@patternfly/react-core/src/components/assets/avatarImg.svg'; import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg'; import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; -import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon'; +import RhUiFolderFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-fill-icon'; import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon'; import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon'; import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon'; diff --git a/packages/react-core/src/demos/Page.md b/packages/react-core/src/demos/Page.md index e2c3115a7e5..200cb967a54 100644 --- a/packages/react-core/src/demos/Page.md +++ b/packages/react-core/src/demos/Page.md @@ -13,7 +13,7 @@ import RhUiMenuBarsIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-menu- import LightbulbIcon from '@patternfly/react-icons/dist/esm/icons/lightbulb-icon'; import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon'; import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; -import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon'; +import RhUiFolderFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-fill-icon'; import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon'; import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg'; import pfIconLogo from '@patternfly/react-core/src/demos/assets/PF-IconLogo-color.svg'; diff --git a/packages/react-core/src/demos/examples/Nav/NavDockedNav.tsx b/packages/react-core/src/demos/examples/Nav/NavDockedNav.tsx index d8f54091b55..401ede86851 100644 --- a/packages/react-core/src/demos/examples/Nav/NavDockedNav.tsx +++ b/packages/react-core/src/demos/examples/Nav/NavDockedNav.tsx @@ -32,7 +32,7 @@ import { } from '@patternfly/react-core'; import RhUiQuestionMarkCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-fill-icon'; import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; -import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon'; +import RhUiFolderFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-fill-icon'; import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon'; import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon'; import ThIcon from '@patternfly/react-icons/dist/esm/icons/th-icon'; @@ -289,7 +289,7 @@ export const NavDockedNav: React.FunctionComponent = () => { to="#nav-link2" itemId={1} isActive={activeItem === 1} - icon={} + icon={} anchorRef={navItem2Ref} aria-label="Policy" > diff --git a/packages/react-integration/demo-app-ts/src/components/demos/TreeViewDemo/TreeViewDemo.tsx b/packages/react-integration/demo-app-ts/src/components/demos/TreeViewDemo/TreeViewDemo.tsx index 843a89450b7..cec1512b3b2 100644 --- a/packages/react-integration/demo-app-ts/src/components/demos/TreeViewDemo/TreeViewDemo.tsx +++ b/packages/react-integration/demo-app-ts/src/components/demos/TreeViewDemo/TreeViewDemo.tsx @@ -7,8 +7,8 @@ import { TreeViewDataItem, TreeViewSearch } from '@patternfly/react-core'; -import FolderIcon from '@patternfly/react-icons/dist/esm/icons/folder-icon'; -import FolderOpenIcon from '@patternfly/react-icons/dist/esm/icons/folder-open-icon'; +import RhUiFolderFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-fill-icon'; +import RhUiFolderOpenFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-open-fill-icon'; import { Component } from 'react'; export class TreeViewDemo extends Component { @@ -189,8 +189,8 @@ export class TreeViewDemo extends Component { name: 'ApplicationLauncher', id: 'FAppLaunch', hasCheckbox: true, - icon: , - expandedIcon: , + icon: , + expandedIcon: , children: [ { name: 'Application 1', @@ -225,7 +225,7 @@ export class TreeViewDemo extends Component { id: 'FCost', hasBadge: true, customBadgeContent: 'custom badge', - action:
- - - - - - +
@@ -391,11 +367,11 @@ exports[`MultipleFileUploadStatusItem renders custom function progressAriaLiveMe fill="currentColor" height="1em" role="img" - viewBox="0 0 384 512" + viewBox="0 0 32 32" width="1em" >
@@ -509,24 +485,12 @@ exports[`MultipleFileUploadStatusItem renders custom progress value/variant when fill="currentColor" height="1em" role="img" + viewBox="0 0 32 32" width="1em" > - - - - - - +
- - - - - - +
- - - - - - +
From 0969799f0d5b433f253b0c772ea927c0a128f628 Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Tue, 23 Jun 2026 10:23:43 -0400 Subject: [PATCH 3/5] Added icon import to md file --- .../react-core/src/components/TreeView/examples/TreeView.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/TreeView/examples/TreeView.md b/packages/react-core/src/components/TreeView/examples/TreeView.md index 2690852e729..a4f86ad49ce 100644 --- a/packages/react-core/src/components/TreeView/examples/TreeView.md +++ b/packages/react-core/src/components/TreeView/examples/TreeView.md @@ -6,7 +6,7 @@ propComponents: ['TreeView', 'TreeViewDataItem', 'TreeViewSearch'] --- import { Fragment, useEffect, useState } from 'react'; -import { FolderIcon, FolderOpenIcon, RhUiEllipsisVerticalFillIcon, HamburgerIcon, GitlabIcon, GithubIcon, GoogleIcon, RhUiClipboardFillIcon, RhUiStorageFillIcon } from '@patternfly/react-icons'; +import { FolderIcon, FolderOpenIcon, RhUiEllipsisVerticalFillIcon, HamburgerIcon, GitlabIcon, GithubIcon, GoogleIcon, RhUiClipboardFillIcon, RhUiStorageFillIcon, RhUiFolderFillIcon } from '@patternfly/react-icons'; ## Examples From f97458558d62e58911ae037a9f9de3ff616b84ba Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Tue, 23 Jun 2026 10:47:18 -0400 Subject: [PATCH 4/5] Updated treeview md file imports --- .../react-core/src/components/TreeView/examples/TreeView.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/packages/react-core/src/components/TreeView/examples/TreeView.md b/packages/react-core/src/components/TreeView/examples/TreeView.md index a4f86ad49ce..1707521d202 100644 --- a/packages/react-core/src/components/TreeView/examples/TreeView.md +++ b/packages/react-core/src/components/TreeView/examples/TreeView.md @@ -6,7 +6,7 @@ propComponents: ['TreeView', 'TreeViewDataItem', 'TreeViewSearch'] --- import { Fragment, useEffect, useState } from 'react'; -import { FolderIcon, FolderOpenIcon, RhUiEllipsisVerticalFillIcon, HamburgerIcon, GitlabIcon, GithubIcon, GoogleIcon, RhUiClipboardFillIcon, RhUiStorageFillIcon, RhUiFolderFillIcon } from '@patternfly/react-icons'; +import { RhUiEllipsisVerticalFillIcon, HamburgerIcon, GitlabIcon, GithubIcon, GoogleIcon, RhUiClipboardFillIcon, RhUiStorageFillIcon, RhUiFolderFillIcon, RhUiFolderOpenFillIcon } from '@patternfly/react-icons'; ## Examples From 16ccbe6db3da07995bbeceeafad488ee5c71f3cc Mon Sep 17 00:00:00 2001 From: Eric Olkowski Date: Wed, 24 Jun 2026 08:06:28 -0400 Subject: [PATCH 5/5] Removed import from page demo md --- packages/react-core/src/demos/Page.md | 1 - 1 file changed, 1 deletion(-) diff --git a/packages/react-core/src/demos/Page.md b/packages/react-core/src/demos/Page.md index 200cb967a54..442105d9026 100644 --- a/packages/react-core/src/demos/Page.md +++ b/packages/react-core/src/demos/Page.md @@ -13,7 +13,6 @@ import RhUiMenuBarsIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-menu- import LightbulbIcon from '@patternfly/react-icons/dist/esm/icons/lightbulb-icon'; import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon'; import CubeIcon from '@patternfly/react-icons/dist/esm/icons/cube-icon'; -import RhUiFolderFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-fill-icon'; import CloudIcon from '@patternfly/react-icons/dist/esm/icons/cloud-icon'; import pfLogo from '@patternfly/react-core/src/demos/assets/PF-HorizontalLogo-Color.svg'; import pfIconLogo from '@patternfly/react-core/src/demos/assets/PF-IconLogo-color.svg';