@patternfly/react-core 5.0.0-alpha.99 → 5.0.0-prerelease.2

package/src/components/Slider/_tests_/__snapshots__/Slider.test.tsx.snap

@@ -56,16 +56,19 @@ exports[`slider renders continuous slider 1`] = `
     <div
       class="pf-v5-c-slider__value"
     >
-      <input
-        aria-invalid="false"
-        aria-label="Slider value input"
-        class="pf-v5-c-form-control pf-v5-c-form-control"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-1"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        type="number"
-        value="50"
-      />
+      <div
+        class="pf-v5-c-form-control"
+      >
+        <input
+          aria-invalid="false"
+          aria-label="Slider value input"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-1"
+          data-ouia-component-type="PF4/TextInput"
+          data-ouia-safe="true"
+          type="number"
+          value="50"
+        />
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -247,16 +250,19 @@ exports[`slider renders discrete slider 1`] = `
     <div
       class="pf-v5-c-slider__value"
     >
-      <input
-        aria-invalid="false"
-        aria-label="Slider value input"
-        class="pf-v5-c-form-control pf-v5-c-form-control"
-        data-ouia-component-id="OUIA-Generated-TextInputBase-2"
-        data-ouia-component-type="PF4/TextInput"
-        data-ouia-safe="true"
-        type="number"
-        value="50"
-      />
+      <div
+        class="pf-v5-c-form-control"
+      >
+        <input
+          aria-invalid="false"
+          aria-label="Slider value input"
+          data-ouia-component-id="OUIA-Generated-TextInputBase-2"
+          data-ouia-component-type="PF4/TextInput"
+          data-ouia-safe="true"
+          type="number"
+          value="50"
+        />
+      </div>
     </div>
   </div>
 </DocumentFragment>
@@ -413,21 +419,32 @@ exports[`slider renders slider with input 1`] = `
       <div
         class="pf-v5-c-input-group"
       >
-        <input
-          aria-invalid="false"
-          aria-label="Slider value input"
-          class="pf-v5-c-form-control pf-v5-c-form-control"
-          data-ouia-component-id="OUIA-Generated-TextInputBase-3"
-          data-ouia-component-type="PF4/TextInput"
-          data-ouia-safe="true"
-          type="number"
-          value="50"
-        />
-        <span
-          class="pf-v5-c-input-group__text"
+        <div
+          class="pf-v5-c-input-group__item pf-m-fill"
         >
-           %
-        </span>
+          <div
+            class="pf-v5-c-form-control"
+          >
+            <input
+              aria-invalid="false"
+              aria-label="Slider value input"
+              data-ouia-component-id="OUIA-Generated-TextInputBase-3"
+              data-ouia-component-type="PF4/TextInput"
+              data-ouia-safe="true"
+              type="number"
+              value="50"
+            />
+          </div>
+        </div>
+        <div
+          class="pf-v5-c-input-group__item pf-m-box"
+        >
+          <span
+            class="pf-v5-c-input-group__text"
+          >
+            %
+          </span>
+        </div>
       </div>
     </div>
   </div>
@@ -481,21 +498,32 @@ exports[`slider renders slider with input above thumb 1`] = `
         <div
           class="pf-v5-c-input-group"
         >
-          <input
-            aria-invalid="false"
-            aria-label="Slider value input"
-            class="pf-v5-c-form-control pf-v5-c-form-control"
-            data-ouia-component-id="OUIA-Generated-TextInputBase-4"
-            data-ouia-component-type="PF4/TextInput"
-            data-ouia-safe="true"
-            type="number"
-            value="50"
-          />
-          <span
-            class="pf-v5-c-input-group__text"
+          <div
+            class="pf-v5-c-input-group__item pf-m-fill"
           >
-             %
-          </span>
+            <div
+              class="pf-v5-c-form-control"
+            >
+              <input
+                aria-invalid="false"
+                aria-label="Slider value input"
+                data-ouia-component-id="OUIA-Generated-TextInputBase-4"
+                data-ouia-component-type="PF4/TextInput"
+                data-ouia-safe="true"
+                type="number"
+                value="50"
+              />
+            </div>
+          </div>
+          <div
+            class="pf-v5-c-input-group__item pf-m-box"
+          >
+            <span
+              class="pf-v5-c-input-group__text"
+            >
+              %
+            </span>
+          </div>
         </div>
       </div>
       <div

package/src/components/Slider/examples/Slider.md

@@ -1,7 +1,7 @@
 ---
 id: Slider
 section: components
-cssPrefix: pf-c-slider
+cssPrefix: pf-v5-c-slider
 propComponents: ['Slider', 'SliderStepObject']
 ---
 

package/src/components/Spinner/examples/Spinner.md

@@ -1,7 +1,7 @@
 ---
 id: Spinner
 section: components
-cssPrefix: pf-c-spinner
+cssPrefix: pf-v5-c-spinner
 propComponents: ['Spinner']
 ---
 

package/src/components/Switch/examples/Switch.md

@@ -1,7 +1,7 @@
 ---
 id: Switch
 section: components
-cssPrefix: pf-c-switch
+cssPrefix: pf-v5-c-switch
 propComponents: ['Switch']
 ouia: true
 ---

package/src/components/Tabs/Tab.tsx

@@ -37,11 +37,11 @@ export interface TabProps
   innerRef?: React.Ref<any>;
   /** Optional Tooltip rendered to a Tab. Should be <Tooltip> with appropriate props for proper rendering. */
   tooltip?: React.ReactElement<any>;
-  /** @beta Aria-label for the close button added by passing the onClose property to Tabs. */
+  /** Aria-label for the close button added by passing the onClose property to Tabs. */
   closeButtonAriaLabel?: string;
-  /** @beta Flag indicating the close button should be disabled */
+  /** Flag indicating the close button should be disabled */
   isCloseDisabled?: boolean;
-  /** @beta Actions rendered beside the tab content */
+  /** Actions rendered beside the tab content */
   actions?: React.ReactNode;
   /** Value to set the data-ouia-component-id for the tab button.*/
   ouiaId?: number | string;

package/src/components/Tabs/TabContent.tsx

@@ -62,8 +62,8 @@ const TabContentBase: React.FunctionComponent<TabContentProps> = ({
             hidden={children ? null : child.props.eventKey !== activeKey}
             className={
               children
-                ? css('pf-c-tab-content', className, variantStyle[variant])
-                : css('pf-c-tab-content', child.props.className, variantStyle[variant])
+                ? css(styles.tabContent, className, variantStyle[variant])
+                : css(styles.tabContent, child.props.className, variantStyle[variant])
             }
             id={children ? id : `pf-tab-section-${child.props.eventKey}-${id}`}
             aria-label={ariaLabel}

package/src/components/Tabs/Tabs.tsx

@@ -105,7 +105,7 @@ export interface TabsProps extends Omit<React.HTMLProps<HTMLElement | HTMLDivEle
   toggleAriaLabel?: string;
   /** Callback function to toggle the expandable tabs. */
   onToggle?: (event: React.MouseEvent, isExpanded: boolean) => void;
-  /** @beta Flag which places overflowing tabs into a menu triggered by the last tab. Additionally an object can be passed with custom settings for the overflow tab. */
+  /** Flag which places overflowing tabs into a menu triggered by the last tab. Additionally an object can be passed with custom settings for the overflow tab. */
   isOverflowHorizontal?: boolean | HorizontalOverflowObject;
   /** Value to overwrite the randomly generated data-ouia-component-id.*/
   ouiaId?: number | string;
@@ -483,7 +483,7 @@ export class Tabs extends React.Component<TabsProps, TabsState> {
                         <AngleRightIcon arian-hidden="true" />
                       </span>
                       {toggleText && (
-                        <span className={css('pf-c-tabs__toggle-text')} id={`${randomId}-text`}>
+                        <span className={css(styles.tabsToggleText)} id={`${randomId}-text`}>
                           {toggleText}
                         </span>
                       )}

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

@@ -4,7 +4,7 @@ exports[`TabContent should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <section
     aria-label="string"
-    class="pf-c-tab-content string"
+    class="pf-v5-c-tab-content string"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     id="string"

package/src/components/Tabs/__tests__/OverflowTab.test.tsx

@@ -74,20 +74,20 @@ test('Renders with inherited element props spread to the component', () => {
   expect(screen.getByRole('presentation')).toHaveAccessibleName('Label');
 });
 
-test('Renders with class names pf-m-overflow and pf-c-tabs__item on the presentation element', () => {
+test('Renders with class names pf-m-overflow and pf-v5-c-tabs__item on the presentation element', () => {
   render(<OverflowTab />);
 
   expect(screen.getByRole('presentation')).toHaveClass('pf-m-overflow');
   expect(screen.getByRole('presentation')).toHaveClass('pf-v5-c-tabs__item');
 });
 
-test('Renders with class pf-c-tabs__link on the tab element', () => {
+test('Renders with class pf-v5-c-tabs__link on the tab element', () => {
   render(<OverflowTab />);
 
   expect(screen.getByRole('tab')).toHaveClass('pf-v5-c-tabs__link');
 });
 
-test("Renders with class pf-c-tabs__link-toggle-icon on the img element's container", () => {
+test("Renders with class pf-v5-c-tabs__link-toggle-icon on the img element's container", () => {
   render(<OverflowTab />);
 
   expect(screen.getByRole('img', { hidden: true }).parentElement).toHaveClass('pf-v5-c-tabs__link-toggle-icon');

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

@@ -81,7 +81,7 @@ exports[`should render accessible tabs 1`] = `
   </nav>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -92,7 +92,7 @@ exports[`should render accessible tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -104,7 +104,7 @@ exports[`should render accessible tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -227,7 +227,7 @@ exports[`should render box tabs 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -238,7 +238,7 @@ exports[`should render box tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -250,7 +250,7 @@ exports[`should render box tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -262,7 +262,7 @@ exports[`should render box tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-3-tab4"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -355,7 +355,7 @@ exports[`should render box tabs of light variant 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-c-tab-content pf-m-light-300"
+    class="pf-v5-c-tab-content pf-m-light-300"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -366,7 +366,7 @@ exports[`should render box tabs of light variant 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-c-tab-content pf-m-light-300"
+    class="pf-v5-c-tab-content pf-m-light-300"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -378,7 +378,7 @@ exports[`should render box tabs of light variant 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-c-tab-content pf-m-light-300"
+    class="pf-v5-c-tab-content pf-m-light-300"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -433,7 +433,7 @@ exports[`should render expandable vertical tabs 1`] = `
             </svg>
           </span>
           <span
-            class="pf-c-tabs__toggle-text"
+            class="pf-v5-c-tabs__toggle-text"
             id="pf-random-id-0-text"
           >
             toggle
@@ -542,7 +542,7 @@ exports[`should render expandable vertical tabs 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -553,7 +553,7 @@ exports[`should render expandable vertical tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -565,7 +565,7 @@ exports[`should render expandable vertical tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -577,7 +577,7 @@ exports[`should render expandable vertical tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-3-tab4"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -670,7 +670,7 @@ exports[`should render filled tabs 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -681,7 +681,7 @@ exports[`should render filled tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -693,7 +693,7 @@ exports[`should render filled tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -786,7 +786,7 @@ exports[`should render secondary tabs 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-primarieTabs"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-primarieTabs"
@@ -871,7 +871,7 @@ exports[`should render secondary tabs 1`] = `
     </div>
     <section
       aria-labelledby="pf-tab-10-secondary tab1"
-      class="pf-c-tab-content"
+      class="pf-v5-c-tab-content"
       data-ouia-component-type="PF4/TabContent"
       data-ouia-safe="true"
       hidden=""
@@ -883,7 +883,7 @@ exports[`should render secondary tabs 1`] = `
     </section>
     <section
       aria-labelledby="pf-tab-11-secondary tab2"
-      class="pf-c-tab-content"
+      class="pf-v5-c-tab-content"
       data-ouia-component-type="PF4/TabContent"
       data-ouia-safe="true"
       hidden=""
@@ -895,7 +895,7 @@ exports[`should render secondary tabs 1`] = `
     </section>
     <section
       aria-labelledby="pf-tab-12-secondary tab3"
-      class="pf-c-tab-content"
+      class="pf-v5-c-tab-content"
       data-ouia-component-type="PF4/TabContent"
       data-ouia-safe="true"
       hidden=""
@@ -908,7 +908,7 @@ exports[`should render secondary tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -920,7 +920,7 @@ exports[`should render secondary tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1043,7 +1043,7 @@ exports[`should render simple tabs 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -1054,7 +1054,7 @@ exports[`should render simple tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1066,7 +1066,7 @@ exports[`should render simple tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1078,7 +1078,7 @@ exports[`should render simple tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-3-tab4"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1171,7 +1171,7 @@ exports[`should render tabs with eventKey Strings 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-one-tab1"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1183,7 +1183,7 @@ exports[`should render tabs with eventKey Strings 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-two-tab2"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1195,7 +1195,7 @@ exports[`should render tabs with eventKey Strings 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-three-tab3"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1288,7 +1288,7 @@ exports[`should render tabs with no bottom border 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -1299,7 +1299,7 @@ exports[`should render tabs with no bottom border 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1311,7 +1311,7 @@ exports[`should render tabs with no bottom border 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1405,7 +1405,7 @@ exports[`should render tabs with separate content 1`] = `
   <div>
     <section
       aria-label="Tab item 1"
-      class="pf-c-tab-content"
+      class="pf-v5-c-tab-content"
       data-ouia-component-type="PF4/TabContent"
       data-ouia-safe="true"
       id="refTab1Section"
@@ -1416,7 +1416,7 @@ exports[`should render tabs with separate content 1`] = `
     </section>
     <section
       aria-label="Tab item 2"
-      class="pf-c-tab-content"
+      class="pf-v5-c-tab-content"
       data-ouia-component-type="PF4/TabContent"
       data-ouia-safe="true"
       hidden=""
@@ -1432,7 +1432,7 @@ exports[`should render tabs with separate content 1`] = `
     </section>
     <section
       aria-label="Tab item 3"
-      class="pf-c-tab-content"
+      class="pf-v5-c-tab-content"
       data-ouia-component-type="PF4/TabContent"
       data-ouia-safe="true"
       hidden=""
@@ -1559,7 +1559,7 @@ exports[`should render uncontrolled tabs 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -1570,7 +1570,7 @@ exports[`should render uncontrolled tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1582,7 +1582,7 @@ exports[`should render uncontrolled tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1594,7 +1594,7 @@ exports[`should render uncontrolled tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-3-tab4"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1717,7 +1717,7 @@ exports[`should render vertical tabs 1`] = `
   </div>
   <section
     aria-labelledby="pf-tab-0-tab1"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     id="pf-tab-section-0-tab1"
@@ -1728,7 +1728,7 @@ exports[`should render vertical tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-1-tab2"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1740,7 +1740,7 @@ exports[`should render vertical tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-2-tab3"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""
@@ -1752,7 +1752,7 @@ exports[`should render vertical tabs 1`] = `
   </section>
   <section
     aria-labelledby="pf-tab-3-tab4"
-    class="pf-c-tab-content"
+    class="pf-v5-c-tab-content"
     data-ouia-component-type="PF4/TabContent"
     data-ouia-safe="true"
     hidden=""