@patternfly/react-core 6.5.0-prerelease.5 → 6.5.0-prerelease.51

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

@@ -11,7 +11,7 @@ exports[`Disclosure ExpandableSection 1`] = `
       <button
         aria-controls="content-id"
         class="pf-v6-c-button pf-m-link"
-        data-ouia-component-id="OUIA-Generated-Button-link-6"
+        data-ouia-component-id="OUIA-Generated-Button-link-:rh:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         id="toggle-id"
@@ -29,11 +29,11 @@ exports[`Disclosure ExpandableSection 1`] = `
               fill="currentColor"
               height="1em"
               role="img"
-              viewBox="0 0 256 512"
+              viewBox="0 0 20 20"
               width="1em"
             >
               <path
-                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                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"
               />
             </svg>
           </span>
@@ -64,7 +64,7 @@ exports[`ExpandableSection 1`] = `
       <button
         aria-controls="content-id"
         class="pf-v6-c-button pf-m-link"
-        data-ouia-component-id="OUIA-Generated-Button-link-1"
+        data-ouia-component-id="OUIA-Generated-Button-link-:r2:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         id="toggle-id"
@@ -82,11 +82,11 @@ exports[`ExpandableSection 1`] = `
               fill="currentColor"
               height="1em"
               role="img"
-              viewBox="0 0 256 512"
+              viewBox="0 0 20 20"
               width="1em"
             >
               <path
-                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                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"
               />
             </svg>
           </span>
@@ -118,7 +118,7 @@ exports[`Renders ExpandableSection expanded 1`] = `
         aria-controls="content-id"
         aria-expanded="true"
         class="pf-v6-c-button pf-m-link"
-        data-ouia-component-id="OUIA-Generated-Button-link-2"
+        data-ouia-component-id="OUIA-Generated-Button-link-:r5:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         id="toggle-id"
@@ -136,11 +136,11 @@ exports[`Renders ExpandableSection expanded 1`] = `
               fill="currentColor"
               height="1em"
               role="img"
-              viewBox="0 0 256 512"
+              viewBox="0 0 20 20"
               width="1em"
             >
               <path
-                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                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"
               />
             </svg>
           </span>
@@ -171,7 +171,7 @@ exports[`Renders ExpandableSection indented 1`] = `
         aria-controls="content-id"
         aria-expanded="true"
         class="pf-v6-c-button pf-m-link"
-        data-ouia-component-id="OUIA-Generated-Button-link-7"
+        data-ouia-component-id="OUIA-Generated-Button-link-:rk:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         id="toggle-id"
@@ -189,11 +189,11 @@ exports[`Renders ExpandableSection indented 1`] = `
               fill="currentColor"
               height="1em"
               role="img"
-              viewBox="0 0 256 512"
+              viewBox="0 0 20 20"
               width="1em"
             >
               <path
-                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                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"
               />
             </svg>
           </span>
@@ -223,7 +223,7 @@ exports[`Renders Uncontrolled ExpandableSection 1`] = `
       <button
         aria-controls="content-id"
         class="pf-v6-c-button pf-m-link"
-        data-ouia-component-id="OUIA-Generated-Button-link-5"
+        data-ouia-component-id="OUIA-Generated-Button-link-:re:"
         data-ouia-component-type="PF6/Button"
         data-ouia-safe="true"
         id="toggle-id"
@@ -241,11 +241,11 @@ exports[`Renders Uncontrolled ExpandableSection 1`] = `
               fill="currentColor"
               height="1em"
               role="img"
-              viewBox="0 0 256 512"
+              viewBox="0 0 20 20"
               width="1em"
             >
               <path
-                d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                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"
               />
             </svg>
           </span>

package/src/components/ExpandableSection/examples/ExpandableSection.md

@@ -6,7 +6,7 @@ propComponents: ['ExpandableSection', 'ExpandableSectionToggle']
 ---
 
 import { useState } from 'react';
-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';
 
 ## Examples
 

package/src/components/ExpandableSection/examples/ExpandableSectionCustomToggle.tsx

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { ExpandableSection, Badge, Stack, StackItem } 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 ExpandableSectionCustomToggle: React.FunctionComponent = () => {
   const [isExpanded, setIsExpanded] = useState(false);
@@ -18,7 +18,7 @@ export const ExpandableSectionCustomToggle: React.FunctionComponent = () => {
           toggleContent={
             <div>
               <span>You can also use icons </span>
-              <CheckCircleIcon />
+              <RhUiCheckCircleFillIcon />
               <span> or badges </span>
               <Badge isRead={true}>4</Badge>
               <span> !</span>

package/src/components/ExpandableSection/examples/ExpandableSectionWithHeading.tsx

@@ -1,6 +1,6 @@
 import { useState, MouseEvent } from 'react';
 import { ExpandableSection, ExpandableSectionToggle, Stack, StackItem } 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 ExpandableSectionWithHeading = () => {
   const [isExpanded1, setIsExpanded1] = useState(false);
@@ -75,7 +75,7 @@ export const ExpandableSectionWithHeading = () => {
           toggleWrapper="h5"
           toggleContent={
             <span>
-              <CheckCircleIcon /> Custom Heading Content with Icon
+              <RhUiCheckCircleFillIcon /> Custom Heading Content with Icon
             </span>
           }
           onToggle={onToggle2}

package/src/components/FileUpload/FileUpload.tsx

@@ -4,11 +4,10 @@ import { readFile, fileReaderType } from '../../helpers/fileUtils';
 import { DropEvent } from '../../helpers/typeUtils';
 import { fromEvent } from 'file-selector';
 
-export interface FileUploadProps
-  extends Omit<
-    FileUploadFieldProps,
-    'children' | 'onBrowseButtonClick' | 'onClearButtonClick' | 'isDragActive' | 'containerRef'
-  > {
+export interface FileUploadProps extends Omit<
+  FileUploadFieldProps,
+  'children' | 'onBrowseButtonClick' | 'onClearButtonClick' | 'isDragActive' | 'containerRef'
+> {
   /** Flag to allow editing of a text file's contents after it is selected from disk. */
   allowEditingUploadedText?: boolean;
   /** Aria-label for the text area. */

package/src/components/FileUpload/FileUploadField.tsx

@@ -172,29 +172,31 @@ export const FileUploadField: React.FunctionComponent<FileUploadFieldProps> = ({
           </InputGroupItem>
         </InputGroup>
       </div>
-      <div className={styles.fileUploadFileDetails}>
-        {!hideDefaultPreview && type === fileReaderType.text && (
-          <TextArea
-            readOnly={isReadOnly || (!!filename && !allowEditingUploadedText)}
-            disabled={isDisabled}
-            isRequired={isRequired}
-            resizeOrientation={TextAreResizeOrientation.vertical}
-            validated={validated}
-            id={id}
-            aria-label={ariaLabel}
-            value={value as string}
-            onChange={onTextAreaChange}
-            onClick={onTextAreaClick}
-            onBlur={onTextAreaBlur}
-            placeholder={textAreaPlaceholder}
-          />
-        )}
-        {isLoading && (
-          <div className={styles.fileUploadFileDetailsSpinner}>
-            <Spinner size={spinnerSize.lg} aria-valuetext={spinnerAriaValueText} />
-          </div>
-        )}
-      </div>
+      {(isLoading || (!hideDefaultPreview && type === fileReaderType.text)) && (
+        <div className={styles.fileUploadFileDetails}>
+          {!hideDefaultPreview && type === fileReaderType.text && (
+            <TextArea
+              readOnly={isReadOnly || (!!filename && !allowEditingUploadedText)}
+              disabled={isDisabled}
+              isRequired={isRequired}
+              resizeOrientation={TextAreResizeOrientation.vertical}
+              validated={validated}
+              id={id}
+              aria-label={ariaLabel}
+              value={value as string}
+              onChange={onTextAreaChange}
+              onClick={onTextAreaClick}
+              onBlur={onTextAreaBlur}
+              placeholder={textAreaPlaceholder}
+            />
+          )}
+          {isLoading && (
+            <div className={styles.fileUploadFileDetailsSpinner}>
+              <Spinner size={spinnerSize.lg} aria-valuetext={spinnerAriaValueText} />
+            </div>
+          )}
+        </div>
+      )}
       {children}
     </div>
   );

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

@@ -21,7 +21,7 @@ exports[`simple fileupload 1`] = `
             <input
               aria-invalid="false"
               aria-label="Drag a file here or browse to upload"
-              data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-:r1:"
               data-ouia-component-type="PF6/TextInput"
               data-ouia-safe="true"
               id="simple-text-file-filename"
@@ -38,7 +38,7 @@ exports[`simple fileupload 1`] = `
         >
           <button
             class="pf-v6-c-button pf-m-control"
-            data-ouia-component-id="OUIA-Generated-Button-control-1"
+            data-ouia-component-id="OUIA-Generated-Button-control-:r2:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -55,7 +55,7 @@ exports[`simple fileupload 1`] = `
         >
           <button
             class="pf-v6-c-button pf-m-control"
-            data-ouia-component-id="OUIA-Generated-Button-control-2"
+            data-ouia-component-id="OUIA-Generated-Button-control-:r3:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             disabled=""

package/src/components/FileUpload/__tests__/__snapshots__/FileUploadField.test.tsx.snap

@@ -20,7 +20,7 @@ exports[`simple fileuploadfield 1`] = `
             <input
               aria-invalid="false"
               aria-label="Do something custom with this!"
-              data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-:r1:"
               data-ouia-component-type="PF6/TextInput"
               data-ouia-safe="true"
               id="custom-file-upload-filename"
@@ -37,7 +37,7 @@ exports[`simple fileuploadfield 1`] = `
         >
           <button
             class="pf-v6-c-button pf-m-control"
-            data-ouia-component-id="OUIA-Generated-Button-control-1"
+            data-ouia-component-id="OUIA-Generated-Button-control-:r2:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"
@@ -54,7 +54,7 @@ exports[`simple fileuploadfield 1`] = `
         >
           <button
             class="pf-v6-c-button pf-m-control"
-            data-ouia-component-id="OUIA-Generated-Button-control-2"
+            data-ouia-component-id="OUIA-Generated-Button-control-:r3:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             type="button"

package/src/components/FileUpload/examples/FileUpload.md

@@ -8,7 +8,6 @@ subsection: file-upload
 
 import { useState } from 'react';
 import FileUploadIcon from '@patternfly/react-icons/dist/esm/icons/file-upload-icon';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
 
 ## Examples
 

package/src/components/Form/FormFieldGroupToggle.tsx

@@ -1,6 +1,6 @@
 import styles from '@patternfly/react-styles/css/components/Form/form';
 import { css } from '@patternfly/react-styles';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import RhMicronsCaretDownIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-down-icon';
 import { Button } from '../Button';
 
 export interface FormFieldGroupToggleProps extends React.HTMLProps<HTMLDivElement> {
@@ -38,7 +38,7 @@ export const FormFieldGroupToggle: React.FunctionComponent<FormFieldGroupToggleP
         id={toggleId}
         icon={
           <span className={css(styles.formFieldGroupToggleIcon)}>
-            <AngleRightIcon />
+            <RhMicronsCaretDownIcon />
           </span>
         }
       />

package/src/components/Form/FormGroup.tsx

@@ -2,7 +2,7 @@ import { Fragment, isValidElement } from 'react';
 import styles from '@patternfly/react-styles/css/components/Form/form';
 import { ASTERISK } from '../../helpers/htmlConstants';
 import { css } from '@patternfly/react-styles';
-import { GenerateId } from '../../helpers/GenerateId/GenerateId';
+import { useSSRSafeId } from '../../helpers';
 
 export interface FormGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label'> {
   /** Anything that can be rendered as FormGroup content. */
@@ -47,6 +47,7 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
   role,
   ...props
 }: FormGroupProps) => {
+  const randomId = useSSRSafeId();
   const isGroupOrRadioGroup = role === 'group' || role === 'radiogroup';
   const LabelComponent = isGroupOrRadioGroup ? 'span' : 'label';
 
@@ -56,8 +57,7 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
         <span className={css(styles.formLabelText)}>{label}</span>
         {isRequired && (
           <span className={css(styles.formLabelRequired)} aria-hidden="true">
-            {' '}
-            {ASTERISK}
+            &nbsp;{ASTERISK}
           </span>
         )}
       </LabelComponent>
@@ -67,44 +67,36 @@ export const FormGroup: React.FunctionComponent<FormGroupProps> = ({
   );
 
   return (
-    <GenerateId>
-      {(randomId) => (
+    <div
+      className={css(styles.formGroup, className)}
+      {...(role && { role })}
+      {...(isGroupOrRadioGroup && { 'aria-labelledby': `${fieldId || randomId}-legend` })}
+      {...props}
+    >
+      {label && (
         <div
-          className={css(styles.formGroup, className)}
-          {...(role && { role })}
-          {...(isGroupOrRadioGroup && { 'aria-labelledby': `${fieldId || randomId}-legend` })}
-          {...props}
+          className={css(
+            styles.formGroupLabel,
+            labelInfo && styles.modifiers.info,
+            hasNoPaddingTop && styles.modifiers.noPaddingTop
+          )}
+          {...(isGroupOrRadioGroup && { id: `${fieldId || randomId}-legend` })}
         >
-          {label && (
-            <div
-              className={css(
-                styles.formGroupLabel,
-                labelInfo && styles.modifiers.info,
-                hasNoPaddingTop && styles.modifiers.noPaddingTop
-              )}
-              {...(isGroupOrRadioGroup && { id: `${fieldId || randomId}-legend` })}
-            >
-              {labelInfo && (
-                <Fragment>
-                  <div className={css(styles.formGroupLabelMain)}>{labelContent}</div>
-                  <div className={css(styles.formGroupLabelInfo)}>{labelInfo}</div>
-                </Fragment>
-              )}
-              {!labelInfo && labelContent}
-            </div>
+          {labelInfo && (
+            <Fragment>
+              <div className={css(styles.formGroupLabelMain)}>{labelContent}</div>
+              <div className={css(styles.formGroupLabelInfo)}>{labelInfo}</div>
+            </Fragment>
           )}
-          <div
-            className={css(
-              styles.formGroupControl,
-              isInline && styles.modifiers.inline,
-              isStack && styles.modifiers.stack
-            )}
-          >
-            {children}
-          </div>
+          {!labelInfo && labelContent}
         </div>
       )}
-    </GenerateId>
+      <div
+        className={css(styles.formGroupControl, isInline && styles.modifiers.inline, isStack && styles.modifiers.stack)}
+      >
+        {children}
+      </div>
+    </div>
   );
 };
 FormGroup.displayName = 'FormGroup';

package/src/components/Form/InternalFormFieldGroup.tsx

@@ -1,7 +1,7 @@
 import styles from '@patternfly/react-styles/css/components/Form/form';
 import { css } from '@patternfly/react-styles';
 import { FormFieldGroupToggle } from './FormFieldGroupToggle';
-import { GenerateId } from '../../helpers';
+import { useSSRSafeId } from '../../helpers';
 import { useHasAnimations } from '../../helpers';
 
 export interface InternalFormFieldGroupProps extends Omit<React.HTMLProps<HTMLDivElement>, 'label' | 'onToggle'> {
@@ -37,6 +37,7 @@ export const InternalFormFieldGroup: React.FunctionComponent<InternalFormFieldGr
   hasAnimations: hasAnimationsProp,
   ...props
 }: InternalFormFieldGroupProps) => {
+  const toggleId = useSSRSafeId('form-field-group-toggle');
   const hasAnimations = useHasAnimations(hasAnimationsProp);
   const headerTitleText = header ? header.props.titleText : null;
   if (isExpandable && !toggleAriaLabel && !headerTitleText) {
@@ -59,17 +60,13 @@ export const InternalFormFieldGroup: React.FunctionComponent<InternalFormFieldGr
       {...props}
     >
       {isExpandable && (
-        <GenerateId prefix="form-field-group-toggle">
-          {(id) => (
-            <FormFieldGroupToggle
-              onToggle={onToggle}
-              isExpanded={isExpanded}
-              aria-label={toggleAriaLabel}
-              toggleId={id}
-              {...(headerTitleText && { 'aria-labelledby': `${header.props.titleText.id} ${id}` })}
-            />
-          )}
-        </GenerateId>
+        <FormFieldGroupToggle
+          onToggle={onToggle}
+          isExpanded={isExpanded}
+          aria-label={toggleAriaLabel}
+          toggleId={toggleId}
+          {...(headerTitleText && { 'aria-labelledby': `${header.props.titleText.id} ${toggleId}` })}
+        />
       )}
       {header && header}
       {(!isExpandable || (isExpandable && isExpanded) || (hasAnimations && isExpandable)) && (

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

@@ -16,12 +16,12 @@ exports[`Check expandable form field group example against snapshot 1`] = `
         <button
           aria-expanded="true"
           aria-label="toggle"
-          aria-labelledby="title-text-id2 generated-id"
+          aria-labelledby="title-text-id2 form-field-group-toggle:r2:"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-1"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:r3:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
-          id="generated-id"
+          id="form-field-group-toggle:r2:"
           type="button"
         >
           <span
@@ -36,11 +36,11 @@ exports[`Check expandable form field group example against snapshot 1`] = `
                 fill="currentColor"
                 height="1em"
                 role="img"
-                viewBox="0 0 256 512"
+                viewBox="0 0 20 20"
                 width="1em"
               >
                 <path
-                  d="M224.3 273l-136 136c-9.4 9.4-24.6 9.4-33.9 0l-22.6-22.6c-9.4-9.4-9.4-24.6 0-33.9l96.4-96.4-96.4-96.4c-9.4-9.4-9.4-24.6 0-33.9L54.3 103c9.4-9.4 24.6-9.4 33.9 0l136 136c9.5 9.4 9.5 24.6.1 34z"
+                  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"
                 />
               </svg>
             </span>
@@ -75,7 +75,7 @@ exports[`Check expandable form field group example against snapshot 1`] = `
       >
         <button
           class="pf-v6-c-button pf-m-primary"
-          data-ouia-component-id="OUIA-Generated-Button-primary-2"
+          data-ouia-component-id="OUIA-Generated-Button-primary-:r4:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -123,7 +123,7 @@ exports[`Check form field group example against snapshot 1`] = `
       >
         <button
           class="pf-v6-c-button pf-m-primary"
-          data-ouia-component-id="OUIA-Generated-Button-primary-1"
+          data-ouia-component-id="OUIA-Generated-Button-primary-:r1:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"

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

@@ -122,7 +122,7 @@ exports[`FormGroup should render form group variant with required label 1`] = `
           aria-hidden="true"
           class="pf-v6-c-form__label-required"
         >
-           *
+           *
         </span>
       </label>
         

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

@@ -23,7 +23,7 @@ propComponents:
 ---
 
 import { useRef, useEffect, useState } from 'react';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+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 styles from '@patternfly/react-styles/css/components/Form/form';

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

@@ -1,6 +1,6 @@
 import { useState } from 'react';
 import { Form, FormGroup, TextInput, HelperText, HelperTextItem, FormHelperText } from '@patternfly/react-core';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
 
 export const FormInvalid: React.FunctionComponent = () => {
   type validate = 'success' | 'warning' | 'error' | 'default';
@@ -32,7 +32,7 @@ export const FormInvalid: React.FunctionComponent = () => {
         {validated !== 'success' && (
           <FormHelperText>
             <HelperText>
-              <HelperTextItem icon={<ExclamationCircleIcon />} variant={validated}>
+              <HelperTextItem icon={<RhUiErrorFillIcon />} variant={validated}>
                 {validated === 'error' ? 'Must be a number' : 'Please enter your age'}
               </HelperTextItem>
             </HelperText>

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

@@ -9,7 +9,7 @@ import {
   HelperTextItem,
   FormHelperText
 } from '@patternfly/react-core';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
 
 export const FormInvalidWithAlert: React.FunctionComponent = () => {
   type validate = 'success' | 'warning' | 'error' | 'default';
@@ -46,7 +46,7 @@ export const FormInvalidWithAlert: React.FunctionComponent = () => {
         {validated !== 'success' && (
           <FormHelperText>
             <HelperText>
-              <HelperTextItem icon={<ExclamationCircleIcon />} variant={validated}>
+              <HelperTextItem icon={<RhUiErrorFillIcon />} variant={validated}>
                 {validated === 'error' ? 'Must be a number' : 'Please enter your age'}
               </HelperTextItem>
             </HelperText>

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

@@ -18,7 +18,7 @@ import {
   TextArea,
   TextInput
 } from '@patternfly/react-core';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
 
 export const FormState = () => {
   const [isSelectOpen, setIsSelectOpen] = useState(false);
@@ -42,7 +42,7 @@ export const FormState = () => {
               <HelperText>
                 <HelperTextItem
                   variant={errors['input-id'] ? 'error' : 'default'}
-                  {...(errors['input-id'] && { icon: <ExclamationCircleIcon /> })}
+                  {...(errors['input-id'] && { icon: <RhUiErrorFillIcon /> })}
                 >
                   {errors['input-id']}
                 </HelperTextItem>

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

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import { Form, FormGroup, FormHelperText, HelperText, HelperTextItem, TextInput } from '@patternfly/react-core';
-import ExclamationCircleIcon from '@patternfly/react-icons/dist/esm/icons/exclamation-circle-icon';
+import RhUiErrorFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-error-fill-icon';
 
 export const FormValidated: React.FunctionComponent = () => {
   type validate = 'success' | 'warning' | 'error' | 'default';
@@ -47,7 +47,7 @@ export const FormValidated: React.FunctionComponent = () => {
         />
         <FormHelperText>
           <HelperText>
-            <HelperTextItem variant={validated} {...(validated === 'error' && { icon: <ExclamationCircleIcon /> })}>
+            <HelperTextItem variant={validated} {...(validated === 'error' && { icon: <RhUiErrorFillIcon /> })}>
               {helperText}
             </HelperTextItem>
           </HelperText>

package/src/components/FormControl/FormControlIcon.tsx

@@ -1,13 +1,13 @@
 import styles from '@patternfly/react-styles/css/components/FormControl/form-control';
 import { css } from '@patternfly/react-styles';
-import CheckCircleIcon from '@patternfly/react-icons/dist/esm/icons/check-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 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';
+import RhUiWarningFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-warning-fill-icon';
 
 export const statusIcons = {
-  success: CheckCircleIcon,
-  error: ExclamationCircleIcon,
-  warning: ExclamationTriangleIcon
+  success: RhUiCheckCircleFillIcon,
+  error: RhUiErrorFillIcon,
+  warning: RhUiWarningFillIcon
 };
 
 export interface FormControlIconProps extends React.HTMLProps<HTMLDivElement> {