@patternfly/react-core 5.0.0-alpha.90 → 5.0.0-alpha.92

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

@@ -4,24 +4,24 @@ exports[`should render accessible tabs 1`] = `
 <DocumentFragment>
   <nav
     aria-label="accessible Tabs example"
-    class="pf-c-tabs"
+    class="pf-v5-c-tabs"
     data-ouia-component-id="OUIA-Generated-Tabs-9"
     data-ouia-component-type="PF4/Tabs"
     data-ouia-safe="true"
     id="accessibleTabs"
   >
     <ul
-      class="pf-c-tabs__list"
+      class="pf-v5-c-tabs__list"
       role="tablist"
     >
       <li
-        class="pf-c-tabs__item pf-m-current"
+        class="pf-v5-c-tabs__item pf-m-current"
         role="presentation"
       >
         <a
           aria-controls="pf-tab-section-0-tab1"
           aria-selected="true"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           href="#/items/1"
@@ -29,20 +29,20 @@ exports[`should render accessible tabs 1`] = `
           role="tab"
         >
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             "Tab item 1"
           </span>
         </a>
       </li>
       <li
-        class="pf-c-tabs__item"
+        class="pf-v5-c-tabs__item"
         role="presentation"
       >
         <a
           aria-controls="pf-tab-section-1-tab2"
           aria-selected="false"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           href="#/items/2"
@@ -50,20 +50,20 @@ exports[`should render accessible tabs 1`] = `
           role="tab"
         >
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             "Tab item 2"
           </span>
         </a>
       </li>
       <li
-        class="pf-c-tabs__item"
+        class="pf-v5-c-tabs__item"
         role="presentation"
       >
         <a
           aria-controls="pf-tab-section-2-tab3"
           aria-selected="false"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           href="#/items/3"
@@ -71,7 +71,7 @@ exports[`should render accessible tabs 1`] = `
           role="tab"
         >
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             "Tab item 3"
           </span>
@@ -120,24 +120,24 @@ exports[`should render accessible tabs 1`] = `
 exports[`should render box tabs 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-tabs pf-m-box"
+    class="pf-v5-c-tabs pf-m-box"
     data-ouia-component-id="OUIA-Generated-Tabs-8"
     data-ouia-component-type="PF4/Tabs"
     data-ouia-safe="true"
     id="boxTabs"
   >
     <ul
-      class="pf-c-tabs__list"
+      class="pf-v5-c-tabs__list"
       role="tablist"
     >
       <li
-        class="pf-c-tabs__item pf-m-current"
+        class="pf-v5-c-tabs__item pf-m-current"
         role="presentation"
       >
         <button
           aria-controls="pf-tab-section-0-tab1"
           aria-selected="true"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-0-tab1"
@@ -145,20 +145,20 @@ exports[`should render box tabs 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             "Tab item 1"
           </span>
         </button>
       </li>
       <li
-        class="pf-c-tabs__item"
+        class="pf-v5-c-tabs__item"
         role="presentation"
       >
         <button
           aria-controls="pf-tab-section-1-tab2"
           aria-selected="false"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-1-tab2"
@@ -166,20 +166,20 @@ exports[`should render box tabs 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             "Tab item 2"
           </span>
         </button>
       </li>
       <li
-        class="pf-c-tabs__item"
+        class="pf-v5-c-tabs__item"
         role="presentation"
       >
         <button
           aria-controls="pf-tab-section-2-tab3"
           aria-selected="false"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-2-tab3"
@@ -187,20 +187,20 @@ exports[`should render box tabs 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             "Tab item 3"
           </span>
         </button>
       </li>
       <li
-        class="pf-c-tabs__item"
+        class="pf-v5-c-tabs__item"
         role="presentation"
       >
         <button
           aria-controls="pf-tab-section-3-tab4"
           aria-selected="false"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-3-tab4"
@@ -208,7 +208,7 @@ exports[`should render box tabs 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-icon"
+            class="pf-v5-c-tabs__item-icon"
           >
             <i>
               4
@@ -216,7 +216,7 @@ exports[`should render box tabs 1`] = `
           </span>
            
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             Users
           </span>
@@ -278,24 +278,24 @@ exports[`should render box tabs 1`] = `
 exports[`should render box tabs of light variant 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-tabs pf-m-box pf-m-color-scheme--light-300"
+    class="pf-v5-c-tabs pf-m-box pf-m-color-scheme--light-300"
     data-ouia-component-id="OUIA-Generated-Tabs-15"
     data-ouia-component-type="PF4/Tabs"
     data-ouia-safe="true"
     id="boxLightVariantTabs"
   >
     <ul
-      class="pf-c-tabs__list"
+      class="pf-v5-c-tabs__list"
       role="tablist"
     >
       <li
-        class="pf-c-tabs__item pf-m-current"
+        class="pf-v5-c-tabs__item pf-m-current"
         role="presentation"
       >
         <button
           aria-controls="pf-tab-section-0-tab1"
           aria-selected="true"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-0-tab1"
@@ -303,20 +303,20 @@ exports[`should render box tabs of light variant 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             "Tab item 1"
           </span>
         </button>
       </li>
       <li
-        class="pf-c-tabs__item"
+        class="pf-v5-c-tabs__item"
         role="presentation"
       >
         <button
           aria-controls="pf-tab-section-1-tab2"
           aria-selected="false"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-1-tab2"
@@ -324,20 +324,20 @@ exports[`should render box tabs of light variant 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             "Tab item 2"
           </span>
         </button>
       </li>
       <li
-        class="pf-c-tabs__item"
+        class="pf-v5-c-tabs__item"
         role="presentation"
       >
         <button
           aria-controls="pf-tab-section-2-tab3"
           aria-selected="false"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-2-tab3"
@@ -345,7 +345,7 @@ exports[`should render box tabs of light variant 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             "Tab item 3"
           </span>
@@ -394,22 +394,22 @@ exports[`should render box tabs of light variant 1`] = `
 exports[`should render expandable vertical tabs 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-tabs pf-m-vertical pf-m-expandable"
+    class="pf-v5-c-tabs pf-m-vertical pf-m-expandable"
     data-ouia-component-id="OUIA-Generated-Tabs-6"
     data-ouia-component-type="PF4/Tabs"
     data-ouia-safe="true"
     id="verticalTabs"
   >
     <div
-      class="pf-c-tabs__toggle"
+      class="pf-v5-c-tabs__toggle"
     >
       <div
-        class="pf-c-tabs__toggle-button"
+        class="pf-v5-c-tabs__toggle-button"
       >
         <button
           aria-disabled="false"
           aria-labelledby="pf-random-id-0-text pf-random-id-0-button"
-          class="pf-c-button pf-m-plain"
+          class="pf-v5-c-button pf-m-plain"
           data-ouia-component-id="OUIA-Generated-Button-plain-3"
           data-ouia-component-type="PF4/Button"
           data-ouia-safe="true"
@@ -417,12 +417,12 @@ exports[`should render expandable vertical tabs 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__toggle-icon"
+            class="pf-v5-c-tabs__toggle-icon"
           >
             <svg
               aria-hidden="true"
               arian-hidden="true"
-              class="pf-svg"
+              class="pf-v5-svg"
               fill="currentColor"
               role="img"
               viewBox="0 0 256 512"
@@ -442,17 +442,17 @@ exports[`should render expandable vertical tabs 1`] = `
       </div>
     </div>
     <ul
-      class="pf-c-tabs__list"
+      class="pf-v5-c-tabs__list"
       role="tablist"
     >
       <li
-        class="pf-c-tabs__item pf-m-current"
+        class="pf-v5-c-tabs__item pf-m-current"
         role="presentation"
       >
         <button
           aria-controls="pf-tab-section-0-tab1"
           aria-selected="true"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-0-tab1"
@@ -460,20 +460,20 @@ exports[`should render expandable vertical tabs 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             "Tab item 1"
           </span>
         </button>
       </li>
       <li
-        class="pf-c-tabs__item"
+        class="pf-v5-c-tabs__item"
         role="presentation"
       >
         <button
           aria-controls="pf-tab-section-1-tab2"
           aria-selected="false"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-1-tab2"
@@ -481,20 +481,20 @@ exports[`should render expandable vertical tabs 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             "Tab item 2"
           </span>
         </button>
       </li>
       <li
-        class="pf-c-tabs__item"
+        class="pf-v5-c-tabs__item"
         role="presentation"
       >
         <button
           aria-controls="pf-tab-section-2-tab3"
           aria-selected="false"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-2-tab3"
@@ -502,20 +502,20 @@ exports[`should render expandable vertical tabs 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             "Tab item 3"
           </span>
         </button>
       </li>
       <li
-        class="pf-c-tabs__item"
+        class="pf-v5-c-tabs__item"
         role="presentation"
       >
         <button
           aria-controls="pf-tab-section-3-tab4"
           aria-selected="false"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-3-tab4"
@@ -523,7 +523,7 @@ exports[`should render expandable vertical tabs 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-icon"
+            class="pf-v5-c-tabs__item-icon"
           >
             <i>
               4
@@ -531,7 +531,7 @@ exports[`should render expandable vertical tabs 1`] = `
           </span>
            
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             Users
           </span>
@@ -593,24 +593,24 @@ exports[`should render expandable vertical tabs 1`] = `
 exports[`should render filled tabs 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-tabs pf-m-fill"
+    class="pf-v5-c-tabs pf-m-fill"
     data-ouia-component-id="OUIA-Generated-Tabs-10"
     data-ouia-component-type="PF4/Tabs"
     data-ouia-safe="true"
     id="filledTabs"
   >
     <ul
-      class="pf-c-tabs__list"
+      class="pf-v5-c-tabs__list"
       role="tablist"
     >
       <li
-        class="pf-c-tabs__item pf-m-current"
+        class="pf-v5-c-tabs__item pf-m-current"
         role="presentation"
       >
         <button
           aria-controls="pf-tab-section-0-tab1"
           aria-selected="true"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-0-tab1"
@@ -618,20 +618,20 @@ exports[`should render filled tabs 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             "Tab item 1"
           </span>
         </button>
       </li>
       <li
-        class="pf-c-tabs__item"
+        class="pf-v5-c-tabs__item"
         role="presentation"
       >
         <button
           aria-controls="pf-tab-section-1-tab2"
           aria-selected="false"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-1-tab2"
@@ -639,20 +639,20 @@ exports[`should render filled tabs 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             "Tab item 2"
           </span>
         </button>
       </li>
       <li
-        class="pf-c-tabs__item"
+        class="pf-v5-c-tabs__item"
         role="presentation"
       >
         <button
           aria-controls="pf-tab-section-2-tab3"
           aria-selected="false"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-2-tab3"
@@ -660,7 +660,7 @@ exports[`should render filled tabs 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             "Tab item 3"
           </span>
@@ -709,24 +709,24 @@ exports[`should render filled tabs 1`] = `
 exports[`should render secondary tabs 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-tabs"
+    class="pf-v5-c-tabs"
     data-ouia-component-id="OUIA-Generated-Tabs-11"
     data-ouia-component-type="PF4/Tabs"
     data-ouia-safe="true"
     id="primarieTabs"
   >
     <ul
-      class="pf-c-tabs__list"
+      class="pf-v5-c-tabs__list"
       role="tablist"
     >
       <li
-        class="pf-c-tabs__item pf-m-current"
+        class="pf-v5-c-tabs__item pf-m-current"
         role="presentation"
       >
         <button
           aria-controls="pf-tab-section-0-primarieTabs"
           aria-selected="true"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-0-primarieTabs"
@@ -734,20 +734,20 @@ exports[`should render secondary tabs 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             "Tab item 1"
           </span>
         </button>
       </li>
       <li
-        class="pf-c-tabs__item"
+        class="pf-v5-c-tabs__item"
         role="presentation"
       >
         <button
           aria-controls="pf-tab-section-1-tab2"
           aria-selected="false"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-1-tab2"
@@ -755,20 +755,20 @@ exports[`should render secondary tabs 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             "Tab item 2"
           </span>
         </button>
       </li>
       <li
-        class="pf-c-tabs__item"
+        class="pf-v5-c-tabs__item"
         role="presentation"
       >
         <button
           aria-controls="pf-tab-section-2-tab3"
           aria-selected="false"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-2-tab3"
@@ -776,7 +776,7 @@ exports[`should render secondary tabs 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             "Tab item 3"
           </span>
@@ -794,24 +794,24 @@ exports[`should render secondary tabs 1`] = `
     tabindex="0"
   >
     <div
-      class="pf-c-tabs pf-m-secondary"
+      class="pf-v5-c-tabs pf-m-secondary"
       data-ouia-component-id="OUIA-Generated-Tabs-12"
       data-ouia-component-type="PF4/Tabs"
       data-ouia-safe="true"
       id="secondaryTabs"
     >
       <ul
-        class="pf-c-tabs__list"
+        class="pf-v5-c-tabs__list"
         role="tablist"
       >
         <li
-          class="pf-c-tabs__item"
+          class="pf-v5-c-tabs__item"
           role="presentation"
         >
           <button
             aria-controls="pf-tab-section-10-secondary tab1"
             aria-selected="false"
-            class="pf-c-tabs__link"
+            class="pf-v5-c-tabs__link"
             data-ouia-component-type="PF4/TabButton"
             data-ouia-safe="true"
             id="pf-tab-10-secondary tab1"
@@ -819,20 +819,20 @@ exports[`should render secondary tabs 1`] = `
             type="button"
           >
             <span
-              class="pf-c-tabs__item-text"
+              class="pf-v5-c-tabs__item-text"
             >
               "Secondary Tab item 1"
             </span>
           </button>
         </li>
         <li
-          class="pf-c-tabs__item"
+          class="pf-v5-c-tabs__item"
           role="presentation"
         >
           <button
             aria-controls="pf-tab-section-11-secondary tab2"
             aria-selected="false"
-            class="pf-c-tabs__link"
+            class="pf-v5-c-tabs__link"
             data-ouia-component-type="PF4/TabButton"
             data-ouia-safe="true"
             id="pf-tab-11-secondary tab2"
@@ -840,20 +840,20 @@ exports[`should render secondary tabs 1`] = `
             type="button"
           >
             <span
-              class="pf-c-tabs__item-text"
+              class="pf-v5-c-tabs__item-text"
             >
               "Secondary Tab item 2"
             </span>
           </button>
         </li>
         <li
-          class="pf-c-tabs__item"
+          class="pf-v5-c-tabs__item"
           role="presentation"
         >
           <button
             aria-controls="pf-tab-section-12-secondary tab3"
             aria-selected="false"
-            class="pf-c-tabs__link"
+            class="pf-v5-c-tabs__link"
             data-ouia-component-type="PF4/TabButton"
             data-ouia-safe="true"
             id="pf-tab-12-secondary tab3"
@@ -861,7 +861,7 @@ exports[`should render secondary tabs 1`] = `
             type="button"
           >
             <span
-              class="pf-c-tabs__item-text"
+              class="pf-v5-c-tabs__item-text"
             >
               "Secondary Tab item 3"
             </span>
@@ -936,24 +936,24 @@ exports[`should render secondary tabs 1`] = `
 exports[`should render simple tabs 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-tabs"
+    class="pf-v5-c-tabs"
     data-ouia-component-id="OUIA-Generated-Tabs-1"
     data-ouia-component-type="PF4/Tabs"
     data-ouia-safe="true"
     id="simpleTabs"
   >
     <ul
-      class="pf-c-tabs__list"
+      class="pf-v5-c-tabs__list"
       role="tablist"
     >
       <li
-        class="pf-c-tabs__item pf-m-current"
+        class="pf-v5-c-tabs__item pf-m-current"
         role="presentation"
       >
         <button
           aria-controls="pf-tab-section-0-tab1"
           aria-selected="true"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-0-tab1"
@@ -961,20 +961,20 @@ exports[`should render simple tabs 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             "Tab item 1"
           </span>
         </button>
       </li>
       <li
-        class="pf-c-tabs__item"
+        class="pf-v5-c-tabs__item"
         role="presentation"
       >
         <button
           aria-controls="pf-tab-section-1-tab2"
           aria-selected="false"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-1-tab2"
@@ -982,20 +982,20 @@ exports[`should render simple tabs 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             "Tab item 2"
           </span>
         </button>
       </li>
       <li
-        class="pf-c-tabs__item"
+        class="pf-v5-c-tabs__item"
         role="presentation"
       >
         <button
           aria-controls="pf-tab-section-2-tab3"
           aria-selected="false"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-2-tab3"
@@ -1003,20 +1003,20 @@ exports[`should render simple tabs 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             "Tab item 3"
           </span>
         </button>
       </li>
       <li
-        class="pf-c-tabs__item"
+        class="pf-v5-c-tabs__item"
         role="presentation"
       >
         <button
           aria-controls="pf-tab-section-3-tab4"
           aria-selected="false"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-3-tab4"
@@ -1024,7 +1024,7 @@ exports[`should render simple tabs 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-icon"
+            class="pf-v5-c-tabs__item-icon"
           >
             <i>
               4
@@ -1032,7 +1032,7 @@ exports[`should render simple tabs 1`] = `
           </span>
            
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             Users
           </span>
@@ -1094,24 +1094,24 @@ exports[`should render simple tabs 1`] = `
 exports[`should render tabs with eventKey Strings 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-tabs"
+    class="pf-v5-c-tabs"
     data-ouia-component-id="OUIA-Generated-Tabs-13"
     data-ouia-component-type="PF4/Tabs"
     data-ouia-safe="true"
     id="eventKeyTabs"
   >
     <ul
-      class="pf-c-tabs__list"
+      class="pf-v5-c-tabs__list"
       role="tablist"
     >
       <li
-        class="pf-c-tabs__item"
+        class="pf-v5-c-tabs__item"
         role="presentation"
       >
         <button
           aria-controls="pf-tab-section-one-tab1"
           aria-selected="false"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-one-tab1"
@@ -1119,20 +1119,20 @@ exports[`should render tabs with eventKey Strings 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             "Secondary Tab item 1"
           </span>
         </button>
       </li>
       <li
-        class="pf-c-tabs__item"
+        class="pf-v5-c-tabs__item"
         role="presentation"
       >
         <button
           aria-controls="pf-tab-section-two-tab2"
           aria-selected="false"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-two-tab2"
@@ -1140,20 +1140,20 @@ exports[`should render tabs with eventKey Strings 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             "Secondary Tab item 2"
           </span>
         </button>
       </li>
       <li
-        class="pf-c-tabs__item"
+        class="pf-v5-c-tabs__item"
         role="presentation"
       >
         <button
           aria-controls="pf-tab-section-three-tab3"
           aria-selected="false"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-three-tab3"
@@ -1161,7 +1161,7 @@ exports[`should render tabs with eventKey Strings 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             "Secondary Tab item 3"
           </span>
@@ -1211,24 +1211,24 @@ exports[`should render tabs with eventKey Strings 1`] = `
 exports[`should render tabs with no bottom border 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-tabs pf-m-no-border-bottom"
+    class="pf-v5-c-tabs pf-m-no-border-bottom"
     data-ouia-component-id="OUIA-Generated-Tabs-16"
     data-ouia-component-type="PF4/Tabs"
     data-ouia-safe="true"
     id="noBottomBorderTabs"
   >
     <ul
-      class="pf-c-tabs__list"
+      class="pf-v5-c-tabs__list"
       role="tablist"
     >
       <li
-        class="pf-c-tabs__item pf-m-current"
+        class="pf-v5-c-tabs__item pf-m-current"
         role="presentation"
       >
         <button
           aria-controls="pf-tab-section-0-tab1"
           aria-selected="true"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-0-tab1"
@@ -1236,20 +1236,20 @@ exports[`should render tabs with no bottom border 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             "Tab item 1"
           </span>
         </button>
       </li>
       <li
-        class="pf-c-tabs__item"
+        class="pf-v5-c-tabs__item"
         role="presentation"
       >
         <button
           aria-controls="pf-tab-section-1-tab2"
           aria-selected="false"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-1-tab2"
@@ -1257,20 +1257,20 @@ exports[`should render tabs with no bottom border 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             "Tab item 2"
           </span>
         </button>
       </li>
       <li
-        class="pf-c-tabs__item"
+        class="pf-v5-c-tabs__item"
         role="presentation"
       >
         <button
           aria-controls="pf-tab-section-2-tab3"
           aria-selected="false"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-2-tab3"
@@ -1278,7 +1278,7 @@ exports[`should render tabs with no bottom border 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             "Tab item 3"
           </span>
@@ -1327,24 +1327,24 @@ exports[`should render tabs with no bottom border 1`] = `
 exports[`should render tabs with separate content 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-tabs"
+    class="pf-v5-c-tabs"
     data-ouia-component-id="OUIA-Generated-Tabs-14"
     data-ouia-component-type="PF4/Tabs"
     data-ouia-safe="true"
     id="separateTabs"
   >
     <ul
-      class="pf-c-tabs__list"
+      class="pf-v5-c-tabs__list"
       role="tablist"
     >
       <li
-        class="pf-c-tabs__item pf-m-current"
+        class="pf-v5-c-tabs__item pf-m-current"
         role="presentation"
       >
         <button
           aria-controls="refTab1Section"
           aria-selected="true"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-0-separateTabs"
@@ -1352,20 +1352,20 @@ exports[`should render tabs with separate content 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             Tab item 1
           </span>
         </button>
       </li>
       <li
-        class="pf-c-tabs__item"
+        class="pf-v5-c-tabs__item"
         role="presentation"
       >
         <button
           aria-controls="refTab2Section"
           aria-selected="false"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-1-separateTabs"
@@ -1373,20 +1373,20 @@ exports[`should render tabs with separate content 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             Tab item 2
           </span>
         </button>
       </li>
       <li
-        class="pf-c-tabs__item"
+        class="pf-v5-c-tabs__item"
         role="presentation"
       >
         <button
           aria-controls="refTab3Section"
           aria-selected="false"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-2-separateTabs"
@@ -1394,7 +1394,7 @@ exports[`should render tabs with separate content 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             Tab item 3
           </span>
@@ -1425,7 +1425,7 @@ exports[`should render tabs with separate content 1`] = `
       tabindex="0"
     >
       <div
-        class="pf-c-tab-content__body"
+        class="pf-v5-c-tab-content__body"
       >
         Tab 2 section
       </div>
@@ -1441,7 +1441,7 @@ exports[`should render tabs with separate content 1`] = `
       tabindex="0"
     >
       <div
-        class="pf-c-tab-content__body pf-m-padding"
+        class="pf-v5-c-tab-content__body pf-m-padding"
       >
         Tab 3 section with padding 
       </div>
@@ -1453,23 +1453,23 @@ exports[`should render tabs with separate content 1`] = `
 exports[`should render uncontrolled tabs 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-tabs"
+    class="pf-v5-c-tabs"
     data-ouia-component-id="OUIA-Generated-Tabs-4"
     data-ouia-component-type="PF4/Tabs"
     data-ouia-safe="true"
   >
     <ul
-      class="pf-c-tabs__list"
+      class="pf-v5-c-tabs__list"
       role="tablist"
     >
       <li
-        class="pf-c-tabs__item pf-m-current"
+        class="pf-v5-c-tabs__item pf-m-current"
         role="presentation"
       >
         <button
           aria-controls="pf-tab-section-0-tab1"
           aria-selected="true"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-0-tab1"
@@ -1477,20 +1477,20 @@ exports[`should render uncontrolled tabs 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             "Tab item 1"
           </span>
         </button>
       </li>
       <li
-        class="pf-c-tabs__item"
+        class="pf-v5-c-tabs__item"
         role="presentation"
       >
         <button
           aria-controls="pf-tab-section-1-tab2"
           aria-selected="false"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-1-tab2"
@@ -1498,20 +1498,20 @@ exports[`should render uncontrolled tabs 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             "Tab item 2"
           </span>
         </button>
       </li>
       <li
-        class="pf-c-tabs__item"
+        class="pf-v5-c-tabs__item"
         role="presentation"
       >
         <button
           aria-controls="pf-tab-section-2-tab3"
           aria-selected="false"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-2-tab3"
@@ -1519,20 +1519,20 @@ exports[`should render uncontrolled tabs 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             "Tab item 3"
           </span>
         </button>
       </li>
       <li
-        class="pf-c-tabs__item"
+        class="pf-v5-c-tabs__item"
         role="presentation"
       >
         <button
           aria-controls="pf-tab-section-3-tab4"
           aria-selected="false"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-3-tab4"
@@ -1540,7 +1540,7 @@ exports[`should render uncontrolled tabs 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-icon"
+            class="pf-v5-c-tabs__item-icon"
           >
             <i>
               4
@@ -1548,7 +1548,7 @@ exports[`should render uncontrolled tabs 1`] = `
           </span>
            
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             Users
           </span>
@@ -1610,24 +1610,24 @@ exports[`should render uncontrolled tabs 1`] = `
 exports[`should render vertical tabs 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-tabs pf-m-vertical"
+    class="pf-v5-c-tabs pf-m-vertical"
     data-ouia-component-id="OUIA-Generated-Tabs-5"
     data-ouia-component-type="PF4/Tabs"
     data-ouia-safe="true"
     id="verticalTabs"
   >
     <ul
-      class="pf-c-tabs__list"
+      class="pf-v5-c-tabs__list"
       role="tablist"
     >
       <li
-        class="pf-c-tabs__item pf-m-current"
+        class="pf-v5-c-tabs__item pf-m-current"
         role="presentation"
       >
         <button
           aria-controls="pf-tab-section-0-tab1"
           aria-selected="true"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-0-tab1"
@@ -1635,20 +1635,20 @@ exports[`should render vertical tabs 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             "Tab item 1"
           </span>
         </button>
       </li>
       <li
-        class="pf-c-tabs__item"
+        class="pf-v5-c-tabs__item"
         role="presentation"
       >
         <button
           aria-controls="pf-tab-section-1-tab2"
           aria-selected="false"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-1-tab2"
@@ -1656,20 +1656,20 @@ exports[`should render vertical tabs 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             "Tab item 2"
           </span>
         </button>
       </li>
       <li
-        class="pf-c-tabs__item"
+        class="pf-v5-c-tabs__item"
         role="presentation"
       >
         <button
           aria-controls="pf-tab-section-2-tab3"
           aria-selected="false"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-2-tab3"
@@ -1677,20 +1677,20 @@ exports[`should render vertical tabs 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             "Tab item 3"
           </span>
         </button>
       </li>
       <li
-        class="pf-c-tabs__item"
+        class="pf-v5-c-tabs__item"
         role="presentation"
       >
         <button
           aria-controls="pf-tab-section-3-tab4"
           aria-selected="false"
-          class="pf-c-tabs__link"
+          class="pf-v5-c-tabs__link"
           data-ouia-component-type="PF4/TabButton"
           data-ouia-safe="true"
           id="pf-tab-3-tab4"
@@ -1698,7 +1698,7 @@ exports[`should render vertical tabs 1`] = `
           type="button"
         >
           <span
-            class="pf-c-tabs__item-icon"
+            class="pf-v5-c-tabs__item-icon"
           >
             <i>
               4
@@ -1706,7 +1706,7 @@ exports[`should render vertical tabs 1`] = `
           </span>
            
           <span
-            class="pf-c-tabs__item-text"
+            class="pf-v5-c-tabs__item-text"
           >
             Users
           </span>