@patternfly/react-core 6.5.0-prerelease.9 → 6.5.0

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

@@ -0,0 +1,193 @@
+import { render, screen } from '@testing-library/react';
+import { Hero } from '../Hero';
+import styles from '@patternfly/react-styles/css/components/Hero/hero';
+
+test('Renders without children', () => {
+  render(
+    <div data-testid="test-hero">
+      <Hero />
+    </div>
+  );
+  expect(screen.getByTestId('test-hero').firstChild).toBeVisible();
+});
+
+test('Renders with children', () => {
+  render(<Hero>Test content</Hero>);
+  expect(screen.getByText('Test content')).toBeVisible();
+});
+
+test(`Renders with ${styles.hero} class on wrapper by default`, () => {
+  render(<Hero>Test</Hero>);
+
+  expect(screen.getByText('Test').parentElement).toHaveClass(`${styles.hero}`, { exact: true });
+});
+
+test(`Renders with ${styles.modifiers.glass} class when isGlass is true`, () => {
+  render(<Hero isGlass>Test</Hero>);
+
+  expect(screen.getByText('Test').parentElement).toHaveClass(`${styles.modifiers.glass}`);
+});
+
+test(`Renders without ${styles.modifiers.glass} class when isGlass is false`, () => {
+  render(<Hero isGlass={false}>Test</Hero>);
+
+  expect(screen.getByText('Test').parentElement).not.toHaveClass(`${styles.modifiers.glass}`);
+});
+
+test(`Renders without ${styles.modifiers.glass} class by default`, () => {
+  render(<Hero>Test</Hero>);
+
+  expect(screen.getByText('Test').parentElement).not.toHaveClass(`${styles.modifiers.glass}`);
+});
+
+test('Renders with custom class name on wrapper when className prop is provided', () => {
+  render(<Hero className="custom-class">Test</Hero>);
+  expect(screen.getByText('Test').parentElement).toHaveClass('custom-class');
+});
+
+test(`Renders with class ${styles.heroBody} on content element`, () => {
+  render(<Hero>Test</Hero>);
+
+  expect(screen.getByText('Test')).toHaveClass(`${styles.heroBody}`, { exact: true });
+});
+
+test('Renders with additional props spread to the wrapper component', () => {
+  render(<Hero id="custom-id">Test</Hero>);
+  expect(screen.getByText('Test').parentElement).toHaveAttribute('id', 'custom-id');
+});
+
+test('Renders with light background image style when backgroundSrcLight is provided', () => {
+  const backgroundSrc = 'light-bg.jpg';
+  render(<Hero backgroundSrcLight={backgroundSrc}>Test</Hero>);
+  expect(screen.getByText('Test').parentElement).toHaveStyle(
+    `--pf-v6-c-hero--BackgroundImage--light: url(${backgroundSrc})`
+  );
+});
+
+test('Renders with dark background image style when backgroundSrcDark is provided', () => {
+  const backgroundSrc = 'dark-bg.jpg';
+  render(<Hero backgroundSrcDark={backgroundSrc}>Test</Hero>);
+  expect(screen.getByText('Test').parentElement).toHaveStyle(
+    `--pf-v6-c-hero--BackgroundImage--dark: url(${backgroundSrc})`
+  );
+});
+
+test('Renders with both light and dark background image styles when both are provided', () => {
+  const lightSrc = 'light-bg.jpg';
+  const darkSrc = 'dark-bg.jpg';
+  render(
+    <Hero backgroundSrcLight={lightSrc} backgroundSrcDark={darkSrc}>
+      Test
+    </Hero>
+  );
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--BackgroundImage--light: url(${lightSrc})`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--BackgroundImage--dark: url(${darkSrc})`);
+});
+
+test('Renders with light gradient styles when gradientLight is provided', () => {
+  const gradient = {
+    stop1: '#ff0000',
+    stop2: '#00ff00',
+    stop3: '#0000ff'
+  };
+  render(<Hero gradientLight={gradient}>Test</Hero>);
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-1--light: ${gradient.stop1}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-2--light: ${gradient.stop2}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-3--light: ${gradient.stop3}`);
+});
+
+test('Renders with dark gradient styles when gradientDark is provided', () => {
+  const gradient = {
+    stop1: '#ff0000',
+    stop2: '#00ff00',
+    stop3: '#0000ff'
+  };
+  render(<Hero gradientDark={gradient}>Test</Hero>);
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-1--dark: ${gradient.stop1}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-2--dark: ${gradient.stop2}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-3--dark: ${gradient.stop3}`);
+});
+
+test('Renders with both light and dark gradient styles when both are provided', () => {
+  const lightGradient = {
+    stop1: '#ff0000',
+    stop2: '#00ff00',
+    stop3: '#0000ff'
+  };
+  const darkGradient = {
+    stop1: '#000000',
+    stop2: '#ffffff',
+    stop3: '#808080'
+  };
+  render(
+    <Hero gradientLight={lightGradient} gradientDark={darkGradient}>
+      Test
+    </Hero>
+  );
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-1--light: ${lightGradient.stop1}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-1--dark: ${darkGradient.stop1}`);
+});
+
+test('Renders with both background images and gradient styles when both are provided', () => {
+  const lightSrc = 'light-bg.jpg';
+  const darkSrc = 'dark-bg.jpg';
+  const lightGradient = { stop1: '#ff0000' };
+  const darkGradient = { stop1: '#000000' };
+
+  render(
+    <Hero
+      backgroundSrcLight={lightSrc}
+      backgroundSrcDark={darkSrc}
+      gradientLight={lightGradient}
+      gradientDark={darkGradient}
+    >
+      Test
+    </Hero>
+  );
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--BackgroundImage--light: url(${lightSrc})`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--BackgroundImage--dark: url(${darkSrc})`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-1--light: ${lightGradient.stop1}`);
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero--gradient--stop-1--dark: ${darkGradient.stop1}`);
+});
+
+test('Renders with inline width style when bodyWidth is passed', () => {
+  const bodyWidth = '100px';
+
+  render(<Hero bodyWidth={bodyWidth}>Test</Hero>);
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero__body--Width: ${bodyWidth}`);
+});
+
+test('Renders with inline max-width style when bodyMaxWidth is passed', () => {
+  const bodyMaxWidth = '100px';
+
+  render(<Hero bodyMaxWidth={bodyMaxWidth}>Test</Hero>);
+  const heroElement = screen.getByText('Test').parentElement;
+  expect(heroElement).toHaveStyle(`--pf-v6-c-hero__body--MaxWidth: ${bodyMaxWidth}`);
+});
+
+test('Matches the snapshot without backgroundSrc and gradient props', () => {
+  const { asFragment } = render(<Hero>Hero content</Hero>);
+
+  expect(asFragment()).toMatchSnapshot();
+});
+
+test('Matches the snapshot with backgroundSrc and gradient props', () => {
+  const { asFragment } = render(
+    <Hero
+      backgroundSrcLight="light.jpg"
+      backgroundSrcDark="dark.jpg"
+      gradientLight={{ stop1: '#ff0000', stop2: '#00ff00', stop3: '#0000ff' }}
+      gradientDark={{ stop1: '#000000', stop2: '#ffffff', stop3: '#808080' }}
+    >
+      Hero content
+    </Hero>
+  );
+
+  expect(asFragment()).toMatchSnapshot();
+});

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

@@ -0,0 +1,30 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Matches the snapshot with backgroundSrc and gradient props 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-hero"
+    style="--pf-v6-c-hero--BackgroundImage--light: url(light.jpg); --pf-v6-c-hero--BackgroundImage--dark: url(dark.jpg); --pf-v6-c-hero--gradient--stop-1--light: #ff0000; --pf-v6-c-hero--gradient--stop-2--light: #00ff00; --pf-v6-c-hero--gradient--stop-3--light: #0000ff; --pf-v6-c-hero--gradient--stop-1--dark: #000000; --pf-v6-c-hero--gradient--stop-2--dark: #ffffff; --pf-v6-c-hero--gradient--stop-3--dark: #808080;"
+  >
+    <div
+      class="pf-v6-c-hero__body"
+    >
+      Hero content
+    </div>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Matches the snapshot without backgroundSrc and gradient props 1`] = `
+<DocumentFragment>
+  <div
+    class="pf-v6-c-hero"
+  >
+    <div
+      class="pf-v6-c-hero__body"
+    >
+      Hero content
+    </div>
+  </div>
+</DocumentFragment>
+`;

package/src/components/Hero/examples/Hero.md

@@ -0,0 +1,19 @@
+---
+id: Hero
+section: components
+cssPrefix: pf-v6-c-hero
+beta: true
+propComponents: ['Hero']
+---
+
+## Examples
+
+### Basic
+
+If you need finer control over the placement of text content within the `<Hero>`, such as when you omit a background image, adjust the `bodyWidth` and `bodyMaxWidth` properties. Be mindful of using these properties when a background image is still present and ensure there is sufficient contrast between text and any part of the image that it overlaps.
+
+When using `gradientLight` or `gradientDark` to apply gradient backgrounds, check the color contrast to ensure proper accessibility.
+
+```ts file="HeroBasic.tsx"
+
+```

package/src/components/Hero/examples/HeroBasic.tsx

@@ -0,0 +1,3 @@
+import { Hero } from '@patternfly/react-core';
+
+export const HeroBasic: React.FunctionComponent = () => <Hero>Basic hero content</Hero>;

package/src/components/Hero/index.ts

@@ -0,0 +1 @@
+export * from './Hero';

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

@@ -14,12 +14,24 @@ exports[`renders basic icon successfully 1`] = `
         fill="currentColor"
         height="1em"
         role="img"
-        viewBox="0 0 512 512"
         width="1em"
       >
-        <path
-          d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
-        />
+        <svg
+          class="pf-v6-icon-default"
+          viewBox="0 0 512 512"
+        >
+          <path
+            d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+          />
+        </svg>
+        <svg
+          class="pf-v6-icon-rh-ui"
+          viewBox="0 0 32 32"
+        >
+          <path
+            d="M11 26.792c-.384 0-.769-.146-1.061-.438l-8.646-8.647a.999.999 0 1 1 1.414-1.414L11 24.586 29.293 6.293a.999.999 0 1 1 1.414 1.414L12.061 26.354a1.497 1.497 0 0 1-1.061.438Z"
+          />
+        </svg>
       </svg>
     </span>
   </span>
@@ -40,12 +52,24 @@ exports[`renders progress icon successfully 1`] = `
         fill="currentColor"
         height="1em"
         role="img"
-        viewBox="0 0 512 512"
         width="1em"
       >
-        <path
-          d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
-        />
+        <svg
+          class="pf-v6-icon-default"
+          viewBox="0 0 512 512"
+        >
+          <path
+            d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+          />
+        </svg>
+        <svg
+          class="pf-v6-icon-rh-ui"
+          viewBox="0 0 32 32"
+        >
+          <path
+            d="M11 26.792c-.384 0-.769-.146-1.061-.438l-8.646-8.647a.999.999 0 1 1 1.414-1.414L11 24.586 29.293 6.293a.999.999 0 1 1 1.414 1.414L12.061 26.354a1.497 1.497 0 0 1-1.061.438Z"
+          />
+        </svg>
       </svg>
     </span>
     <span
@@ -57,12 +81,24 @@ exports[`renders progress icon successfully 1`] = `
         fill="currentColor"
         height="1em"
         role="img"
-        viewBox="0 0 512 512"
         width="1em"
       >
-        <path
-          d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
-        />
+        <svg
+          class="pf-v6-icon-default"
+          viewBox="0 0 512 512"
+        >
+          <path
+            d="M173.898 439.404l-166.4-166.4c-9.997-9.997-9.997-26.206 0-36.204l36.203-36.204c9.997-9.998 26.207-9.998 36.204 0L192 312.69 432.095 72.596c9.997-9.997 26.207-9.997 36.204 0l36.203 36.204c9.997 9.997 9.997 26.206 0 36.204l-294.4 294.401c-9.998 9.997-26.207 9.997-36.204-.001z"
+          />
+        </svg>
+        <svg
+          class="pf-v6-icon-rh-ui"
+          viewBox="0 0 32 32"
+        >
+          <path
+            d="M11 26.792c-.384 0-.769-.146-1.061-.438l-8.646-8.647a.999.999 0 1 1 1.414-1.414L11 24.586 29.293 6.293a.999.999 0 1 1 1.414 1.414L12.061 26.354a1.497 1.497 0 0 1-1.061.438Z"
+          />
+        </svg>
       </svg>
     </span>
   </span>

package/src/components/Icon/examples/BodyIconSizes.tsx

@@ -1,17 +1,17 @@
 import { Fragment } from 'react';
 import { Icon } from '@patternfly/react-core';
-import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
 
 export const BodyIconSizes: React.FunctionComponent = () => (
   <Fragment>
     <Icon size="bodySm">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>{' '}
     <Icon size="bodyDefault">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>{' '}
     <Icon size="bodyLg">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>
   </Fragment>
 );

package/src/components/Icon/examples/HeadingIconSizes.tsx

@@ -1,26 +1,26 @@
 import { Fragment } from 'react';
 import { Icon } from '@patternfly/react-core';
-import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
 
 export const HeadingIconSizes: React.FunctionComponent = () => (
   <Fragment>
     <Icon size="headingSm">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>{' '}
     <Icon size="headingMd">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>{' '}
     <Icon size="headingLg">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>{' '}
     <Icon size="headingXl">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>{' '}
     <Icon size="heading_2xl">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>{' '}
     <Icon size="heading_3xl">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>
   </Fragment>
 );

package/src/components/Icon/examples/Icon.md

@@ -7,21 +7,22 @@ propComponents: ['Icon']
 
 import { Fragment, useState } from 'react';
 import LongArrowAltDownIcon from '@patternfly/react-icons/dist/esm/icons/long-arrow-alt-down-icon';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
-import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
-import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
-import ExclamationTriangleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-triangle-icon';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
-import InfoCircleIcon from '@patternfly/react-icons/dist/esm/icons/info-circle-icon';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
+import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
+import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
+import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
+import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
+import RhUiInformationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-information-fill-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 
 ## Examples
 
 ### Basic
 
 ```ts file="IconBasic.tsx"
+
 ```
 
 ### Standalone icon sizes
@@ -29,6 +30,7 @@ import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
 These are the standard options for sizing icons.
 
 ```ts file="StandaloneIconSizes.tsx"
+
 ```
 
 ### Body sizes
@@ -36,6 +38,7 @@ These are the standard options for sizing icons.
 These size options are meant to make icons match the size of body text.
 
 ```ts file="BodyIconSizes.tsx"
+
 ```
 
 ### Heading sizes
@@ -43,6 +46,7 @@ These size options are meant to make icons match the size of body text.
 These size options are meant to make icons match the size of heading text.
 
 ```ts file="HeadingIconSizes.tsx"
+
 ```
 
 ### Status colors
@@ -50,6 +54,7 @@ These size options are meant to make icons match the size of heading text.
 The following example demonstrates the various status variants of an icon. Keep in mind that these icons are displayed out of a typical context, and that you should not rely on color alone to convey status to users.
 
 ```ts file="IconStatus.tsx"
+
 ```
 
 ### Sizing an icon within the icon container
@@ -57,11 +62,13 @@ The following example demonstrates the various status variants of an icon. Keep
 Providing both size and iconSize properties allows the icon container to maintain a consistent size, even if the icon changes in size.
 
 ```ts file="IconContentSizes.tsx"
+
 ```
 
 ### Inline
 
 ```ts file="IconInline.tsx"
+
 ```
 
 ### In progress
@@ -69,9 +76,11 @@ Providing both size and iconSize properties allows the icon container to maintai
 Passing the `isInProgress` property will swap the icon to a progress icon. By default this progress icon will be a `Spinner` but may be customized or overriden using the `progressIcon` property.
 
 ```ts file="IconProgress.tsx"
+
 ```
 
 ### Custom in progress icon
 
 ```ts file="IconCustomProgress.tsx"
+
 ```

package/src/components/Icon/examples/IconBasic.tsx

@@ -1,9 +1,9 @@
 import { Fragment } from 'react';
 import { Icon } from '@patternfly/react-core';
 import LongArrowAltDownIcon from '@patternfly/react-icons/dist/esm/icons/long-arrow-alt-down-icon';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
-import AngleDownIcon from '@patternfly/react-icons/dist/esm/icons/angle-down-icon';
-import CogIcon from '@patternfly/react-icons/dist/esm/icons/cog-icon';
+import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
+import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
+import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-settings-fill-icon';
 
 export const IconBasic: React.FunctionComponent = () => (
   <Fragment>
@@ -11,13 +11,13 @@ export const IconBasic: React.FunctionComponent = () => (
       <LongArrowAltDownIcon />
     </Icon>{' '}
     <Icon>
-      <AngleRightIcon />
+      <RhMicronsCaretRightIcon />
     </Icon>{' '}
     <Icon>
-      <AngleDownIcon />
+      <RhMicronsCaretDownIcon />
     </Icon>{' '}
     <Icon>
-      <CogIcon />
+      <RhUiSettingsFillIcon />
     </Icon>
   </Fragment>
 );

package/src/components/Icon/examples/IconContentSizes.tsx

@@ -1,20 +1,20 @@
 import { Fragment } from 'react';
 import { Icon } from '@patternfly/react-core';
-import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
 
 export const IconContentSizes: React.FunctionComponent = () => (
   <Fragment>
     <Icon size="3xl" iconSize="lg">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>{' '}
     <Icon size="3xl" iconSize="xl">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>{' '}
     <Icon size="3xl" iconSize="2xl">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>{' '}
     <Icon size="3xl">
-      <PlusCircleIcon />
+      <RhUiAddCircleFillIcon />
     </Icon>
   </Fragment>
 );

package/src/components/Icon/examples/IconCustomProgress.tsx

@@ -1,6 +1,6 @@
 import { Fragment, useState } from 'react';
 import { Icon, Spinner, Checkbox } from '@patternfly/react-core';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
 
 export const IconProgress: React.FunctionComponent = () => {
   const [isInProgress, setIsInProgress] = useState<boolean>(false);
@@ -17,7 +17,7 @@ export const IconProgress: React.FunctionComponent = () => {
         />
       </div>
       <Icon isInProgress={isInProgress} progressIcon={<Spinner diameter="2em" aria-label="Loading..." />}>
-        <CheckCircleIcon />
+        <RhUiCheckCircleFillIcon />
       </Icon>
     </Fragment>
   );

package/src/components/Icon/examples/IconInline.tsx

@@ -1,6 +1,6 @@
 import { Fragment } from 'react';
 import { Icon, Content } from '@patternfly/react-core';
-import PlusCircleIcon from '@patternfly/react-icons/dist/esm/icons/plus-circle-icon';
+import RhUiAddCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-add-circle-fill-icon';
 
 export const IconInline: React.FunctionComponent = () => (
   <Fragment>
@@ -8,25 +8,25 @@ export const IconInline: React.FunctionComponent = () => (
       <h1>
         Heading
         <Icon isInline>
-          <PlusCircleIcon />
+          <RhUiAddCircleFillIcon />
         </Icon>
       </h1>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit Sed hendrerit nisi in cursus maximus.</p>
       <h2>
         Second level
         <Icon isInline>
-          <PlusCircleIcon />
+          <RhUiAddCircleFillIcon />
         </Icon>
       </h2>
       <p>
         <Icon isInline>
-          <PlusCircleIcon />
+          <RhUiAddCircleFillIcon />
         </Icon>
         Curabitur accumsan turpis pharetra
         <strong>
           augue tincidunt
           <Icon isInline>
-            <PlusCircleIcon />
+            <RhUiAddCircleFillIcon />
           </Icon>
         </strong>
         blandit. Quisque condimentum maximus mi, sit amet commodo arcu rutrum id. Proin pretium urna vel cursus
@@ -35,24 +35,24 @@ export const IconInline: React.FunctionComponent = () => (
       <small>
         Sometimes you need small text
         <Icon isInline>
-          <PlusCircleIcon />
+          <RhUiAddCircleFillIcon />
         </Icon>
       </small>
       Inline with size specified:
       <Icon size="sm" isInline>
-        <PlusCircleIcon />
+        <RhUiAddCircleFillIcon />
       </Icon>
       small,
       <Icon size="md" isInline>
-        <PlusCircleIcon />
+        <RhUiAddCircleFillIcon />
       </Icon>
       medium,
       <Icon size="lg" isInline>
-        <PlusCircleIcon />
+        <RhUiAddCircleFillIcon />
       </Icon>
       large,
       <Icon size="xl" isInline>
-        <PlusCircleIcon />
+        <RhUiAddCircleFillIcon />
       </Icon>
       extra large
     </Content>

package/src/components/Icon/examples/IconProgress.tsx

@@ -1,6 +1,6 @@
 import { Fragment, useState } from 'react';
 import { Icon, Checkbox } from '@patternfly/react-core';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-circle-icon';
+import RhUiCheckCircleFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-check-circle-fill-icon';
 
 export const IconProgress: React.FunctionComponent = () => {
   const [isInProgress, setIsInProgress] = useState<boolean>(false);
@@ -17,7 +17,7 @@ export const IconProgress: React.FunctionComponent = () => {
         />
       </div>
       <Icon isInProgress={isInProgress}>
-        <CheckCircleIcon />
+        <RhUiCheckCircleFillIcon />
       </Icon>
     </Fragment>
   );