@patternfly/react-core 6.5.0-prerelease.4 → 6.5.0-prerelease.41

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

@@ -81,12 +81,24 @@ exports[`Tile renders with icon 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 448 512"
           width="1em"
         >
-          <path
-            d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 448 512"
+          >
+            <path
+              d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M29 15H17V3a1 1 0 0 0-2 0v12H3a1 1 0 0 0 0 2h12v12a1 1 0 0 0 2 0V17h12a1 1 0 0 0 0-2Z"
+            />
+          </svg>
         </svg>
       </div>
       <div
@@ -118,12 +130,24 @@ exports[`Tile renders with stacked icon 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 448 512"
           width="1em"
         >
-          <path
-            d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 448 512"
+          >
+            <path
+              d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M29 15H17V3a1 1 0 0 0-2 0v12H3a1 1 0 0 0 0 2h12v12a1 1 0 0 0 2 0V17h12a1 1 0 0 0 0-2Z"
+            />
+          </svg>
         </svg>
       </div>
       <div
@@ -155,12 +179,24 @@ exports[`Tile renders with stacked large icon 1`] = `
           fill="currentColor"
           height="1em"
           role="img"
-          viewBox="0 0 448 512"
           width="1em"
         >
-          <path
-            d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
-          />
+          <svg
+            class="pf-v6-icon-default"
+            viewBox="0 0 448 512"
+          >
+            <path
+              d="M416 208H272V64c0-17.67-14.33-32-32-32h-32c-17.67 0-32 14.33-32 32v144H32c-17.67 0-32 14.33-32 32v32c0 17.67 14.33 32 32 32h144v144c0 17.67 14.33 32 32 32h32c17.67 0 32-14.33 32-32V304h144c17.67 0 32-14.33 32-32v-32c0-17.67-14.33-32-32-32z"
+            />
+          </svg>
+          <svg
+            class="pf-v6-icon-rh-ui"
+            viewBox="0 0 32 32"
+          >
+            <path
+              d="M29 15H17V3a1 1 0 0 0-2 0v12H3a1 1 0 0 0 0 2h12v12a1 1 0 0 0 2 0V17h12a1 1 0 0 0 0-2Z"
+            />
+          </svg>
         </svg>
       </div>
       <div

package/src/deprecated/components/Tile/examples/Tile.md

@@ -15,8 +15,6 @@ import './Tile.css';
 
 ## Examples
 
-Keyboard interaction patterns and a11y is implemented in the Tile demos, located in the [Demo section](/components/tile/react-demos).
-
 ### Basic tile
 
 Basic tiles can appear in one of three states: a default state, selected state, and a disabled state. To change the state of a tile, use the properties `isSelected` and `isDisabled`.

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,12 +28,24 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
               fill="currentColor"
               height="1em"
               role="img"
-              viewBox="0 0 352 512"
               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"
-              />
+              <svg
+                class="pf-v6-icon-default"
+                viewBox="0 0 352 512"
+              >
+                <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"
+                />
+              </svg>
+              <svg
+                class="pf-v6-icon-rh-ui"
+                viewBox="0 0 32 32"
+              >
+                <path
+                  d="M28.707 27.293a.999.999 0 1 1-1.414 1.414L16 17.414 4.707 28.707a.997.997 0 0 1-1.414 0 .999.999 0 0 1 0-1.414L14.586 16 3.293 4.707a.999.999 0 1 1 1.414-1.414L16 14.586 27.293 3.293a.999.999 0 1 1 1.414 1.414L17.414 16l11.293 11.293Z"
+                />
+              </svg>
             </svg>
           </span>
         </button>
@@ -83,12 +95,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 +125,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 +139,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 +158,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,12 +183,24 @@ exports[`Wizard Expandable Nav Wizard should match snapshot 1`] = `
                         fill="currentColor"
                         height="1em"
                         role="img"
-                        viewBox="0 0 256 512"
                         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"
-                        />
+                        <svg
+                          class="pf-v6-icon-default"
+                          viewBox="0 0 256 512"
+                        >
+                          <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"
+                          />
+                        </svg>
+                        <svg
+                          class="pf-v6-icon-rh-ui"
+                          viewBox="0 0 32 32"
+                        >
+                          <path
+                            d="M11 30a.999.999 0 0 1-.707-1.707L22.586 16 10.293 3.707a.999.999 0 1 1 1.414-1.414l12.646 12.646a1.501 1.501 0 0 1 0 2.121L11.707 29.706a.997.997 0 0 1-.707.293Z"
+                          />
+                        </svg>
                       </svg>
                     </span>
                   </span>
@@ -180,7 +216,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 +234,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 +254,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 +272,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 +312,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 +330,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 +351,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 +385,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,12 +399,24 @@ exports[`Wizard Wizard should match snapshot 1`] = `
               fill="currentColor"
               height="1em"
               role="img"
-              viewBox="0 0 352 512"
               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"
-              />
+              <svg
+                class="pf-v6-icon-default"
+                viewBox="0 0 352 512"
+              >
+                <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"
+                />
+              </svg>
+              <svg
+                class="pf-v6-icon-rh-ui"
+                viewBox="0 0 32 32"
+              >
+                <path
+                  d="M28.707 27.293a.999.999 0 1 1-1.414 1.414L16 17.414 4.707 28.707a.997.997 0 0 1-1.414 0 .999.999 0 0 1 0-1.414L14.586 16 3.293 4.707a.999.999 0 1 1 1.414-1.414L16 14.586 27.293 3.293a.999.999 0 1 1 1.414 1.414L17.414 16l11.293 11.293Z"
+                />
+              </svg>
             </svg>
           </span>
         </button>
@@ -418,12 +466,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 +496,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 +510,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 +529,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 +551,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 +570,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 +591,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 +610,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 +651,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 +669,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 +690,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 +744,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 +773,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 +787,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 +827,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 +845,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 +866,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>