@patternfly/react-core 6.6.0-prerelease.9 → 6.6.1-prerelease.0

package/src/components/Form/examples/FormFieldGroups.tsx

@@ -8,7 +8,7 @@ import {
   TextInput,
   Button
 } 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';
 
 export const FormFieldGroups: React.FunctionComponent = () => {
   const initialValues = {
@@ -75,7 +75,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
             <FormFieldGroupHeader
               titleText={{ text: 'Nested field group 1', id: 'nested-field-group1-titleText-id' }}
               titleDescription="Nested field group 1 description text."
-              actions={<Button variant="plain" aria-label="Remove" icon={<TrashIcon />} />}
+              actions={<Button variant="plain" aria-label="Remove" icon={<RhUiTrashFillIcon />} />}
             />
           }
         >
@@ -104,7 +104,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
           header={
             <FormFieldGroupHeader
               titleText={{ text: 'Nested field group 2', id: 'nested-field-group2-titleText-id' }}
-              actions={<Button variant="plain" aria-label="Remove" icon={<TrashIcon />} />}
+              actions={<Button variant="plain" aria-label="Remove" icon={<RhUiTrashFillIcon />} />}
             />
           }
         >
@@ -134,7 +134,7 @@ export const FormFieldGroups: React.FunctionComponent = () => {
             <FormFieldGroupHeader
               titleText={{ text: 'Nested field group 3', id: 'nested-field-group3-titleText-id' }}
               titleDescription="Field group 3 description text."
-              actions={<Button variant="plain" aria-label="Remove" icon={<TrashIcon />} />}
+              actions={<Button variant="plain" aria-label="Remove" icon={<RhUiTrashFillIcon />} />}
             />
           }
         >

package/src/components/Form/examples/FormHorizontal.tsx

@@ -7,7 +7,9 @@ import {
   FormSelect,
   FormSelectOption,
   Checkbox,
-  ActionGroup,
+  ActionList,
+  ActionListGroup,
+  ActionListItem,
   Button,
   Radio,
   HelperText,
@@ -112,10 +114,18 @@ export const FormHorizontal: React.FunctionComponent = () => {
         <Radio name="horizontal-inline-radio" label="Central" id="horizontal-inline-radio-02" />
         <Radio name="horizontal-inline-radio" label="Pacific" id="horizontal-inline-radio-03" />
       </FormGroup>
-      <ActionGroup>
-        <Button variant="primary">Submit</Button>
-        <Button variant="link">Cancel</Button>
-      </ActionGroup>
+      <FormGroup isActionGroup>
+        <ActionList>
+          <ActionListGroup>
+            <ActionListItem>
+              <Button variant="primary">Submit</Button>
+            </ActionListItem>
+            <ActionListItem>
+              <Button variant="link">Cancel</Button>
+            </ActionListItem>
+          </ActionListGroup>
+        </ActionList>
+      </FormGroup>
     </Form>
   );
 };

package/src/components/Form/examples/FormLimitWidth.tsx

@@ -5,7 +5,9 @@ import {
   TextInput,
   Checkbox,
   Popover,
-  ActionGroup,
+  ActionList,
+  ActionListGroup,
+  ActionListItem,
   Button,
   Radio,
   HelperText,
@@ -123,10 +125,18 @@ export const FormLimitWidth: React.FunctionComponent = () => {
       <FormGroup fieldId="checkbox02">
         <Checkbox label="I'd like updates via email." id="checkbox02" name="checkbox02" aria-label="Update via email" />
       </FormGroup>
-      <ActionGroup>
-        <Button variant="primary">Submit</Button>
-        <Button variant="link">Cancel</Button>
-      </ActionGroup>
+      <FormGroup isActionGroup>
+        <ActionList>
+          <ActionListGroup>
+            <ActionListItem>
+              <Button variant="primary">Submit</Button>
+            </ActionListItem>
+            <ActionListItem>
+              <Button variant="link">Cancel</Button>
+            </ActionListItem>
+          </ActionListGroup>
+        </ActionList>
+      </FormGroup>
     </Form>
   );
 };

package/src/components/Form/examples/FormState.tsx

@@ -1,6 +1,8 @@
 import { useState } from 'react';
 import {
-  ActionGroup,
+  ActionList,
+  ActionListGroup,
+  ActionListItem,
   Button,
   ButtonType,
   ButtonVariant,
@@ -63,9 +65,11 @@ export const FormState = () => {
             isOpen={isSelectOpen}
             toggle={(toggleRef) => (
               <MenuToggle
+                aria-haspopup="listbox"
                 ref={toggleRef}
                 onClick={(isOpen) => setIsSelectOpen(isOpen)}
                 isExpanded={isSelectOpen}
+                isInForm
                 style={
                   {
                     width: '200px'
@@ -88,25 +92,36 @@ export const FormState = () => {
             </SelectList>
           </Select>
 
-          <ActionGroup>
-            <Button
-              type={ButtonType.submit}
-              onClick={(e) => {
-                e.preventDefault();
+          <FormGroup isActionGroup>
+            <ActionList>
+              <ActionListGroup>
+                <ActionListItem>
+                  <Button
+                    type={ButtonType.submit}
+                    onClick={(e) => {
+                      e.preventDefault();
 
-                if (!values['input-id']) {
-                  setError('input-id', 'Input value is required.');
-                } else {
-                  alert(`Form submitted with: \n ${JSON.stringify(values)}`);
-                }
-              }}
-            >
-              Submit
-            </Button>
-            <Button variant={ButtonVariant.link} onClick={() => setFormStateExpanded((prevExpanded) => !prevExpanded)}>
-              {`${formStateExpanded ? 'Hide' : 'Show'} form state`}
-            </Button>
-          </ActionGroup>
+                      if (!values['input-id']) {
+                        setError('input-id', 'Input value is required.');
+                      } else {
+                        alert(`Form submitted with: \n ${JSON.stringify(values)}`);
+                      }
+                    }}
+                  >
+                    Submit
+                  </Button>
+                </ActionListItem>
+                <ActionListItem>
+                  <Button
+                    variant={ButtonVariant.link}
+                    onClick={() => setFormStateExpanded((prevExpanded) => !prevExpanded)}
+                  >
+                    {`${formStateExpanded ? 'Hide' : 'Show'} form state`}
+                  </Button>
+                </ActionListItem>
+              </ActionListGroup>
+            </ActionList>
+          </FormGroup>
           {formStateExpanded && (
             <>
               <Divider />

package/src/components/FormSelect/FormSelect.tsx

@@ -6,7 +6,7 @@ import { ValidatedOptions } from '../../helpers/constants';
 import { FormControlIcon } from '../FormControl/FormControlIcon';
 import { getOUIAProps, OUIAProps } from '../../helpers';
 import { SSRSafeIds } from '../../helpers/SSRSafeIds/SSRSafeIds';
-import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
+import RhMicronsCaretDownFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-fill-icon';
 
 export interface FormSelectProps
   extends Omit<React.HTMLProps<HTMLSelectElement>, 'onChange' | 'onBlur' | 'onFocus' | 'disabled'>, OUIAProps {
@@ -98,7 +98,7 @@ class FormSelect extends Component<FormSelectProps> {
             <span className={css(styles.formControlUtilities)}>
               {hasStatusIcon && <FormControlIcon status={validated as 'success' | 'error' | 'warning'} />}
               <span className={css(styles.formControlToggleIcon)}>
-                <RhMicronsCaretDownIcon />
+                <RhMicronsCaretDownFillIcon />
               </span>
             </span>
           </span>

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

@@ -36,7 +36,7 @@ exports[`FormSelect Disabled FormSelect input  1`] = `
           width="1em"
         >
           <path
-            d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+            d="m17.65 8.76-6.674 5.72a1.496 1.496 0 0 1-.976.365c-.347 0-.694-.122-.978-.366l-6.673-5.72A1 1 0 0 1 3 7h14a1 1 0 0 1 .65 1.76Z"
           />
         </svg>
       </span>
@@ -80,7 +80,7 @@ exports[`FormSelect FormSelect input with aria-label does not generate console e
           width="1em"
         >
           <path
-            d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+            d="m17.65 8.76-6.674 5.72a1.496 1.496 0 0 1-.976.365c-.347 0-.694-.122-.978-.366l-6.673-5.72A1 1 0 0 1 3 7h14a1 1 0 0 1 .65 1.76Z"
           />
         </svg>
       </span>
@@ -125,7 +125,7 @@ exports[`FormSelect FormSelect input with id does not generate console error 1`]
           width="1em"
         >
           <path
-            d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+            d="m17.65 8.76-6.674 5.72a1.496 1.496 0 0 1-.976.365c-.347 0-.694-.122-.978-.366l-6.673-5.72A1 1 0 0 1 3 7h14a1 1 0 0 1 .65 1.76Z"
           />
         </svg>
       </span>
@@ -168,7 +168,7 @@ exports[`FormSelect FormSelect input with no aria-label or id generates console
           width="1em"
         >
           <path
-            d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+            d="m17.65 8.76-6.674 5.72a1.496 1.496 0 0 1-.976.365c-.347 0-.694-.122-.978-.366l-6.673-5.72A1 1 0 0 1 3 7h14a1 1 0 0 1 .65 1.76Z"
           />
         </svg>
       </span>
@@ -258,7 +258,7 @@ exports[`FormSelect Grouped FormSelect input 1`] = `
           width="1em"
         >
           <path
-            d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+            d="m17.65 8.76-6.674 5.72a1.496 1.496 0 0 1-.976.365c-.347 0-.694-.122-.978-.366l-6.673-5.72A1 1 0 0 1 3 7h14a1 1 0 0 1 .65 1.76Z"
           />
         </svg>
       </span>
@@ -340,7 +340,7 @@ exports[`FormSelect Simple FormSelect input 1`] = `
           width="1em"
         >
           <path
-            d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+            d="m17.65 8.76-6.674 5.72a1.496 1.496 0 0 1-.976.365c-.347 0-.694-.122-.978-.366l-6.673-5.72A1 1 0 0 1 3 7h14a1 1 0 0 1 .65 1.76Z"
           />
         </svg>
       </span>
@@ -401,7 +401,7 @@ exports[`FormSelect invalid FormSelect input 1`] = `
           width="1em"
         >
           <path
-            d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+            d="m17.65 8.76-6.674 5.72a1.496 1.496 0 0 1-.976.365c-.347 0-.694-.122-.978-.366l-6.673-5.72A1 1 0 0 1 3 7h14a1 1 0 0 1 .65 1.76Z"
           />
         </svg>
       </span>
@@ -462,7 +462,7 @@ exports[`FormSelect validated success FormSelect input 1`] = `
           width="1em"
         >
           <path
-            d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+            d="m17.65 8.76-6.674 5.72a1.496 1.496 0 0 1-.976.365c-.347 0-.694-.122-.978-.366l-6.673-5.72A1 1 0 0 1 3 7h14a1 1 0 0 1 .65 1.76Z"
           />
         </svg>
       </span>
@@ -523,7 +523,7 @@ exports[`FormSelect validated warning FormSelect input 1`] = `
           width="1em"
         >
           <path
-            d="M18.71 5.29a.996.996 0 0 0-1.41 0l-7.29 7.29-7.3-7.29a.987.987 0 0 0-1.41-.02.987.987 0 0 0-.02 1.41l.02.02 7.65 7.65c.29.29.68.44 1.06.44s.77-.15 1.06-.44l7.65-7.65a.996.996 0 0 0 0-1.41Z"
+            d="m17.65 8.76-6.674 5.72a1.496 1.496 0 0 1-.976.365c-.347 0-.694-.122-.978-.366l-6.673-5.72A1 1 0 0 1 3 7h14a1 1 0 0 1 .65 1.76Z"
           />
         </svg>
       </span>

package/src/components/HelperText/HelperTextItem.tsx

@@ -1,6 +1,6 @@
 import styles from '@patternfly/react-styles/css/components/HelperText/helper-text';
 import { css } from '@patternfly/react-styles';
-import MinusIcon from '@patternfly/react-icons/dist/esm/icons/minus-icon';
+import RhUiMinusIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-minus-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 RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
@@ -37,7 +37,7 @@ export interface HelperTextItemProps extends React.HTMLProps<HTMLDivElement | HT
 }
 
 const defaultVariantIcons = {
-  indeterminate: <MinusIcon />,
+  indeterminate: <RhUiMinusIcon />,
   warning: <RhUiWarningFillIcon />,
   success: <RhUiCheckCircleFillIcon />,
   error: <RhUiErrorFillIcon />

package/src/components/HelperText/examples/HelperText.md

@@ -7,8 +7,8 @@ propComponents: ['HelperText', 'HelperTextItem']
 
 import { Fragment } from 'react';
 import InfoIcon from '@patternfly/react-icons/dist/esm/icons/info-icon';
-import QuestionIcon from '@patternfly/react-icons/dist/esm/icons/question-icon';
-import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
+import RhUiQuestionMarkIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-icon';
+import RhMicronsCheckmarkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-checkmark-icon';
 import RhMicronsCloseIcon from  '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 import ExclamationIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-icon';
 

package/src/components/HelperText/examples/HelperTextWithCustomIcon.tsx

@@ -1,9 +1,9 @@
 import { Fragment } from 'react';
 import { HelperText, HelperTextItem } from '@patternfly/react-core';
 import InfoIcon from '@patternfly/react-icons/dist/esm/icons/info-icon';
-import QuestionIcon from '@patternfly/react-icons/dist/esm/icons/question-icon';
+import RhUiQuestionMarkIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-icon';
 import ExclamationIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-icon';
-import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
+import RhMicronsCheckmarkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-checkmark-icon';
 import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 export const HelperTextWithCustomIcon: React.FunctionComponent = () => (
@@ -12,7 +12,7 @@ export const HelperTextWithCustomIcon: React.FunctionComponent = () => (
       <HelperTextItem icon={<InfoIcon />}>This is default helper text</HelperTextItem>
     </HelperText>
     <HelperText>
-      <HelperTextItem variant="indeterminate" icon={<QuestionIcon />}>
+      <HelperTextItem variant="indeterminate" icon={<RhUiQuestionMarkIcon />}>
         This is indeterminate helper text
       </HelperTextItem>
     </HelperText>
@@ -22,7 +22,7 @@ export const HelperTextWithCustomIcon: React.FunctionComponent = () => (
       </HelperTextItem>
     </HelperText>
     <HelperText>
-      <HelperTextItem variant="success" icon={<CheckIcon />}>
+      <HelperTextItem variant="success" icon={<RhMicronsCheckmarkIcon />}>
         This is success helper text
       </HelperTextItem>
     </HelperText>

package/src/components/Hero/Hero.tsx

@@ -53,7 +53,7 @@ export const Hero: React.FunctionComponent<HeroProps> = ({
   bodyWidth,
   bodyMaxWidth,
   ...props
-}) => {
+}: HeroProps) => {
   const customStyles: { [key: string]: string } = {};
   if (backgroundSrcLight) {
     customStyles[heroBackgroundImageLight.name] = `url(${backgroundSrcLight})`;

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

@@ -1,13 +1,13 @@
 import { render, screen } from '@testing-library/react';
 import { kebabCase } from 'case-anything';
 import { Icon, IconSize } from '../Icon';
-import CheckIcon from '@patternfly/react-icons/dist/esm/icons/check-icon';
+import RhMicronsCheckmarkIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-checkmark-icon';
 import styles from '@patternfly/react-styles/css/components/Icon/icon';
 
 test('renders basic icon successfully', () => {
   const { asFragment } = render(
     <Icon>
-      <CheckIcon />
+      <RhMicronsCheckmarkIcon />
     </Icon>
   );
   expect(asFragment()).toMatchSnapshot();
@@ -16,7 +16,7 @@ test('renders basic icon successfully', () => {
 test('checks basic icon structure', () => {
   render(
     <Icon title="icon">
-      <CheckIcon />
+      <RhMicronsCheckmarkIcon />
     </Icon>
   );
   const iconContainer = screen.getByTitle('icon');
@@ -33,7 +33,7 @@ test('renders without children', () => {
 test('sets additional custom class successfully', () => {
   render(
     <Icon className="test" title="custom-icon">
-      <CheckIcon />
+      <RhMicronsCheckmarkIcon />
     </Icon>
   );
   const iconContainer = screen.getByTitle('custom-icon');
@@ -61,7 +61,7 @@ Object.values([
   test(`sets icon size modifier successfully - ${size}`, () => {
     render(
       <Icon iconSize={size as IconSize} title={`content-${size}-icon`}>
-        <CheckIcon />
+        <RhMicronsCheckmarkIcon />
       </Icon>
     );
     const iconContainer = screen.getByTitle(`content-${size}-icon`).querySelector(`.${styles.iconContent}`);
@@ -74,7 +74,7 @@ Object.values([
   test(`sets progress icon size modifier successfully - ${size}`, () => {
     render(
       <Icon isInProgress progressIconSize={size as IconSize} title={`progress-content-${size}-icon`}>
-        <CheckIcon />
+        <RhMicronsCheckmarkIcon />
       </Icon>
     );
     const iconContainer = screen.getByTitle(`progress-content-${size}-icon`).querySelector(`.${styles.iconProgress}`);
@@ -87,7 +87,7 @@ Object.values([
   test(`sets size modifier successfully - ${size}`, () => {
     render(
       <Icon size={size as IconSize} title={`${size}-icon`}>
-        <CheckIcon />
+        <RhMicronsCheckmarkIcon />
       </Icon>
     );
     const iconContainer = screen.getByTitle(`${size}-icon`);
@@ -101,7 +101,7 @@ Object.values([
 test('check icon without iconSize', () => {
   render(
     <Icon title="no-icon-size">
-      <CheckIcon />
+      <RhMicronsCheckmarkIcon />
     </Icon>
   );
   const iconContainer = screen.getByTitle('no-icon-size').querySelector(`.${styles.iconContent}`);
@@ -111,7 +111,7 @@ test('check icon without iconSize', () => {
 test('check icon without progress icon size', () => {
   render(
     <Icon title="no-progress-icon-size">
-      <CheckIcon />
+      <RhMicronsCheckmarkIcon />
     </Icon>
   );
   const iconContainer = screen.getByTitle('no-progress-icon-size').querySelector(`.${styles.iconProgress}`);
@@ -121,7 +121,7 @@ test('check icon without progress icon size', () => {
 test('check icon without size', () => {
   render(
     <Icon title="no-size">
-      <CheckIcon />
+      <RhMicronsCheckmarkIcon />
     </Icon>
   );
   const iconContainer = screen.getByTitle('no-size');
@@ -132,7 +132,7 @@ Object.values(['custom', 'info', 'success', 'warning', 'danger']).forEach((statu
   test(`sets status modifier successfully - ${status}`, () => {
     render(
       <Icon status={status as 'custom' | 'info' | 'success' | 'warning' | 'danger'} title={`${status}-icon`}>
-        <CheckIcon />
+        <RhMicronsCheckmarkIcon />
       </Icon>
     );
     const iconContent = screen.getByTitle(`${status}-icon`).querySelector(`.${styles.iconContent}`);
@@ -144,7 +144,7 @@ Object.values(['custom', 'info', 'success', 'warning', 'danger']).forEach((statu
 test('check icon without status', () => {
   render(
     <Icon title="no-status">
-      <CheckIcon />
+      <RhMicronsCheckmarkIcon />
     </Icon>
   );
   const iconContent = screen.getByTitle('no-status').querySelector(`.${styles.iconContent}`);
@@ -154,7 +154,7 @@ test('check icon without status', () => {
 test('sets isInline successfully', () => {
   render(
     <Icon isInline title="inline-icon">
-      <CheckIcon />
+      <RhMicronsCheckmarkIcon />
     </Icon>
   );
   const iconContainer = screen.getByTitle('inline-icon');
@@ -165,7 +165,7 @@ test('sets isInline successfully', () => {
 test('check icon without isInline', () => {
   render(
     <Icon title="no-inline">
-      <CheckIcon />
+      <RhMicronsCheckmarkIcon />
     </Icon>
   );
   const iconContainer = screen.getByTitle('no-inline');
@@ -175,7 +175,7 @@ test('check icon without isInline', () => {
 test('sets isInProgress successfully', () => {
   render(
     <Icon isInProgress title="progress-icon">
-      <CheckIcon />
+      <RhMicronsCheckmarkIcon />
     </Icon>
   );
   const iconContainer = screen.getByTitle('progress-icon');
@@ -188,7 +188,7 @@ test('sets isInProgress successfully', () => {
 test('check icon without isInProgress', () => {
   render(
     <Icon title="no-in-progress">
-      <CheckIcon />
+      <RhMicronsCheckmarkIcon />
     </Icon>
   );
   const iconContainer = screen.getByTitle('no-in-progress');
@@ -198,7 +198,7 @@ test('check icon without isInProgress', () => {
 test('sets default progres aria-label successfully', () => {
   render(
     <Icon isInProgress defaultProgressArialabel="test" title="progress-icon">
-      <CheckIcon />
+      <RhMicronsCheckmarkIcon />
     </Icon>
   );
 
@@ -207,8 +207,8 @@ test('sets default progres aria-label successfully', () => {
 
 test('renders progress icon successfully', () => {
   const { asFragment } = render(
-    <Icon isInProgress progressIcon={<CheckIcon />}>
-      <CheckIcon />
+    <Icon isInProgress progressIcon={<RhMicronsCheckmarkIcon />}>
+      <RhMicronsCheckmarkIcon />
     </Icon>
   );
   expect(asFragment()).toMatchSnapshot();

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

@@ -14,24 +14,12 @@ exports[`renders basic icon successfully 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="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>
+        <path
+          d="M18.71 4.27c-.4-.38-1.03-.37-1.41.02L7 14.59 2.71 10.3l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l4.65 4.65a1.499 1.499 0 0 0 2.12 0L18.72 5.71l.02-.02c.38-.4.37-1.03-.02-1.41Z"
+        />
       </svg>
     </span>
   </span>
@@ -52,24 +40,12 @@ exports[`renders progress icon successfully 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="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>
+        <path
+          d="M18.71 4.27c-.4-.38-1.03-.37-1.41.02L7 14.59 2.71 10.3l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l4.65 4.65a1.499 1.499 0 0 0 2.12 0L18.72 5.71l.02-.02c.38-.4.37-1.03-.02-1.41Z"
+        />
       </svg>
     </span>
     <span
@@ -81,24 +57,12 @@ exports[`renders progress icon successfully 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="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>
+        <path
+          d="M18.71 4.27c-.4-.38-1.03-.37-1.41.02L7 14.59 2.71 10.3l-.02-.02c-.4-.38-1.03-.37-1.41.02-.38.4-.37 1.03.02 1.41l4.65 4.65a1.499 1.499 0 0 0 2.12 0L18.72 5.71l.02-.02c.38-.4.37-1.03-.02-1.41Z"
+        />
       </svg>
     </span>
   </span>

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

@@ -6,7 +6,7 @@ propComponents: ['Icon']
 ---
 
 import { Fragment, useState } from 'react';
-import LongArrowAltDownIcon from '@patternfly/react-icons/dist/esm/icons/long-arrow-alt-down-icon';
+import RhMicronsArrowDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-arrow-down-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';

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

@@ -1,6 +1,6 @@
 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 RhMicronsArrowDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-arrow-down-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';
@@ -8,7 +8,7 @@ import RhUiSettingsFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-s
 export const IconBasic: React.FunctionComponent = () => (
   <Fragment>
     <Icon>
-      <LongArrowAltDownIcon />
+      <RhMicronsArrowDownIcon />
     </Icon>{' '}
     <Icon>
       <RhMicronsCaretRightIcon />