@patternfly/react-core 6.6.2 → 6.7.0-prerelease.1

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

@@ -12,8 +12,8 @@ import {
   SelectOption
 } from '@patternfly/react-core';
 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 RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
+import RhUiSyncIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-sync-icon';
 
 export const ToolbarGroups: React.FunctionComponent = () => {
   const firstOptions = ['A', 'B', 'C'];
@@ -62,6 +62,7 @@ export const ToolbarGroups: React.FunctionComponent = () => {
         <Select
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
             <MenuToggle
+              aria-haspopup="listbox"
               ref={toggleRef}
               onClick={() => onToggle('first')}
               isExpanded={firstIsExpanded}
@@ -92,6 +93,7 @@ export const ToolbarGroups: React.FunctionComponent = () => {
         <Select
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
             <MenuToggle
+              aria-haspopup="listbox"
               ref={toggleRef}
               onClick={() => onToggle('second')}
               isExpanded={secondIsExpanded}
@@ -122,6 +124,7 @@ export const ToolbarGroups: React.FunctionComponent = () => {
         <Select
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
             <MenuToggle
+              aria-haspopup="listbox"
               ref={toggleRef}
               onClick={() => onToggle('third')}
               isExpanded={thirdIsExpanded}
@@ -157,10 +160,10 @@ export const ToolbarGroups: React.FunctionComponent = () => {
         <Button variant="plain" aria-label="edit" icon={<EditIcon />} />
       </ToolbarItem>
       <ToolbarItem>
-        <Button variant="plain" aria-label="clone" icon={<CloneIcon />} />
+        <Button variant="plain" aria-label="clone" icon={<RhUiCopyFillIcon />} />
       </ToolbarItem>
       <ToolbarItem>
-        <Button variant="plain" aria-label="sync" icon={<SyncIcon />} />
+        <Button variant="plain" aria-label="sync" icon={<RhUiSyncIcon />} />
       </ToolbarItem>
     </Fragment>
   );

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

@@ -23,8 +23,8 @@ import {
   ToolbarToggleGroup,
   ToolbarItem
 } from '@patternfly/react-core';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-icon';
 
 export const ToolbarStacked: React.FunctionComponent = () => {
   // toggle group - three option menus with labels, two icon buttons, Kebab menu - right aligned
@@ -136,6 +136,7 @@ export const ToolbarStacked: React.FunctionComponent = () => {
         <Select
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
             <MenuToggle
+              aria-haspopup="listbox"
               ref={toggleRef}
               onClick={() => onResourceToggle()}
               isExpanded={resourceIsExpanded}
@@ -170,6 +171,7 @@ export const ToolbarStacked: React.FunctionComponent = () => {
         <Select
           toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
             <MenuToggle
+              aria-haspopup="listbox"
               ref={toggleRef}
               onClick={() => onStatusToggle()}
               isExpanded={statusIsExpanded}
@@ -203,7 +205,7 @@ export const ToolbarStacked: React.FunctionComponent = () => {
     <Fragment>
       <Toolbar>
         <ToolbarContent>
-          <ToolbarToggleGroup variant="label-group" toggleIcon={<FilterIcon />} breakpoint="lg">
+          <ToolbarToggleGroup variant="label-group" toggleIcon={<RhUiFilterFillIcon />} breakpoint="lg">
             {toggleGroupItems}
           </ToolbarToggleGroup>
           <ToolbarItem>

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

@@ -18,10 +18,10 @@ import {
   SelectList,
   SelectOption
 } from '@patternfly/react-core';
-import FilterIcon from '@patternfly/react-icons/dist/esm/icons/filter-icon';
+import RhUiFilterFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-filter-fill-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 RhUiCopyFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-copy-fill-icon';
+import RhUiSyncIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-sync-icon';
 import RhUiEllipsisVerticalFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-ellipsis-vertical-fill-icon';
 
 export const ToolbarWithFilters: React.FunctionComponent = () => {
@@ -147,6 +147,7 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
             role="menu"
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
+                aria-haspopup="listbox"
                 ref={toggleRef}
                 onClick={onStatusToggle}
                 isExpanded={isStatusExpanded}
@@ -178,6 +179,7 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
             role="menu"
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
+                aria-haspopup="listbox"
                 ref={toggleRef}
                 onClick={onRiskToggle}
                 isExpanded={isRiskExpanded}
@@ -205,7 +207,7 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
 
   const toolbarItems = (
     <Fragment>
-      <ToolbarToggleGroup toggleIcon={<FilterIcon />} breakpoint="xl">
+      <ToolbarToggleGroup toggleIcon={<RhUiFilterFillIcon />} breakpoint="xl">
         {toggleGroupItems}
       </ToolbarToggleGroup>
       <ToolbarGroup variant="action-group-plain">
@@ -213,10 +215,10 @@ export const ToolbarWithFilters: React.FunctionComponent = () => {
           <Button variant="plain" aria-label="edit" icon={<EditIcon />} />
         </ToolbarItem>
         <ToolbarItem>
-          <Button variant="plain" aria-label="clone" icon={<CloneIcon />} />
+          <Button variant="plain" aria-label="clone" icon={<RhUiCopyFillIcon />} />
         </ToolbarItem>
         <ToolbarItem>
-          <Button variant="plain" aria-label="sync" icon={<SyncIcon />} />
+          <Button variant="plain" aria-label="sync" icon={<RhUiSyncIcon />} />
         </ToolbarItem>
       </ToolbarGroup>
       <ToolbarItem>

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

@@ -109,6 +109,7 @@ export const TooltipOptions: React.FunctionComponent = () => {
           <Select
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
+                aria-haspopup="listbox"
                 ref={toggleRef}
                 onClick={() => setPositionSelectOpen(!positionSelectOpen)}
                 isExpanded={positionSelectOpen}
@@ -192,6 +193,7 @@ export const TooltipOptions: React.FunctionComponent = () => {
             selected={flipBehavior}
             toggle={(toggleRef: React.Ref<MenuToggleElement>) => (
               <MenuToggle
+                aria-haspopup="listbox"
                 ref={toggleRef}
                 onClick={() => setFlipSelectOpen(!flipSelectOpen)}
                 isExpanded={flipSelectOpen}

package/src/components/TreeView/TreeView.tsx

@@ -84,6 +84,8 @@ export interface TreeViewProps {
   icon?: React.ReactNode;
   /** ID of the tree view. */
   id?: string;
+  /** ID of the root tree view list. */
+  rootListId?: string;
   /** Flag indicating whether multiple nodes can be selected in the tree view. This will also set the
    * aria-multiselectable attribute on the tree view list which is required to be true when multiple selection is intended.
    * Can only be applied to the root tree view list.
@@ -113,6 +115,8 @@ export interface TreeViewProps {
    * the next breaking change release in favor of defaulting to always-rendered items.
    */
   hasAnimations?: boolean;
+  /** @hide Flag indicating whether the tree view list should be inert. */
+  inert?: boolean;
 }
 
 export const TreeView: React.FunctionComponent<TreeViewProps> = ({
@@ -141,6 +145,8 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
   'aria-label': ariaLabel,
   'aria-labelledby': ariaLabelledby,
   hasAnimations: hasAnimationsProp,
+  rootListId,
+  inert,
   ...props
 }: TreeViewProps) => {
   const hasAnimations = useHasAnimations(hasAnimationsProp);
@@ -151,7 +157,8 @@ export const TreeView: React.FunctionComponent<TreeViewProps> = ({
       isMultiSelectable={isMultiSelectable}
       aria-label={ariaLabel}
       aria-labelledby={ariaLabelledby}
-      {...props}
+      id={rootListId}
+      inert={inert}
     >
       {data.map((item) => (
         <TreeViewListItem

package/src/components/TreeView/TreeViewList.tsx

@@ -23,6 +23,8 @@ export interface TreeViewListProps extends React.HTMLProps<HTMLUListElement> {
    * this or the aria-label property must be passed in.
    */
   'aria-labelledby'?: string;
+  /** @hide Flag indicating whether the tree view list should be inert. */
+  inert?: boolean;
 }
 
 export const TreeViewList: React.FunctionComponent<TreeViewListProps> = ({

package/src/components/TreeView/TreeViewListItem.tsx

@@ -6,6 +6,7 @@ import { TreeViewDataItem } from './TreeView';
 import { Badge } from '../Badge';
 import { useSSRSafeId } from '../../helpers';
 import { useHasAnimations } from '../../helpers';
+import { IS_INERT } from '../../helpers/inert';
 
 export interface TreeViewCheckProps extends Omit<Partial<React.InputHTMLAttributes<HTMLInputElement>>, 'checked'> {
   checked?: boolean | null;
@@ -225,7 +226,7 @@ const TreeViewListItemBase: React.FunctionComponent<TreeViewListItemProps> = ({
     (child) =>
       isValidElement(child) &&
       cloneElement(child as React.ReactElement<any>, {
-        inert: internalIsExpanded ? undefined : ''
+        inert: internalIsExpanded ? undefined : IS_INERT
       })
   );
 

package/src/components/TreeView/TreeViewSearch.tsx

@@ -1,7 +1,7 @@
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/TreeView/tree-view';
 import formStyles from '@patternfly/react-styles/css/components/FormControl/form-control';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
 
 /** Renders a search input for the tree view. This sub-component should be passed into the
  * tree view component's toolbar property.
@@ -33,7 +33,7 @@ export const TreeViewSearch: React.FunctionComponent<TreeViewSearchProps> = ({
       <input onChange={onSearch} id={id} name={name} aria-label={ariaLabel} type="search" {...props} />
       <div className={css(formStyles.formControlUtilities)}>
         <div className={css(formStyles.formControlIcon)}>
-          <SearchIcon />
+          <RhMicronsSearchIcon />
         </div>
       </div>
     </div>

package/src/components/TreeView/__tests__/TreeView.test.tsx

@@ -10,7 +10,8 @@ jest.mock('../TreeViewList', () => ({
     toolbar,
     'aria-label': ariaLabel,
     'aria-labelledby': ariaLabelledBy,
-    isMultiSelectable
+    isMultiSelectable,
+    id
   }) => (
     <div data-testid="TreeViewList-mock">
       <p>{`TreeViewList isNested: ${isNested}`}</p>
@@ -18,6 +19,7 @@ jest.mock('../TreeViewList', () => ({
       <p>{`TreeViewList aria-label: ${ariaLabel}`}</p>
       <p>{`TreeViewList aria-labelledBy: ${ariaLabelledBy}`}</p>
       <p>{`TreeViewList isMultiSelectable: ${isMultiSelectable}`}</p>
+      <p>{`TreeViewList id: ${id}`}</p>
       <div data-testid="TreeViewList-children">{children}</div>
     </div>
   )
@@ -164,6 +166,11 @@ test('Passes data as children TreeViewList', () => {
 
   expect(screen.getByTestId('TreeViewList-children')).toContainHTML('TreeViewListItem name: Basic data name');
 });
+test('Passes rootListId to TreeViewList', () => {
+  render(<TreeView rootListId="test-root-list-id" data={[basicData]} />);
+
+  expect(screen.getByText('TreeViewList id: test-root-list-id')).toBeVisible();
+});
 
 test('Passes data action to TreeViewListItem', () => {
   render(<TreeView data={[{ ...basicData, action: 'Item action' }]} />);

package/src/components/TreeView/__tests__/TreeViewList.test.tsx

@@ -22,7 +22,7 @@ test(`Renders with role="group" when isNested is true`, () => {
   expect(screen.getByRole('group')).toHaveTextContent('Content');
 });
 
-test(`Spreads additional props`, () => {
+test('Renders with id when id is passed', () => {
   render(<TreeViewList id="test-id">Content</TreeViewList>);
 
   expect(screen.getByRole('tree')).toHaveAttribute('id', 'test-id');

package/src/components/TreeView/__tests__/__snapshots__/TreeView.test.tsx.snap

@@ -41,6 +41,9 @@ exports[`Matches snapshot 1`] = `
         <p>
           TreeViewList isMultiSelectable: false
         </p>
+        <p>
+          TreeViewList id: undefined
+        </p>
         <div
           data-testid="TreeViewList-children"
         >

package/src/components/TreeView/__tests__/__snapshots__/TreeViewSearch.test.tsx.snap

@@ -23,24 +23,12 @@ exports[`Matches snapshot 1`] = `
             fill="currentColor"
             height="1em"
             role="img"
+            viewBox="0 0 20 20"
             width="1em"
           >
-            <svg
-              class="pf-v6-icon-default"
-              viewBox="0 0 512 512"
-            >
-              <path
-                d="M505 442.7L405.3 343c-4.5-4.5-10.6-7-17-7H372c27.6-35.3 44-79.7 44-128C416 93.1 322.9 0 208 0S0 93.1 0 208s93.1 208 208 208c48.3 0 92.7-16.4 128-44v16.3c0 6.4 2.5 12.5 7 17l99.7 99.7c9.4 9.4 24.6 9.4 33.9 0l28.3-28.3c9.4-9.4 9.4-24.6.1-34zM208 336c-70.7 0-128-57.2-128-128 0-70.7 57.2-128 128-128 70.7 0 128 57.2 128 128 0 70.7-57.2 128-128 128z"
-              />
-            </svg>
-            <svg
-              class="pf-v6-icon-rh-ui"
-              viewBox="0 0 32 32"
-            >
-              <path
-                d="m30.796 29.205-8.557-8.557A11.945 11.945 0 0 0 25 13c0-6.617-5.383-12-12-12S1 6.383 1 13s5.383 12 12 12c2.904 0 5.57-1.038 7.648-2.761l8.556 8.556a1.122 1.122 0 0 0 1.592 0 1.127 1.127 0 0 0 0-1.591ZM3 13C3 7.486 7.486 3 13 3s10 4.486 10 10-4.486 10-10 10S3 18.514 3 13Z"
-              />
-            </svg>
+            <path
+              d="m18.8 17.21-4.41-4.41A7.906 7.906 0 0 0 16 8c0-4.41-3.59-8-8-8S0 3.59 0 8s3.59 8 8 8c1.73 0 3.42-.57 4.8-1.61l4.41 4.41c.44.44 1.15.44 1.59 0 .44-.44.44-1.15 0-1.59ZM8 14c-3.31 0-6-2.69-6-6s2.69-6 6-6 6 2.69 6 6-2.69 6-6 6Z"
+            />
           </svg>
         </div>
       </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, RhUiEllipsisVerticalFillIcon, HamburgerIcon, GitlabIcon, GithubIcon, GoogleIcon, RhUiClipboardFillIcon, RhUiStorageFillIcon } from '@patternfly/react-icons';
+import { RhUiEllipsisVerticalFillIcon, HamburgerIcon, GitlabIcon, GithubIcon, GoogleIcon, RhUiClipboardFillIcon, RhUiStorageFillIcon, RhUiFolderFillIcon, RhUiFolderOpenFillIcon } from '@patternfly/react-icons';
 
 ## Examples
 

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

@@ -1,7 +1,7 @@
 import { useState } from 'react';
 import { TreeView, TreeViewDataItem } 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';
 
 export const TreeViewWithIcons: React.FunctionComponent = () => {
   const [activeItems, setActiveItems] = useState<TreeViewDataItem[]>();
@@ -78,8 +78,8 @@ export const TreeViewWithIcons: React.FunctionComponent = () => {
       data={options}
       activeItems={activeItems}
       onSelect={onSelect}
-      icon={<FolderIcon />}
-      expandedIcon={<FolderOpenIcon />}
+      icon={<RhUiFolderFillIcon />}
+      expandedIcon={<RhUiFolderOpenFillIcon />}
     />
   );
 };

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

@@ -20,7 +20,7 @@ propComponents:
   ]
 ---
 
-import { createContext, useCallback, useContext, useRef, useState } from 'react';
+import { createContext, useCallback, useContext, useRef, useState, useEffect } from 'react';
 import {
 FormGroup,
 TextInput,
@@ -51,7 +51,7 @@ WizardHeader
 } from '@patternfly/react-core';
 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 RhUiGearGroupFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-gear-group-fill-icon';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 

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

@@ -21,7 +21,7 @@ import {
   WizardFooterWrapper,
   useWizardContext
 } from '@patternfly/react-core';
-import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
+import RhUiGearGroupFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-gear-group-fill-icon';
 import layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 
 interface ValidationProgressProps {
@@ -50,7 +50,7 @@ const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({
       <EmptyState
         headingLevel="h4"
         titleText={percentValidated === 100 ? 'Validation complete' : 'Validating credentials'}
-        icon={CogsIcon}
+        icon={RhUiGearGroupFillIcon}
         variant="lg"
       >
         <EmptyStateBody>

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

@@ -9,7 +9,7 @@ import {
   Wizard,
   WizardStep
 } from '@patternfly/react-core';
-import CogsIcon from '@patternfly/react-icons/dist/esm/icons/cogs-icon';
+import RhUiGearGroupFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-gear-group-fill-icon';
 import layout from '@patternfly/react-styles/css/layouts/Bullseye/bullseye';
 
 interface ValidationProgressProps {
@@ -38,7 +38,7 @@ const ValidationProgress: React.FunctionComponent<ValidationProgressProps> = ({
       <EmptyState
         headingLevel="h4"
         titleText={percentValidated === 100 ? 'Validation complete' : 'Validating credentials'}
-        icon={CogsIcon}
+        icon={RhUiGearGroupFillIcon}
         variant="lg"
       >
         <EmptyStateBody>

package/src/demos/AlertGroup.md

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

package/src/demos/Button/examples/ButtonProgress.tsx

@@ -1,5 +1,13 @@
 import { useState } from 'react';
-import { Form, FormGroup, ActionGroup, TextInput, Button } from '@patternfly/react-core';
+import {
+  Form,
+  FormGroup,
+  TextInput,
+  Button,
+  ActionListItem,
+  ActionListGroup,
+  ActionList
+} from '@patternfly/react-core';
 import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
 
 export const ButtonProgress: React.FunctionComponent = () => {
@@ -27,28 +35,34 @@ export const ButtonProgress: React.FunctionComponent = () => {
           aria-label="password input"
         />
       </FormGroup>
-      <ActionGroup>
-        <Button
-          variant="primary"
-          onClick={
-            loginState === 'notLoggedIn'
-              ? () => {
-                  setLoginState('loading');
-                  setTimeout(() => {
-                    setLoginState('loggedIn');
-                  }, 3000);
+      <FormGroup isActionGroup>
+        <ActionList>
+          <ActionListGroup>
+            <ActionListItem>
+              <Button
+                variant="primary"
+                onClick={
+                  loginState === 'notLoggedIn'
+                    ? () => {
+                        setLoginState('loading');
+                        setTimeout(() => {
+                          setLoginState('loggedIn');
+                        }, 3000);
+                      }
+                    : null
                 }
-              : null
-          }
-          isLoading={loginState === 'loading'}
-          icon={loginState === 'loggedIn' ? <RhUiCheckCircleFillIcon /> : null}
-          spinnerAriaValueText="Loading..."
-        >
-          {loginState === 'notLoggedIn' && 'Link account and log in'}
-          {loginState === 'loading' && 'Linking account'}
-          {loginState === 'loggedIn' && 'Logged in'}
-        </Button>
-      </ActionGroup>
+                isLoading={loginState === 'loading'}
+                icon={loginState === 'loggedIn' ? <RhUiCheckCircleFillIcon /> : null}
+                spinnerAriaValueText="Loading..."
+              >
+                {loginState === 'notLoggedIn' && 'Link account and log in'}
+                {loginState === 'loading' && 'Linking account'}
+                {loginState === 'loggedIn' && 'Logged in'}
+              </Button>
+            </ActionListItem>
+          </ActionListGroup>
+        </ActionList>
+      </FormGroup>
     </Form>
   );
 };

package/src/demos/CardView/CardView.md

@@ -4,9 +4,9 @@ section: patterns
 ---
 
 import { Fragment, useState } from 'react';
-import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
+import RhUiTrashFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-trash-fill-icon';
 import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
-import pfIcon from '../assets/pf-logo-small.svg';
+import pfIcon from '@patternfly/react-core/src/demos/assets/PF-IconLogo.svg';
 import activeMQIcon from '../assets/activemq-core_200x150.png';
 import avroIcon from '../assets/camel-avro_200x150.png';
 import dropBoxIcon from '../assets/camel-dropbox_200x150.png';

package/src/demos/CardView/examples/CardView.tsx

@@ -34,9 +34,9 @@ import {
   SelectOption,
   MenuToggleElement
 } from '@patternfly/react-core';
-import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
+import RhUiTrashFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-trash-fill-icon';
 import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
-import pfIcon from './assets/pf-logo-small.svg';
+import pfIcon from '@patternfly/react-core/src/demos/assets/PF-IconLogo.svg';
 import activeMQIcon from './assets/activemq-core_200x150.png';
 import avroIcon from './assets/camel-avro_200x150.png';
 import dropBoxIcon from './assets/camel-dropbox_200x150.png';
@@ -529,7 +529,7 @@ export const CardViewBasic: React.FunctionComponent = () => {
                                 deleteItem(product);
                               }}
                             >
-                              <TrashIcon />
+                              <RhUiTrashFillIcon />
                               Delete
                             </DropdownItem>
                           </DropdownList>

package/src/demos/Compass/Compass.md

@@ -4,20 +4,22 @@ section: components
 ---
 
 import { useRef, useState, useEffect } from 'react';
-import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
-import OutlinedPlusSquare from '@patternfly/react-icons/dist/esm/icons/outlined-plus-square-icon';
+import RhUiPlayFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-play-fill-icon';
+import RhUiAddSquareIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-square-icon';
 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 RhUiCloudFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cloud-fill-icon';
 import RhUiCodeIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-code-icon';
-import SearchIcon from '@patternfly/react-icons/dist/esm/icons/search-icon';
+import RhMicronsSearchIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-search-icon';
 import imgAvatar from '../assets/avatarImg.svg';
 import RhUiThumbnailViewSmallFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-thumbnail-view-small-fill-icon';
 import pfLogo from '../assets/PF-IconLogo-color.svg';
 import globalBreakpointLg from '@patternfly/react-tokens/dist/esm/t_global_breakpoint_lg';
+import RhUiCubesIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-cubes-icon';
+import RhUiFolderIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-folder-icon';
+import RhUiResourceIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-resource-icon';
 
 ## Demos
 

package/src/demos/Compass/examples/CompassDemo.tsx

@@ -28,8 +28,8 @@ import {
   Title,
   Tooltip
 } from '@patternfly/react-core';
-import PlayIcon from '@patternfly/react-icons/dist/esm/icons/play-icon';
-import OutlinedPlusSquare from '@patternfly/react-icons/dist/esm/icons/outlined-plus-square-icon';
+import RhUiPlayFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-play-fill-icon';
+import RhUiAddSquareIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-square-icon';
 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';
 
@@ -112,12 +112,12 @@ export const CompassBasic: React.FunctionComponent = () => {
             <ActionListGroup>
               <ActionListItem>
                 <Tooltip content="Play">
-                  <Button isCircle variant="plain" icon={<PlayIcon />} aria-label="Play" />
+                  <Button isCircle variant="plain" icon={<RhUiPlayFillIcon />} aria-label="Play" />
                 </Tooltip>
               </ActionListItem>
               <ActionListItem>
                 <Tooltip content="Add">
-                  <Button isCircle variant="plain" icon={<OutlinedPlusSquare />} aria-label="Add" />
+                  <Button isCircle variant="plain" icon={<RhUiAddSquareIcon />} aria-label="Add" />
                 </Tooltip>
               </ActionListItem>
             </ActionListGroup>