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

package/src/components/Page/__tests__/__snapshots__/PageBreadcrumb.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`page breadcrumb Verify basic render 1`] = `
 <DocumentFragment>
   <section
-    class="pf-c-page__main-breadcrumb"
+    class="pf-v5-c-page__main-breadcrumb"
   >
     test
   </section>
@@ -13,7 +13,7 @@ exports[`page breadcrumb Verify basic render 1`] = `
 exports[`page breadcrumb Verify bottom shadow 1`] = `
 <DocumentFragment>
   <section
-    class="pf-c-page__main-breadcrumb pf-m-shadow-bottom"
+    class="pf-v5-c-page__main-breadcrumb pf-m-shadow-bottom"
   >
     test
   </section>
@@ -23,7 +23,7 @@ exports[`page breadcrumb Verify bottom shadow 1`] = `
 exports[`page breadcrumb Verify bottom sticky 1`] = `
 <DocumentFragment>
   <section
-    class="pf-c-page__main-breadcrumb pf-m-sticky-bottom"
+    class="pf-v5-c-page__main-breadcrumb pf-m-sticky-bottom"
   >
     test
   </section>
@@ -33,10 +33,10 @@ exports[`page breadcrumb Verify bottom sticky 1`] = `
 exports[`page breadcrumb Verify limited width 1`] = `
 <DocumentFragment>
   <section
-    class="pf-c-page__main-breadcrumb pf-m-limit-width"
+    class="pf-v5-c-page__main-breadcrumb pf-m-limit-width"
   >
     <div
-      class="pf-c-page__main-body"
+      class="pf-v5-c-page__main-body"
     >
       test
     </div>
@@ -47,7 +47,7 @@ exports[`page breadcrumb Verify limited width 1`] = `
 exports[`page breadcrumb Verify overflow scroll 1`] = `
 <DocumentFragment>
   <section
-    class="pf-c-page__main-breadcrumb pf-m-overflow-scroll"
+    class="pf-v5-c-page__main-breadcrumb pf-m-overflow-scroll"
     tabindex="0"
   >
     test
@@ -58,7 +58,7 @@ exports[`page breadcrumb Verify overflow scroll 1`] = `
 exports[`page breadcrumb Verify top shadow 1`] = `
 <DocumentFragment>
   <section
-    class="pf-c-page__main-breadcrumb pf-m-shadow-top"
+    class="pf-v5-c-page__main-breadcrumb pf-m-shadow-top"
   >
     test
   </section>
@@ -68,7 +68,7 @@ exports[`page breadcrumb Verify top shadow 1`] = `
 exports[`page breadcrumb Verify top sticky 1`] = `
 <DocumentFragment>
   <section
-    class="pf-c-page__main-breadcrumb pf-m-sticky-top"
+    class="pf-v5-c-page__main-breadcrumb pf-m-sticky-top"
   >
     test
   </section>

package/src/components/Page/__tests__/__snapshots__/PageGroup.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`page group Verify basic render 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-page__main-group"
+    class="pf-v5-c-page__main-group"
   >
     test
   </div>
@@ -13,7 +13,7 @@ exports[`page group Verify basic render 1`] = `
 exports[`page group Verify bottom shadow 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-page__main-group pf-m-shadow-bottom"
+    class="pf-v5-c-page__main-group pf-m-shadow-bottom"
   >
     test
   </div>
@@ -23,7 +23,7 @@ exports[`page group Verify bottom shadow 1`] = `
 exports[`page group Verify bottom sticky 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-page__main-group pf-m-sticky-bottom"
+    class="pf-v5-c-page__main-group pf-m-sticky-bottom"
   >
     test
   </div>
@@ -33,7 +33,7 @@ exports[`page group Verify bottom sticky 1`] = `
 exports[`page group Verify overflow scroll 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-page__main-group pf-m-overflow-scroll"
+    class="pf-v5-c-page__main-group pf-m-overflow-scroll"
     role="region"
     tabindex="0"
   >
@@ -45,7 +45,7 @@ exports[`page group Verify overflow scroll 1`] = `
 exports[`page group Verify top shadow 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-page__main-group pf-m-shadow-top"
+    class="pf-v5-c-page__main-group pf-m-shadow-top"
   >
     test
   </div>
@@ -55,7 +55,7 @@ exports[`page group Verify top shadow 1`] = `
 exports[`page group Verify top sticky 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-page__main-group pf-m-sticky-top"
+    class="pf-v5-c-page__main-group pf-m-sticky-top"
   >
     test
   </div>

package/src/components/Page/__tests__/__snapshots__/PageNavigation.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`page navigation Verify basic render 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-page__main-nav"
+    class="pf-v5-c-page__main-nav"
   >
     test
   </div>
@@ -13,7 +13,7 @@ exports[`page navigation Verify basic render 1`] = `
 exports[`page navigation Verify bottom shadow 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-page__main-nav pf-m-shadow-bottom"
+    class="pf-v5-c-page__main-nav pf-m-shadow-bottom"
   >
     test
   </div>
@@ -23,7 +23,7 @@ exports[`page navigation Verify bottom shadow 1`] = `
 exports[`page navigation Verify bottom sticky 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-page__main-nav pf-m-sticky-bottom"
+    class="pf-v5-c-page__main-nav pf-m-sticky-bottom"
   >
     test
   </div>
@@ -33,10 +33,10 @@ exports[`page navigation Verify bottom sticky 1`] = `
 exports[`page navigation Verify limited width 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-page__main-nav pf-m-limit-width"
+    class="pf-v5-c-page__main-nav pf-m-limit-width"
   >
     <div
-      class="pf-c-page__main-body"
+      class="pf-v5-c-page__main-body"
     >
       test
     </div>
@@ -47,7 +47,7 @@ exports[`page navigation Verify limited width 1`] = `
 exports[`page navigation Verify overflow scroll 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-page__main-nav pf-m-overflow-scroll"
+    class="pf-v5-c-page__main-nav pf-m-overflow-scroll"
     role="region"
     tabindex="0"
   >
@@ -59,7 +59,7 @@ exports[`page navigation Verify overflow scroll 1`] = `
 exports[`page navigation Verify top shadow 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-page__main-nav pf-m-shadow-top"
+    class="pf-v5-c-page__main-nav pf-m-shadow-top"
   >
     test
   </div>
@@ -69,7 +69,7 @@ exports[`page navigation Verify top shadow 1`] = `
 exports[`page navigation Verify top sticky 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-page__main-nav pf-m-sticky-top"
+    class="pf-v5-c-page__main-nav pf-m-sticky-top"
   >
     test
   </div>

package/src/components/Page/__tests__/__snapshots__/PageSection.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Check page main breadcrumb section against snapshot 1`] = `
 <DocumentFragment>
   <section
-    class="pf-c-page__main-breadcrumb"
+    class="pf-v5-c-page__main-breadcrumb"
   />
 </DocumentFragment>
 `;
@@ -11,7 +11,7 @@ exports[`Check page main breadcrumb section against snapshot 1`] = `
 exports[`Check page main nav section against snapshot 1`] = `
 <DocumentFragment>
   <section
-    class="pf-c-page__main-nav"
+    class="pf-v5-c-page__main-nav"
   />
 </DocumentFragment>
 `;
@@ -19,7 +19,7 @@ exports[`Check page main nav section against snapshot 1`] = `
 exports[`Check page main subnav section against snapshot 1`] = `
 <DocumentFragment>
   <section
-    class="pf-c-page__main-subnav"
+    class="pf-v5-c-page__main-subnav"
   />
 </DocumentFragment>
 `;
@@ -27,7 +27,7 @@ exports[`Check page main subnav section against snapshot 1`] = `
 exports[`Check page main tabs section against snapshot 1`] = `
 <DocumentFragment>
   <section
-    class="pf-c-page__main-tabs"
+    class="pf-v5-c-page__main-tabs"
   />
 </DocumentFragment>
 `;
@@ -35,10 +35,10 @@ exports[`Check page main tabs section against snapshot 1`] = `
 exports[`Check page section with center alignment 1`] = `
 <DocumentFragment>
   <section
-    class="pf-c-page__main-section pf-m-limit-width pf-m-align-center"
+    class="pf-v5-c-page__main-section pf-m-limit-width pf-m-align-center"
   >
     <div
-      class="pf-c-page__main-body"
+      class="pf-v5-c-page__main-body"
     />
   </section>
 </DocumentFragment>
@@ -47,7 +47,7 @@ exports[`Check page section with center alignment 1`] = `
 exports[`Check page section with fill and no padding example against snapshot 1`] = `
 <DocumentFragment>
   <section
-    class="pf-c-page__main-section pf-m-no-padding pf-m-fill"
+    class="pf-v5-c-page__main-section pf-m-no-padding pf-m-fill"
   />
 </DocumentFragment>
 `;
@@ -55,7 +55,7 @@ exports[`Check page section with fill and no padding example against snapshot 1`
 exports[`Check page section with fill example against snapshot 1`] = `
 <DocumentFragment>
   <section
-    class="pf-c-page__main-section pf-m-fill"
+    class="pf-v5-c-page__main-section pf-m-fill"
   />
 </DocumentFragment>
 `;
@@ -63,10 +63,10 @@ exports[`Check page section with fill example against snapshot 1`] = `
 exports[`Check page section with limited width 1`] = `
 <DocumentFragment>
   <section
-    class="pf-c-page__main-section pf-m-limit-width"
+    class="pf-v5-c-page__main-section pf-m-limit-width"
   >
     <div
-      class="pf-c-page__main-body"
+      class="pf-v5-c-page__main-body"
     />
   </section>
 </DocumentFragment>
@@ -75,7 +75,7 @@ exports[`Check page section with limited width 1`] = `
 exports[`Check page section with no fill example against snapshot 1`] = `
 <DocumentFragment>
   <section
-    class="pf-c-page__main-section pf-m-no-fill"
+    class="pf-v5-c-page__main-section pf-m-no-fill"
   />
 </DocumentFragment>
 `;
@@ -83,7 +83,7 @@ exports[`Check page section with no fill example against snapshot 1`] = `
 exports[`Check page section with no padding example against snapshot 1`] = `
 <DocumentFragment>
   <section
-    class="pf-c-page__main-section pf-m-no-padding"
+    class="pf-v5-c-page__main-section pf-m-no-padding"
   />
 </DocumentFragment>
 `;
@@ -91,7 +91,7 @@ exports[`Check page section with no padding example against snapshot 1`] = `
 exports[`Verify page section bottom shadow 1`] = `
 <DocumentFragment>
   <section
-    class="pf-c-page__main-section pf-m-shadow-bottom"
+    class="pf-v5-c-page__main-section pf-m-shadow-bottom"
   >
     test
   </section>
@@ -101,7 +101,7 @@ exports[`Verify page section bottom shadow 1`] = `
 exports[`Verify page section bottom sticky 1`] = `
 <DocumentFragment>
   <section
-    class="pf-c-page__main-section pf-m-sticky-bottom"
+    class="pf-v5-c-page__main-section pf-m-sticky-bottom"
   >
     test
   </section>
@@ -111,7 +111,7 @@ exports[`Verify page section bottom sticky 1`] = `
 exports[`Verify page section overflow scroll 1`] = `
 <DocumentFragment>
   <section
-    class="pf-c-page__main-section pf-m-overflow-scroll"
+    class="pf-v5-c-page__main-section pf-m-overflow-scroll"
     tabindex="0"
   >
     test
@@ -122,7 +122,7 @@ exports[`Verify page section overflow scroll 1`] = `
 exports[`Verify page section top shadow 1`] = `
 <DocumentFragment>
   <section
-    class="pf-c-page__main-section pf-m-shadow-top"
+    class="pf-v5-c-page__main-section pf-m-shadow-top"
   >
     test
   </section>
@@ -132,7 +132,7 @@ exports[`Verify page section top shadow 1`] = `
 exports[`Verify page section top sticky 1`] = `
 <DocumentFragment>
   <section
-    class="pf-c-page__main-section pf-m-sticky-top"
+    class="pf-v5-c-page__main-section pf-m-sticky-top"
   >
     test
   </section>

package/src/components/Page/__tests__/__snapshots__/PageSidebarBody.test.tsx.snap

@@ -3,7 +3,7 @@
 exports[`Matches snapshot 1`] = `
 <DocumentFragment>
   <div
-    class="pf-c-page__sidebar-body"
+    class="pf-v5-c-page__sidebar-body"
   >
     Test
   </div>

package/src/components/Page/examples/Page.md

@@ -127,7 +127,7 @@ To add additional components and information to a group, you may use the followi
 
 ### Centered section
 
-By default, a page section spans the width of the page. To reduce the width of a section, use the `isWidthLimited` property. To center align width-limited page sections, use the `isCenterAligned` property. When the main content area of a page is wider than the value of a centered, width-limited page section's `--pf-c-page--section--m-limit-width--MaxWidth` custom property, the section will automatically be centered.
+By default, a page section spans the width of the page. To reduce the width of a section, use the `isWidthLimited` property. To center align width-limited page sections, use the `isCenterAligned` property. When the main content area of a page is wider than the value of a centered, width-limited page section's `--pf-v5-c-page--section--m-limit-width--MaxWidth` custom property, the section will automatically be centered.
 
 The content in this example is placed in a card to better illustrate how the section behaves when it is centered, but a card is not required to center a page section.
 

package/src/components/Page/examples/PageCenteredSection.tsx

@@ -67,7 +67,7 @@ export const PageCenteredSection: React.FunctionComponent = () => {
         <Card>
           <CardBody>
             When a width limited page section is wider than the value of
-            <code>--pf-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main
+            <code>--pf-v5-c-page--section--m-limit-width--MaxWidth</code>, the section will be centered in the main
             section.
             <br />
             <br />

package/src/components/Page/examples/page.css

@@ -1,3 +1,3 @@
 .pf-c-page__sidebar-body {
-  color: var(--pf-global--Color--light-100)
+  color: var(--pf-v5-global--Color--light-100);
 }

package/src/components/Pagination/__tests__/Generated/__snapshots__/Navigation.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
 <DocumentFragment>
   <nav
     aria-label="Pagination"
-    class="pf-c-pagination__nav ''"
+    class="pf-v5-c-pagination__nav ''"
     currpage="'Current page'"
     paginationtitle="'Pagination'"
     tofirstpage="'Go to first page'"
@@ -13,12 +13,12 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
     topreviouspage="'Go to previous page'"
   >
     <div
-      class="pf-c-pagination__nav-control pf-m-first"
+      class="pf-v5-c-pagination__nav-control pf-m-first"
     >
       <button
         aria-disabled="false"
         aria-label="Go to first page"
-        class="pf-c-button pf-m-plain"
+        class="pf-v5-c-button pf-m-plain"
         data-action="first"
         data-ouia-component-id="OUIA-Generated-Button-plain-1"
         data-ouia-component-type="PF4/Button"
@@ -27,7 +27,7 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="pf-svg"
+          class="pf-v5-svg"
           fill="currentColor"
           role="img"
           viewBox="0 0 448 512"
@@ -39,12 +39,12 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
       </button>
     </div>
     <div
-      class="pf-c-pagination__nav-control"
+      class="pf-v5-c-pagination__nav-control"
     >
       <button
         aria-disabled="false"
         aria-label="Go to previous page"
-        class="pf-c-button pf-m-plain"
+        class="pf-v5-c-button pf-m-plain"
         data-action="previous"
         data-ouia-component-id="OUIA-Generated-Button-plain-2"
         data-ouia-component-type="PF4/Button"
@@ -53,7 +53,7 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="pf-svg"
+          class="pf-v5-svg"
           fill="currentColor"
           role="img"
           viewBox="0 0 256 512"
@@ -65,11 +65,11 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
       </button>
     </div>
     <div
-      class="pf-c-pagination__nav-page-select"
+      class="pf-v5-c-pagination__nav-page-select"
     >
       <input
         aria-label="Current page"
-        class="pf-c-form-control"
+        class="pf-v5-c-form-control"
         max="0"
         min="0"
         type="number"
@@ -77,12 +77,12 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
       />
     </div>
     <div
-      class="pf-c-pagination__nav-control"
+      class="pf-v5-c-pagination__nav-control"
     >
       <button
         aria-disabled="false"
         aria-label="Go to next page"
-        class="pf-c-button pf-m-plain"
+        class="pf-v5-c-button pf-m-plain"
         data-action="next"
         data-ouia-component-id="OUIA-Generated-Button-plain-3"
         data-ouia-component-type="PF4/Button"
@@ -91,7 +91,7 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="pf-svg"
+          class="pf-v5-svg"
           fill="currentColor"
           role="img"
           viewBox="0 0 256 512"
@@ -103,12 +103,12 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
       </button>
     </div>
     <div
-      class="pf-c-pagination__nav-control pf-m-last"
+      class="pf-v5-c-pagination__nav-control pf-m-last"
     >
       <button
         aria-disabled="false"
         aria-label="Go to last page"
-        class="pf-c-button pf-m-plain"
+        class="pf-v5-c-button pf-m-plain"
         data-action="last"
         data-ouia-component-id="OUIA-Generated-Button-plain-4"
         data-ouia-component-type="PF4/Button"
@@ -117,7 +117,7 @@ exports[`Navigation should match snapshot (auto-generated) 1`] = `
       >
         <svg
           aria-hidden="true"
-          class="pf-svg"
+          class="pf-v5-svg"
           fill="currentColor"
           role="img"
           viewBox="0 0 448 512"

package/src/components/Pagination/__tests__/Generated/__snapshots__/PaginationOptionsMenu.test.tsx.snap

@@ -6,12 +6,12 @@ exports[`PaginationOptionsMenu should match snapshot (auto-generated) 1`] = `
     <button
       aria-expanded="false"
       aria-haspopup="listbox"
-      class="pf-c-menu-toggle pf-m-plain pf-m-text"
+      class="pf-v5-c-menu-toggle pf-m-plain pf-m-text"
       id="''-toggle"
       type="button"
     >
       <span
-        class="pf-c-menu-toggle__text"
+        class="pf-v5-c-menu-toggle__text"
       >
         <b>
           0 - 0
@@ -23,14 +23,14 @@ exports[`PaginationOptionsMenu should match snapshot (auto-generated) 1`] = `
          'items'
       </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"