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

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

@@ -3,7 +3,7 @@
 exports[`Masthead verify basic 1`] = `
 <DocumentFragment>
   <header
-    class="pf-c-masthead pf-m-display-inline-on-md"
+    class="pf-v5-c-masthead pf-m-display-inline-on-md"
   >
     test
   </header>
@@ -13,7 +13,7 @@ exports[`Masthead verify basic 1`] = `
 exports[`Masthead verify custom class 1`] = `
 <DocumentFragment>
   <header
-    class="pf-c-masthead pf-m-display-inline-on-md custom-css"
+    class="pf-v5-c-masthead pf-m-display-inline-on-md custom-css"
   >
     test
   </header>
@@ -23,24 +23,24 @@ exports[`Masthead verify custom class 1`] = `
 exports[`Masthead verify full structure 1`] = `
 <DocumentFragment>
   <header
-    class="pf-c-masthead pf-m-display-inline-on-md"
+    class="pf-v5-c-masthead pf-m-display-inline-on-md"
   >
     <span
-      class="pf-c-masthead__toggle"
+      class="pf-v5-c-masthead__toggle"
     >
       Toggle
     </span>
     <div
-      class="pf-c-masthead__main"
+      class="pf-v5-c-masthead__main"
     >
       <span
-        class="pf-c-masthead__brand"
+        class="pf-v5-c-masthead__brand"
       >
         Logo
       </span>
     </div>
     <div
-      class="pf-c-masthead__content"
+      class="pf-v5-c-masthead__content"
     >
       <span>
         Content
@@ -53,7 +53,7 @@ exports[`Masthead verify full structure 1`] = `
 exports[`Masthead verify inline display breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-c-masthead pf-m-display-inline pf-m-display-inline-on-sm pf-m-display-inline-on-md pf-m-display-inline-on-lg pf-m-display-inline-on-xl pf-m-display-inline-on-2xl"
+    class="pf-v5-c-masthead pf-m-display-inline pf-m-display-inline-on-sm pf-m-display-inline-on-md pf-m-display-inline-on-lg pf-m-display-inline-on-xl pf-m-display-inline-on-2xl"
   >
     test
   </header>
@@ -63,7 +63,7 @@ exports[`Masthead verify inline display breakpoints 1`] = `
 exports[`Masthead verify inset2xl inset breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-c-masthead pf-m-display-inline-on-md pf-m-inset-2xl pf-m-inset-2xl-on-sm pf-m-inset-2xl-on-md pf-m-inset-2xl-on-lg pf-m-inset-2xl-on-xl pf-m-inset-2xl-on-2xl"
+    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-2xl pf-m-inset-2xl-on-sm pf-m-inset-2xl-on-md pf-m-inset-2xl-on-lg pf-m-inset-2xl-on-xl pf-m-inset-2xl-on-2xl"
   >
     test
   </header>
@@ -73,7 +73,7 @@ exports[`Masthead verify inset2xl inset breakpoints 1`] = `
 exports[`Masthead verify inset3xl inset breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-c-masthead pf-m-display-inline-on-md"
+    class="pf-v5-c-masthead pf-m-display-inline-on-md"
   >
     test
   </header>
@@ -83,7 +83,7 @@ exports[`Masthead verify inset3xl inset breakpoints 1`] = `
 exports[`Masthead verify insetLg inset breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-c-masthead pf-m-display-inline-on-md pf-m-inset-lg pf-m-inset-lg-on-sm pf-m-inset-lg-on-md pf-m-inset-lg-on-lg pf-m-inset-lg-on-xl pf-m-inset-lg-on-2xl"
+    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-lg pf-m-inset-lg-on-sm pf-m-inset-lg-on-md pf-m-inset-lg-on-lg pf-m-inset-lg-on-xl pf-m-inset-lg-on-2xl"
   >
     test
   </header>
@@ -93,7 +93,7 @@ exports[`Masthead verify insetLg inset breakpoints 1`] = `
 exports[`Masthead verify insetMd inset breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-c-masthead pf-m-display-inline-on-md pf-m-inset-md pf-m-inset-md-on-sm pf-m-inset-md-on-md pf-m-inset-md-on-lg pf-m-inset-md-on-xl pf-m-inset-md-on-2xl"
+    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-md pf-m-inset-md-on-sm pf-m-inset-md-on-md pf-m-inset-md-on-lg pf-m-inset-md-on-xl pf-m-inset-md-on-2xl"
   >
     test
   </header>
@@ -103,7 +103,7 @@ exports[`Masthead verify insetMd inset breakpoints 1`] = `
 exports[`Masthead verify insetNone inset breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-c-masthead pf-m-display-inline-on-md pf-m-inset-none pf-m-inset-none-on-sm pf-m-inset-none-on-md pf-m-inset-none-on-lg pf-m-inset-none-on-xl pf-m-inset-none-on-2xl"
+    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-none pf-m-inset-none-on-sm pf-m-inset-none-on-md pf-m-inset-none-on-lg pf-m-inset-none-on-xl pf-m-inset-none-on-2xl"
   >
     test
   </header>
@@ -113,7 +113,7 @@ exports[`Masthead verify insetNone inset breakpoints 1`] = `
 exports[`Masthead verify insetSm inset breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-c-masthead pf-m-display-inline-on-md pf-m-inset-sm pf-m-inset-sm-on-sm pf-m-inset-sm-on-md pf-m-inset-sm-on-lg pf-m-inset-sm-on-xl pf-m-inset-sm-on-2xl"
+    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-sm pf-m-inset-sm-on-sm pf-m-inset-sm-on-md pf-m-inset-sm-on-lg pf-m-inset-sm-on-xl pf-m-inset-sm-on-2xl"
   >
     test
   </header>
@@ -123,7 +123,7 @@ exports[`Masthead verify insetSm inset breakpoints 1`] = `
 exports[`Masthead verify insetXl inset breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-c-masthead pf-m-display-inline-on-md pf-m-inset-xl pf-m-inset-xl-on-sm pf-m-inset-xl-on-md pf-m-inset-xl-on-lg pf-m-inset-xl-on-xl pf-m-inset-xl-on-2xl"
+    class="pf-v5-c-masthead pf-m-display-inline-on-md pf-m-inset-xl pf-m-inset-xl-on-sm pf-m-inset-xl-on-md pf-m-inset-xl-on-lg pf-m-inset-xl-on-xl pf-m-inset-xl-on-2xl"
   >
     test
   </header>
@@ -133,7 +133,7 @@ exports[`Masthead verify insetXl inset breakpoints 1`] = `
 exports[`Masthead verify insetXs inset breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-c-masthead pf-m-display-inline-on-md"
+    class="pf-v5-c-masthead pf-m-display-inline-on-md"
   >
     test
   </header>
@@ -143,7 +143,7 @@ exports[`Masthead verify insetXs inset breakpoints 1`] = `
 exports[`Masthead verify stack display breakpoints 1`] = `
 <DocumentFragment>
   <header
-    class="pf-c-masthead pf-m-display-stack pf-m-display-stack-on-sm pf-m-display-stack-on-md pf-m-display-stack-on-lg pf-m-display-stack-on-xl pf-m-display-stack-on-2xl"
+    class="pf-v5-c-masthead pf-m-display-stack pf-m-display-stack-on-sm pf-m-display-stack-on-md pf-m-display-stack-on-lg pf-m-display-stack-on-xl pf-m-display-stack-on-2xl"
   >
     test
   </header>
@@ -153,7 +153,7 @@ exports[`Masthead verify stack display breakpoints 1`] = `
 exports[`MastheadBrand verify anchor component with href 1`] = `
 <DocumentFragment>
   <a
-    class="pf-c-masthead__brand"
+    class="pf-v5-c-masthead__brand"
     href="#"
     tabindex="0"
   >
@@ -165,7 +165,7 @@ exports[`MastheadBrand verify anchor component with href 1`] = `
 exports[`MastheadBrand verify basic 1`] = `
 <DocumentFragment>
   <span
-    class="pf-c-masthead__brand"
+    class="pf-v5-c-masthead__brand"
   >
     test
   </span>
@@ -175,7 +175,7 @@ exports[`MastheadBrand verify basic 1`] = `
 exports[`MastheadBrand verify custom class 1`] = `
 <DocumentFragment>
   <span
-    class="pf-c-masthead__brand custom-css"
+    class="pf-v5-c-masthead__brand custom-css"
   >
     test
   </span>
@@ -185,7 +185,7 @@ exports[`MastheadBrand verify custom class 1`] = `
 exports[`MastheadBrand verify custom component 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-masthead__brand"
+    class="pf-v5-c-masthead__brand"
   >
     test
   </div>
@@ -195,7 +195,7 @@ exports[`MastheadBrand verify custom component 1`] = `
 exports[`MastheadBrand verify default component 1`] = `
 <DocumentFragment>
   <span
-    class="pf-c-masthead__brand"
+    class="pf-v5-c-masthead__brand"
   >
     test
   </span>
@@ -205,7 +205,7 @@ exports[`MastheadBrand verify default component 1`] = `
 exports[`MastheadContent verify basic 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-masthead__content"
+    class="pf-v5-c-masthead__content"
   >
     test
   </div>
@@ -215,7 +215,7 @@ exports[`MastheadContent verify basic 1`] = `
 exports[`MastheadContent verify custom class 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-masthead__content custom-css"
+    class="pf-v5-c-masthead__content custom-css"
   >
     test
   </div>
@@ -225,7 +225,7 @@ exports[`MastheadContent verify custom class 1`] = `
 exports[`MastheadMain verify basic 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-masthead__main"
+    class="pf-v5-c-masthead__main"
   >
     test
   </div>
@@ -235,7 +235,7 @@ exports[`MastheadMain verify basic 1`] = `
 exports[`MastheadMain verify custom class 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-masthead__main custom-css"
+    class="pf-v5-c-masthead__main custom-css"
   >
     test
   </div>
@@ -245,7 +245,7 @@ exports[`MastheadMain verify custom class 1`] = `
 exports[`MastheadToggle verify basic 1`] = `
 <DocumentFragment>
   <span
-    class="pf-c-masthead__toggle"
+    class="pf-v5-c-masthead__toggle"
   >
     test
   </span>
@@ -255,7 +255,7 @@ exports[`MastheadToggle verify basic 1`] = `
 exports[`MastheadToggle verify custom class 1`] = `
 <DocumentFragment>
   <span
-    class="pf-c-masthead__toggle custom-css"
+    class="pf-v5-c-masthead__toggle custom-css"
   >
     test
   </span>

package/src/components/Menu/Menu.tsx

@@ -143,7 +143,7 @@ class MenuBase extends React.Component<MenuProps, MenuState> {
     if (
       !current ||
       (current !== (event.target as HTMLElement).closest('.pf-c-menu') &&
-        !Array.from(current.getElementsByClassName('pf-c-menu')).includes(
+        !Array.from(current.getElementsByClassName('pf-v5-c-menu')).includes(
           (event.target as HTMLElement).closest('.pf-c-menu')
         ))
     ) {

package/src/components/Menu/MenuContent.tsx

@@ -39,9 +39,7 @@ export const MenuContent = React.forwardRef((props: MenuContentProps, ref: React
           parseFloat(rootMenuListStyles.getPropertyValue('padding-top').replace(/px/g, '')) +
           parseFloat(rootMenuListStyles.getPropertyValue('padding-bottom').replace(/px/g, '')) +
           parseFloat(
-            getComputedStyle(rootMenuList.parentElement)
-              .getPropertyValue('border-bottom-width')
-              .replace(/px/g, '')
+            getComputedStyle(rootMenuList.parentElement).getPropertyValue('border-bottom-width').replace(/px/g, '')
           );
         clientHeight = clientHeight + rootMenuListPaddingOffset;
       }
@@ -57,11 +55,11 @@ export const MenuContent = React.forwardRef((props: MenuContentProps, ref: React
         <div
           {...rest}
           className={css(styles.menuContent, props.className)}
-          ref={el => refCallback(el, menuId, onGetMenuHeight)}
+          ref={(el) => refCallback(el, menuId, onGetMenuHeight)}
           style={
             {
-              ...(menuHeight && { '--pf-c-menu__content--Height': menuHeight }),
-              ...(maxMenuHeight && { '--pf-c-menu__content--MaxHeight': maxMenuHeight })
+              ...(menuHeight && { '--pf-v5-c-menu__content--Height': menuHeight }),
+              ...(maxMenuHeight && { '--pf-v5-c-menu__content--MaxHeight': maxMenuHeight })
             } as React.CSSProperties
           }
         >

package/src/components/Menu/__mocks__/Menu.tsx

@@ -7,6 +7,6 @@ export const Menu = ({ className, isPlain, isScrollable, style, onSelect, ...pro
     <div onClick={onSelect}>{'Mock item'}</div>
     <p>{`isPlain: ${isPlain}`}</p>
     <p>{`isScrollable: ${isScrollable}`}</p>
-    <p>{`minWidth: ${style?.['--pf-c-menu--MinWidth']}`}</p>
+    <p>{`minWidth: ${style?.['--pf-v5-c-menu--MinWidth']}`}</p>
   </>
 );

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

@@ -3,7 +3,7 @@
 exports[`Menu should render Menu successfully 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-menu"
+    class="pf-v5-c-menu"
     data-ouia-component-id="OUIA-Generated-Menu-1"
     data-ouia-component-type="PF4/Menu"
     data-ouia-safe="true"

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

@@ -4,23 +4,23 @@ exports[`menu toggle passes additional classes 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
-    class="pf-c-menu-toggle test-class"
+    class="pf-v5-c-menu-toggle test-class"
     type="button"
   >
     <span
-      class="pf-c-menu-toggle__text"
+      class="pf-v5-c-menu-toggle__text"
     >
       Toggle
     </span>
     <span
-      class="pf-c-menu-toggle__controls"
+      class="pf-v5-c-menu-toggle__controls"
     >
       <span
-        class="pf-c-menu-toggle__toggle-icon"
+        class="pf-v5-c-menu-toggle__toggle-icon"
       >
         <svg
           aria-hidden="true"
-          class="pf-svg"
+          class="pf-v5-svg"
           fill="currentColor"
           role="img"
           viewBox="0 0 320 512"
@@ -39,23 +39,23 @@ exports[`menu toggle renders successfully 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
-    class="pf-c-menu-toggle"
+    class="pf-v5-c-menu-toggle"
     type="button"
   >
     <span
-      class="pf-c-menu-toggle__text"
+      class="pf-v5-c-menu-toggle__text"
     >
       Toggle
     </span>
     <span
-      class="pf-c-menu-toggle__controls"
+      class="pf-v5-c-menu-toggle__controls"
     >
       <span
-        class="pf-c-menu-toggle__toggle-icon"
+        class="pf-v5-c-menu-toggle__toggle-icon"
       >
         <svg
           aria-hidden="true"
-          class="pf-svg"
+          class="pf-v5-svg"
           fill="currentColor"
           role="img"
           viewBox="0 0 320 512"
@@ -74,32 +74,32 @@ exports[`menu toggle shows badge 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
-    class="pf-c-menu-toggle"
+    class="pf-v5-c-menu-toggle"
     type="button"
   >
     <span
-      class="pf-c-menu-toggle__text"
+      class="pf-v5-c-menu-toggle__text"
     >
       Toggle
     </span>
     <span
-      class="pf-c-menu-toggle__count"
+      class="pf-v5-c-menu-toggle__count"
     >
       <span
-        class="pf-c-badge pf-m-unread"
+        class="pf-v5-c-badge pf-m-unread"
       >
         badge
       </span>
     </span>
     <span
-      class="pf-c-menu-toggle__controls"
+      class="pf-v5-c-menu-toggle__controls"
     >
       <span
-        class="pf-c-menu-toggle__toggle-icon"
+        class="pf-v5-c-menu-toggle__toggle-icon"
       >
         <svg
           aria-hidden="true"
-          class="pf-svg"
+          class="pf-v5-svg"
           fill="currentColor"
           role="img"
           viewBox="0 0 320 512"
@@ -118,15 +118,15 @@ exports[`menu toggle shows icon 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
-    class="pf-c-menu-toggle"
+    class="pf-v5-c-menu-toggle"
     type="button"
   >
     <span
-      class="pf-c-menu-toggle__icon"
+      class="pf-v5-c-menu-toggle__icon"
     >
       <svg
         aria-hidden="true"
-        class="pf-svg"
+        class="pf-v5-svg"
         fill="currentColor"
         role="img"
         viewBox="0 0 512 512"
@@ -137,19 +137,19 @@ exports[`menu toggle shows icon 1`] = `
       </svg>
     </span>
     <span
-      class="pf-c-menu-toggle__text"
+      class="pf-v5-c-menu-toggle__text"
     >
       Toggle
     </span>
     <span
-      class="pf-c-menu-toggle__controls"
+      class="pf-v5-c-menu-toggle__controls"
     >
       <span
-        class="pf-c-menu-toggle__toggle-icon"
+        class="pf-v5-c-menu-toggle__toggle-icon"
       >
         <svg
           aria-hidden="true"
-          class="pf-svg"
+          class="pf-v5-svg"
           fill="currentColor"
           role="img"
           viewBox="0 0 320 512"
@@ -168,24 +168,24 @@ exports[`menu toggle shows isDisabled 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
-    class="pf-c-menu-toggle pf-m-disabled"
+    class="pf-v5-c-menu-toggle pf-m-disabled"
     disabled=""
     type="button"
   >
     <span
-      class="pf-c-menu-toggle__text"
+      class="pf-v5-c-menu-toggle__text"
     >
       Toggle
     </span>
     <span
-      class="pf-c-menu-toggle__controls"
+      class="pf-v5-c-menu-toggle__controls"
     >
       <span
-        class="pf-c-menu-toggle__toggle-icon"
+        class="pf-v5-c-menu-toggle__toggle-icon"
       >
         <svg
           aria-hidden="true"
-          class="pf-svg"
+          class="pf-v5-svg"
           fill="currentColor"
           role="img"
           viewBox="0 0 320 512"
@@ -204,23 +204,23 @@ exports[`menu toggle shows isExpanded 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="true"
-    class="pf-c-menu-toggle pf-m-expanded"
+    class="pf-v5-c-menu-toggle pf-m-expanded"
     type="button"
   >
     <span
-      class="pf-c-menu-toggle__text"
+      class="pf-v5-c-menu-toggle__text"
     >
       Toggle
     </span>
     <span
-      class="pf-c-menu-toggle__controls"
+      class="pf-v5-c-menu-toggle__controls"
     >
       <span
-        class="pf-c-menu-toggle__toggle-icon"
+        class="pf-v5-c-menu-toggle__toggle-icon"
       >
         <svg
           aria-hidden="true"
-          class="pf-svg"
+          class="pf-v5-svg"
           fill="currentColor"
           role="img"
           viewBox="0 0 320 512"
@@ -239,12 +239,12 @@ exports[`menu toggle shows isPlain 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
-    class="pf-c-menu-toggle pf-m-plain"
+    class="pf-v5-c-menu-toggle pf-m-plain"
     type="button"
   >
     <svg
       aria-hidden="true"
-      class="pf-svg"
+      class="pf-v5-svg"
       fill="currentColor"
       role="img"
       viewBox="0 0 192 512"
@@ -261,23 +261,23 @@ exports[`menu toggle shows isPrimary 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
-    class="pf-c-menu-toggle pf-m-primary"
+    class="pf-v5-c-menu-toggle pf-m-primary"
     type="button"
   >
     <span
-      class="pf-c-menu-toggle__text"
+      class="pf-v5-c-menu-toggle__text"
     >
       Toggle
     </span>
     <span
-      class="pf-c-menu-toggle__controls"
+      class="pf-v5-c-menu-toggle__controls"
     >
       <span
-        class="pf-c-menu-toggle__toggle-icon"
+        class="pf-v5-c-menu-toggle__toggle-icon"
       >
         <svg
           aria-hidden="true"
-          class="pf-svg"
+          class="pf-v5-svg"
           fill="currentColor"
           role="img"
           viewBox="0 0 320 512"
@@ -296,23 +296,23 @@ exports[`menu toggle shows plain text 1`] = `
 <DocumentFragment>
   <button
     aria-expanded="false"
-    class="pf-c-menu-toggle pf-m-plain pf-m-text"
+    class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
     type="button"
   >
     <span
-      class="pf-c-menu-toggle__text"
+      class="pf-v5-c-menu-toggle__text"
     >
       Toggle
     </span>
     <span
-      class="pf-c-menu-toggle__controls"
+      class="pf-v5-c-menu-toggle__controls"
     >
       <span
-        class="pf-c-menu-toggle__toggle-icon"
+        class="pf-v5-c-menu-toggle__toggle-icon"
       >
         <svg
           aria-hidden="true"
-          class="pf-svg"
+          class="pf-v5-svg"
           fill="currentColor"
           role="img"
           viewBox="0 0 320 512"

package/src/components/Modal/ModalBoxHeader.tsx

@@ -21,7 +21,7 @@ export const ModalBoxHeader: React.FunctionComponent<ModalBoxHeaderProps> = ({
     {help && (
       <React.Fragment>
         <div className={css(styles.modalBoxHeaderMain)}>{children}</div>
-        <div className="pf-c-modal-box__header-help">{help}</div>
+        <div className="pf-v5-c-modal-box__header-help">{help}</div>
       </React.Fragment>
     )}
     {!help && children}

package/src/components/Modal/__tests__/__snapshots__/ModalBox.test.tsx.snap

@@ -5,7 +5,7 @@ exports[`ModalBox Test 1`] = `
   <div
     aria-describedby="Test Modal Box"
     aria-modal="true"
-    class="pf-c-modal-box"
+    class="pf-v5-c-modal-box"
     id="boxId"
     role="dialog"
   >
@@ -19,7 +19,7 @@ exports[`ModalBox Test large 1`] = `
   <div
     aria-describedby="Test Modal Box"
     aria-modal="true"
-    class="pf-c-modal-box pf-m-lg"
+    class="pf-v5-c-modal-box pf-m-lg"
     id="boxId"
     role="dialog"
   >
@@ -33,7 +33,7 @@ exports[`ModalBox Test medium 1`] = `
   <div
     aria-describedby="Test Modal Box"
     aria-modal="true"
-    class="pf-c-modal-box pf-m-md"
+    class="pf-v5-c-modal-box pf-m-md"
     id="boxId"
     role="dialog"
   >
@@ -47,7 +47,7 @@ exports[`ModalBox Test small 1`] = `
   <div
     aria-describedby="Test Modal Box"
     aria-modal="true"
-    class="pf-c-modal-box pf-m-sm"
+    class="pf-v5-c-modal-box pf-m-sm"
     id="boxId"
     role="dialog"
   >
@@ -61,7 +61,7 @@ exports[`ModalBox Test top aligned 1`] = `
   <div
     aria-describedby="Test Modal Box"
     aria-modal="true"
-    class="pf-c-modal-box pf-m-align-top"
+    class="pf-v5-c-modal-box pf-m-align-top"
     id="boxId"
     role="dialog"
   >
@@ -75,10 +75,10 @@ exports[`ModalBox Test top aligned distance 1`] = `
   <div
     aria-describedby="Test Modal Box"
     aria-modal="true"
-    class="pf-c-modal-box pf-m-align-top"
+    class="pf-v5-c-modal-box pf-m-align-top"
     id="boxId"
     role="dialog"
-    style="--pf-c-modal-box--m-align-top--spacer: 50px;"
+    style="--pf-v5-c-modal-box--m-align-top--spacer: 50px;"
   >
     This is a ModalBox
   </div>

package/src/components/Modal/__tests__/__snapshots__/ModalBoxBody.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`ModalBoxBody Test 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-modal-box__body test-box-class"
+    class="pf-v5-c-modal-box__body test-box-class"
     id="id"
   >
     This is a ModalBox header

package/src/components/Modal/__tests__/__snapshots__/ModalBoxDescription.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`ModalBoxDescription Test 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-modal-box__description"
+    class="pf-v5-c-modal-box__description"
     id=""
   >
     This is a ModalBox Description

package/src/components/Modal/__tests__/__snapshots__/ModalBoxFooter.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`ModalBoxFooter Test 1`] = `
 <DocumentFragment>
   <footer
-    class="pf-c-modal-box__footer test-box-footer-class"
+    class="pf-v5-c-modal-box__footer test-box-footer-class"
   >
     This is a ModalBox Footer
   </footer>

package/src/components/Modal/__tests__/__snapshots__/ModalBoxHeader.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`ModalBoxHeader Test 1`] = `
 <DocumentFragment>
   <header
-    class="pf-c-modal-box__header"
+    class="pf-v5-c-modal-box__header"
   >
     This is a ModalBox header
   </header>
@@ -13,15 +13,15 @@ exports[`ModalBoxHeader Test 1`] = `
 exports[`ModalBoxHeader help renders 1`] = `
 <DocumentFragment>
   <header
-    class="pf-c-modal-box__header pf-m-help"
+    class="pf-v5-c-modal-box__header pf-m-help"
   >
     <div
-      class="pf-c-modal-box__header-main"
+      class="pf-v5-c-modal-box__header-main"
     >
       This is a ModalBox header
     </div>
     <div
-      class="pf-c-modal-box__header-help"
+      class="pf-v5-c-modal-box__header-help"
     >
       <div>
         test