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

package/src/components/Form/InternalFormFieldGroup.tsx

@@ -3,6 +3,7 @@ import { css } from '@patternfly/react-styles';
 import { FormFieldGroupToggle } from './FormFieldGroupToggle';
 import { useSSRSafeId } from '../../helpers';
 import { useHasAnimations } from '../../helpers';
+import { IS_INERT } from '../../helpers/inert';
 
 export interface InternalFormFieldGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label' | 'onToggle'> {
   /** Anything that can be rendered as form field group content. */
@@ -72,7 +73,7 @@ export const InternalFormFieldGroup: React.FunctionComponent<InternalFormFieldGr
       {(!isExpandable || (isExpandable && isExpanded) || (hasAnimations && isExpandable)) && (
         <div
           className={css(styles.formFieldGroupBody)}
-          {...(hasAnimations && isExpandable && !isExpanded && { inert: '' })}
+          {...(hasAnimations && isExpandable && !isExpanded && { inert: IS_INERT })}
         >
           {children}
         </div>

package/src/components/Form/__tests__/FormGroup.test.tsx

@@ -34,6 +34,15 @@ describe('FormGroup', () => {
     expect(screen.getByTestId('form-group-test-id').firstElementChild).toHaveClass('pf-m-no-padding-top');
   });
 
+  test('should render action form group variant', () => {
+    render(
+      <FormGroup isActionGroup data-testid="form-group-test-id">
+        <button type="submit">Submit</button>
+      </FormGroup>
+    );
+    expect(screen.getByTestId('form-group-test-id')).toHaveClass('pf-m-action');
+  });
+
   test('should render form group variant with required label', () => {
     const { asFragment } = render(
       <FormGroup label="label" isRequired fieldId="label-id">

package/src/components/Form/__tests__/__snapshots__/ActionGroup.test.tsx.snap

@@ -24,6 +24,9 @@ exports[`ActionGroup component should render horizontal form ActionGroup variant
 <DocumentFragment>
   <form
     class="pf-v6-c-form pf-m-horizontal"
+    data-ouia-component-id="OUIA-Generated-Form-:r0:"
+    data-ouia-component-type="PF6/Form"
+    data-ouia-safe="true"
     novalidate=""
   >
     <div

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

@@ -4,6 +4,9 @@ exports[`Form component should render default form variant 1`] = `
 <DocumentFragment>
   <form
     class="pf-v6-c-form"
+    data-ouia-component-id="OUIA-Generated-Form-:r0:"
+    data-ouia-component-type="PF6/Form"
+    data-ouia-safe="true"
     novalidate=""
   />
 </DocumentFragment>
@@ -13,6 +16,9 @@ exports[`Form component should render form with limited width 1`] = `
 <DocumentFragment>
   <form
     class="pf-v6-c-form pf-m-limit-width"
+    data-ouia-component-id="OUIA-Generated-Form-:r2:"
+    data-ouia-component-type="PF6/Form"
+    data-ouia-safe="true"
     novalidate=""
   />
 </DocumentFragment>
@@ -22,6 +28,9 @@ exports[`Form component should render horizontal form variant 1`] = `
 <DocumentFragment>
   <form
     class="pf-v6-c-form pf-m-horizontal"
+    data-ouia-component-id="OUIA-Generated-Form-:r1:"
+    data-ouia-component-type="PF6/Form"
+    data-ouia-safe="true"
     novalidate=""
   />
 </DocumentFragment>

package/src/components/Form/__tests__/__snapshots__/FormGroup.test.tsx.snap

@@ -4,6 +4,9 @@ exports[`FormGroup should render correctly when label is not a string with Child
 <DocumentFragment>
   <div
     class="pf-v6-c-form__group"
+    data-ouia-component-id="OUIA-Generated-FormGroup-:ro:"
+    data-ouia-component-type="PF6/FormGroup"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-form__group-label"
@@ -41,6 +44,9 @@ exports[`FormGroup should render default form group variant 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-form__group"
+    data-ouia-component-id="OUIA-Generated-FormGroup-:r0:"
+    data-ouia-component-type="PF6/FormGroup"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-form__group-label"
@@ -72,6 +78,9 @@ exports[`FormGroup should render form group variant with node label 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-form__group"
+    data-ouia-component-id="OUIA-Generated-FormGroup-:ra:"
+    data-ouia-component-type="PF6/FormGroup"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-form__group-label"
@@ -105,6 +114,9 @@ exports[`FormGroup should render form group variant with required label 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-form__group"
+    data-ouia-component-id="OUIA-Generated-FormGroup-:r8:"
+    data-ouia-component-type="PF6/FormGroup"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-form__group-label"
@@ -142,6 +154,9 @@ exports[`FormGroup should render form group variant without label 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-form__group"
+    data-ouia-component-id="OUIA-Generated-FormGroup-:rm:"
+    data-ouia-component-type="PF6/FormGroup"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-form__group-control"
@@ -158,6 +173,9 @@ exports[`FormGroup should render form group with additional label info 1`] = `
 <DocumentFragment>
   <div
     class="pf-v6-c-form__group"
+    data-ouia-component-id="OUIA-Generated-FormGroup-:rc:"
+    data-ouia-component-type="PF6/FormGroup"
+    data-ouia-safe="true"
   >
     <div
       class="pf-v6-c-form__group-label pf-m-info"
@@ -200,10 +218,16 @@ exports[`FormGroup should render horizontal form group variant 1`] = `
 <DocumentFragment>
   <form
     class="pf-v6-c-form pf-m-horizontal"
+    data-ouia-component-id="OUIA-Generated-Form-:rg:"
+    data-ouia-component-type="PF6/Form"
+    data-ouia-safe="true"
     novalidate=""
   >
     <div
       class="pf-v6-c-form__group"
+      data-ouia-component-id="OUIA-Generated-FormGroup-:rh:"
+      data-ouia-component-type="PF6/FormGroup"
+      data-ouia-safe="true"
     >
       <div
         class="pf-v6-c-form__group-label"
@@ -236,10 +260,16 @@ exports[`FormGroup should render stacked horizontal form group variant 1`] = `
 <DocumentFragment>
   <form
     class="pf-v6-c-form pf-m-horizontal"
+    data-ouia-component-id="OUIA-Generated-Form-:rj:"
+    data-ouia-component-type="PF6/Form"
+    data-ouia-safe="true"
     novalidate=""
   >
     <div
       class="pf-v6-c-form__group"
+      data-ouia-component-id="OUIA-Generated-FormGroup-:rk:"
+      data-ouia-component-type="PF6/FormGroup"
+      data-ouia-safe="true"
     >
       <div
         class="pf-v6-c-form__group-label"

package/src/components/Form/examples/Form.md

@@ -6,6 +6,9 @@ cssPrefix: pf-v6-c-form
 propComponents:
   [
     'ActionGroup',
+    'ActionList',
+    'ActionListGroup',
+    'ActionListItem',
     'Form',
     'FormGroup',
     'FormGroupLabelHelp',
@@ -24,8 +27,8 @@ propComponents:
 
 import { useRef, useEffect, useState } from 'react';
 import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
-import HelpIcon from '@patternfly/react-icons/dist/esm/icons/help-icon';
-import TrashIcon from '@patternfly/react-icons/dist/esm/icons/trash-icon';
+import RhUiQuestionMarkCircleIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-question-mark-circle-icon';
+import RhUiTrashFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-trash-fill-icon';
 import styles from '@patternfly/react-styles/css/components/Form/form';
 
 ## Examples

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

@@ -5,7 +5,9 @@ import {
   TextInput,
   Checkbox,
   Popover,
-  ActionGroup,
+  ActionList,
+  ActionListGroup,
+  ActionListItem,
   Button,
   Radio,
   HelperText,
@@ -123,10 +125,18 @@ export const FormBasic: React.FunctionComponent = () => {
       <FormGroup fieldId="checkbox01">
         <Checkbox label="I'd like updates via email." id="checkbox01" name="checkbox01" 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/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/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/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();