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

package/src/deprecated/components/Tile/examples/TileWithExtraContent.tsx

@@ -1,23 +1,23 @@
 import { Flex } from '@patternfly/react-core';
 import { Tile } from '@patternfly/react-core/deprecated';
-import BellIcon from '@patternfly/react-icons/dist/esm/icons/bell-icon';
+import RhUiNotificationFillIcon from '@patternfly/react-icons/dist/esm/icons/rh-ui-notification-fill-icon';
 
 export const TileWithExtraContent: React.FunctionComponent = () => (
   <div role="listbox" aria-label="Tiles with extra content">
     <Flex>
       <Flex flex={{ default: 'flex_1' }}>
-        <Tile title="Default" icon={<BellIcon />} isStacked isSelected={false}>
+        <Tile title="Default" icon={<RhUiNotificationFillIcon />} isStacked isSelected={false}>
           This is really really long subtext that goes on for so long that it has to wrap to the next line. This is
           really really long subtext that goes on for so long that it has to wrap to the next line.
         </Tile>
       </Flex>
       <Flex flex={{ default: 'flex_1' }}>
-        <Tile title="Selected" icon={<BellIcon />} isStacked isSelected>
+        <Tile title="Selected" icon={<RhUiNotificationFillIcon />} isStacked isSelected>
           This is really really long subtext that goes on for so long that it has to wrap to the next line.
         </Tile>
       </Flex>
       <Flex flex={{ default: 'flex_1' }}>
-        <Tile title="Disabled" icon={<BellIcon />} isStacked isDisabled isSelected={false}>
+        <Tile title="Disabled" icon={<RhUiNotificationFillIcon />} isStacked isDisabled isSelected={false}>
           Subtext goes here
         </Tile>
       </Flex>

package/src/deprecated/components/Wizard/WizardHeader.tsx

@@ -1,7 +1,7 @@
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
 import { css } from '@patternfly/react-styles';
 import { Button } from '../../../components/Button';
-import TimesIcon from '@patternfly/react-icons/dist/esm/icons/times-icon';
+import RhMicronsCloseIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-close-icon';
 
 export interface WizardHeaderProps {
   /** Callback function called when the X (Close) button is clicked */
@@ -35,7 +35,7 @@ export const WizardHeader: React.FunctionComponent<WizardHeaderProps> = ({
   <div className={css(styles.wizardHeader)}>
     {!hideClose && (
       <div className={css(styles.wizardClose)}>
-        <Button variant="plain" aria-label={closeButtonAriaLabel} onClick={onClose} icon={<TimesIcon />} />
+        <Button variant="plain" aria-label={closeButtonAriaLabel} onClick={onClose} icon={<RhMicronsCloseIcon />} />
       </div>
     )}
     <div className={css(styles.wizardTitle)}>

package/src/deprecated/components/Wizard/WizardNavItem.tsx

@@ -1,7 +1,7 @@
 import { useEffect, useState } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
-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 { useOUIAProps, OUIAProps } from '../../../helpers';
 
 export interface WizardNavItemProps extends OUIAProps {
@@ -95,7 +95,7 @@ export const WizardNavItem: React.FunctionComponent<WizardNavItemProps> = ({
               <span className="pf-v6-c-wizard__nav-link-text">{content}</span>
               <span className={css(styles.wizardNavLinkToggle)}>
                 <span className={css(styles.wizardNavLinkToggleIcon)}>
-                  <AngleRightIcon />
+                  <RhMicronsCaretDownIcon />
                 </span>
               </span>
             </>

package/src/deprecated/components/Wizard/WizardToggle.tsx

@@ -1,7 +1,7 @@
 import { Fragment } from 'react';
 import { css } from '@patternfly/react-styles';
 import styles from '@patternfly/react-styles/css/components/Wizard/wizard';
-import AngleRightIcon from '@patternfly/react-icons/dist/esm/icons/angle-right-icon';
+import RhMicronsCaretRightIcon from '@patternfly/react-icons/dist/esm/icons/rh-microns-caret-right-icon';
 import CaretDownIcon from '@patternfly/react-icons/dist/esm/icons/caret-down-icon';
 import { WizardStep } from './Wizard';
 import { WizardBody } from './WizardBody';
@@ -88,7 +88,11 @@ export const WizardToggle: React.FunctionComponent<WizardToggleProps> = ({
         <span className={css(styles.wizardToggleList)}>
           <span className={css(styles.wizardToggleListItem)}>
             <span className={css(styles.wizardToggleNum)}>{activeStepIndex}</span> {activeStepName}
-            {activeStepSubName && <AngleRightIcon className={css(styles.wizardToggleSeparator)} />}
+            {activeStepSubName && (
+              <span className={css(styles.wizardToggleSeparator)}>
+                <RhMicronsCaretRightIcon />
+              </span>
+            )}
           </span>
           {activeStepSubName && <span className={css(styles.wizardToggleListItem)}>{activeStepSubName}</span>}
         </span>

package/src/deprecated/components/Wizard/__tests__/Generated/__snapshots__/WizardFooterInternal.test.tsx.snap

@@ -16,7 +16,7 @@ exports[`WizardFooterInternal should match snapshot (auto-generated) 1`] = `
         >
           <button
             class="pf-v6-c-button pf-m-secondary"
-            data-ouia-component-id="OUIA-Generated-Button-secondary-1"
+            data-ouia-component-id="OUIA-Generated-Button-secondary-:r0:"
             data-ouia-component-type="PF6/Button"
             data-ouia-safe="true"
             disabled=""
@@ -36,7 +36,7 @@ exports[`WizardFooterInternal should match snapshot (auto-generated) 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="submit"
@@ -59,7 +59,7 @@ exports[`WizardFooterInternal should match snapshot (auto-generated) 1`] = `
         >
           <button
             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"
             type="button"

package/src/deprecated/components/Wizard/__tests__/Generated/__snapshots__/WizardNav.test.tsx.snap

@@ -6,7 +6,7 @@ exports[`WizardNav should match snapshot (auto-generated) 1`] = `
     aria-label="string"
     aria-labelledby="string"
     class="pf-v6-c-wizard__nav"
-    data-ouia-component-id="OUIA-Generated-WizardNav-1"
+    data-ouia-component-id="OUIA-Generated-WizardNav-:r0:"
     data-ouia-component-type="PF6/WizardNav"
     data-ouia-safe="true"
   >

package/src/deprecated/components/Wizard/__tests__/Generated/__snapshots__/WizardNavItem.test.tsx.snap

@@ -8,7 +8,7 @@ exports[`WizardNavItem should match snapshot (auto-generated) 1`] = `
     <button
       aria-current="false"
       class="pf-v6-c-wizard__nav-link"
-      data-ouia-component-id="OUIA-Generated-WizardNavItem-1"
+      data-ouia-component-id="OUIA-Generated-WizardNavItem-:r0:"
       data-ouia-component-type="PF6/WizardNavItem"
       data-ouia-safe="true"
       type="button"

package/src/deprecated/components/Wizard/__tests__/Generated/__snapshots__/WizardToggle.test.tsx.snap

@@ -28,12 +28,24 @@ exports[`WizardToggle should match snapshot (auto-generated) 1`] = `
         fill="currentColor"
         height="1em"
         role="img"
-        viewBox="0 0 320 512"
         width="1em"
       >
-        <path
-          d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-        />
+        <svg
+          class="pf-v6-icon-default"
+          viewBox="0 0 320 512"
+        >
+          <path
+            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+          />
+        </svg>
+        <svg
+          class="pf-v6-icon-rh-ui"
+          viewBox="0 0 32 32"
+        >
+          <path
+            d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
+          />
+        </svg>
       </svg>
     </span>
   </button>

package/src/deprecated/components/Wizard/__tests__/__snapshots__/Wizard.test.tsx.snap

@@ -14,7 +14,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
         <button
           aria-label="Close"
           class="pf-v6-c-button pf-m-plain"
-          data-ouia-component-id="OUIA-Generated-Button-plain-2"
+          data-ouia-component-id="OUIA-Generated-Button-plain-:rc:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -28,11 +28,11 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
               fill="currentColor"
               height="1em"
               role="img"
-              viewBox="0 0 352 512"
+              viewBox="0 0 20 20"
               width="1em"
             >
               <path
-                d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
               />
             </svg>
           </span>
@@ -83,12 +83,24 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 320 512"
           width="1em"
         >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 320 512"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
+            />
+          </svg>
         </svg>
       </span>
     </button>
@@ -101,7 +113,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
         <nav
           aria-labelledby="pf-wizard-title-1"
           class="pf-v6-c-wizard__nav"
-          data-ouia-component-id="OUIA-Generated-WizardNav-3"
+          data-ouia-component-id="OUIA-Generated-WizardNav-:rd:"
           data-ouia-component-type="PF6/WizardNav"
           data-ouia-safe="true"
         >
@@ -115,7 +127,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
               <button
                 aria-current="step"
                 class="pf-v6-c-wizard__nav-link pf-m-current"
-                data-ouia-component-id="OUIA-Generated-WizardNavItem-7"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-:re:"
                 data-ouia-component-type="PF6/WizardNavItem"
                 data-ouia-safe="true"
                 type="button"
@@ -134,7 +146,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                 aria-current="false"
                 aria-expanded="false"
                 class="pf-v6-c-wizard__nav-link"
-                data-ouia-component-id="OUIA-Generated-WizardNavItem-8"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-:rf:"
                 data-ouia-component-type="PF6/WizardNavItem"
                 data-ouia-safe="true"
                 type="button"
@@ -159,11 +171,11 @@ exports[`Wizard Expandable Nav Wizard should match 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>
@@ -180,7 +192,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                   <button
                     aria-current="false"
                     class="pf-v6-c-wizard__nav-link"
-                    data-ouia-component-id="OUIA-Generated-WizardNavItem-9"
+                    data-ouia-component-id="OUIA-Generated-WizardNavItem-:rh:"
                     data-ouia-component-type="PF6/WizardNavItem"
                     data-ouia-safe="true"
                     type="button"
@@ -198,7 +210,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                   <button
                     aria-current="false"
                     class="pf-v6-c-wizard__nav-link"
-                    data-ouia-component-id="OUIA-Generated-WizardNavItem-10"
+                    data-ouia-component-id="OUIA-Generated-WizardNavItem-:ri:"
                     data-ouia-component-type="PF6/WizardNavItem"
                     data-ouia-safe="true"
                     type="button"
@@ -218,7 +230,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
               <button
                 aria-current="false"
                 class="pf-v6-c-wizard__nav-link"
-                data-ouia-component-id="OUIA-Generated-WizardNavItem-11"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-:rj:"
                 data-ouia-component-type="PF6/WizardNavItem"
                 data-ouia-safe="true"
                 type="button"
@@ -236,7 +248,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
               <button
                 aria-current="false"
                 class="pf-v6-c-wizard__nav-link"
-                data-ouia-component-id="OUIA-Generated-WizardNavItem-12"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-:rk:"
                 data-ouia-component-type="PF6/WizardNavItem"
                 data-ouia-safe="true"
                 type="button"
@@ -276,7 +288,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
             >
               <button
                 class="pf-v6-c-button pf-m-secondary"
-                data-ouia-component-id="OUIA-Generated-Button-secondary-2"
+                data-ouia-component-id="OUIA-Generated-Button-secondary-:rl:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 disabled=""
@@ -294,7 +306,7 @@ exports[`Wizard Expandable Nav Wizard should match 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-:rm:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="submit"
@@ -315,7 +327,7 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
             >
               <button
                 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-:rn:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
@@ -349,7 +361,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
         <button
           aria-label="Close"
           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-:r0:"
           data-ouia-component-type="PF6/Button"
           data-ouia-safe="true"
           type="button"
@@ -363,11 +375,11 @@ exports[`Wizard Wizard should match snapshot 1`] = `
               fill="currentColor"
               height="1em"
               role="img"
-              viewBox="0 0 352 512"
+              viewBox="0 0 20 20"
               width="1em"
             >
               <path
-                d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+                d="M17.8 16.2 11.59 10l6.21-6.21c.42-.46.39-1.17-.07-1.59-.43-.4-1.09-.4-1.52 0l-6.2 6.2-6.22-6.19c-.44-.44-1.15-.44-1.59 0-.44.44-.44 1.15 0 1.59l6.2 6.21-6.2 6.2c-.42.46-.39 1.17.07 1.59.43.4 1.09.4 1.52 0L10 11.59l6.2 6.2c.44.44 1.15.44 1.59 0 .44-.45.44-1.16 0-1.6Z"
               />
             </svg>
           </span>
@@ -418,12 +430,24 @@ exports[`Wizard Wizard should match snapshot 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 320 512"
           width="1em"
         >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 320 512"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
+            />
+          </svg>
         </svg>
       </span>
     </button>
@@ -436,7 +460,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
         <nav
           aria-labelledby="pf-wizard-title-0"
           class="pf-v6-c-wizard__nav"
-          data-ouia-component-id="OUIA-Generated-WizardNav-1"
+          data-ouia-component-id="OUIA-Generated-WizardNav-:r1:"
           data-ouia-component-type="PF6/WizardNav"
           data-ouia-safe="true"
         >
@@ -450,7 +474,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
               <button
                 aria-current="step"
                 class="pf-v6-c-wizard__nav-link pf-m-current"
-                data-ouia-component-id="OUIA-Generated-WizardNavItem-1"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-:r2:"
                 data-ouia-component-type="PF6/WizardNavItem"
                 data-ouia-safe="true"
                 id="step-A"
@@ -469,7 +493,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
               <button
                 aria-current="false"
                 class="pf-v6-c-wizard__nav-link"
-                data-ouia-component-id="OUIA-Generated-WizardNavItem-2"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-:r3:"
                 data-ouia-component-type="PF6/WizardNavItem"
                 data-ouia-safe="true"
                 id="step-B"
@@ -491,7 +515,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
                   <button
                     aria-current="false"
                     class="pf-v6-c-wizard__nav-link"
-                    data-ouia-component-id="OUIA-Generated-WizardNavItem-3"
+                    data-ouia-component-id="OUIA-Generated-WizardNavItem-:r5:"
                     data-ouia-component-type="PF6/WizardNavItem"
                     data-ouia-safe="true"
                     id="step-B-1"
@@ -510,7 +534,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
                   <button
                     aria-current="false"
                     class="pf-v6-c-wizard__nav-link"
-                    data-ouia-component-id="OUIA-Generated-WizardNavItem-4"
+                    data-ouia-component-id="OUIA-Generated-WizardNavItem-:r6:"
                     data-ouia-component-type="PF6/WizardNavItem"
                     data-ouia-safe="true"
                     id="step-B-2"
@@ -531,7 +555,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
               <button
                 aria-current="false"
                 class="pf-v6-c-wizard__nav-link"
-                data-ouia-component-id="OUIA-Generated-WizardNavItem-5"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-:r7:"
                 data-ouia-component-type="PF6/WizardNavItem"
                 data-ouia-safe="true"
                 id="step-C"
@@ -550,7 +574,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
               <button
                 aria-current="false"
                 class="pf-v6-c-wizard__nav-link"
-                data-ouia-component-id="OUIA-Generated-WizardNavItem-6"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-:r8:"
                 data-ouia-component-type="PF6/WizardNavItem"
                 data-ouia-safe="true"
                 id="step-D"
@@ -591,7 +615,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
             >
               <button
                 class="pf-v6-c-button pf-m-secondary"
-                data-ouia-component-id="OUIA-Generated-Button-secondary-1"
+                data-ouia-component-id="OUIA-Generated-Button-secondary-:r9:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 disabled=""
@@ -609,7 +633,7 @@ exports[`Wizard Wizard should match 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-:ra:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="submit"
@@ -630,7 +654,7 @@ exports[`Wizard Wizard should match snapshot 1`] = `
             >
               <button
                 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-:rb:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"
@@ -684,12 +708,24 @@ exports[`Wizard bare wiz 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 320 512"
           width="1em"
         >
-          <path
-            d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 320 512"
+          >
+            <path
+              d="M31.3 192h257.3c17.8 0 26.7 21.5 14.1 34.1L174.1 354.8c-7.8 7.8-20.5 7.8-28.3 0L17.2 226.1C4.6 213.5 13.5 192 31.3 192z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M16 24.792c-.384 0-.769-.146-1.061-.438L2.293 11.707a.999.999 0 1 1 1.414-1.414L16 22.586l12.293-12.293a.999.999 0 1 1 1.414 1.414L17.061 24.353a1.497 1.497 0 0 1-1.061.438Z"
+            />
+          </svg>
         </svg>
       </span>
     </button>
@@ -701,7 +737,7 @@ exports[`Wizard bare wiz 1`] = `
       >
         <nav
           class="pf-v6-c-wizard__nav"
-          data-ouia-component-id="OUIA-Generated-WizardNav-5"
+          data-ouia-component-id="OUIA-Generated-WizardNav-:ro:"
           data-ouia-component-type="PF6/WizardNav"
           data-ouia-safe="true"
         >
@@ -715,7 +751,7 @@ exports[`Wizard bare wiz 1`] = `
               <button
                 aria-current="step"
                 class="pf-v6-c-wizard__nav-link pf-m-current"
-                data-ouia-component-id="OUIA-Generated-WizardNavItem-13"
+                data-ouia-component-id="OUIA-Generated-WizardNavItem-:rp:"
                 data-ouia-component-type="PF6/WizardNavItem"
                 data-ouia-safe="true"
                 type="button"
@@ -755,7 +791,7 @@ exports[`Wizard bare wiz 1`] = `
             >
               <button
                 class="pf-v6-c-button pf-m-secondary"
-                data-ouia-component-id="OUIA-Generated-Button-secondary-3"
+                data-ouia-component-id="OUIA-Generated-Button-secondary-:rq:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 disabled=""
@@ -773,7 +809,7 @@ exports[`Wizard bare wiz 1`] = `
             >
               <button
                 class="pf-v6-c-button pf-m-primary"
-                data-ouia-component-id="OUIA-Generated-Button-primary-3"
+                data-ouia-component-id="OUIA-Generated-Button-primary-:rr:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="submit"
@@ -794,7 +830,7 @@ exports[`Wizard bare wiz 1`] = `
             >
               <button
                 class="pf-v6-c-button pf-m-link"
-                data-ouia-component-id="OUIA-Generated-Button-link-3"
+                data-ouia-component-id="OUIA-Generated-Button-link-:rs:"
                 data-ouia-component-type="PF6/Button"
                 data-ouia-safe="true"
                 type="button"

package/src/helpers/GenerateId/GenerateId.ts

@@ -1,4 +1,6 @@
-/** This Component can be used to wrap a functional component in order to generate a random ID
+/** SSR-safe ID generation component using render props.
+ * For function components, prefer the useSSRSafeId hook instead.
+ *
  * Example of how to use this component
  *
  * const Component = ({id}: {id: string}) => (
@@ -10,41 +12,21 @@
  *  </GenerateId>
  *  );
  */
-import { Component } from 'react';
-import { getUniqueId } from '../util';
-
-let currentId = 0;
-
-// gives us a unique (enough) id to add to the generated id that it should prevent issues with duplicate ids
-function getRandomId() {
-  if (typeof crypto !== 'undefined' && crypto.randomUUID) {
-    return crypto.randomUUID();
-  } else {
-    return getUniqueId();
-  }
-}
+import { useSSRSafeId } from '../useSSRSafeId';
 
 export interface GenerateIdProps {
-  /** String to prefix the random id with */
+  /** String to prefix the id with */
   prefix?: string;
   /** Component to be rendered with the generated id */
   children(id: string): React.ReactNode;
-  /** Flag to add randomness to the generated id, should be used whenever possible */
+  /** @deprecated Has no effect. Kept for backward compatibility. */
   isRandom?: boolean;
 }
 
-class GenerateId extends Component<GenerateIdProps, {}> {
-  static displayName = 'GenerateId';
-  static defaultProps = {
-    prefix: 'pf-random-id-',
-    isRandom: false
-  };
-  uniqueElement = this.props.isRandom ? getRandomId() : currentId++;
-  id = `${this.props.prefix}${this.uniqueElement}`;
-
-  render() {
-    return this.props.children(this.id);
-  }
-}
+const GenerateId = ({ prefix = 'pf-random-id-', children }: GenerateIdProps) => {
+  const id = useSSRSafeId(prefix);
+  return children(id) as React.ReactElement;
+};
+GenerateId.displayName = 'GenerateId';
 
 export { GenerateId };

package/src/helpers/GenerateId/__tests__/__snapshots__/GenerateId.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`generates id 1`] = `
 <DocumentFragment>
   <div
-    id="pf-random-id-0"
+    id="pf-random-id-:r0:"
   >
     div with random ID
   </div>

package/src/helpers/OUIA/OUIA.md

@@ -1,6 +1,6 @@
 ---
 id: Open UI Automation
-section: developer-resources
+section: developer-guides
 ---
 import { Fragment } from 'react';
 
@@ -54,6 +54,7 @@ component.
 * [Card](/components/card)
 * [Checkbox](/components/forms/checkbox)
 * [Chip](/components/chip)
+* [Content](/components/content)
 * [Dropdown](/components/menus/dropdown)
 * [DropdownItem](/components/menus/dropdown)
 * [FormSelect](/components/forms/form-select)
@@ -68,7 +69,6 @@ component.
 * [Switch](/components/switch)
 * [TabContent](/components/tabs)
 * [Tabs](/components/tabs)
-* [Text](/components/text)
 * [TextInput](/components/forms/text-input)
 * [Title](/components/title)
 * [Toolbar](/components/toolbar)