@patternfly/react-core 6.6.0-prerelease.6 → 6.6.0-prerelease.8

package/src/components/OverflowMenu/examples/OverflowMenuMultiGroup.tsx

@@ -12,7 +12,7 @@ import {
   Dropdown,
   DropdownList
 } from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import AlignLeftIcon from '@patternfly/react-icons/dist/esm/icons/align-left-icon';
 import AlignCenterIcon from '@patternfly/react-icons/dist/esm/icons/align-center-icon';
 import AlignRightIcon from '@patternfly/react-icons/dist/esm/icons/align-right-icon';
@@ -88,7 +88,7 @@ export const OverflowMenuMultiGroup: React.FunctionComponent = () => {
               variant="plain"
               onClick={onToggle}
               isExpanded={isOpen}
-              icon={<EllipsisVIcon />}
+              icon={<RhUiEllipsisVerticalFillIcon />}
             />
           )}
           isOpen={isOpen}

package/src/components/OverflowMenu/examples/OverflowMenuPersistent.tsx

@@ -12,7 +12,7 @@ import {
   Dropdown,
   DropdownList
 } from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 export const OverflowMenuPersistent: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -62,7 +62,7 @@ export const OverflowMenuPersistent: React.FunctionComponent = () => {
               variant="plain"
               onClick={onToggle}
               isExpanded={isOpen}
-              icon={<EllipsisVIcon />}
+              icon={<RhUiEllipsisVerticalFillIcon />}
             />
           )}
           isOpen={isOpen}

package/src/components/OverflowMenu/examples/OverflowMenuSimple.tsx

@@ -10,7 +10,7 @@ import {
   Dropdown,
   DropdownList
 } from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -62,7 +62,7 @@ export const OverflowMenuBreakpointOnContainer: React.FunctionComponent = () =>
               variant="plain"
               onClick={onToggle}
               isExpanded={isOpen}
-              icon={<EllipsisVIcon />}
+              icon={<RhUiEllipsisVerticalFillIcon />}
             />
           )}
           isOpen={isOpen}

package/src/components/OverflowMenu/examples/OverflowMenuSimpleVertical.tsx

@@ -10,7 +10,7 @@ import {
   Dropdown,
   DropdownList
 } from '@patternfly/react-core';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 export const OverflowMenuSimpleVertical: React.FunctionComponent = () => {
   const [isOpen, setIsOpen] = useState(false);
@@ -62,7 +62,7 @@ export const OverflowMenuSimpleVertical: React.FunctionComponent = () => {
               variant="plain"
               onClick={onToggle}
               isExpanded={isOpen}
-              icon={<EllipsisVIcon />}
+              icon={<RhUiEllipsisVerticalFillIcon />}
             />
           )}
           isOpen={isOpen}

package/src/components/Popover/examples/Popover.md

@@ -11,7 +11,7 @@ import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-u
 import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
 import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
 import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
-import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
+import RhUiAttentionBellFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-attention-bell-fill-icon';
 
 ## Examples
 

package/src/components/Popover/examples/PopoverWithIconInTheTitle.tsx

@@ -1,12 +1,12 @@
 import { Popover, Button } from '@patternfly/react-core';
-import BullhornIcon from '@patternfly/react-icons/dist/esm/icons/bullhorn-icon';
+import RhUiAttentionBellFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-attention-bell-fill-icon';
 
 export const PopoverWithIconInTheTitle: React.FunctionComponent = () => (
   <div style={{ margin: '50px' }}>
     <Popover
       aria-label="Popover with icon in the title example"
       headerContent="Popover with icon"
-      headerIcon={<BullhornIcon />}
+      headerIcon={<RhUiAttentionBellFillIcon />}
       bodyContent={<div>Popovers are triggered by click rather than hover.</div>}
       footerContent="Popover footer"
       appendTo={() => document.body}

package/src/components/ProgressStepper/examples/ProgressStepper.md

@@ -6,8 +6,8 @@ propComponents: ['ProgressStepper', 'ProgressStep']
 ---
 
 import { Fragment, useState } from 'react';
-import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';
-import PendingIcon from '@patternfly/react-icons/dist/esm/icons/pending-icon';
+import RhUiInProgressIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-in-progress-icon';
+import RhUiPendingIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-pending-icon';
 
 ## Examples
 

package/src/components/ProgressStepper/examples/ProgressStepperCustomIcons.tsx

@@ -1,6 +1,6 @@
 import { ProgressStepper, ProgressStep } from '@patternfly/react-core';
-import InProgressIcon from '@patternfly/react-icons/dist/esm/icons/in-progress-icon';
-import PendingIcon from '@patternfly/react-icons/dist/esm/icons/pending-icon';
+import RhUiInProgressIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-in-progress-icon';
+import RhUiPendingIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-pending-icon';
 
 export const ProgressStepperCustomIcons: React.FunctionComponent = () => (
   <ProgressStepper aria-label="Progress stepper with custom icons">
@@ -14,7 +14,7 @@ export const ProgressStepperCustomIcons: React.FunctionComponent = () => (
     </ProgressStep>
     <ProgressStep
       isCurrent
-      icon={<InProgressIcon />}
+      icon={<RhUiInProgressIcon />}
       id="custom-step2"
       titleId="custom-step2-title"
       aria-label="in progress"
@@ -23,7 +23,7 @@ export const ProgressStepperCustomIcons: React.FunctionComponent = () => (
     </ProgressStep>
     <ProgressStep
       variant="pending"
-      icon={<PendingIcon />}
+      icon={<RhUiPendingIcon />}
       id="custom-step3"
       titleId="custom-step3-title"
       aria-label="pending step"

package/src/components/Tabs/examples/Tabs.md

@@ -18,12 +18,12 @@ ouia: true
 ---
 
 import { createRef, Fragment, useEffect, useRef, useState } from 'react';
-import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon';
-import BoxIcon from '@patternfly/react-icons/dist/esm/icons/box-icon';
+import RhUiUsersFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-users-fill-icon';
+import RhUiContainerFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-container-fill-icon';
 import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon';
-import ServerIcon from '@patternfly/react-icons/dist/esm/icons/server-icon';
+import RhUiServerStackFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-server-stack-fill-icon';
 import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon';
-import ProjectDiagramIcon from '@patternfly/react-icons/dist/esm/icons/project-diagram-icon';
+import RhUiInfrastructureFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-infrastructure-fill-icon';
 import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 

package/src/components/Tabs/examples/TabsFilledWithIcons.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { Tabs, Tab, TabTitleText, TabTitleIcon, Checkbox } from '@patternfly/react-core';
-import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon';
-import BoxIcon from '@patternfly/react-icons/dist/esm/icons/box-icon';
+import RhUiUsersFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-users-fill-icon';
+import RhUiContainerFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-container-fill-icon';
 import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon';
 
 export const TabsFilledWithIcons: React.FunctionComponent = () => {
@@ -34,7 +34,7 @@ export const TabsFilledWithIcons: React.FunctionComponent = () => {
           title={
             <>
               <TabTitleIcon>
-                <UsersIcon />
+                <RhUiUsersFillIcon />
               </TabTitleIcon>{' '}
               <TabTitleText>Users</TabTitleText>{' '}
             </>
@@ -48,7 +48,7 @@ export const TabsFilledWithIcons: React.FunctionComponent = () => {
           title={
             <>
               <TabTitleIcon>
-                <BoxIcon />
+                <RhUiContainerFillIcon />
               </TabTitleIcon>{' '}
               <TabTitleText>Containers</TabTitleText>{' '}
             </>

package/src/components/Tabs/examples/TabsIconAndText.tsx

@@ -1,11 +1,11 @@
 import { useState } from 'react';
 import { Tabs, Tab, TabTitleText, TabTitleIcon } from '@patternfly/react-core';
-import UsersIcon from '@patternfly/react-icons/dist/esm/icons/users-icon';
-import BoxIcon from '@patternfly/react-icons/dist/esm/icons/box-icon';
+import RhUiUsersFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-users-fill-icon';
+import RhUiContainerFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-container-fill-icon';
 import DatabaseIcon from '@patternfly/react-icons/dist/esm/icons/database-icon';
-import ServerIcon from '@patternfly/react-icons/dist/esm/icons/server-icon';
+import RhUiServerStackFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-server-stack-fill-icon';
 import LaptopIcon from '@patternfly/react-icons/dist/esm/icons/laptop-icon';
-import ProjectDiagramIcon from '@patternfly/react-icons/dist/esm/icons/project-diagram-icon';
+import RhUiInfrastructureFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-infrastructure-fill-icon';
 
 export const TabsIconAndText: React.FunctionComponent = () => {
   const [activeTabKey, setActiveTabKey] = useState<string | number>(0);
@@ -29,7 +29,7 @@ export const TabsIconAndText: React.FunctionComponent = () => {
         title={
           <>
             <TabTitleIcon>
-              <UsersIcon />
+              <RhUiUsersFillIcon />
             </TabTitleIcon>{' '}
             <TabTitleText>Users</TabTitleText>{' '}
           </>
@@ -43,7 +43,7 @@ export const TabsIconAndText: React.FunctionComponent = () => {
         title={
           <>
             <TabTitleIcon>
-              <BoxIcon />
+              <RhUiContainerFillIcon />
             </TabTitleIcon>{' '}
             <TabTitleText>Containers</TabTitleText>{' '}
           </>
@@ -69,7 +69,7 @@ export const TabsIconAndText: React.FunctionComponent = () => {
         title={
           <>
             <TabTitleIcon>
-              <ServerIcon />
+              <RhUiServerStackFillIcon />
             </TabTitleIcon>{' '}
             <TabTitleText>Server</TabTitleText>{' '}
           </>
@@ -95,7 +95,7 @@ export const TabsIconAndText: React.FunctionComponent = () => {
         title={
           <>
             <TabTitleIcon>
-              <ProjectDiagramIcon />
+              <RhUiInfrastructureFillIcon />
             </TabTitleIcon>{' '}
             <TabTitleText>Network</TabTitleText>{' '}
           </>

package/src/components/TextInput/examples/TextInput.md

@@ -7,8 +7,8 @@ propComponents: ['TextInput', 'TextInputExpandedObj']
 ---
 
 import { useRef, useState } from 'react';
-import CalendarIcon from '@patternfly/react-icons/dist/esm/icons/calendar-icon';
-import ClockIcon from '@patternfly/react-icons/dist/esm/icons/clock-icon';
+import RhUiCalendarFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-calendar-fill-icon';
+import RhUiClockFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-clock-fill-icon';
 
 ## Examples
 

package/src/components/TextInput/examples/TextInputCustomIcon.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { TextInput } from '@patternfly/react-core';
-import CalendarIcon from '@patternfly/react-icons/dist/esm/icons/calendar-icon';
-import ClockIcon from '@patternfly/react-icons/dist/esm/icons/clock-icon';
+import RhUiCalendarFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-calendar-fill-icon';
+import RhUiClockFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-clock-fill-icon';
 
 export const TextInputCustomIcon: React.FunctionComponent = () => {
   const [calendar, setCalendar] = useState('');
@@ -12,7 +12,7 @@ export const TextInputCustomIcon: React.FunctionComponent = () => {
       <TextInput
         value={calendar}
         type="text"
-        customIcon={<CalendarIcon />}
+        customIcon={<RhUiCalendarFillIcon />}
         onChange={(_event, value) => setCalendar(value)}
         aria-label="text input example with calendar icon"
       />
@@ -21,7 +21,7 @@ export const TextInputCustomIcon: React.FunctionComponent = () => {
       <TextInput
         value={clock}
         type="text"
-        customIcon={<ClockIcon />}
+        customIcon={<RhUiClockFillIcon />}
         onChange={(_event, value) => setClock(value)}
         aria-label="text input example with clock icon"
       />

package/src/components/TextInput/examples/TextInputCustomIconInvalid.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { TextInput, ValidatedOptions } from '@patternfly/react-core';
-import CalendarIcon from '@patternfly/react-icons/dist/esm/icons/calendar-icon';
+import RhUiCalendarFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-calendar-fill-icon';
 
 export const TextInputCustomIconInvalid: React.FunctionComponent = () => {
   const [calendar, setCalendar] = useState('');
@@ -11,7 +11,7 @@ export const TextInputCustomIconInvalid: React.FunctionComponent = () => {
         value={calendar}
         type="text"
         validated={ValidatedOptions.error}
-        customIcon={<CalendarIcon />}
+        customIcon={<RhUiCalendarFillIcon />}
         onChange={(_event, value) => setCalendar(value)}
         aria-label="text input example with calendar icon"
       />

package/src/components/TimePicker/TimePicker.tsx

@@ -19,7 +19,7 @@ import {
   getSeconds
 } from './TimePickerUtils';
 import { HelperText, HelperTextItem } from '../HelperText';
-import OutlinedClockIcon from '@patternfly/react-icons/dist/esm/icons/outlined-clock-icon';
+import RhUiClockIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-clock-icon';
 import cssDatePickerFormControlWidth from '@patternfly/react-tokens/dist/esm/c_date_picker__input_c_form_control_Width';
 import { GenerateId } from '../../helpers';
 
@@ -515,7 +515,7 @@ class TimePicker extends Component<TimePickerProps, TimePickerState> {
               placeholder={placeholder}
               value={timeState || ''}
               type="text"
-              customIcon={<OutlinedClockIcon />}
+              customIcon={<RhUiClockIcon />}
               onClick={this.onInputClick}
               onChange={this.onInputChange}
               autoComplete="off"

package/src/components/ToggleGroup/examples/ToggleGroup.md

@@ -10,7 +10,7 @@ import './toggleGroup.css';
 import { useRef, useState } from 'react';
 import { ToggleGroup, ToggleGroupItem, Button, Stack, StackItem } from '@patternfly/react-core';
 import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
-import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
 import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon';
 
 ## Examples

package/src/components/ToggleGroup/examples/ToggleGroupIcon.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
-import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
 import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon';
 
 export const ToggleGroupIcon: React.FunctionComponent = () => {
@@ -17,7 +17,7 @@ export const ToggleGroupIcon: React.FunctionComponent = () => {
   return (
     <ToggleGroup aria-label="Icon variant toggle group">
       <ToggleGroupItem
-        icon={<CopyIcon />}
+        icon={<RhUiCopyFillIcon />}
         aria-label="copy"
         buttonId="toggle-group-icons-1"
         isSelected={isSelected['toggle-group-icons-1']}

package/src/components/ToggleGroup/examples/ToggleGroupTextIcon.tsx

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { ToggleGroup, ToggleGroupItem } from '@patternfly/react-core';
 import UndoIcon from '@patternfly/react-icons/dist/esm/icons/undo-icon';
-import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
 import ShareSquareIcon from '@patternfly/react-icons/dist/esm/icons/share-square-icon';
 
 export const ToggleGroupIcon: React.FunctionComponent = () => {
@@ -18,7 +18,7 @@ export const ToggleGroupIcon: React.FunctionComponent = () => {
     <>
       <ToggleGroup aria-label="Text and icon toggle group with icons at start">
         <ToggleGroupItem
-          icon={<CopyIcon />}
+          icon={<RhUiCopyFillIcon />}
           text="Copy"
           buttonId="toggle-group-text-icons-1"
           isSelected={isSelected['toggle-group-text-icons-1']}
@@ -42,7 +42,7 @@ export const ToggleGroupIcon: React.FunctionComponent = () => {
       <br />
       <ToggleGroup aria-label="Text and icon toggle group with icons at end">
         <ToggleGroupItem
-          icon={<CopyIcon />}
+          icon={<RhUiCopyFillIcon />}
           iconPosition="end"
           text="Copy"
           buttonId="toggle-group-text-icons-4"

package/src/components/Toolbar/examples/Toolbar.md

@@ -12,7 +12,7 @@ import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
 import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 ## Examples
 

package/src/components/Toolbar/examples/ToolbarStacked.tsx

@@ -24,7 +24,7 @@ import {
   ToolbarItem
 } from '@patternfly/react-core';
 import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 export const ToolbarStacked: React.FunctionComponent = () => {
   // toggle group - three option menus with labels, two icon buttons, Kebab menu - right aligned
@@ -229,7 +229,7 @@ export const ToolbarStacked: React.FunctionComponent = () => {
                       variant="plain"
                       onClick={onKebabToggle}
                       isExpanded={kebabIsOpen}
-                      icon={<EllipsisVIcon />}
+                      icon={<RhUiEllipsisVerticalFillIcon />}
                     />
                   )}
                   isOpen={kebabIsOpen}

package/src/components/Toolbar/examples/ToolbarWithFilters.tsx

@@ -22,7 +22,7 @@ import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import EditIcon from '@patternfly/react-icons/dist/esm/icons/edit-icon';
 import CloneIcon from '@patternfly/react-icons/dist/esm/icons/clone-icon';
 import SyncIcon from '@patternfly/react-icons/dist/esm/icons/sync-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 export const ToolbarWithFilters: React.FunctionComponent = () => {
   const [inputValue, setInputValue] = useState('');
@@ -231,7 +231,7 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
               onClick={onKebabToggle}
               variant="plain"
               aria-label="Toolbar with filters example kebab toggle"
-              icon={<EllipsisVIcon />}
+              icon={<RhUiEllipsisVerticalFillIcon />}
             />
           )}
         >

package/src/components/Tooltip/examples/Tooltip.md

@@ -7,7 +7,7 @@ propComponents: ['Tooltip']
 
 import { useEffect, useRef, useState } from 'react';
 import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
-import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
 import './TooltipExamples.css';
 
 ## Examples

package/src/components/Tooltip/examples/TooltipIcon.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Tooltip, Button } from '@patternfly/react-core';
-import CopyIcon from '@patternfly/react-icons/dist/esm/icons/copy-icon';
+import RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
 
 export const TooltipIcon: React.FunctionComponent = () => {
   const [showSuccessContent, setShowSuccessContent] = useState(false);
@@ -15,7 +15,7 @@ export const TooltipIcon: React.FunctionComponent = () => {
           variant="plain"
           id="tt-ref"
           onClick={() => setShowSuccessContent(!showSuccessContent)}
-          icon={<CopyIcon />}
+          icon={<RhUiCopyFillIcon />}
         />
       </Tooltip>
     </div>

package/src/components/TreeView/examples/TreeView.md

@@ -6,7 +6,7 @@ propComponents: ['TreeView', 'TreeViewDataItem', 'TreeViewSearch']
 ---
 
 import { Fragment, useEffect, useState } from 'react';
-import { FolderIcon, FolderOpenIcon, EllipsisVIcon, ClipboardIcon, HamburgerIcon, GitlabIcon, GithubIcon, GoogleIcon } from '@patternfly/react-icons';
+import { FolderIcon, FolderOpenIcon, RhUiEllipsisVerticalFillIcon, HamburgerIcon, GitlabIcon, GithubIcon, GoogleIcon, RhUiClipboardFillIcon, RhUiStorageFillIcon } from '@patternfly/react-icons';
 
 ## Examples
 

package/src/components/TreeView/examples/TreeViewWithActionItems.tsx

@@ -8,9 +8,9 @@ import {
   MenuToggle,
   TreeViewDataItem
 } from '@patternfly/react-core';
-import ClipboardIcon from '@patternfly/react-icons/dist/esm/icons/clipboard-icon';
-import HamburgerIcon from '@patternfly/react-icons/dist/esm/icons/hamburger-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiClipboardFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-clipboard-fill-icon';
+import RhUiStorageFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-storage-fill-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 export const TreeViewWithActionItems: React.FunctionComponent = () => {
   const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();
@@ -47,7 +47,7 @@ export const TreeViewWithActionItems: React.FunctionComponent = () => {
               onClick={onToggle}
               variant="plain"
               aria-label="Tree view with actions example kebab toggle"
-              icon={<EllipsisVIcon />}
+              icon={<RhUiEllipsisVerticalFillIcon />}
             />
           )}
         >
@@ -71,7 +71,7 @@ export const TreeViewWithActionItems: React.FunctionComponent = () => {
         {
           name: 'Application 1',
           id: 'example7-App1',
-          action: <Button variant="plain" aria-label="Launch app 1" icon={<ClipboardIcon />} />,
+          action: <Button variant="plain" aria-label="Launch app 1" icon={<RhUiClipboardFillIcon />} />,
           actionProps: {
             'aria-label': 'Launch app 1'
           },
@@ -83,7 +83,7 @@ export const TreeViewWithActionItems: React.FunctionComponent = () => {
         {
           name: 'Application 2',
           id: 'example7-App2',
-          action: <Button variant="plain" aria-label="Launch app 1" icon={<HamburgerIcon />} />,
+          action: <Button variant="plain" aria-label="Launch app 2" icon={<RhUiStorageFillIcon />} />,
           children: [
             { name: 'Settings', id: 'example7-App2Settings' },
             {

package/src/components/Wizard/examples/Wizard.md

@@ -49,7 +49,7 @@ WizardNavItem,
 WizardNav,
 WizardHeader
 } from '@patternfly/react-core';
-import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
+import RhMicronsExternalLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-external-link-icon';
 import SlackHashIcon from '@patternfly/react-icons/dist/esm/icons/slack-hash-icon';
 import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';

package/src/components/Wizard/examples/WizardWithNavAnchors.tsx

@@ -1,5 +1,5 @@
 import { Button, Wizard, WizardStep } from '@patternfly/react-core';
-import ExternalLinkAltIcon from '@patternfly/react-icons/dist/esm/icons/external-link-alt-icon';
+import RhMicronsExternalLinkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-external-link-icon';
 import SlackHashIcon from '@patternfly/react-icons/dist/esm/icons/slack-hash-icon';
 
 export const WizardWithNavAnchors: React.FunctionComponent = () => (
@@ -7,7 +7,7 @@ export const WizardWithNavAnchors: React.FunctionComponent = () => (
     <WizardStep
       name={
         <>
-          <ExternalLinkAltIcon /> PF3
+          <RhMicronsExternalLinkIcon /> PF3
         </>
       }
       id="navanchors-pf3-step"
@@ -18,7 +18,7 @@ export const WizardWithNavAnchors: React.FunctionComponent = () => (
     <WizardStep
       name={
         <>
-          <ExternalLinkAltIcon /> PF4
+          <RhMicronsExternalLinkIcon /> PF4
         </>
       }
       id="navanchors-pf4-step"

package/src/components/assets/img_avatar-light.svg

@@ -0,0 +1,25 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg id="Layer_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 36 36">
+  <defs>
+    <style>
+      .cls-1, .cls-2 {
+        fill: #d2d2d2;
+      }
+
+      .cls-1, .cls-2, .cls-3 {
+        stroke-width: 0px;
+      }
+
+      .cls-2 {
+        fill-rule: evenodd;
+      }
+
+      .cls-3 {
+        fill: #f0f0f0;
+      }
+    </style>
+  </defs>
+  <rect class="cls-3" width="36" height="36"/>
+  <path class="cls-2" d="M17.7,20.1c-3.5,0-6.4-2.9-6.4-6.4s2.9-6.4,6.4-6.4,6.4,2.9,6.4,6.4-2.8,6.4-6.4,6.4Z"/>
+  <path class="cls-1" d="M30.6,36c-.4-3.9-1.3-9-2.9-11-1.1-1.4-2.3-2.2-3.5-2.6s-1.8-.6-6.3-.6-6.1.7-6.1.7c-1.2.4-2.4,1.2-3.4,2.6-1.7,1.9-2.6,7.1-3,10.9h25.2Z"/>
+</svg>

package/src/components/assets/rhds.svg

@@ -0,0 +1,22 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
+    <g>
+      <rect width="48" height="48" fill="#147878"></rect>
+      <rect x="36" y="42" width="6" height="6" fill="#004D4D"></rect>
+      <rect x="6" y="42" width="6" height="6" fill="#004D4D"></rect>
+      <rect x="12" y="36" width="24" height="6" fill="#004D4D"></rect>
+      <rect x="18" y="30" width="12" height="6" fill="#004D4D"></rect>
+      <rect width="6" height="24" transform="matrix(-1 0 0 1 48 12)" fill="#004D4D"></rect>
+      <rect width="6" height="6" transform="matrix(-1 0 0 1 42 30)" fill="#004D4D"></rect>
+      <rect width="6" height="6" transform="matrix(-1 0 0 1 36 24)" fill="#004D4D"></rect>
+      <rect width="6" height="6" transform="matrix(-1 0 0 1 42 18)" fill="#004D4D"></rect>
+      <rect width="6" height="6" transform="matrix(-1 0 0 1 36 12)" fill="#004D4D"></rect>
+      <rect width="6" height="6" transform="matrix(-1 0 0 1 42 6)" fill="#004D4D"></rect>
+      <rect x="18" width="12" height="12" fill="#004D4D"></rect>
+      <rect x="6" y="30" width="6" height="6" fill="#004D4D"></rect>
+      <rect x="12" y="24" width="6" height="6" fill="#004D4D"></rect>
+      <rect x="6" y="18" width="6" height="6" fill="#004D4D"></rect>
+      <rect x="12" y="12" width="6" height="6" fill="#004D4D"></rect>
+      <rect x="6" y="6" width="6" height="6" fill="#004D4D"></rect>
+      <rect y="12" width="6" height="24" fill="#004D4D"></rect>
+    </g>
+  </svg>

package/src/demos/AlertGroup.md

@@ -5,7 +5,7 @@ section: components
 
 import { useEffect, useState } from 'react';
 import SearchIcon from '@patternfly/react-icons/dist/js/icons/search-icon';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
+import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 import { DashboardWrapper } from '@patternfly/react-core/dist/js/demos/DashboardWrapper';
 import { DashboardHeader } from '@patternfly/react-core/dist/js/demos/DashboardHeader';
 

package/src/demos/CardDemos.md

@@ -4,11 +4,7 @@ section: components
 ---
 
 import { Fragment, useState } from 'react';
-import EllipsisVIcon from '@patternfly/react-icons/dist/esm/icons/ellipsis-v-icon';
-import RhUiInformationFillIcon from '@patternfly/react-icons/dist/js/icons/rh-ui-information-fill-icon';
-import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/js/icons/rh-microns-caret-right-icon';
-import ExternalLinkAltIcon from '@patternfly/react-icons/dist/js/icons/external-link-alt-icon';
-import { RhUiCheckCircleFillIcon, RhUiErrorFillIcon, RhUiWarningFillIcon, RhUiNotificationFillIcon } from '@patternfly/react-icons';
+import { RhUiEllipsisVerticalFillIcon, RhMicronsCaretRightIcon, RhUiCheckCircleFillIcon, RhUiErrorFillIcon, RhMicronsExternalLinkIcon, RhUiInformationFillIcon, RhUiWarningFillIcon, RhUiNotificationFillIcon } from '@patternfly/react-icons';
 import { Table, Thead, Tbody, Tr, Th, Td, ExpandableRowContent } from '@patternfly/react-table';
 import { Chart, ChartAxis, ChartGroup, ChartVoronoiContainer, ChartStack, ChartBar, ChartTooltip, ChartDonutThreshold, ChartDonutUtilization, ChartArea, ChartContainer, ChartLabel } from '@patternfly/react-charts/victory';
 import chart_color_yellow_100 from '@patternfly/react-tokens/dist/esm/chart_color_yellow_100';